From 9f87ab49418bd1b514da3852ac08803b696963e3 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 11 Sep 2019 18:53:05 +0200 Subject: [PATCH] #927 Adding support for cypress and Percy --- .travis.yml | 3 +- cypress.json | 1 + cypress/examples/actions.spec.js | 272 ++++ cypress/examples/aliasing.spec.js | 42 + cypress/examples/assertions.spec.js | 168 +++ cypress/examples/connectors.spec.js | 56 + cypress/examples/cookies.spec.js | 78 ++ cypress/examples/cypress_api.spec.js | 222 +++ cypress/examples/files.spec.js | 114 ++ cypress/examples/local_storage.spec.js | 52 + cypress/examples/location.spec.js | 32 + cypress/examples/misc.spec.js | 83 ++ cypress/examples/navigation.spec.js | 56 + cypress/examples/network_requests.spec.js | 194 +++ cypress/examples/querying.spec.js | 87 ++ cypress/examples/spies_stubs_clocks.spec.js | 95 ++ cypress/examples/traversal.spec.js | 121 ++ cypress/examples/utilities.spec.js | 133 ++ cypress/examples/viewport.spec.js | 59 + cypress/examples/waiting.spec.js | 34 + cypress/examples/window.spec.js | 22 + cypress/fixtures/example.json | 5 + cypress/helpers/util.js | 28 + cypress/integration/e2e/classDiagram.spec.js | 25 + cypress/integration/e2e/flowchart.spec.js | 324 +++++ cypress/integration/e2e/gantt.spec.js | 39 + cypress/integration/e2e/gitGraph.spec.js | 26 + cypress/integration/e2e/info.spec.js | 12 + .../integration/e2e/sequencediagram.spec.js | 118 ++ cypress/platform/bundle-test.js | 10 + cypress/platform/click.html | 83 ++ cypress/platform/e2e.html | 21 + cypress/platform/flow.html | 46 + cypress/platform/info.html | 26 + cypress/platform/subgraph.html | 45 + cypress/platform/vertices.html | 37 + cypress/platform/viewer.js | 66 + cypress/platform/webpackUsage.html | 23 + cypress/platform/xss.html | 44 + cypress/platform/xss.png | Bin 0 -> 6413 bytes cypress/plugins/index.js | 25 + ...-render-a-simple-class-diagrams-1-snap.png | Bin 0 -> 39939 bytes ...der-a-flowchart-full-of-circles-1-snap.png | Bin 0 -> 32363 bytes ...ender-a-flowchart-full-of-icons-1-snap.png | Bin 0 -> 39337 bytes ...ing-sames-and-class-definitoins-1-snap.png | Bin 0 -> 27474 bytes ...hould-render-a-simple-flowchart-1-snap.png | Bin 0 -> 21581 bytes ...mple-flowchart-with-line-breaks-1-snap.png | Bin 0 -> 25222 bytes ...nverse-trapezoid-vertex-options-1-snap.png | Bin 0 -> 27598 bytes ...ld-render-color-of-styled-nodes-1-snap.png | Bin 0 -> 5023 bytes ...abels-with-numbers-at-the-start-1-snap.png | Bin 0 -> 6421 bytes ...-should-render-styled-subgraphs-1-snap.png | Bin 0 -> 24786 bytes ...lowcart-should-render-subgraphs-1-snap.png | Bin 0 -> 5946 bytes ...h-a-title-startign-with-a-digit-1-snap.png | Bin 0 -> 6136 bytes ...h-a-title-startign-with-a-digit-2-snap.png | Bin 0 -> 6136 bytes ...-should-style-nodes-via-a-class-1-snap.png | Bin 0 -> 7497 bytes ...ram-should-render-a-gantt-chart-1-snap.png | Bin 0 -> 48455 bytes ...d-render-a-simple-info-diagrams-1-snap.png | Bin 0 -> 5950 bytes ...ender-a-single-and-nested-rects-2-snap.png | Bin 0 -> 18462 bytes ...nder-a-simple-sequence-diagrams-1-snap.png | Bin 0 -> 47514 bytes ...nder-a-simple-sequence-diagrams-1-snap.png | Bin 0 -> 16153 bytes ...s-xss-should-handle-xss-in-tags-1-snap.png | Bin 0 -> 16068 bytes cypress/spec/classDiagram.spec.js | 27 + cypress/spec/flowchart.spec.js | 326 +++++ cypress/spec/gantt.spec.js | 42 + cypress/spec/gitGraph.spec.js | 29 + cypress/spec/info.spec.js | 15 + cypress/spec/sequencediagram.spec.js | 121 ++ cypress/spec/webpackUsage.spec.js | 16 + cypress/spec/xss.spec.js | 15 + cypress/support/commands.js | 27 + cypress/support/index.js | 20 + e2e/platform/flow.html | 46 + ...der-a-flowchart-full-of-circles-2-snap.png | Bin 30158 -> 0 bytes ...d-render-a-simple-flowchart-old-1-snap.png | Bin 21645 -> 0 bytes ...mple-flowchart-with-long-labels-1-snap.png | Bin 25110 -> 0 bytes ...chart-spec-js-google-should-apa-1-snap.png | Bin 21645 -> 0 bytes ...hould-render-a-simple-git-graph-1-snap.png | Bin 3249 -> 0 bytes ...ender-a-single-and-nested-rects-1-snap.png | Bin 18460 -> 0 bytes ...der-rect-around-and-inside-alts-1-snap.png | Bin 12476 -> 0 bytes ...er-rect-around-and-inside-loops-1-snap.png | Bin 18175 -> 0 bytes ...der-rect-around-and-inside-opts-1-snap.png | Bin 18985 -> 0 bytes ...nder-a-simple-sequence-diagrams-1-snap.png | Bin 31623 -> 0 bytes package.json | 12 +- yarn.lock | 1234 ++++++++++++++++- 84 files changed, 4795 insertions(+), 62 deletions(-) create mode 100644 cypress.json create mode 100644 cypress/examples/actions.spec.js create mode 100644 cypress/examples/aliasing.spec.js create mode 100644 cypress/examples/assertions.spec.js create mode 100644 cypress/examples/connectors.spec.js create mode 100644 cypress/examples/cookies.spec.js create mode 100644 cypress/examples/cypress_api.spec.js create mode 100644 cypress/examples/files.spec.js create mode 100644 cypress/examples/local_storage.spec.js create mode 100644 cypress/examples/location.spec.js create mode 100644 cypress/examples/misc.spec.js create mode 100644 cypress/examples/navigation.spec.js create mode 100644 cypress/examples/network_requests.spec.js create mode 100644 cypress/examples/querying.spec.js create mode 100644 cypress/examples/spies_stubs_clocks.spec.js create mode 100644 cypress/examples/traversal.spec.js create mode 100644 cypress/examples/utilities.spec.js create mode 100644 cypress/examples/viewport.spec.js create mode 100644 cypress/examples/waiting.spec.js create mode 100644 cypress/examples/window.spec.js create mode 100644 cypress/fixtures/example.json create mode 100644 cypress/helpers/util.js create mode 100644 cypress/integration/e2e/classDiagram.spec.js create mode 100644 cypress/integration/e2e/flowchart.spec.js create mode 100644 cypress/integration/e2e/gantt.spec.js create mode 100644 cypress/integration/e2e/gitGraph.spec.js create mode 100644 cypress/integration/e2e/info.spec.js create mode 100644 cypress/integration/e2e/sequencediagram.spec.js create mode 100644 cypress/platform/bundle-test.js create mode 100644 cypress/platform/click.html create mode 100644 cypress/platform/e2e.html create mode 100644 cypress/platform/flow.html create mode 100644 cypress/platform/info.html create mode 100644 cypress/platform/subgraph.html create mode 100644 cypress/platform/vertices.html create mode 100644 cypress/platform/viewer.js create mode 100644 cypress/platform/webpackUsage.html create mode 100644 cypress/platform/xss.html create mode 100644 cypress/platform/xss.png create mode 100644 cypress/plugins/index.js create mode 100644 cypress/spec/__image_snapshots__/class-diagram-spec-js-sequencediagram-should-render-a-simple-class-diagrams-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-flowchart-full-of-circles-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-flowchart-full-of-icons-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-flowchart-with-ling-sames-and-class-definitoins-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-simple-flowchart-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-simple-flowchart-with-line-breaks-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-simple-flowchart-with-trapezoid-and-inverse-trapezoid-vertex-options-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-color-of-styled-nodes-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-labels-with-numbers-at-the-start-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-styled-subgraphs-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-subgraphs-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-subgraphs-with-a-title-startign-with-a-digit-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-subgraphs-with-a-title-startign-with-a-digit-2-snap.png create mode 100644 cypress/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-style-nodes-via-a-class-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/gantt-spec-js-sequencediagram-should-render-a-gantt-chart-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/info-spec-js-sequencediagram-should-render-a-simple-info-diagrams-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-a-single-and-nested-rects-2-snap.png create mode 100644 cypress/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-should-render-a-simple-sequence-diagrams-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/webpack-usage-spec-js-sequencediagram-should-render-a-simple-sequence-diagrams-1-snap.png create mode 100644 cypress/spec/__image_snapshots__/xss-spec-js-xss-should-handle-xss-in-tags-1-snap.png create mode 100644 cypress/spec/classDiagram.spec.js create mode 100644 cypress/spec/flowchart.spec.js create mode 100644 cypress/spec/gantt.spec.js create mode 100644 cypress/spec/gitGraph.spec.js create mode 100644 cypress/spec/info.spec.js create mode 100644 cypress/spec/sequencediagram.spec.js create mode 100644 cypress/spec/webpackUsage.spec.js create mode 100644 cypress/spec/xss.spec.js create mode 100644 cypress/support/commands.js create mode 100644 cypress/support/index.js create mode 100644 e2e/platform/flow.html delete mode 100644 e2e/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-flowchart-full-of-circles-2-snap.png delete mode 100644 e2e/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-simple-flowchart-old-1-snap.png delete mode 100644 e2e/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-a-simple-flowchart-with-long-labels-1-snap.png delete mode 100644 e2e/spec/__image_snapshots__/flowchart-spec-js-google-should-apa-1-snap.png delete mode 100644 e2e/spec/__image_snapshots__/git-graph-spec-js-sequencediagram-should-render-a-simple-git-graph-1-snap.png delete mode 100644 e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-a-single-and-nested-rects-1-snap.png delete mode 100644 e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-alts-1-snap.png delete mode 100644 e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-loops-1-snap.png delete mode 100644 e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-opts-1-snap.png delete mode 100644 e2e/spec/__image_snapshots__/xss-spec-js-sequencediagram-should-render-a-simple-sequence-diagrams-1-snap.png diff --git a/.travis.yml b/.travis.yml index d28528ef6..dd1f0560e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,8 +1,9 @@ dist: trusty language: node_js node_js: - - "8" + - "10" script: - yarn test --coverage + - yarn e2e after_success: - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls diff --git a/cypress.json b/cypress.json new file mode 100644 index 000000000..a56d1ac68 --- /dev/null +++ b/cypress.json @@ -0,0 +1 @@ +{ "video": false } diff --git a/cypress/examples/actions.spec.js b/cypress/examples/actions.spec.js new file mode 100644 index 000000000..20e12cc6d --- /dev/null +++ b/cypress/examples/actions.spec.js @@ -0,0 +1,272 @@ +/// + +context('Actions', () => { + beforeEach(() => { + cy.visit('https://example.cypress.io/commands/actions') + }) + + // https://on.cypress.io/interacting-with-elements + + it('.type() - type into a DOM element', () => { + // https://on.cypress.io/type + cy.get('.action-email') + .type('fake@email.com').should('have.value', 'fake@email.com') + + // .type() with special character sequences + .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') + .type('{del}{selectall}{backspace}') + + // .type() with key modifiers + .type('{alt}{option}') //these are equivalent + .type('{ctrl}{control}') //these are equivalent + .type('{meta}{command}{cmd}') //these are equivalent + .type('{shift}') + + // Delay each keypress by 0.1 sec + .type('slow.typing@email.com', { delay: 100 }) + .should('have.value', 'slow.typing@email.com') + + cy.get('.action-disabled') + // Ignore error checking prior to type + // like whether the input is visible or disabled + .type('disabled error checking', { force: true }) + .should('have.value', 'disabled error checking') + }) + + it('.focus() - focus on a DOM element', () => { + // https://on.cypress.io/focus + cy.get('.action-focus').focus() + .should('have.class', 'focus') + .prev().should('have.attr', 'style', 'color: orange;') + }) + + it('.blur() - blur off a DOM element', () => { + // https://on.cypress.io/blur + cy.get('.action-blur').type('About to blur').blur() + .should('have.class', 'error') + .prev().should('have.attr', 'style', 'color: red;') + }) + + it('.clear() - clears an input or textarea element', () => { + // https://on.cypress.io/clear + cy.get('.action-clear').type('Clear this text') + .should('have.value', 'Clear this text') + .clear() + .should('have.value', '') + }) + + it('.submit() - submit a form', () => { + // https://on.cypress.io/submit + cy.get('.action-form') + .find('[type="text"]').type('HALFOFF') + cy.get('.action-form').submit() + .next().should('contain', 'Your form has been submitted!') + }) + + it('.click() - click on a DOM element', () => { + // https://on.cypress.io/click + cy.get('.action-btn').click() + + // You can click on 9 specific positions of an element: + // ----------------------------------- + // | topLeft top topRight | + // | | + // | | + // | | + // | left center right | + // | | + // | | + // | | + // | bottomLeft bottom bottomRight | + // ----------------------------------- + + // clicking in the center of the element is the default + cy.get('#action-canvas').click() + + cy.get('#action-canvas').click('topLeft') + cy.get('#action-canvas').click('top') + cy.get('#action-canvas').click('topRight') + cy.get('#action-canvas').click('left') + cy.get('#action-canvas').click('right') + cy.get('#action-canvas').click('bottomLeft') + cy.get('#action-canvas').click('bottom') + cy.get('#action-canvas').click('bottomRight') + + // .click() accepts an x and y coordinate + // that controls where the click occurs :) + + cy.get('#action-canvas') + .click(80, 75) // click 80px on x coord and 75px on y coord + .click(170, 75) + .click(80, 165) + .click(100, 185) + .click(125, 190) + .click(150, 185) + .click(170, 165) + + // click multiple elements by passing multiple: true + cy.get('.action-labels>.label').click({ multiple: true }) + + // Ignore error checking prior to clicking + cy.get('.action-opacity>.btn').click({ force: true }) + }) + + it('.dblclick() - double click on a DOM element', () => { + // https://on.cypress.io/dblclick + + // Our app has a listener on 'dblclick' event in our 'scripts.js' + // that hides the div and shows an input on double click + cy.get('.action-div').dblclick().should('not.be.visible') + cy.get('.action-input-hidden').should('be.visible') + }) + + it('.check() - check a checkbox or radio element', () => { + // https://on.cypress.io/check + + // By default, .check() will check all + // matching checkbox or radio elements in succession, one after another + cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]') + .check().should('be.checked') + + cy.get('.action-radios [type="radio"]').not('[disabled]') + .check().should('be.checked') + + // .check() accepts a value argument + cy.get('.action-radios [type="radio"]') + .check('radio1').should('be.checked') + + // .check() accepts an array of values + cy.get('.action-multiple-checkboxes [type="checkbox"]') + .check(['checkbox1', 'checkbox2']).should('be.checked') + + // Ignore error checking prior to checking + cy.get('.action-checkboxes [disabled]') + .check({ force: true }).should('be.checked') + + cy.get('.action-radios [type="radio"]') + .check('radio3', { force: true }).should('be.checked') + }) + + it('.uncheck() - uncheck a checkbox element', () => { + // https://on.cypress.io/uncheck + + // By default, .uncheck() will uncheck all matching + // checkbox elements in succession, one after another + cy.get('.action-check [type="checkbox"]') + .not('[disabled]') + .uncheck().should('not.be.checked') + + // .uncheck() accepts a value argument + cy.get('.action-check [type="checkbox"]') + .check('checkbox1') + .uncheck('checkbox1').should('not.be.checked') + + // .uncheck() accepts an array of values + cy.get('.action-check [type="checkbox"]') + .check(['checkbox1', 'checkbox3']) + .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') + + // Ignore error checking prior to unchecking + cy.get('.action-check [disabled]') + .uncheck({ force: true }).should('not.be.checked') + }) + + it('.select() - select an option in a