chore: change integration->e2e throughout code base (#19345)

* hacky way to update snapshots

* new hack to update snapshots

* trying again

* hacky fix

* ci: snapshots

* ci: snapshots

* snapshots

* mas updates

* update spec API

* fix test

* fix test

* update

* update test

* fix test

* update plugin

* update spec

* webpack optinos

* Update launchpad tests

* fix screenshot paths

* updated snapshot

* change pattern

* guard

* fix smoke test

* patch code coverage

* update percy config

* fix specs

* try updating example project

* update snapshots

* remove old test

* remove snapshot hack

* add back appveyor

* remove old code

* update snapshot

* Fix tests

* wip

* revert snapshot

* reverted all snaps

* remove only

* remove commnet

* remove old code

* reverted file

* lint

* revert video compression spec

* update snapshot

* update spec path logic

* update snap

* updated snap

* snaps

* snaps

* fix spec

* rename ignoreTestFiles to ignoreSpecPattern

* update screenshot dir for runner-ct

* update deprecations

* update

* upate

* fix test

* update snaps

* update snap

* updating snap

* added missing snaps

* updated cypress run mode integration spec

* electron snapshot

* update default

* rename integration->e2e

* rename integration->e2e in packages

* spec.ts -> cy.ts

* spec.ts -> cy.ts

* _spec.js -> .cy.js

* .spec.js -> .cy.js

* .spec.js -> .cy.js

* update config

* update config

* update

* update spec ext

* update config

* update config

* ensure newly scaffold specs are cached

* fix launchpad spec

* types

* update test

* transpile based on spec pattern

* add back example

* remove unnecessary async and nodeVersion

* spec.tsx -> cy.tsx

* update stop-only config

* exclude CT from E2E

* removed old test

* update spec pattern in angular

* update spec pattern in design system

* update all specs npm npm/react

* update spec name

* update spec patterns

* remove old script

* update tests path

* update config

* fix test

* update snapshots

* update examples

* update ignore patterns

* update snapshots

* unit tests

* update tests

* patch code coverage

* revert spec name

* rename a lot of speces

* update

* update spec ext

* update spec

* update spec

* update spec ext

* update lint

* update rules

* update lint

* snaps

* update spec dir

* update paths

* remove unused pluginsfile config opt

* update smoke test

* update create cypress tests

* update gitignore

* update types

* update paths

* update spe

* update test

* update all snaps

* update tests

* update http request spec

* update spec file names

* snaps

* update snaps

* updated snaps

* update snaps

* spacing

* spacing

* spacing

* spacing

* fix perf spec

* update

* update

* revert

* update

* snaps

* snaps

* rename spec

* update snaps

* snapshots

* update tests

* update tests

* update

* fix

* update test projects

* update

* updating

* update run-ct test

* update spec pattern and add defensive check around platform

* fix system test script

* update snap

* snaps

* update test

* update spe

* update for FF

* ff

* remove unused feature flag

* added tests

* fix react example

* update test

* update config

* update test projects

* update snapshots

* correctly remove private prefix on darwin

* fix types

* rename integration -> e2e

* update config

* updatec onfig

* fixing app scaffold integration tests

* remove code

* exclude e2e specs from CT

* update snapshot

* integration->e2e

* update path for test file in ts project

* update schematic

* use updated branch for CI

* update config

* update config

* revert some changes

* remove built code

* revert changes

* update gitignore

* include test spec

* update scaffold script

* wip: renames

* script

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* mass rename

* rename

* rename

* fix angular

* update spec in create cypress tests

* remove old file

* fix tests

* access specPattern in a more idiomatic fashion

* do not duplicate variable

* pass correct params to findSpec in files controller

* add comment explaining spec finding

* remove reference to old file that no longer exist

* resolve conflicts

* fix types

* transpile cypress dir

* update circle ymlg

* update spec pattern for example project

* supportFile: false

* fix circle yml

* update test glob

* rename some specs to use correct .cy ext

* more ext renames

* rename spec

* update extensions

* update extensions

* update specs

Co-authored-by: estrada9166 <estrada9166@hotmail.com>
Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>

.eslintignore

@@ -26,8 +26,8 @@ system-tests/lib/scaffold/support/e2e.js
 system-tests/lib/scaffold/support/component.js
 system-tests/lib/scaffold/support/commands.js
 system-tests/test/support/projects/e2e/cypress/
-system-tests/projects/e2e/cypress/integration/stdout_exit_early_failing_spec.js
-system-tests/projects/e2e/cypress/integration/typescript_syntax_error_spec.ts
+system-tests/projects/e2e/cypress/e2e/stdout_exit_early_failing.cy.js
+system-tests/projects/e2e/cypress/e2e/typescript_syntax_error.cy.ts
 
 
 **/test/fixtures
@@ -40,10 +40,10 @@ cli/types
 packages/example
 
 packages/extension/test/helpers/background.js
-integration/stdout_exit_early_failing_spec.js
+e2e/stdout_exit_early_failing_spec.js
 
 npm/webpack-preprocessor/cypress/tests/e2e/compile-error.js
-npm/webpack-preprocessor/examples/use-babelrc/cypress/integration/spec.js
+npm/webpack-preprocessor/examples/use-babelrc/cypress/e2e/spec.cy.js
 
 npm/cypress-schematic/src/**/*.js
 

circle.yml

@@ -411,7 +411,7 @@ commands:
               yarn cypress:run --record --parallel --group 5x-driver-<<parameters.browser>> --browser <<parameters.browser>>
             else
               # external PR
-              TESTFILES=$(circleci tests glob "cypress/integration/**/*_spec.*" | circleci tests split --total=$CIRCLE_NODE_TOTAL)
+              TESTFILES=$(circleci tests glob "cypress/e2e/**/*.cy.*" | circleci tests split --total=$CIRCLE_NODE_TOTAL)
               echo "Test files for this machine are $TESTFILES"
 
               if [[ -z "$TESTFILES" ]]; then
@@ -518,7 +518,7 @@ commands:
               PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_ID \
               PERCY_ENABLE=${PERCY_TOKEN:-0} \
               PERCY_PARALLEL_TOTAL=-1 \
-              yarn percy upload packages/runner-ct/cypress/screenshots/screenshot.spec.tsx/percy
+              yarn percy upload packages/runner-ct/cypress/screenshots/screenshot.cy.tsx/percy
             else
               echo "skipping percy screenshots uploading"
             fi
@@ -1688,7 +1688,7 @@ jobs:
     steps:
       - clone-repo-and-checkout-branch:
           repo: cypress-example-kitchensink
-          pull_request_id: 523
+          pull_request_id: 524
       - install-required-node
       - run:
           name: Remove cypress.json
@@ -1706,6 +1706,13 @@ jobs:
           command: yarn start
           working_directory: /tmp/cypress-example-kitchensink
           background: true
+      - run:
+          name: Rename support file
+          working_directory: /tmp/cypress-example-kitchensink
+          command: |
+            if [[ -f cypress/support/index.js ]]; then
+              mv cypress/support/index.js cypress/support/e2e.js
+            fi
       - run:
           name: Run Kitchensink example project
           command: |
@@ -1918,6 +1925,14 @@ jobs:
           name: Scaffold full TypeScript project 🏗
           working_directory: <<parameters.wd>>
           command: npx @bahmutov/cly@1 init --typescript
+      # TODO: fork/update @bahmutov/cly@1 to scaffold `cypress/e2e/spec.cy.ts`
+      # instead of `cypress/integration/spec.ts` when Cypress v10 is released.
+      - run:
+          name: Update example spec
+          working_directory: <<parameters.wd>>
+          command: |
+            mkdir cypress/e2e
+            mv cypress/integration/spec.ts cypress/e2e/spec.cy.ts
       - run:
           name: Scaffold new config file
           working_directory: <<parameters.wd>>
@@ -2014,15 +2029,15 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: "electron"
-          pull_request_id: 523
+          pull_request_id: 524
 
   test-binary-against-awesome-typescript-loader:
     <<: *defaults
     steps:
       - test-binary-against-repo:
           repo: cypress-test-awesome-typescript-loader
           browser: "electron"
-          pull_request_id: 7
+          pull_request_id: 8
 
   test-binary-against-kitchensink-firefox:
     <<: *defaults
@@ -2031,7 +2046,7 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: firefox
-          pull_request_id: 523
+          pull_request_id: 524
 
   test-binary-against-kitchensink-chrome:
     <<: *defaults
@@ -2040,7 +2055,7 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: chrome
-          pull_request_id: 523
+          pull_request_id: 524
 
   test-binary-against-todomvc-firefox:
     <<: *defaults
@@ -2124,6 +2139,14 @@ jobs:
           name: Add Cypress demo
           working_directory: test-binary
           command: npx @bahmutov/cly init
+      # TODO: fork/update @bahmutov/cly@1 to scaffold `cypress/e2e/spec.cy.ts`
+      # instead of `cypress/integration/spec.js` when Cypress v10 is released.
+      - run:
+          name: Update example spec
+          working_directory: test-binary
+          command: |
+            mkdir cypress/e2e
+            mv cypress/integration/spec.js cypress/e2e/spec.cy.js
       - run:
           name: Scaffold new config file
           working_directory: test-binary

npm/angular/cypress.config.ts

@@ -7,7 +7,6 @@ export default defineConfig({
   'fileServerFolder': 'src',
   'projectId': 'nf7zag',
   'component': {
-    'specPattern': 'src/app/**/*cy-spec.ts',
     'supportFile': 'cypress/support/component.ts',
     setupNodeEvents (on, config) {
       return require('./cypress/plugins')(on, config)

npm/angular/cypress/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["integration/*.ts"],
+  "include": ["e2e/*.ts"],
   "compilerOptions": {
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

npm/angular/patches/@cypress+code-coverage+3.9.5.patch

@@ -7,7 +7,7 @@ index 31e00ee..0c56908 100644
    /** @type {string} Cypress run-time config has test files string pattern */
    // @ts-ignore
 -  const testFilePattern = config('testFiles')
-+  const testFilePattern = config('specPattern')
++  const testFilePattern = config(Cypress.testingType).specPattern
 
    // test files chould be:
    //  wild card string "**/*.*" (default)

npm/create-cypress-tests/src/installCypress.ts

@@ -44,9 +44,10 @@ async function copyFiles ({ ignoreExamples, useTypescript }: InstallCypressOpts)
       '',
     ].join('\n')
 
-    const specFileToCreate = path.resolve('cypress', 'integration', useTypescript ? 'spec.ts' : 'spec.js')
+    const specFileName = useTypescript ? 'spec.cy.ts' : 'spec.cy.js'
+    const specFileToCreate = path.resolve('cypress', 'e2e', specFileName)
 
-    await fs.outputFile(path.resolve('cypress', 'integration', useTypescript ? 'spec.js' : 'spec.ts'), dummySpec)
+    await fs.outputFile(specFileToCreate, dummySpec)
     console.log(`In order to ignore examples a spec file ${chalk.green(path.relative(process.cwd(), specFileToCreate))}.`)
   }
 

npm/cypress-schematic/src/schematics/ng-add/index.spec.ts

@@ -32,7 +32,7 @@ describe('@cypress/schematic: ng-add', () => {
   })
 
   it('should create cypress files', async () => {
-    const files = ['cypress/integration/spec.ts', 'cypress/plugins/index.ts', 'cypress/support/commands.ts', 'cypress/tsconfig.json', 'cypress.config.ts']
+    const files = ['cypress/e2e/spec.cy.ts', 'cypress/plugins/index.ts', 'cypress/support/commands.ts', 'cypress/tsconfig.json', 'cypress.config.ts']
     const homePath = '/projects/sandbox/'
 
     return schematicRunner.runSchematicAsync('ng-add', {}, appTree).toPromise().then((tree) => {

npm/cypress-schematic/src/schematics/ng-generate/e2e/index.spec.ts

@@ -15,7 +15,7 @@ describe('@cypress/schematic:e2e ng-generate', () => {
     version: '12.0.0',
   }
 
-  const appOptions = {
+  const appOptions: Parameters<typeof schematicRunner['runExternalSchematicAsync']>[2] = {
     name: 'sandbox',
     inlineTemplate: false,
     routing: false,
@@ -29,7 +29,7 @@ describe('@cypress/schematic:e2e ng-generate', () => {
   })
 
   it('should create cypress files', async () => {
-    const files = ['cypress/integration/foo.spec.ts']
+    const files = ['cypress/e2e/foo.cy.ts']
     const homePath = '/projects/sandbox/'
 
     return schematicRunner.runSchematicAsync('e2e', { name: 'foo' }, appTree).toPromise().then((tree) => {

npm/cypress-schematic/src/schematics/ng-generate/e2e/index.ts

@@ -49,7 +49,7 @@ export default function (options: Schema): Rule {
     }
 
     if (options.path === undefined) {
-      options.path = `${project.root}/cypress/integration`
+      options.path = `${project.root}/cypress/e2e`
     }
 
     const templateSource = apply(url('../files/__path__'), [

npm/design-system/cypress.config.js

@@ -12,7 +12,6 @@ module.exports = {
   ],
   fixturesFolder: false,
   component: {
-    specPattern: 'src/**/*spec.{js,jsx,ts,tsx}',
     devServer (cypressConfig) {
       const { startDevServer } = require('@cypress/vite-dev-server')
 

npm/design-system/src/components/searchInput/SearchInput.spec.tsx → npm/design-system/src/components/searchInput/SearchInput.cy.tsx

@@ -19,7 +19,8 @@ describe('SearchInput', () => {
   }
 
   it('should render', () => {
-    mountAndSnapshot(<SearchInput placeholder="foo" value="" aria-label="Search" onInput={() => {}} />)
+    function onInput () {}
+    mountAndSnapshot(<SearchInput placeholder="foo" value="" aria-label="Search" onInput={onInput} />)
     cy.get('input').should('exist')
   })
 
@@ -63,7 +64,8 @@ describe('SearchInput', () => {
     })
 
     it('should focus input on click', () => {
-      mount(<SearchInput placeholder="foo" value="a value" aria-label="Search" onInput={() => {}} />)
+      function onInput () {}
+      mount(<SearchInput placeholder="foo" value="a value" aria-label="Search" onInput={onInput} />)
 
       cy.get('[aria-label="Clear search"]').click()
 

npm/react/cypress.config.js

@@ -14,7 +14,7 @@ module.exports = {
   ],
   'experimentalFetchPolyfill': true,
   'component': {
-    'specPattern': 'cypress/component/**/*spec.{js,jsx,ts,tsx}',
+    ignoreSpecPattern: 'examples/**/*',
     devServer (cypressConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const path = require('path')

npm/react/cypress/component/advanced/react-router-v6/in-memory-spec.js → npm/react/cypress/component/advanced/react-router-v6/in-memory.cy.js

@@ -21,22 +21,22 @@ describe('React Memory Router', () => {
     cy.log('**About** component')
     cy.contains('h2', 'About')
     // because the routing is in memory, the URL stays at the spec filename
-    cy.location('pathname').should('match', /in-memory-spec.js$/)
+    cy.location('pathname').should('match', /in-memory.cy.js$/)
 
     // Go to home route
     cy.contains('a', 'Home').click()
 
     cy.log('**Home** component')
     cy.contains('h2', 'Home') // from the "Home" component
     // still at the spec url
-    cy.location('pathname').should('match', /in-memory-spec.js$/)
+    cy.location('pathname').should('match', /in-memory.cy.js$/)
 
     // Go to about route
     cy.log('back to **About** component')
     cy.contains('a', 'About').click()
 
     cy.contains('h2', 'About')
     // still at the spec url
-    cy.location('pathname').should('match', /in-memory-spec.js$/)
+    cy.location('pathname').should('match', /in-memory.cy.js$/)
   })
 })

npm/react/cypress/component/basic/window-spec.js → npm/react/cypress/component/basic/window.cy.js

@@ -29,7 +29,7 @@ it('has the same window from the component as from test', () => {
   cy.window()
   .its('location.pathname')
   // this filename
-  .should('match', /window-spec\.js$/)
+  .should('match', /window.cy.js$/)
 
   // the window should have property set by the component
   cy.window().should('have.property', 'component')

npm/react/examples/a11y/cypress.config.js

@@ -4,7 +4,6 @@ module.exports = {
   'viewportWidth': 500,
   'viewportHeight': 500,
   'component': {
-    'specPattern': 'cypress/component/**/*spec.js',
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install

npm/react/examples/craco/cypress.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   'component': {
-    'specPattern': 'cypress/component/**/*.test.{js,ts,jsx,tsx}',
     setupNodeEvents (on, config) {
       const cracoConfig = require('./craco.config.js')
       const devServer = require('@cypress/react/plugins/craco')

npm/react/examples/find-webpack/cypress.config.ts

@@ -4,7 +4,6 @@ export default defineConfig({
   'video': true,
   'projectId': 'jq5xpp',
   'component': {
-    'specPattern': 'src/**/*.spec.{js,ts,jsx,tsx}',
     'supportFile': 'cypress/support/component.ts',
     devServer (cypressConfig) {
       const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig')

npm/react/examples/nextjs-webpack-5/cypress.config.js

@@ -4,7 +4,6 @@ module.exports = {
   'viewportHeight': 800,
   'pluginsFile': 'cypress/plugins.js',
   'component': {
-    'specPattern': 'cypress/component/**/*.spec.{js,jsx}',
     setupNodeEvents (on, config) {
       const devServer = require('@cypress/react/plugins/next')
 

npm/react/examples/nextjs/cypress.config.js

@@ -7,7 +7,6 @@ module.exports = {
     'coverage': true,
   },
   'component': {
-    'specPattern': 'cypress/components/**/*.spec.{js,jsx}',
     setupNodeEvents (on, config) {
       const devServer = require('@cypress/react/plugins/next')
 

npm/react/examples/react-scripts-folder/cypress.config.js

@@ -4,7 +4,6 @@ module.exports = {
   'viewportWidth': 500,
   'viewportHeight': 800,
   'component': {
-    'specPattern': 'cypress/component/**/*cy-spec.js',
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install

npm/react/examples/react-scripts-typescript/cypress.config.js

@@ -4,7 +4,6 @@ module.exports = {
   'viewportHeight': 800,
   'component': {
     'supportFile': 'cypress/support/component.ts',
-    'specPattern': 'src/**/*cy-spec.tsx',
     setupNodeEvents (on, config) {
       const devServer = require('@cypress/react/plugins/react-scripts')
 

npm/react/examples/react-scripts/cypress.config.js

@@ -4,7 +4,6 @@ module.exports = {
   'viewportHeight': 800,
   'experimentalFetchPolyfill': true,
   'component': {
-    'specPattern': 'src/**/*cy-spec.js',
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install

npm/react/examples/sass-and-ts/cypress.config.js

@@ -7,7 +7,6 @@ module.exports = {
     'coverage': true,
   },
   'component': {
-    'specPattern': 'src/**/*spec.*',
     setupNodeEvents (on, config) {
       // load Webpack file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install

npm/react/examples/snapshots/cypress.config.js

@@ -13,7 +13,6 @@ module.exports = {
     },
   },
   'component': {
-    'specPattern': 'cypress/component/**/*-spec.js',
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install

npm/react/examples/tailwind/cypress.config.js

@@ -7,7 +7,6 @@ module.exports = {
     'coverage': true,
   },
   component: {
-    'specPattern': 'src/**/*cy-spec.js',
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install

npm/react/examples/using-babel-typescript/cypress.config.js

@@ -4,7 +4,6 @@ module.exports = {
   'viewportWidth': 500,
   'viewportHeight': 500,
   'component': {
-    'specPattern': 'src/**/*spec.tsx',
     setupNodeEvents (on, config) {
       // let's bundle spec files and the components they include using
       // the same bundling settings as the project by loading .babelrc

npm/react/examples/using-babel/cypress.config.js

@@ -4,7 +4,6 @@ module.exports = {
   'viewportWidth': 500,
   'viewportHeight': 500,
   'component': {
-    'specPattern': 'src/**/*spec.js',
     setupNodeEvents (on, config) {
       // let's bundle spec files and the components they include using
       // the same bundling settings as the project by loading .babelrc

npm/react/examples/visual-testing-with-applitools/cypress.config.js

@@ -7,7 +7,6 @@ module.exports = {
     'coverage': false,
   },
   'component': {
-    'specPattern': 'src/**/*spec.js',
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install

npm/react/examples/visual-testing-with-happo/cypress.config.js

@@ -3,7 +3,6 @@ module.exports = {
   'viewportWidth': 400,
   'viewportHeight': 700,
   'component': {
-    'specPattern': 'src/**/*cy-spec.js',
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install