Merge pull request #24409 from cypress-io/release/11.0.0

feat(breaking): 11.0 Release

.circleci/config.yml

@@ -27,7 +27,7 @@ mainBuildFilters: &mainBuildFilters
     branches:
       only:
         - develop
-        - 'ryanm/feat/certificates'
+        - 'release/11.0.0'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -36,7 +36,7 @@ macWorkflowFilters: &darwin-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'ryanm/feat/certificates', << pipeline.git.branch >> ]
+    - equal: [ 'release/11.0.0', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -45,7 +45,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'feature/v8-snapshots', << pipeline.git.branch >> ]
+    - equal: [ 'release/11.0.0', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -63,7 +63,7 @@ windowsWorkflowFilters: &windows-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'feature/v8-snapshots', << pipeline.git.branch >> ]
+    - equal: [ 'release/11.0.0', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -130,7 +130,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "ryanm/feat/certificates" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/11.0.0" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

.gitignore

@@ -117,6 +117,9 @@ cli/visual-snapshots
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
 
+# Fleet
+.fleet/
+
 # User-specific stuff
 .idea
 .idea/**/workspace.xml

npm/angular/src/mount.ts

@@ -8,7 +8,7 @@ window.Mocha['__zone_patch__'] = false
 import 'zone.js/testing'
 
 import { CommonModule } from '@angular/common'
-import { Component, ErrorHandler, EventEmitter, Injectable, SimpleChange, SimpleChanges, Type } from '@angular/core'
+import { Component, ErrorHandler, EventEmitter, Injectable, SimpleChange, SimpleChanges, Type, OnChanges } from '@angular/core'
 import {
   ComponentFixture,
   getTestBed,
@@ -72,6 +72,23 @@ export interface MountConfig<T> extends TestModuleMetadata {
   componentProperties?: Partial<{ [P in keyof T]: T[P] }>
 }
 
+let activeFixture: ComponentFixture<any> | null = null
+
+function cleanup () {
+  // Not public, we need to call this to remove the last component from the DOM
+  try {
+    (getTestBed() as any).tearDownTestingModule()
+  } catch (e) {
+    const notSupportedError = new Error(`Failed to teardown component. The version of Angular you are using may not be officially supported.`)
+
+    ;(notSupportedError as any).docsUrl = 'https://on.cypress.io/component-framework-configuration'
+    throw notSupportedError
+  }
+
+  getTestBed().resetTestingModule()
+  activeFixture = null
+}
+
 /**
  * Type that the `mount` function returns
  * @type MountResponse<T>
@@ -163,22 +180,12 @@ function initTestBed<T> (
   component: Type<T> | string,
   config: MountConfig<T>,
 ): Type<T> {
-  const { providers, ...configRest } = config
-
   const componentFixture = createComponentFixture(component) as Type<T>
 
   getTestBed().configureTestingModule({
-    ...bootstrapModule(componentFixture, configRest),
+    ...bootstrapModule(componentFixture, config),
   })
 
-  if (providers != null) {
-    getTestBed().overrideComponent(componentFixture, {
-      add: {
-        providers,
-      },
-    })
-  }
-
   return componentFixture
 }
 
@@ -219,6 +226,8 @@ function setupFixture<T> (
 ): ComponentFixture<T> {
   const fixture = getTestBed().createComponent(component)
 
+  setupComponent(config, fixture)
+
   fixture.whenStable().then(() => {
     fixture.autoDetectChanges(config.autoDetectChanges ?? true)
   })
@@ -233,17 +242,18 @@ function setupFixture<T> (
  * @param {ComponentFixture<T>} fixture Fixture for debugging and testing a component.
  * @returns {T} Component being mounted
  */
-function setupComponent<T extends { ngOnChanges? (changes: SimpleChanges): void }> (
+function setupComponent<T> (
   config: MountConfig<T>,
-  fixture: ComponentFixture<T>): T {
-  let component: T = fixture.componentInstance
+  fixture: ComponentFixture<T>,
+): void {
+  let component = fixture.componentInstance as unknown as { [key: string]: any } & Partial<OnChanges>
 
   if (config?.componentProperties) {
     component = Object.assign(component, config.componentProperties)
   }
 
   if (config.autoSpyOutputs) {
-    Object.keys(component).forEach((key: string, index: number, keys: string[]) => {
+    Object.keys(component).forEach((key) => {
       const property = component[key]
 
       if (property instanceof EventEmitter) {
@@ -262,56 +272,61 @@ function setupComponent<T extends { ngOnChanges? (changes: SimpleChanges): void
       acc[key] = new SimpleChange(null, value, true)
 
       return acc
-    }, {})
+    }, {} as {[key: string]: SimpleChange})
 
     if (Object.keys(componentProperties).length > 0) {
       component.ngOnChanges(simpleChanges)
     }
   }
-
-  return component
 }
 
 /**
  * Mounts an Angular component inside Cypress browser
  *
- * @param {Type<T> | string} component Angular component being mounted or its template
- * @param {MountConfig<T>} config configuration used to configure the TestBed
+ * @param component Angular component being mounted or its template
+ * @param config configuration used to configure the TestBed
  * @example
- * import { HelloWorldComponent } from 'hello-world/hello-world.component'
+ * import { mount } from '@cypress/angular'
+ * import { StepperComponent } from './stepper.component'
  * import { MyService } from 'services/my.service'
  * import { SharedModule } from 'shared/shared.module';
- * import { mount } from '@cypress/angular'
- * it('can mount', () => {
- *  mount(HelloWorldComponent, {
- *    providers: [MyService],
- *    imports: [SharedModule]
- *  })
- *  cy.get('h1').contains('Hello World')
+ * it('mounts', () => {
+ *    mount(StepperComponent, {
+ *      providers: [MyService],
+ *      imports: [SharedModule]
+ *    })
+ *    cy.get('[data-cy=increment]').click()
+ *    cy.get('[data-cy=counter]').should('have.text', '1')
  * })
  *
- * or
+ * // or
  *
- * it('can mount with template', () => {
- *  mount('<app-hello-world></app-hello-world>', {
- *    declarations: [HelloWorldComponent],
- *    providers: [MyService],
- *    imports: [SharedModule]
- *  })
+ * it('mounts with template', () => {
+ *   mount('<app-stepper></app-stepper>', {
+ *     declarations: [StepperComponent],
+ *   })
  * })
- * @returns Cypress.Chainable<MountResponse<T>>
+ *
+ * @see {@link https://on.cypress.io/mounting-angular} for more details.
+ *
+ * @returns A component and component fixture
  */
 export function mount<T> (
   component: Type<T> | string,
   config: MountConfig<T> = { },
 ): Cypress.Chainable<MountResponse<T>> {
+  // Remove last mounted component if cy.mount is called more than once in a test
+  if (activeFixture) {
+    cleanup()
+  }
+
   const componentFixture = initTestBed(component, config)
-  const fixture = setupFixture(componentFixture, config)
-  const componentInstance = setupComponent(config, fixture)
+
+  activeFixture = setupFixture(componentFixture, config)
 
   const mountResponse: MountResponse<T> = {
-    fixture,
-    component: componentInstance,
+    fixture: activeFixture,
+    component: activeFixture.componentInstance,
   }
 
   const logMessage = typeof component === 'string' ? 'Component' : componentFixture.name
@@ -330,6 +345,15 @@ export function mount<T> (
  *
  * @param {string} alias name you want to use for your cy.spy() alias
  * @returns EventEmitter<T>
+ * @example
+ * import { StepperComponent } from './stepper.component'
+ * import { mount, createOutputSpy } from '@cypress/angular'
+ *
+ * it('Has spy', () => {
+ *   mount(StepperComponent, { change: createOutputSpy('changeSpy') })
+ *   cy.get('[data-cy=increment]').click()
+ *   cy.get('@changeSpy').should('have.been.called')
+ * })
  */
 export const createOutputSpy = <T>(alias: string) => {
   const emitter = new EventEmitter<T>()
@@ -348,8 +372,4 @@ getTestBed().initTestEnvironment(
   },
 )
 
-setupHooks(() => {
-  // Not public, we need to call this to remove the last component from the DOM
-  getTestBed()['tearDownTestingModule']()
-  getTestBed().resetTestingModule()
-})
+setupHooks(cleanup)

npm/angular/tsconfig.json

@@ -11,15 +11,15 @@
     "allowJs": true,
     "declaration": true,
     "outDir": "dist",
-    "strict": false,
-    "noImplicitAny": false,
+    "strict": true,
     "baseUrl": "./",
     "types": [
       "cypress"
     ],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "noPropertyAccessFromIndexSignature": true,
   },
   "include": ["src/**/*.*"],
   "exclude": ["src/**/*-spec.*"]

npm/mount-utils/README.md

@@ -25,11 +25,7 @@ All the functionality used to create the first party Mount adapters is available
 
 In addition, we recommend that Mount Adapters:
 
-- receive a second argument that extends `StyleOptions` from `@cypress/mount-utils`
-- calls `injectStylesBeforeElement` from `@cypress/mount-utils` before mounting the component
-- calls `setupHooks` to register the required lifecycle hooks for `@cypress/mount-utils` to work
-
-This will let the user inject styles `<style>...</style>` and stylesheets `<link rel="stylesheet">`, which is very useful for developing components.
+- call `setupHooks` to register the required lifecycle hooks for `@cypress/mount-utils` to work
 
 ### Example Mount Adapter: Web Components 
 
@@ -39,9 +35,7 @@ Here's a simple yet realistic example of Mount Adapter targeting Web Components.
 import {
   ROOT_SELECTOR,
   setupHooks,
-  injectStylesBeforeElement,
-  getContainerEl,
-  StyleOptions
+  getContainerEl
 } from "@cypress/mount-utils";
 
 Cypress.on("run:start", () => {
@@ -69,8 +63,7 @@ function maybeRegisterComponent<T extends CustomElementConstructor>(
 }
 
 export function mount(
-  webComponent: CustomElementConstructor,
-  options?: Partial<StyleOptions>
+  webComponent: CustomElementConstructor
 ): Cypress.Chainable {
   // Get root selector defined in `cypress/support.component-index.html
   const $root = document.querySelector(ROOT_SELECTOR)!;
@@ -83,9 +76,6 @@ export function mount(
   /// Register Web Component
   maybeRegisterComponent(name, webComponent);
 
-  // Inject user styles before mounting the component
-  injectStylesBeforeElement(options ?? {}, document, getContainerEl())
-
   // Render HTML containing component.
   $root.innerHTML = `<${name} id="root"></${name}>`;
 
@@ -100,8 +90,7 @@ export function mount(
   return cy.wrap(document.querySelector("#root"), { log: false });
 }
 
-// Setup Cypress lifecycle hooks. This tears down any styles
-// injected by injectStylesBeforeElement, etc.
+// Setup Cypress lifecycle hooks.
 setupHooks();
 ```
 
@@ -131,14 +120,7 @@ export class WebCounter extends HTMLElement {
 
 describe('web-component.cy.ts', () => {
   it('playground', () => {
-    cy.mount(WebCounter, {
-      styles: `
-        button {
-          background: lightblue;
-          color: white;
-        }
-      `
-    })
+    cy.mount(WebCounter)
   })
 })
 ```

npm/mount-utils/create-rollup-entry.mjs

@@ -4,6 +4,7 @@ import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import _ from 'lodash'
 import { readFileSync } from 'fs'
+import dts from 'rollup-plugin-dts'
 
 const pkg = JSON.parse(readFileSync('./package.json'))
 
@@ -33,7 +34,7 @@ export function createEntries (options) {
           check: format === 'es',
           tsconfigOverride: {
             compilerOptions: {
-              declaration: format === 'es',
+              declaration: false,
               target: 'es6',
               module: format === 'cjs' ? 'es2015' : 'esnext',
             },
@@ -67,5 +68,19 @@ export function createEntries (options) {
     console.log(`Building ${format}: ${finalConfig.output.file}`)
 
     return finalConfig
-  })
+  }).concat([{
+    input,
+    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    plugins: [
+      dts({ respectExternal: true }),
+      {
+        name: 'cypress-types-reference',
+        // rollup-plugin-dts does not add '// <reference types="cypress" />' like rollup-plugin-typescript2 did so we add it here.
+        renderChunk (...[code]) {
+          return `/// <reference types="cypress" />\n\n${code}`
+        },
+      },
+    ],
+    external: config.external || [],
+  }])
 }

npm/mount-utils/package.json

@@ -15,6 +15,7 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "rollup": "^2.38.5",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "^4.7.4"
   },