Merge branch '10.0-release' into zachw/small-browserlist-ui-fix

Author: ZachJW34

.eslintignore

@@ -91,3 +91,6 @@ system-tests/projects/nuxtjs-vue2-unconfigured/**/*
 system-tests/projects/nuxtjs-vue2-configured/**/*
 
 system-tests/projects/react-app-webpack-5-unconfigured/**/*
+
+system-tests/project-fixtures/**
+system-tests/projects/**/*/expected-cypress*/**/*

.gitignore

@@ -79,6 +79,9 @@ system-tests/fixtures/large-img
 /npm/design-system/cypress/videos
 /npm/design-system/.babel-cache
 
+# from npm/webpack-dev-server-fresh
+/npm/webpack-dev-server-fresh/cypress/videos
+
 # from runner-ct
 /packages/runner-ct/cypress/screenshots
 

circle.yml

@@ -1098,7 +1098,8 @@ jobs:
             run-app-integration-tests-chrome,
             run-frontend-shared-component-tests-chrome,
             run-launchpad-component-tests-chrome,
-            run-launchpad-integration-tests-chrome
+            run-launchpad-integration-tests-chrome,
+            run-webpack-dev-server-fresh-integration-tests
       - run:
           command: |
             PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
@@ -1433,6 +1434,28 @@ jobs:
           path: /tmp/artifacts
       - store-npm-logs
 
+  run-webpack-dev-server-fresh-integration-tests:
+    <<: *defaults
+    # parallelism: 3 TODO: Add parallelism once we have more specs
+    steps:
+      - restore_cached_workspace
+      - restore_cached_system_tests_deps
+      - run:
+          command: |
+            CYPRESS_KONFIG_ENV=production \
+            CYPRESS_RECORD_KEY=$MAIN_RECORD_KEY \
+            PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+            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
+      - store_test_results:
+          path: /tmp/cypress
+      - store_artifacts:
+          path: /tmp/artifacts
+      - store-npm-logs      
+
   ui-components-integration-tests:
     <<: *defaults
     steps:
@@ -1494,9 +1517,13 @@ jobs:
     <<: *defaults
     steps:
       - restore_cached_workspace
+      - restore_cached_system_tests_deps
       - run:
           name: Run tests
           command: yarn workspace @cypress/webpack-dev-server test
+      - run:
+          name: Run tests
+          command: yarn workspace @cypress/webpack-dev-server-fresh test
 
   npm-vite-dev-server:
     <<: *defaults
@@ -2226,6 +2253,10 @@ linux-workflow: &linux-workflow
         percy: true
         requires:
           - build
+    - run-webpack-dev-server-fresh-integration-tests:
+        context: [test-runner:cypress-record-key, test-runner:percy]
+        requires:
+          - system-tests-node-modules-install
     - run-app-component-tests-chrome:
         context: [test-runner:launchpad-tests, test-runner:percy]
         percy: true
@@ -2241,7 +2272,7 @@ linux-workflow: &linux-workflow
           - build
     - npm-webpack-dev-server:
         requires:
-          - build
+          - system-tests-node-modules-install
     - npm-vite-dev-server:
         requires:
           - build

cli/scripts/start-build.js

