feat(unit-e2e): added tests but not working for now

Author: alvarosabu

.nyc_output/out.json

@@ -0,0 +1 @@
+{}

cypress.json

@@ -1,4 +1,10 @@
 {
   "baseUrl": "http://localhost:6044",
-  "pluginsFile": "tests/e2e/plugins/index.js"
+  "pluginsFile": "tests/e2e/plugins/index.js",
+  "supportFile": "tests/e2e/support/index.js",
+  "fixturesFolder": "tests/e2e/fixtures",
+  "integrationFolder": "tests/e2e/integration",
+  "testFiles": "**/*.e2e.js*",
+  "experimentalComponentTesting": true,
+  "componentFolder": "tests/e2e/components"
 }

package-lock.json

@@ -11,6 +11,7 @@
     "build:dts": "api-extractor run --local --verbose && tail -n +7 >> dist/as-dynamic-forms.d.ts",
     "semantic-release": "semantic-release",
     "test": "vue-cli-service test:unit",
+    "test:components": "vue-cli-service test:components",
     "test:watch": "vue-cli-service test:unit --verbose --no-cache --watchAll"
   },
   "main": "dist/as-dynamic-forms.cjs.js",
@@ -23,6 +24,7 @@
     "deep-object-diff": "^1.1.0"
   },
   "devDependencies": {
+    "@cypress/vue": "*",
     "@microsoft/api-extractor": "^7.12.0",
     "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-buble": "^0.21.3",
@@ -45,6 +47,7 @@
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
     "chalk": "^4.1.0",
+    "cypress": "*",
     "eslint": "7.14.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.1.0",
@@ -64,6 +67,7 @@
     "ts-node": "^9.0.0",
     "typescript": "~4.1.2",
     "vue": "^3.0.0",
+    "vue-cli-plugin-cypress-experimental": "~1.2.0",
     "vue-jest": "^5.0.0-alpha.6",
     "vue-select": "3.10.8"
   },

package.json

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: ['cypress'],
+  env: {
+    mocha: true,
+    'cypress/globals': true,
+  },
+  rules: {
+    strict: 'off',
+  },
+};

tests/.eslintrc.js

@@ -3,8 +3,8 @@ describe('Text Input test Suite', () => {
     cy.visit('/'); // "baseUrl" is defined in cypress.json file
   });
 
-  context('Change Value', () => {
-    it.only('should allow me to change value', () => {
+  context('Changes Value', () => {
+    it.only('should update FormValues when input changes', () => {
       cy.get('input[type="email"').type('[email protected]').blur();
       cy.get('[data-cy=form-values]').should('contain', '[email protected]');
     });

tests/e2e/specs/text-input.js renamed to tests/e2e/integration/text-input.e2e.js

@@ -7,19 +7,19 @@
 // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
 
 // /* eslint-disable import/no-extraneous-dependencies, global-require */
-// const webpack = require('@cypress/webpack-preprocessor')
+const webpack = require('@cypress/webpack-preprocessor');
 
 module.exports = (on, config) => {
-  // on('file:preprocessor', webpack({
-  //  webpackOptions: require('@vue/cli-service/webpack.config'),
-  //  watchOptions: {}
-  // }))
+  on(
+    'file:preprocessor',
+    webpack({
+      webpackOptions: require('@vue/cli-service/webpack.config'),
+      watchOptions: {},
+    }),
+  );
 
   return Object.assign({}, config, {
-    fixturesFolder: 'tests/e2e/fixtures',
-    integrationFolder: 'tests/e2e/specs',
-    screenshotsFolder: 'tests/e2e/screenshots',
-    videosFolder: 'tests/e2e/videos',
-    supportFile: 'tests/e2e/support/index.js',
+    experimentalComponentTesting: true,
+    componentFolder: 'tests/e2e/components',
   });
 };