chore: 🔧 Configure Cypress pour les tests de composants

Author: laruiss

.eslintrc.js

@@ -31,5 +31,16 @@ module.exports = {
         jest: true,
       },
     },
+    {
+      files: [
+        '**/src/**/*.e2e.{j,t}s?(x)',
+      ],
+      env: {
+        'cypress/globals': true,
+      },
+      extends: [
+        'plugin:cypress/recommended',
+      ],
+    },
   ],
 }

cypress.json

@@ -1,9 +1,9 @@
 {
-  "testFiles": "cypress/specs/**.spec.js",
+  "testFiles": "cypress/tests/**/*.e2e.js",
   "pluginsFile": "cypress/plugins/index.js",
   "component": {
     "componentFolder": "src",
-    "testFiles": "**.e2e.js*",
+    "testFiles": "**/*.e2e.js*",
     "viewportHeight": 500,
     "viewportWidth": 700
   }

cypress/support/index.js

@@ -14,7 +14,8 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands.js'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+import 'cypress-plugin-tab'

package-lock.json

@@ -21,6 +21,7 @@
     "build:js": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "demo-app": "vite",
     "test": "jest",
+    "test:ct": "cypress open-ct",
     "format": "npm run lint -- --fix",
     "lint": "eslint ./src/**/*.{vue,js,jsx,ts,tsx}",
     "storybook": "start-storybook -p 6006 -s public",
@@ -40,6 +41,7 @@
     "@babel/plugin-syntax-jsx": "^7.16.0",
     "@babel/preset-env": "^7.16.4",
     "@cypress/vite-dev-server": "^2.2.1",
+    "@cypress/vue": "^3.0.5",
     "@rollup/plugin-alias": "^3.1.8",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -70,6 +72,7 @@
     "core-js": "^3.19.1",
     "cross-env": "^7.0.3",
     "cypress": "^9.0.0",
+    "cypress-plugin-tab": "^1.0.5",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.25.3",

package.json

@@ -0,0 +1,14 @@
+import { mount } from '@cypress/vue'
+import DsfrButton from './DsfrButton'
+
+describe('DsfrButton', () => {
+  it('Simple Button', () => {
+    mount(DsfrButton, {
+      slots: {
+        default: 'Test button',
+      },
+    })
+
+    cy.get('button').contains('Test button').click()
+  })
+})

src/components/DsfrButton/DsfrButton.e2e.js

@@ -23,6 +23,10 @@ export default defineConfig({
         find: '@',
         replacement: path.resolve(projectDir, 'src'),
       },
+      {
+        find: 'vue',
+        replacement: 'vue/dist/vue.esm-bundler.js',
+      },
     ],
   },
   build: {