Merge branch '10.0-release' into tgriesser/refactor/error-improvements

* 10.0-release: (25 commits)
  fix(unify): improve dev server config ergonomics (#19957)
  feat: add spec pattern modal (#19801)
  fix: Windows e2e project scaffolding issues (#19938)
  feat: update @cypress/schematic to use proper e2e config for 10.0.0 (#19827)
  fix: correctly migrate projects with custom integration folder (#19929)
  fix: component spec creation with spec pattern (#19862)
  fix: missed committing yarn.lock after merge conflict
  fix: correct reference branch / commitSha in performance-reporter (#19941)
  feat: update navbar UI per Figma (#19926)
  fix: seed examples files when no e2e directory is created (#19768)
  chore: remove windy lightBlue warning
  test: component test updates (#19925)
  feat: Focus browser from select browser screen and on dashboard login (#19842)
  test: Honeycomb system-test reporter (#19855)
  fix(deps): update dependency engine.io to v5.2.1 [security]
  feat: Retain fileName when working with aliased fixtures and files (#19820)
  Update release-process.md
  Update release-process.md
  Update release-process.md
  Update release-process.md
  ...

.github/ISSUE_TEMPLATE/1-bug-report.yml

@@ -23,7 +23,7 @@ body:
     id: reproduction
     attributes:
       label: Test code to reproduce
-      description: Provide a failing test or repo we can run. You can fork [this repo](https://github.com/cypress-io/cypress-test-tiny), set up a failing test, then link to your fork.
+      description: Provide a failing test or repo we can run. You can fork [this repo](https://github.com/cypress-io/cypress-test-tiny), set up a failing test, then link to your fork. If you have never done this before, watch [this video](https://youtu.be/NnriKHmj5T8) for example.
       placeholder: Here is my failing test code and the app code to run the tests on...
     validations:
       required: true
@@ -39,4 +39,4 @@ body:
     id: other
     attributes:
       label: Other
-      placeholder: Any other details?
+      placeholder: Any other details?

circle.yml

@@ -2127,15 +2127,19 @@ linux-workflow: &linux-workflow
         requires:
           - build
     - system-tests-chrome:
+        context: test-runner:performance-tracking
         requires:
           - system-tests-node-modules-install
     - system-tests-electron:
+        context: test-runner:performance-tracking
         requires:
           - system-tests-node-modules-install
     - system-tests-firefox:
+        context: test-runner:performance-tracking
         requires:
           - system-tests-node-modules-install
     - system-tests-non-root:
+        context: test-runner:performance-tracking
         executor: non-root-docker-user
         requires:
           - system-tests-node-modules-install

cli/types/cypress.d.ts

@@ -1,6 +1,12 @@
 /// <reference path="./cypress-npm-api.d.ts" />
 /// <reference path="./cypress-eventemitter.d.ts" />
 
+// The new Awaited type added in 4.5 would work here, but we seem to need to
+// support older versions of Typescript
+type AwaitedLike<T> = T extends PromiseLike<infer U>
+  ? { 0: AwaitedLike<U>; 1: U }[U extends PromiseLike<any> ? 0 : 1]
+  : T
+
 declare namespace Cypress {
   type FileContents = string | any[] | object
   type HistoryDirection = 'back' | 'forward'
@@ -2988,7 +2994,7 @@ declare namespace Cypress {
   type DevServerFn<ComponentDevServerOpts = any> = (cypressConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
   interface ComponentConfigOptions<ComponentDevServerOpts = any> extends CoreConfigOptions {
     devServer: Promise<{ devServer: DevServerFn<ComponentDevServerOpts>}> | { devServer: DevServerFn<ComponentDevServerOpts> } | DevServerFn<ComponentDevServerOpts>
-    devServerConfig?: ComponentDevServerOpts | Promise<ComponentDevServerOpts>
+    devServerConfig?: ComponentDevServerOpts | AwaitedLike<Promise<ComponentDevServerOpts>>
   }
 
   /**

guides/release-process.md

@@ -67,7 +67,13 @@ of Cypress. You can see the progress of the test projects by opening the status
 
 ![Screenshot of status checks](https://i.imgur.com/AsQwzgO.png)
 
-Once the `develop` branch for all test projects are reliably passing with the new changes, publishing can proceed.
+#### :bangbang: Important :bangbang:
+
+The `linux x64`, `win32 x64`, and `darwin x64` artifacts produced by CI are all placed in the same directory on the CDN. The version that was built last will overwrite the other versions in the directory. Until work is done to complete [#19771](https://github.com/cypress-io/cypress/issues/19771), you must ensure that the `linux` workflow publishes its artifacts **after** the `windows`/`mac` workflows. To guarantee this, you can re-run the `create-build-artifacts` job for the `linux` workflow within CircleCI after the initial builds have completed.
+      
+<img src="https://user-images.githubusercontent.com/1711637/150612076-ac1d233b-519a-443b-9fd4-950a8f0439ef.png" width="250" height="auto">
+
+Once the `develop` branch for all test projects are reliably passing with the new changes and the `linux` binary is present at `https://cdn.cypress.io/beta/npm/X.Y.Z/<sha>/cypress.tgz`, publishing can proceed.
 
 ### Steps to Publish a New Version
 
@@ -89,6 +95,7 @@ In the following instructions, "X.Y.Z" is used to denote the [next version of Cy
             ![commit-link](https://user-images.githubusercontent.com/1157043/80608728-33fe6100-8a05-11ea-8b53-375303757b67.png)
         2. Scroll down past the changes to the comments. The first comment should be a `cypress-bot` comment that includes a line beginning `npm install ...`. Grab the `https://cdn.../npm/X.Y.Z/<long sha>/cypress.tgz` link.
             ![cdn-tgz-link](https://user-images.githubusercontent.com/1157043/80608736-3791e800-8a05-11ea-8d75-e4f80128e857.png)
+    - Make sure the linux binaries are present at that location. See [Before Publishing a New Version](#before-publishing-a-new-version).
     - Publish to the npm registry straight from the URL:
 
         ```shell
@@ -107,6 +114,8 @@ In the following instructions, "X.Y.Z" is used to denote the [next version of Cy
     - Run a quick, manual smoke test:
         - `cypress open`
         - Go into a project, run a quick test, make sure things look right
+    - Install the new version into an established project and run the tests there
+        - [cypress-realworld-app](https://github.com/cypress-io/cypress-realworld-app) uses yarn and represents a typical consumer implementation.
     - Optionally, do more thorough tests:
         - Trigger test projects from the command line (if you have the appropriate permissions)
 

npm/cypress-schematic/README.md

@@ -181,8 +181,7 @@ In order to bypass the prompt asking for your e2e spec name, simply add a `--nam
 ng generate @cypress/schematic:e2e --name=login
 ```
 
-This will create a new spec file named `login.spec.ts` in the default Cypress folder location.
-
+This will create a new spec file named `login.cy.ts` in the default Cypress folder location.
 
 ### Specify Project
 

npm/cypress-schematic/package.json

@@ -5,7 +5,6 @@
   "private": false,
   "main": "./src",
   "scripts": {
-    "add:angular-cli": "node ./add-angular-cli-dev.js",
     "build": "tsc -p tsconfig.json",
     "build:test": "tsc -p tsconfig.spec.json",
     "build:all": "tsc -p tsconfig.json && tsc -p tsconfig.spec.json",

npm/cypress-schematic/sandbox/.gitignore

@@ -31,6 +31,7 @@ chrome-profiler-events*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

npm/cypress-schematic/sandbox/package.json

@@ -10,22 +10,22 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "~12.0.0",
-    "@angular/common": "~12.0.0",
-    "@angular/compiler": "~12.0.0",
-    "@angular/core": "~12.0.0",
-    "@angular/forms": "~12.0.0",
-    "@angular/platform-browser": "~12.0.0",
-    "@angular/platform-browser-dynamic": "~12.0.0",
-    "@angular/router": "~12.0.0",
+    "@angular/animations": "~13.1.3",
+    "@angular/common": "~13.1.3",
+    "@angular/compiler": "~13.1.3",
+    "@angular/core": "~13.1.3",
+    "@angular/forms": "~13.1.3",
+    "@angular/platform-browser": "~13.1.3",
+    "@angular/platform-browser-dynamic": "~13.1.3",
+    "@angular/router": "~13.1.3",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.0",
-    "@angular/cli": "~12.0.0",
-    "@angular/compiler-cli": "~12.0.0",
+    "@angular-devkit/build-angular": "~13.1.4",
+    "@angular/cli": "~13.1.4",
+    "@angular/compiler-cli": "~13.1.3",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.7.0",
@@ -34,6 +34,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "typescript": "~4.2.3"
+    "typescript": "~4.5.5"
   }
-}
+}

npm/cypress-schematic/sandbox/src/polyfills.ts

@@ -18,18 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/**
- * IE11 requires the following for NgClass support on SVG elements
- */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

npm/cypress-schematic/sandbox/src/test.ts

@@ -17,7 +17,9 @@ declare const require: {
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false },
+  },
 )
 
 // Then we find all the tests.

npm/cypress-schematic/src/schematics/ng-add/files/cypress.config.ts

@@ -1,11 +1,5 @@
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
-  'integrationFolder': '<%= root%>cypress/integration',
-  'supportFile': '<%= root%>cypress/support/component.ts',
-  'videosFolder': '<%= root%>cypress/videos',
-  'screenshotsFolder': '<%= root%>cypress/screenshots',
-  'pluginsFile': '<%= root%>cypress/plugins/index.ts',
-  'fixturesFolder': '<%= root%>cypress/fixtures',
   'baseUrl': '<%= baseUrl%>',
 })

npm/cypress-schematic/src/schematics/ng-add/files/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "hello@cypress.io"
+}
+

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

@@ -1,7 +1,7 @@
 /// <reference path="../../../../../cli/types/mocha/index.d.ts" />
 
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'
-import { join, resolve } from 'path'
+import { join } from 'path'
 import { expect } from 'chai'
 
 describe('@cypress/schematic: ng-add', () => {
@@ -32,15 +32,15 @@ describe('@cypress/schematic: ng-add', () => {
   })
 
   it('should create cypress files', async () => {
-    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) => {
-      files.forEach((f) => {
-        const pathToFile = resolve(homePath, f)
-
-        expect(tree.exists(pathToFile), pathToFile).equal(true)
-      })
+      const files = tree.files
+
+      expect(files).to.contain('/projects/sandbox/cypress/e2e/spec.cy.ts')
+      expect(files).to.contain('/projects/sandbox/cypress/support/e2e.ts')
+      expect(files).to.contain('/projects/sandbox/cypress/support/commands.ts')
+      expect(files).to.contain('/projects/sandbox/cypress/tsconfig.json')
+      expect(files).to.contain('/projects/sandbox/cypress.config.ts')
+      expect(files).to.contain('/projects/sandbox/cypress/fixtures/example.json')
     })
   })
 })

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

@@ -1,5 +1,7 @@
+/// <reference path="../../../../../../cli/types/mocha/index.d.ts" />
+
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'
-import { join, resolve } from 'path'
+import { join } from 'path'
 import { expect } from 'chai'
 
 describe('@cypress/schematic:e2e ng-generate', () => {
@@ -28,16 +30,11 @@ describe('@cypress/schematic:e2e ng-generate', () => {
     appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise()
   })
 
-  it('should create cypress files', async () => {
-    const files = ['cypress/e2e/foo.cy.ts']
-    const homePath = '/projects/sandbox/'
-
+  it('should create cypress spec file', async () => {
     return schematicRunner.runSchematicAsync('e2e', { name: 'foo' }, appTree).toPromise().then((tree) => {
-      files.forEach((f) => {
-        const pathToFile = resolve(homePath, f)
+      const files = tree.files
 
-        expect(tree.exists(pathToFile), pathToFile).equal(true)
-      })
+      expect(files).to.contain('/projects/sandbox/cypress/e2e/foo.cy.ts')
     })
   })
 })

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

@@ -36,18 +36,22 @@ export default function (options: Schema): Rule {
     const host = createSpec(tree)
     const { workspace } = await workspaces.readWorkspace('/', host)
 
+    let project
+
     if (!options.project) {
-      // @ts-ignore
-      options.project = workspace.extensions.defaultProject
+      project = workspace.projects.get(workspace.extensions.defaultProject as string)
+    } else {
+      project = workspace.projects.get(options.project)
     }
 
-    //@ts-ignore
-    const project = workspace.projects.get(options.project)
-
     if (!project) {
       throw new SchematicsException(`Invalid project name: ${options.project}`)
     }
 
+    if (options.name === undefined) {
+      throw new SchematicsException(`No file name specified. This is required to generate a new Cypress file.`)
+    }
+
     if (options.path === undefined) {
       options.path = `${project.root}/cypress/e2e`
     }

npm/react/plugins/babel/index.d.ts

@@ -1,6 +1,6 @@
 import { Configuration } from "webpack";
 
-declare namespace legacyDevServer {
+declare namespace CypressBabelDevServer {
   interface CypressBabelDevServerConfig {
     /**
      * Allows to adjust the webpackConfig that our dev-server will use
@@ -31,6 +31,6 @@ declare namespace legacyDevServer {
  * @param config comes from the argument of the `pluginsFile` function
  * @param devServerConfig additional config object (create an empty object it to see how to use it)
  */
-declare function legacyDevServer(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, devServerConfig?: legacyDevServer.CypressBabelDevServerConfig): void
+declare function CypressBabelDevServer(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, devServerConfig?: CypressBabelDevServer.CypressBabelDevServerConfig): void
 
-export = legacyDevServer;
+export = CypressBabelDevServer;

npm/react/plugins/craco/index.d.ts

@@ -1,4 +1,4 @@
-declare namespace legacyDevServer {
+declare namespace CypressCracoDevServer {
   interface CypressCracoDevServerConfig {
     /**
      * The object exported of your craco.config.js file
@@ -27,6 +27,6 @@ declare namespace legacyDevServer {
  * @param config comes from the argument of the `pluginsFile` function
  * @param cracoConfig the object exported of your craco.config.js file
  */
-declare function legacyDevServer(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, cracoConfig: any): void
+declare function CypressCracoDevServer(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, cracoConfig: any): void
 
-export = legacyDevServer;
+export = CypressCracoDevServer;

npm/react/plugins/load-webpack/index.d.ts

@@ -1,4 +1,4 @@
-declare namespace legacyDevServer {
+declare namespace CypressWebpackDevServer {
   interface CypressWebpackDevServerConfig {
     /**
      * Location of the weppack.config Cypress should use
@@ -27,6 +27,6 @@ declare namespace legacyDevServer {
  * @param config comes from the argument of the `pluginsFile` function
  * @param devServerConfig additional config object (create an empty object to see how to use it)
  */
-declare function legacyDevServer(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, devServerConfig?: legacyDevServer.CypressWebpackDevServerConfig): void
+declare function CypressWebpackDevServer(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, devServerConfig?: CypressWebpackDevServer.CypressWebpackDevServerConfig): void
 
-export = legacyDevServer;
+export = CypressWebpackDevServer;