test: init cypress

.eslintrc

@@ -3,11 +3,13 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended", 
-    "plugin:vue/recommended"
+    "plugin:vue/recommended",
+    "plugin:cypress/recommended"
   ],
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "mocha": true
   },
   "parser": "@typescript-eslint/parser",
   "plugins": [

cypress.json

@@ -0,0 +1,4 @@
+{
+  "testFiles": "**/*cy.*",
+  "componentFolder": "src"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/plugins/index.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { startDevServer } = require('@cypress/vite-dev-server');
+const vue = require('@vitejs/plugin-vue');
+
+module.exports = (on, config) => {
+  const viteConfig = {
+    plugins: [vue()],
+  };
+
+  viteConfig.esbuild = viteConfig.esbuild || {};
+  viteConfig.esbuild.jsxFactory = 'h';
+  viteConfig.esbuild.jsxFragment = 'Fragment';
+  viteConfig.logLevel = 'error';
+  viteConfig.resolve = {
+    alias: {
+      vue: 'vue/dist/vue.esm-bundler.js',
+    },
+  };
+
+  on('dev-server:start', (options) => {
+    return startDevServer({ options, viteConfig });
+  });
+  return config;
+};

cypress/support/commands.js

@@ -0,0 +1,41 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+Cypress.Commands.add('drag', { prevSubject: 'element' }, (subject, options) => {
+  if (options.x && options.y) {
+    cy.get(subject).trigger('mousedown', { which: 1 });
+    cy.document()
+      .trigger('mousemove', {
+        pageX: options.x,
+        pageY: options.y,
+      })
+      .trigger('mouseup', { force: true });
+  }
+});
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+Cypress.Commands.overwrite('get', (originalFn, selector, options) => {
+  if (typeof selector === 'string') {
+    return originalFn(selector.replace(/cy:(\w+)/g, '[data-cy="$1"]'), options);
+  } else {
+    return originalFn(selector, options);
+  }
+});

cypress/support/index.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+beforeEach(() => {
+  cy.viewport(600, 600, { log: false });
+});

example/Example.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { range, random } from 'lodash-es';
+import { range, random } from './util';
 
 import SortableItem from './components/SortableItem.vue';
 import SortableList from './components/SortableList.vue';

example/components/GroupExample.vue

@@ -11,8 +11,7 @@
 </template>
 
 <script>
-import { range } from 'lodash-es';
-import { random } from 'lodash-es';
+import { range, random } from '../util';
 
 import SortableItem from './SortableItem.vue';
 import SortableList from './SortableList.vue';

example/util/index.js

@@ -0,0 +1,9 @@
+export function random(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+export function range(length) {
+  return Array(length)
+    .fill()
+    .map((_, i) => i);
+}

package.json

@@ -49,6 +49,7 @@
     "rollup": "cross-env BABEL_ENV=rollup rollup -c",
     "clean": "rimraf dist/",
     "test": "eslint src/** --ext .ts",
+    "cy": "cypress open-ct",
     "deploy:alpha": "npm test && npm version prerelease --preid=alpha && npm run deploy:final",
     "deploy:patch": "npm test && npm version patch && npm run deploy:final",
     "deploy:final": "git push; git push --tags; npm publish; npm run docs:build",
@@ -60,38 +61,41 @@
     "vue": ">=3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@babel/core": "^7.13.14",
     "@babel/plugin-external-helpers": "^7.12.13",
+    "@babel/plugin-transform-regenerator": "^7.13.15",
+    "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.12.16",
+    "@cypress/vite-dev-server": "^1.2.5",
+    "@cypress/vue": "^3.0.1",
     "@rollup/plugin-typescript": "^8.2.0",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
-    "@vitejs/plugin-vue": "^1.1.4",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.11",
+    "@vue/test-utils": "^2.0.0-rc.6",
     "@vueuse/core": "^4.1.1",
     "autoprefixer": "^6.3.6",
     "cross-env": "^1.0.7",
     "cssnano": "^3.10.0",
+    "cypress": "^7.2.0",
     "esbuild": "^0.8.44",
     "eslint": "^7.20.0",
     "eslint-plugin-import": "^2.0.1",
     "eslint-plugin-vue": "^7.6.0",
-    "lodash-es": "^4.17.20",
     "postcss": "^8.2.6",
-    "postcss-loader": "^5.0.0",
     "rimraf": "^2.5.2",
     "rollup": "^2.38.5",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-esbuild": "^2.6.1",
     "sass": "^1.32.6",
     "standard-changelog": "^2.0.27",
-    "typescript": "^4.1.5",
-    "vite": "^2.0.3",
-    "vitepress": "^0.12.0",
-    "vue": "^3.0.5",
-    "vuepress": "^2.0.0-alpha.23",
-    "webpack": "^5.21.2"
+    "typescript": "^4.2.3",
+    "vite": "^2.2.3",
+    "vitepress": "^0.13.2",
+    "vue": "^3.0.11",
+    "vuepress": "^2.0.0-alpha.23"
   },
   "browserslist": [
     "> 1%",

src/Sample.cy.js

@@ -0,0 +1,30 @@
+import { mount } from '@cypress/vue';
+import { SlickList, SlickItem } from './';
+
+const wrapper = {
+  name: 'Wrapper',
+  components: {
+    SlickList,
+    SlickItem,
+  },
+  data() {
+    return {
+      list: ['1', '2', '3'],
+    };
+  },
+  template: `
+    <SlickList v-model:list="list" data-cy="list">
+      <SlickItem v-for="(item, i) in list" :key="item" :index="i" data-cy="item">
+        Item {{ item }}
+      </SlickItem>
+    </SlickList>
+  `,
+};
+
+describe('it', () => {
+  it('works', () => {
+    mount(wrapper);
+    cy.get('cy:list cy:item').first().should('contain', 'Item').drag({ x: 80, y: 50 });
+    cy.get('cy:list').should('contain', 'Item 2 Item 3 Item 1');
+  });
+});