feat: add formFiller cypress test

mvanassche · Jul 21, 2020 · e278b5b · e278b5b
1 parent 84ec323
commit e278b5b
Show file tree

Hide file tree

Showing 12 changed files with 683 additions and 5 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,13 +3,14 @@ module.exports = {
         node: true,
         browser: true,
         es2020: true,
+        'cypress/globals': true,
     },
     parser: 'babel-eslint',
     parserOptions: {
         ecmaVersion: 2020,
         sourceType: 'module',
     },
-    plugins: ['prettier', 'babel'],
+    plugins: ['prettier', 'babel', 'cypress'],
     extends: [
         'eslint:recommended',
         'prettier',
@@ -18,9 +19,18 @@ module.exports = {
         'plugin:import/warnings',
         'plugin:jest/recommended',
         'plugin:jest/style',
+        'plugin:cypress/recommended',
     ],
     rules: {
         'prettier/prettier': 'error',
         'babel/no-unused-expressions': 'error',
     },
+    overrides: [
+        {
+            files: ['cypress/integration/*.spec.js'],
+            rules: {
+                'jest/expect-expect': 'off',
+            },
+        },
+    ],
 };
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 dist
 node_modules
 npm-debug.log
+cypress/screenshots
diff --git a/.travis.yml b/.travis.yml
@@ -8,6 +8,7 @@ install:
 
 script:
     - npm run test
+    - npm run cypress:run
 
 branches:
     only:

diff --git a/Makefile b/Makefile
@@ -41,3 +41,9 @@ publish-next: ## Publish on next tag
 
 deploy-gh-pages: ## Deploy bookmaklet to gh-pages
 	npm run deploy-gh-pages
+
+serve-cypress-demo: ## Serve cypress demo directory
+	npm run cypress:serve-demo
+
+test-cypress: ## Run cypress tests
+	npm run cypress:run
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,4 @@
+{
+    "defaultCommandTimeout": 10000,
+    "video": false
+}
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "[email protected]",
+    "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/cypress/integration/formFiller.spec.js b/cypress/integration/formFiller.spec.js
@@ -0,0 +1,35 @@
+import Chance from 'chance';
+import { createHorde, species, strategies } from '../../src/index';
+
+const seed = 'formFiller';
+
+describe('Form filler', () => {
+    let horde;
+    beforeEach(() => {
+        return cy.visit('formFiller.html').then(() =>
+            cy.window().then((pageWindow) => {
+                horde = createHorde({
+                    species: [species.formFiller()],
+                    strategies: [strategies.bySpecies({ nb: 10 })],
+                    window: pageWindow,
+                    randomizer: new Chance(seed),
+                });
+            })
+        );
+    });
+    it('should fill text input with seeded value', () => {
+        return cy.wrap(horde.unleash()).then(() => {
+            cy.get('input[type="text"]').should('have.value', '7uv');
+        });
+    });
+    it('should fill number input with seeded value', () => {
+        return cy.wrap(horde.unleash()).then(() => {
+            cy.get('input[type="number"]').should('have.value', '693');
+        });
+    });
+    it('should fill email input with seeded value', () => {
+        return cy.wrap(horde.unleash()).then(() => {
+            cy.get('input[type="email"]').should('have.value', '[email protected]');
+        });
+    });
+});
diff --git a/cypress/pages/formFiller.html b/cypress/pages/formFiller.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+
+<html>
+    <body>
+        <input type="text" />
+        <input type="number" />
+        <input type="email" />
+    </body>
+</html>
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -0,0 +1,2 @@
+// Overwrite cy.visit to visit local html files
+Cypress.Commands.overwrite('visit', (visit, path, options = {}) => visit(`./cypress/pages/${path}`, options));
diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -0,0 +1 @@
+import './commands';
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,7 @@ install: @@
     script:
         - npm run test
+        - npm run cypress:run
     branches:
         only:
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Overwrite cy.visit to visit local html files
		Cypress.Commands.overwrite('visit', (visit, path, options = {}) => visit(`./cypress/pages/${path}`, options));