From 07ada27a157db29952567bf1fe9e33a50a9afa84 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 3 Oct 2022 14:55:14 -0500 Subject: [PATCH] test(react-router): update test app to cypress 10 (#26036) --- .../react-router/test-app/cypress.config.ts | 21 + packages/react-router/test-app/cypress.json | 8 - .../test-app/cypress/examples/actions.spec.js | 291 ------------- .../cypress/examples/aliasing.spec.js | 36 -- .../cypress/examples/assertions.spec.js | 168 -------- .../cypress/examples/connectors.spec.js | 96 ----- .../test-app/cypress/examples/cookies.spec.js | 79 ---- .../cypress/examples/cypress_api.spec.js | 225 ---------- .../test-app/cypress/examples/files.spec.js | 114 ------ .../cypress/examples/local_storage.spec.js | 58 --- .../cypress/examples/location.spec.js | 32 -- .../test-app/cypress/examples/misc.spec.js | 86 ---- .../cypress/examples/navigation.spec.js | 56 --- .../cypress/examples/network_requests.spec.js | 194 --------- .../cypress/examples/querying.spec.js | 102 ----- .../examples/spies_stubs_clocks.spec.js | 92 ----- .../cypress/examples/traversal.spec.js | 97 ----- .../cypress/examples/utilities.spec.js | 131 ------ .../cypress/examples/viewport.spec.js | 59 --- .../test-app/cypress/examples/waiting.spec.js | 33 -- .../test-app/cypress/examples/window.spec.js | 22 - .../react-router/test-app/package-lock.json | 385 +++++++----------- packages/react-router/test-app/package.json | 3 +- .../e2e}/fixtures/example.json | 0 .../{cypress => tests/e2e}/plugins/index.js | 0 .../specs/dynamic-ionpage-classnames.cy.js} | 0 .../e2e/specs/dynamic-routes.cy.js} | 0 .../e2e/specs/dynamic-tabs.cy.js} | 0 .../e2e/specs/multiple-tabs.cy.js} | 0 .../e2e/specs/nested-outlets.cy.js} | 0 .../e2e/specs/outlet-ref.cy.js} | 0 .../e2e/specs/refs.cy.js} | 0 .../e2e/specs/replace-actions.cy.js} | 0 .../e2e/specs/routing.cy.js} | 0 .../e2e/specs/swipe-to-go-back.cy.js} | 17 +- .../e2e/specs/tab-context.cy.js} | 0 .../tabs.js => tests/e2e/specs/tabs.cy.js} | 0 .../e2e}/support/commands.js | 0 .../{cypress => tests/e2e}/support/index.js | 0 39 files changed, 168 insertions(+), 2237 deletions(-) create mode 100644 packages/react-router/test-app/cypress.config.ts delete mode 100644 packages/react-router/test-app/cypress.json delete mode 100644 packages/react-router/test-app/cypress/examples/actions.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/aliasing.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/assertions.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/connectors.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/cookies.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/cypress_api.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/files.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/local_storage.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/location.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/misc.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/navigation.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/network_requests.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/querying.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/spies_stubs_clocks.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/traversal.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/utilities.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/viewport.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/waiting.spec.js delete mode 100644 packages/react-router/test-app/cypress/examples/window.spec.js rename packages/react-router/test-app/{cypress => tests/e2e}/fixtures/example.json (100%) rename packages/react-router/test-app/{cypress => tests/e2e}/plugins/index.js (100%) rename packages/react-router/test-app/{cypress/integration/dynamic-ionpage-classnames.js => tests/e2e/specs/dynamic-ionpage-classnames.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/dynamic-routes.spec.js => tests/e2e/specs/dynamic-routes.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/dynamic-tabs.spec.js => tests/e2e/specs/dynamic-tabs.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/multiple-tabs.spec.js => tests/e2e/specs/multiple-tabs.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/nested-outlets.spec.js => tests/e2e/specs/nested-outlets.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/outlet-ref.spec.js => tests/e2e/specs/outlet-ref.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/refs.spec.js => tests/e2e/specs/refs.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/replace-actions.spec.js => tests/e2e/specs/replace-actions.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/routing.spec.js => tests/e2e/specs/routing.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/swipe-to-go-back.js => tests/e2e/specs/swipe-to-go-back.cy.js} (86%) rename packages/react-router/test-app/{cypress/integration/tab-context.js => tests/e2e/specs/tab-context.cy.js} (100%) rename packages/react-router/test-app/{cypress/integration/tabs.js => tests/e2e/specs/tabs.cy.js} (100%) rename packages/react-router/test-app/{cypress => tests/e2e}/support/commands.js (100%) rename packages/react-router/test-app/{cypress => tests/e2e}/support/index.js (100%) diff --git a/packages/react-router/test-app/cypress.config.ts b/packages/react-router/test-app/cypress.config.ts new file mode 100644 index 0000000000..b2ec230fb0 --- /dev/null +++ b/packages/react-router/test-app/cypress.config.ts @@ -0,0 +1,21 @@ +import { defineConfig } from 'cypress'; + +export default defineConfig({ + video: false, + pageLoadTimeout: 6000000000, + screenshotOnRunFailure: false, + defaultCommandTimeout: 10000, + fixturesFolder: 'tests/e2e/fixtures', + screenshotsFolder: 'tests/e2e/screenshots', + videosFolder: 'tests/e2e/videos', + e2e: { + // We've imported your old cypress plugins here. + // You may want to clean this up later by importing these. + setupNodeEvents(on, config) { + return require('./tests/e2e/plugins/index.js')(on, config) + }, + baseUrl: "http://localhost:3000", + specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}', + supportFile: 'tests/e2e/support/index.js', + }, +}) diff --git a/packages/react-router/test-app/cypress.json b/packages/react-router/test-app/cypress.json deleted file mode 100644 index 257aee8742..0000000000 --- a/packages/react-router/test-app/cypress.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "pageLoadTimeout": 6000000000, - "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1", - "viewportWidth": 375, - "viewportHeight": 812, - "video": false, - "screenshotOnRunFailure": false -} diff --git a/packages/react-router/test-app/cypress/examples/actions.spec.js b/packages/react-router/test-app/cypress/examples/actions.spec.js deleted file mode 100644 index 031a136067..0000000000 --- a/packages/react-router/test-app/cypress/examples/actions.spec.js +++ /dev/null @@ -1,291 +0,0 @@ -/// - -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('.rightclick() - right click on a DOM element', () => { - // https://on.cypress.io/rightclick - - // Our app has a listener on 'contextmenu' event in our 'scripts.js' - // that hides the div and shows an input on right click - cy.get('.rightclick-action-div').rightclick().should('not.be.visible'); - cy.get('.rightclick-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