Add visual tests (#60)

Add visual tests

.gitignore

@@ -5,3 +5,4 @@ lib
 index.html
 coverage
 example-dist
+__diff_output__

cypress.json

@@ -0,0 +1,5 @@
+{
+  "video": false,
+  "watchForFileChanges": false,
+  "baseUrl": "http://localhost:8080"
+}

cypress/fixtures/example.json

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

cypress/integration/archer/main.spec.js

@@ -0,0 +1,37 @@
+context('React Archer', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.contains('Root');
+  });
+
+  describe('First example page', () => {
+    beforeEach(() => {
+      cy.contains('Example 1').click();
+    });
+
+    it('should draw arrows', () => {
+      cy.matchImageSnapshot();
+    });
+  });
+
+  describe('Second example page', () => {
+    beforeEach(() => {
+      cy.contains('Example 2').click();
+      cy.contains('Change labels').click();
+    });
+
+    it('should draw arrows', () => {
+      cy.matchImageSnapshot();
+    });
+
+    it('should update labels', () => {
+      cy.get('[data-cy="change-labels-input"]').type('blabla some test');
+      cy.matchImageSnapshot();
+    });
+
+    it('should update number of elements', () => {
+      cy.get('[data-cy="add-element"]').click();
+      cy.matchImageSnapshot();
+    });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const {
+  addMatchImageSnapshotPlugin,
+} = require('cypress-image-snapshot/plugin');
+
+module.exports = (on, config) => {
+  addMatchImageSnapshotPlugin(on, config);
+};

cypress/support/commands.js

@@ -0,0 +1,29 @@
+// ***********************************************
+// 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) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+addMatchImageSnapshotCommand();

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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')

example/SecondExample.js

@@ -19,6 +19,7 @@ class SecondExample extends React.Component {
         <div>
           <div>Change labels</div>
           <input
+            data-cy="change-labels-input"
             type="text"
             onChange={event => {
               this.setState({ labels: event.currentTarget.value });
@@ -28,6 +29,7 @@ class SecondExample extends React.Component {
         <div>
           <div>Add elements</div>
           <button
+            data-cy="add-element"
             onClick={() =>
               this.setState({ nbElements: this.state.nbElements + 1 })
             }

package.json

@@ -25,6 +25,8 @@
     "pretest": "yarn lint && yarn flow",
     "prepare": "npm run build",
     "lint": "eslint --ext .js,.jsx src/",
+    "test:e2e": "cypress open",
+    "test:e2e:update-snapshots": "rm -rf ./cypress/snapshots",
     "test:watch": "jest ./src/ --watch",
     "test": "jest --coverage ./src/"
   },
@@ -45,6 +47,8 @@
     "babel-loader": "8.0.4",
     "cross-env": "5.1.3",
     "css-loader": "3.2.0",
+    "cypress": "3.4.1",
+    "cypress-image-snapshot": "3.1.1",
     "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "1.6.0",
     "eslint": "6.2.1",