@@ -24,3 +24,4 @@ includeTypes.forEach((folder) => {
 
 shell.exec('babel lib -d build/lib')
 shell.exec('babel index.js -o build/index.js')
+shell.cp('index.mjs', 'build/index.mjs')

cli/types/cypress.d.ts

@@ -2868,7 +2868,7 @@ declare namespace Cypress {
     /**
      * Handle Cypress plugins
      */
-    setupNodeEvents: (on: PluginEvents, config: PluginConfigOptions) => Promise<PluginConfigOptions> | PluginConfigOptions
+    setupNodeEvents: (on: PluginEvents, config: PluginConfigOptions) => Promise<PluginConfigOptions | void> | PluginConfigOptions | void
 
     indexHtmlFile: string
   }
@@ -2919,6 +2919,7 @@ declare namespace Cypress {
     namespace: string
     projectRoot: string
     devServerPublicPathRoute: string
+    cypressBinaryRoot: string
   }
 
   /**
@@ -2964,9 +2965,34 @@ declare namespace Cypress {
    */
   type CoreConfigOptions = Partial<Omit<ResolvedConfigOptions, TestingType>>
 
+  interface DefineDevServerConfig {
+    // This interface can be extended by the user, to inject the types for their
+    // preferred bundler: e.g.
+    //
+    // import type * as webpack from 'webpack'
+    //
+    // declare global {
+    //   namespace Cypress {
+    //     interface DefineDevServerConfig {
+    //       webpackConfig?: webpack.Configuration
+    //     }
+    //   }
+    // }
+    [key: string]: any
+  }
+
+  type PickConfigOpt<T> = T extends keyof DefineDevServerConfig ? DefineDevServerConfig[T] : any
+
   type DevServerFn<ComponentDevServerOpts = any> = (cypressDevServerConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
+
+  interface DevServerConfigObject {
+    bundler: 'webpack'
+    framework: 'react'
+    webpackConfig?: PickConfigOpt<'webpackConfig'>
+  }
+
   interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl'> {
-    devServer: DevServerFn<ComponentDevServerOpts>
+    devServer: DevServerFn<ComponentDevServerOpts> | DevServerConfigObject
     devServerConfig?: ComponentDevServerOpts
   }
 
@@ -5428,7 +5454,7 @@ declare namespace Cypress {
 
   interface ResolvedDevServerConfig {
     port: number
-    close: (done?: () => any) => void
+    close: (done?: (err?: Error) => any) => void
   }
 
   interface PluginEvents {

npm/webpack-dev-server-fresh/CHANGELOG.md

@@ -0,0 +1,65 @@
+# @cypress/webpack-dev-server-fresh
+
+Implements the APIs for the object-syntax of the Cypress Component-testing "webpack dev server".
+
+Object syntax:
+
+```ts
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'create-react-app',
+      bundler: 'webpack',
+      // webpackConfig?: Will try to infer, if passed it will be used as is
+    }
+  }
+})
+```
+
+Function syntax:
+
+```ts
+import { devServer } from '@cypress/webpack-dev-server'
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer(cypressConfig) {
+      return devServer({
+        cypressConfig,
+        framework: 'react',
+        webpackConfig: require('./webpack.config.js')
+      })
+    }
+  }
+})
+```
+
+## Testing
+
+Unit tests can be run with `npm test`. Integration tests can be run with `yarn cypress:run`
+
+This module should be primarily covered by system-tests / open-mode tests. All system-tests directories should be created using the notation:
+
+`webpack${major}_wds${devServerMajor}-$framework{-$variant}`
+
+- webpack4_wds3-react
+- webpack4_wds4-next-11
+- webpack5_wds3-next-12
+- webpack4_wds4-create-react-app
+
+## Architecture
+
+There should be a single publicly-exported entrypoint for the module, `devServer`, all other types and functions should be considered internal/implementation details, and types stripped from the output.
+
+The `devServer` will first source the modules from the user's project, falling back to our own bundled versions of libraries. This ensures that the user has installed the current modules, and throws an error if the user does not have the library installed.
+
+From there, we check the "framework" field to source or define any known webpack transforms to aid in the compilation.
+
+We then merge the sourced config with the user's webpack config, and layer on our own transforms, and provide this to a webpack instance. The webpack instance used to create a webpack-dev-server, which is returned.
+
+## Changelog
+
+[Changelog](./CHANGELOG.md)

npm/webpack-dev-server-fresh/README.md

@@ -0,0 +1,16 @@
+exports['makeWebpackConfig ignores userland webpack `output.publicPath` 1'] = {
+  "output": {
+    "publicPath": "/test-public-path/",
+    "filename": "[name].js"
+  },
+  "mode": "development",
+  "optimization": {
+    "splitChunks": {
+      "chunks": "all"
+    }
+  },
+  "plugins": [
+    "HtmlWebpackPlugin",
+    "CypressCTWebpackPlugin"
+  ]
+}

npm/webpack-dev-server-fresh/__snapshots__/makeWebpackConfig.spec.ts.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  projectId: 'ypt4pf',
+  e2e: {
+    defaultCommandTimeout: 10000, // these take a bit longer b/c they're e2e open mode test
+    async setupNodeEvents (on, config) {
+      if (!process.env.HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS) {
+        throw new Error('HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS is missing. Close Cypress and run tests using the `yarn cypress:*` commands from the `packages/app` directory')
+      }
+
+      // Delete this as we only want to honor it on parent Cypress when doing E2E Cypress in Cypress testing
+      delete process.env.HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS
+      process.env.CYPRESS_INTERNAL_E2E_TESTING_SELF = 'true'
+      const { e2ePluginSetup } = require('@packages/frontend-shared/cypress/e2e/e2ePluginSetup') as typeof import('@packages/frontend-shared/cypress/e2e/e2ePluginSetup')
+
+      return await e2ePluginSetup(on, config)
+    },
+  },
+  // @ts-ignore We are setting these namespaces in order to properly test Cypress in Cypress
+  clientRoute: '/__app/',
+  namespace: '__cypress-app',
+  socketIoRoute: '/__app-socket',
+  socketIoCookie: '__app-socket',
+  devServerPublicPathRoute: '/__cypress-app/src',
+})

npm/webpack-dev-server-fresh/cypress.config.ts

@@ -0,0 +1,60 @@
+/// <reference types="cypress" />
+/// <reference path="../support/e2e.ts" />
+import type { e2eProjectDirs } from '@packages/frontend-shared/cypress/e2e/support/e2eProjectDirs'
+
+type ProjectDirs = typeof e2eProjectDirs
+
+const WEBPACK_REACT: ProjectDirs[number][] = ['webpack4_wds3-react', 'webpack4_wds4-react', 'webpack5_wds3-react', 'webpack5_wds4-react']
+
+// Add to this list to focus on a particular permutation
+const ONLY_PROJECTS: ProjectDirs[number][] = []
+
+for (const project of WEBPACK_REACT) {
+  if (ONLY_PROJECTS.length && !ONLY_PROJECTS.includes(project)) {
+    continue
+  }
+
+  describe(`Working with ${project}`, () => {
+    beforeEach(() => {
+      cy.scaffoldProject(project)
+      cy.openProject(project)
+      cy.startAppServer('component')
+    })
+
+    it('should mount a passing test', () => {
+      cy.visitApp()
+      cy.contains('App.cy.jsx').click()
+      cy.get('.passed > .num').should('contain', 1)
+    })
+
+    it('MissingReact: should fail, rerun, succeed', () => {
+      cy.once('uncaught:exception', () => {
+        // Ignore the uncaught exception in the AUT
+        return false
+      })
+
+      cy.visitApp()
+      cy.contains('MissingReact.cy.jsx').click()
+      cy.get('.failed > .num').should('contain', 1)
+      cy.withCtx(async (ctx) => {
+        await ctx.actions.file.writeFileInProject(`src/MissingReact.jsx`,
+        `import React from 'react';
+        ${await ctx.actions.file.readFileInProject('src/MissingReact.jsx')}`)
+      })
+
+      cy.get('.passed > .num').should('contain', 1)
+    })
+
+    it('MissingReactInSpec: should fail, rerun, succeed', () => {
+      cy.visitApp()
+      cy.contains('MissingReactInSpec.cy.jsx').click()
+      cy.get('.failed > .num').should('contain', 1)
+      cy.withCtx(async (ctx) => {
+        await ctx.actions.file.writeFileInProject(`src/MissingReactInSpec.cy.jsx`,
+          await ctx.actions.file.readFileInProject('src/App.cy.jsx'))
+      })
+
+      cy.get('.passed > .num').should('contain', 1)
+    })
+  })
+}