diff --git a/.gitignore b/.gitignore index c6c19cd..a80dc90 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ lib index.html coverage example-dist +__diff_output__ diff --git a/cypress.json b/cypress.json new file mode 100644 index 0000000..269b0bb --- /dev/null +++ b/cypress.json @@ -0,0 +1,5 @@ +{ + "video": false, + "watchForFileChanges": false, + "baseUrl": "http://localhost:8080" +} diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1 @@ +{} diff --git a/cypress/integration/archer/main.spec.js b/cypress/integration/archer/main.spec.js new file mode 100644 index 0000000..665e83d --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js new file mode 100644 index 0000000..e2db51f --- /dev/null +++ b/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); +}; diff --git a/cypress/snapshots/All Specs/React Archer -- First example page -- should draw arrows.snap.png b/cypress/snapshots/All Specs/React Archer -- First example page -- should draw arrows.snap.png new file mode 100644 index 0000000..911d429 Binary files /dev/null and b/cypress/snapshots/All Specs/React Archer -- First example page -- should draw arrows.snap.png differ diff --git a/cypress/snapshots/All Specs/React Archer -- Second example page -- should draw arrows.snap.png b/cypress/snapshots/All Specs/React Archer -- Second example page -- should draw arrows.snap.png new file mode 100644 index 0000000..9c9f58d Binary files /dev/null and b/cypress/snapshots/All Specs/React Archer -- Second example page -- should draw arrows.snap.png differ diff --git a/cypress/snapshots/All Specs/React Archer -- Second example page -- should update labels.snap.png b/cypress/snapshots/All Specs/React Archer -- Second example page -- should update labels.snap.png new file mode 100644 index 0000000..b29094c Binary files /dev/null and b/cypress/snapshots/All Specs/React Archer -- Second example page -- should update labels.snap.png differ diff --git a/cypress/snapshots/All Specs/React Archer -- Second example page -- should update number of elements.snap.png b/cypress/snapshots/All Specs/React Archer -- Second example page -- should update number of elements.snap.png new file mode 100644 index 0000000..11e305b Binary files /dev/null and b/cypress/snapshots/All Specs/React Archer -- Second example page -- should update number of elements.snap.png differ diff --git a/cypress/support/commands.js b/cypress/support/commands.js new file mode 100644 index 0000000..dfef371 --- /dev/null +++ b/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(); diff --git a/cypress/support/index.js b/cypress/support/index.js new file mode 100644 index 0000000..d68db96 --- /dev/null +++ b/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') diff --git a/example/SecondExample.js b/example/SecondExample.js index fe6e504..a55a87f 100644 --- a/example/SecondExample.js +++ b/example/SecondExample.js @@ -19,6 +19,7 @@ class SecondExample extends React.Component {
Change labels
{ this.setState({ labels: event.currentTarget.value }); @@ -28,6 +29,7 @@ class SecondExample extends React.Component {
Add elements