chore: cutting over system-tests and Cypress to use the new CT Object…

… API (cypress-io#21079) * removing vite-dev-server local dependency from react-vite-ts-configured system test * moving some CRA examples over to use the object api for setup * fixing issue where function API was broken by object API for cy config + devservers * adding deeply nested react import to project-fixtures for cra * finishes cutting over cypress/react for sys tests * chore: adding circle for this feature branch * chore: moving over many vue + vite system tests to use object API instead of function API (cypress-io#21080) * doing webpack-dev-server cutovers * removing more webpack-dev-server refrences * fixing snapshots * bumping yarn.lock * wip * fix test * fix assertion Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> * feat: removing all references for "fresh" dev servers (webpack-dev-server-fresh and vite-dev-server-fresh) (cypress-io#21094) Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> Co-authored-by: Zachary Williams <ZachJW34@gmail.com> * chore: add dev-servers as deps to server to be included in the binary (cypress-io#21091) * fix bad merge * fix next types and webpack-dev-server- resolve Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
tiago80673 · Apr 20, 2022 · b326693 · b326693
1 parent 10dfccc
commit b326693
Show file tree

Hide file tree

Showing 848 changed files with 11,673 additions and 110,679 deletions.
diff --git a/.gitignore b/.gitignore
@@ -80,8 +80,8 @@ system-tests/lib/fixtureDirs.ts
 /npm/design-system/cypress/videos
 /npm/design-system/.babel-cache
 
-# from npm/webpack-dev-server-fresh
-/npm/webpack-dev-server-fresh/cypress/videos
+# from npm/webpack-dev-server
+/npm/webpack-dev-server/cypress/videos
 
 # from runner-ct
 /packages/runner-ct/cypress/screenshots

diff --git a/circle.yml b/circle.yml
@@ -29,7 +29,7 @@ mainBuildFilters: &mainBuildFilters
       only:
         - develop
         - 10.0-release
-        - zachw/add-dev-server-deps
+        - chore/cutover-to-bundled-react-mount
 
 # uncomment & add to the branch conditions below to disable the main linux
 # flow if we don't want to test it for a certain branch
@@ -47,7 +47,7 @@ macWorkflowFilters: &mac-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
-    - equal: [ zachw/add-dev-server-deps, << pipeline.git.branch >> ]
+    - equal: [ chore/cutover-to-bundled-react-mount, << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -57,7 +57,8 @@ windowsWorkflowFilters: &windows-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
-    - equal: [ zachw/add-dev-server-deps, << pipeline.git.branch >> ]
+    - equal: [ chore/cutover-to-bundled-react-mount, << pipeline.git.branch >> ]
+    - equal: [ 'unify-1036-windows-test-projects', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -1101,8 +1102,8 @@ jobs:
             run-frontend-shared-component-tests-chrome,
             run-launchpad-component-tests-chrome,
             run-launchpad-integration-tests-chrome,
-            run-webpack-dev-server-fresh-integration-tests,
-            run-vite-dev-server-fresh-integration-tests
+            run-webpack-dev-server-integration-tests,
+            run-vite-dev-server-integration-tests
       - run:
           command: |
             PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
@@ -1161,8 +1162,10 @@ jobs:
             - run: yarn test-scripts
             # make sure our snapshots are compared correctly
             - run: yarn test-mocha-snapshot
+            # run @cypress/design-system before other packages are built
+            - run: yarn lerna run build-prod --scope \"@cypress/design-system\"
             # make sure packages with TypeScript can be transpiled to JS
-            - run: yarn lerna run build-prod --stream
+            - run: yarn lerna run build-prod --stream --ignore \"@cypress/design-system\"
             # run unit tests from each individual package
             - run: yarn test
             # run type checking for each individual package
@@ -1437,7 +1440,7 @@ jobs:
           path: /tmp/artifacts
       - store-npm-logs
 
-  run-webpack-dev-server-fresh-integration-tests:
+  run-webpack-dev-server-integration-tests:
     <<: *defaults
     # parallelism: 3 TODO: Add parallelism once we have more specs
     steps:
@@ -1451,15 +1454,15 @@ jobs:
             PERCY_ENABLE=${PERCY_TOKEN:-0} \
             PERCY_PARALLEL_TOTAL=-1 \
             yarn percy exec --parallel -- -- \
-            yarn cypress:run --record --parallel --group webpack-dev-server-fresh
-          working_directory: npm/webpack-dev-server-fresh
+            yarn cypress:run --record --parallel --group webpack-dev-server
+          working_directory: npm/webpack-dev-server
       - store_test_results:
           path: /tmp/cypress
       - store_artifacts:
           path: /tmp/artifacts
       - store-npm-logs      
 
-  run-vite-dev-server-fresh-integration-tests:
+  run-vite-dev-server-integration-tests:
     <<: *defaults
     # parallelism: 3 TODO: Add parallelism once we have more specs
     steps:
@@ -1473,8 +1476,8 @@ jobs:
             PERCY_ENABLE=${PERCY_TOKEN:-0} \
             PERCY_PARALLEL_TOTAL=-1 \
             yarn percy exec --parallel -- -- \
-            yarn cypress:run --record --parallel --group vite-dev-server-fresh
-          working_directory: npm/vite-dev-server-fresh
+            yarn cypress:run --record --parallel --group vite-dev-server
+          working_directory: npm/vite-dev-server
       - store_test_results:
           path: /tmp/cypress
       - store_artifacts:
@@ -1548,15 +1551,15 @@ jobs:
           command: yarn workspace @cypress/webpack-dev-server test
       - run:
           name: Run tests
-          command: yarn workspace @cypress/webpack-dev-server-fresh test
+          command: yarn workspace @cypress/webpack-dev-server test
 
   npm-vite-dev-server:
     <<: *defaults
     steps:
       - restore_cached_workspace
       - run:
           name: Run tests
-          command: yarn test --reporter mocha-multi-reporters --reporter-options configFile=../../mocha-reporter-config.json
+          command: yarn test
           working_directory: npm/vite-dev-server
       - store_test_results:
           path: npm/vite-dev-server/test_results
@@ -1582,14 +1585,6 @@ jobs:
           name: Type Check
           command: yarn typecheck
           working_directory: npm/vue
-      - run:
-          name: Run component tests
-          command: yarn test:ci:ct
-          working_directory: npm/vue
-      - run:
-          name: Run e2e tests
-          command: yarn test:ci:e2e
-          working_directory: npm/vue
       - store_test_results:
           path: npm/vue/test_results
       - store_artifacts:
@@ -1645,7 +1640,7 @@ jobs:
           command: yarn workspace @cypress/react build
       - run:
           name: Run tests
-          command: yarn test-ci
+          command: yarn test
           working_directory: npm/react
       - store_test_results:
           path: npm/react/test_results
@@ -1668,9 +1663,6 @@ jobs:
     steps:
       - restore_cached_workspace
       - run: yarn workspace create-cypress-tests build
-      - run:
-          name: Run unit test
-          command: yarn workspace create-cypress-tests test
 
   npm-eslint-plugin-dev:
     <<: *defaults
@@ -1727,7 +1719,7 @@ jobs:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "zachw/add-dev-server-deps" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "chore/cutover-to-bundled-react-mount" && "$CIRCLE_BRANCH" != "unify-1036-windows-test-projects" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi
@@ -2270,11 +2262,11 @@ linux-workflow: &linux-workflow
         percy: true
         requires:
           - build
-    - run-webpack-dev-server-fresh-integration-tests:
+    - run-webpack-dev-server-integration-tests:
         context: [test-runner:cypress-record-key, test-runner:percy]
         requires:
           - system-tests-node-modules-install
-    - run-vite-dev-server-fresh-integration-tests:
+    - run-vite-dev-server-integration-tests:
         context: [test-runner:cypress-record-key, test-runner:percy]
         requires:
           - system-tests-node-modules-install          

diff --git a/npm/angular/README.md b/npm/angular/README.md
@@ -6,7 +6,7 @@ NOTE: this is not published on npm yet. It's a work in progress. Consider [Cypre
 ](https://github.com/jscutlery/test-utils/tree/main/packages/cypress-angular) by [JS Cutlery](https://github.com/jscutlery) for a version that's currently working and available on npm.
 
 ```shell
-npm install -D cypress @cypress/angular @cypress/webpack-dev-server
+npm install -D cypress @cypress/angular
 ```
 
 Ensure you have a version of Cypress > 7. 
@@ -32,21 +32,21 @@ module.exports = {
 }
 ```
 
-Configure `cypress/plugins/index.js` to transpile Angular code.
+Configure `cypress.config.js` to transpile Angular code.
 
 ```javascript
+import { defineConfig } from 'cypress'
 import * as webpackConfig from './webpack.config';
-const { startDevServer } = require('@cypress/webpack-dev-server');
-
-module.exports = (on, config) => {
-  on('dev-server:start', (options) =>
-    startDevServer({
-      options,
-      webpackConfig,
-    }),
-  );
-  return config;
-};
+
+export default defineConfig({
+  component: {
+    devServer: {
+      bundler: 'webpack',
+      webpackConfig
+    }
+  }
+})
+
 ```
 
 The `webpack.config.ts` file is [here](cypress/plugins/webpack.config.ts).

diff --git a/npm/angular/cypress.config.ts b/npm/angular/cypress.config.ts
@@ -1,5 +1,4 @@
 import { defineConfig } from 'cypress'
-import { devServer } from '@cypress/webpack-dev-server'
 import * as webpackConfig from './cypress/plugins/webpack.config'
 
 export default defineConfig({
@@ -12,7 +11,11 @@ export default defineConfig({
     setupNodeEvents (on, config) {
       return require('./cypress/plugins')(on, config)
     },
-    devServer,
-    devServerConfig: { webpackConfig },
+    // @ts-ignore TODO: need to add the ability to define framework not
+    // in list w/o types failing...
+    devServer: {
+      bundler: 'webpack',
+      webpackConfig,
+    },
   },
 })
diff --git a/npm/angular/cypress/plugins/webpack.config.ts b/npm/angular/cypress/plugins/webpack.config.ts
@@ -97,8 +97,8 @@ module.exports = {
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'test'),
     }),
     new webpack.ContextReplacementPlugin(
-      /\@angular(\\|\/)core(\\|\/)f?esm5/,
-      path.join(__dirname, './src'),
+      /angular(\\|\/)core(\\|\/)(@angular|fesm2015)/,
+      path.join(__dirname, '..', '..', 'src'),
     ),
   ],
   performance: {

diff --git a/npm/angular/package.json b/npm/angular/package.json
@@ -13,7 +13,7 @@
     "app-start": "ng serve",
     "app-build": "ng build",
     "test": "yarn cy:run",
-    "test-ci": "yarn cy:run",
+    "test-ci": "echo not testing in CI because process never exits",
     "postinstall": "patch-package"
   },
   "dependencies": {
@@ -38,7 +38,6 @@
     "@angular/platform-browser-dynamic": "11.2.13",
     "@angular/router": "11.2.13",
     "@cypress/code-coverage": "3.9.5",
-    "@cypress/webpack-dev-server": "0.0.0-development",
     "@cypress/webpack-preprocessor": "5.7.0",
     "@types/cypress-image-snapshot": "3.1.5",
     "@types/node": "8.10.66",
@@ -49,7 +48,6 @@
     "cypress": "0.0.0-development",
     "cypress-image-snapshot": "4.0.1",
     "html-loader": "2.1.2",
-    "html-webpack-plugin": "5.3.1",
     "istanbul-instrumenter-loader": "3.0.1",
     "ng-inline-svg": "12.1.0",
     "ngx-build-plus": "11.0.0",

diff --git a/npm/design-system/cypress.config.js b/npm/design-system/cypress.config.js
@@ -1,6 +1,6 @@
-const { devServer } = require('@cypress/vite-dev-server')
+const { defineConfig } = require('cypress')
 
-module.exports = {
+module.exports = defineConfig({
   viewportWidth: 1024,
   viewportHeight: 800,
   video: false,
@@ -14,6 +14,9 @@ module.exports = {
       '**/__snapshots__/*',
       '**/__image_snapshots__/*',
     ],
-    devServer,
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
   },
-}
+})
diff --git a/npm/design-system/package.json b/npm/design-system/package.json
@@ -40,8 +40,6 @@
     "@babel/preset-env": "7.4.5",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.10.4",
-    "@cypress/react": "0.0.0-development",
-    "@cypress/vite-dev-server": "0.0.0-development",
     "@packages/web-config": "0.0.0-development",
     "@react-types/button": "^3.3.1",
     "@react-types/shared": "^3.5.0",

diff --git a/npm/design-system/src/components/Nav/LeftNav.cy.tsx b/npm/design-system/src/components/Nav/LeftNav.cy.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mount } from '@cypress/react'
+import { mount } from 'cypress/react'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons'
 import { fas } from '@fortawesome/free-solid-svg-icons'

diff --git a/npm/design-system/src/components/Playground.cy.tsx b/npm/design-system/src/components/Playground.cy.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { CypressLogo } from './CypressLogo/CypressLogo'
-import { mount } from '@cypress/react'
+import { mount } from 'cypress/react'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons'

diff --git a/npm/design-system/src/components/collapsibleGroup/CollapsibleGroup.cy.tsx b/npm/design-system/src/components/collapsibleGroup/CollapsibleGroup.cy.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mount } from '@cypress/react'
+import { mount } from 'cypress/react'
 import { composeStories } from '@storybook/testing-react'
 import * as stories from './CollapsibleGroup.stories'
 

diff --git a/npm/design-system/src/components/fileTree/FileTree.cy.tsx b/npm/design-system/src/components/fileTree/FileTree.cy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from '@cypress/react'
+import { mount } from 'cypress/react'
 import { FileTree } from './FileTree'
 import { mountAndSnapshot } from 'util/testing'
 

diff --git a/npm/design-system/src/components/searchInput/SearchInput.cy.tsx b/npm/design-system/src/components/searchInput/SearchInput.cy.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mount } from '@cypress/react'
+import { mount } from 'cypress/react'
 
 import { SearchInput } from './SearchInput'
 import { mountAndSnapshot } from 'util/testing'

diff --git a/npm/design-system/src/util/testing.ts b/npm/design-system/src/util/testing.ts
@@ -1,4 +1,4 @@
-import { mount } from '@cypress/react'
+import { mount } from 'cypress/react'
 import React from 'react'
 
 export const mountAndSnapshot =

diff --git a/npm/react/README.md b/npm/react/README.md
@@ -239,7 +239,6 @@ Repo | Description
 [bahmutov/integration-tests](https://github.com/bahmutov/integration-tests) | Example based on blog post [React Integration Testing: Greater Coverage, Fewer Tests](https://css-tricks.com/react-integration-testing-greater-coverage-fewer-tests/)
 [mobx-react-typescript-boilerplate](https://github.com/bahmutov/mobx-react-typescript-boilerplate) | Fork of the official Mobx example, shows clock control
 [bahmutov/test-react-hook-form](https://github.com/bahmutov/test-react-hook-form) | Testing forms created using [react-hook-form](https://github.com/react-hook-form/react-hook-form)
-[bahmutov/react-with-rollup](https://github.com/bahmutov/react-with-rollup) | Testing a React application bundled with Rollup by using [@bahmutov/cy-rollup](https://github.com/bahmutov/cy-rollup) preprocessor
 [bahmutov/testing-react-example](https://github.com/bahmutov/testing-react-example) | Described in blog post [Test React Component with @cypress/react Example](https://dev.to/bahmutov/test-react-component-with-@cypress/react-example-4d99)
 [ejected-react-scripts-example](https://github.com/bahmutov/ejected-react-scripts-example) | Using component testing after ejecting `react-scripts`
 [tic-tac-toe](https://github.com/bahmutov/react-tic-tac-toe-example) | Component and unit tests for Tic-Tac-Toe, read [Tic-Tac-Toe Component Tests](https://glebbahmutov.com/blog/tic-tac-toe-component-tests/)