cypress 10.11.0 → 11.0.1

package/angular/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [@cypress/angular-v2.0.1](https://github.com/cypress-io/cypress/compare/@cypress/angular-v2.0.0...@cypress/angular-v2.0.1) (2022-11-08)
+
+
+### Bug Fixes
+
+* make component derived info not throw ([#24571](https://github.com/cypress-io/cypress/issues/24571)) ([838dd4f](https://github.com/cypress-io/cypress/commit/838dd4fa2e0ec56633d0af2faf10a47d190b5594))
+
+# [@cypress/angular-v2.0.0](https://github.com/cypress-io/cypress/compare/@cypress/angular-v1.1.2...@cypress/angular-v2.0.0) (2022-11-07)
+
+
+### Bug Fixes
+
+* possibility to override global services in Angular component tests ([#24394](https://github.com/cypress-io/cypress/issues/24394)) ([54d2853](https://github.com/cypress-io/cypress/commit/54d285321723450920e0f1d50374c4bd0590e72a))
+* remove last mounted component upon subsequent mount calls ([#24470](https://github.com/cypress-io/cypress/issues/24470)) ([f39eb1c](https://github.com/cypress-io/cypress/commit/f39eb1c19e0923bda7ae263168fc6448da942d54))
+
+
+### BREAKING CHANGES
+
+* remove last mounted component upon subsequent mount calls of mount
+
 # [@cypress/angular-v1.1.2](https://github.com/cypress-io/cypress/compare/@cypress/angular-v1.1.1...@cypress/angular-v1.1.2) (2022-10-11)
 
 

package/angular/README.md

@@ -1,85 +1,10 @@
 # @cypress/angular
 
-Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
-
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-angular#Configuring-Component-Testing) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be used for advanced use-cases.
-
-## Install
-
-- Requires Cypress v7.0.0 or later
-- Requires [Node](https://nodejs.org/en/) version 12 or above
-
-```sh
-npm install --save-dev @cypress/angular
-```
-
-## Run
-
-Open cypress test runner
-```
-npx cypress open --component
-```
-
-If you need to run test in CI
-```
-npx cypress run --component
-```
-
-For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
-
-## API
-
-- `mount` is the most important function, allows to mount a given Angular component as a mini web application and interact with it using Cypress commands
-- `MountConfig` Configuration used to configure your test
-- `createOutputSpy` factory function that creates new EventEmitter for your component and spies on it's `emit` method.
-
-## Examples
-
-```ts
-import { mount } from '@cypress/angular'
-import { HelloWorldComponent } from './hello-world.component'
-
-describe('HelloWorldComponent', () => {
-  it('works', () => {
-    mount(HelloWorldComponent)
-    // now use standard Cypress commands
-    cy.contains('Hello World!').should('be.visible')
-  })
-})
-```
-
-```ts
-import { mount } from '@cypress/angular'
-import { HelloWorldComponent } from './hello-world.component'
-
-describe('HelloWorldComponent', () => {
-  it('works', () => {
-    mount('<app-hello-world></app-hello-world>', {
-      declarations: [HelloWorldComponent]
-    })
-    // now use standard Cypress commands
-    cy.contains('Hello World!').should('be.visible')
-  })
-})
-```
-
-Look at the examples in [cypress-component-testing-apps](https://github.com/cypress-io/cypress-component-testing-apps) repo. Here in the `angular` and `angular-standalone` folders are the two example applications showing various testing scenarios.
-
-
-## Compatibility
-
-| @cypress/angular | cypress |
-| -------------- | ------- |
-| >= v1          | >= v10.5  |
+Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner
 
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/angular/overview) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be done for advanced use-cases.
 ## Development
 
 Run `yarn build` to compile and sync packages to the `cypress` cli package.
 
-## License
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
-
-This project is licensed under the terms of the [MIT license](/LICENSE).
-
 ## [Changelog](./CHANGELOG.md)

package/angular/dist/index.d.ts

@@ -1 +1,124 @@
-export * from './mount';
+/// <reference types="cypress" />
+
+import { Type } from '@angular/core';
+import { TestModuleMetadata, ComponentFixture } from '@angular/core/testing';
+
+/**
+ * Additional module configurations needed while mounting the component, like
+ * providers, declarations, imports and even component @Inputs()
+ *
+ *
+ * @interface MountConfig
+ * @see https://angular.io/api/core/testing/TestModuleMetadata
+ */
+interface MountConfig<T> extends TestModuleMetadata {
+    /**
+     * @memberof MountConfig
+     * @description flag to automatically create a cy.spy() for every component @Output() property
+     * @example
+     * export class ButtonComponent {
+     *  @Output clicked = new EventEmitter()
+     * }
+     *
+     * cy.mount(ButtonComponent, { autoSpyOutputs: true })
+     * cy.get('@clickedSpy).should('have.been.called')
+     */
+    autoSpyOutputs?: boolean;
+    /**
+     * @memberof MountConfig
+     * @description flag defaulted to true to automatically detect changes in your components
+     */
+    autoDetectChanges?: boolean;
+    /**
+     * @memberof MountConfig
+     * @example
+     * import { ButtonComponent } from 'button/button.component'
+     * it('renders a button with Save text', () => {
+     *  cy.mount(ButtonComponent, { componentProperties: { text: 'Save' }})
+     *  cy.get('button').contains('Save')
+     * })
+     *
+     * it('renders a button with a cy.spy() replacing EventEmitter', () => {
+     *  cy.mount(ButtonComponent, {
+     *    componentProperties: {
+     *      clicked: cy.spy().as('mySpy)
+     *    }
+     *  })
+     *  cy.get('button').click()
+     *  cy.get('@mySpy').should('have.been.called')
+     * })
+     */
+    componentProperties?: Partial<{
+        [P in keyof T]: T[P];
+    }>;
+}
+/**
+ * Type that the `mount` function returns
+ * @type MountResponse<T>
+ */
+declare type MountResponse<T> = {
+    /**
+     * Fixture for debugging and testing a component.
+     *
+     * @memberof MountResponse
+     * @see https://angular.io/api/core/testing/ComponentFixture
+     */
+    fixture: ComponentFixture<T>;
+    /**
+     * The instance of the root component class
+     *
+     * @memberof MountResponse
+     * @see https://angular.io/api/core/testing/ComponentFixture#componentInstance
+     */
+    component: T;
+};
+/**
+ * Mounts an Angular component inside Cypress browser
+ *
+ * @param component Angular component being mounted or its template
+ * @param config configuration used to configure the TestBed
+ * @example
+ * import { mount } from '@cypress/angular'
+ * import { StepperComponent } from './stepper.component'
+ * import { MyService } from 'services/my.service'
+ * import { SharedModule } from 'shared/shared.module';
+ * it('mounts', () => {
+ *    mount(StepperComponent, {
+ *      providers: [MyService],
+ *      imports: [SharedModule]
+ *    })
+ *    cy.get('[data-cy=increment]').click()
+ *    cy.get('[data-cy=counter]').should('have.text', '1')
+ * })
+ *
+ * // or
+ *
+ * it('mounts with template', () => {
+ *   mount('<app-stepper></app-stepper>', {
+ *     declarations: [StepperComponent],
+ *   })
+ * })
+ *
+ * @see {@link https://on.cypress.io/mounting-angular} for more details.
+ *
+ * @returns A component and component fixture
+ */
+declare function mount<T>(component: Type<T> | string, config?: MountConfig<T>): Cypress.Chainable<MountResponse<T>>;
+/**
+ * Creates a new Event Emitter and then spies on it's `emit` method
+ *
+ * @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')
+ * })
+ */
+declare const createOutputSpy: <T>(alias: string) => any;
+
+export { MountConfig, MountResponse, createOutputSpy, mount };

package/angular/dist/index.js

@@ -47,27 +47,11 @@ function __decorate(decorators, target, key, desc) {
 }
 
 /**
- * Remove any style or extra link elements from the iframe placeholder
- * left from any previous test
- *
+ * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
+ * @param optionalCallback Callback to be called before the next test runs
  */
-function cleanupStyles() {
-    const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
-    styles.forEach((styleElement) => {
-        if (styleElement.parentElement) {
-            styleElement.parentElement.removeChild(styleElement);
-        }
-    });
-    const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
-    links.forEach((link) => {
-        if (link.parentElement) {
-            link.parentElement.removeChild(link);
-        }
-    });
-}
 function setupHooks(optionalCallback) {
-    // Consumed by the framework "mount" libs. A user might register their own mount in the scaffolded 'commands.js'
-    // file that is imported by e2e and component support files by default. We don't want CT side effects to run when e2e
+    // We don't want CT side effects to run when e2e
     // testing so we early return.
     // System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
     if (Cypress.testingType !== 'component') {
@@ -82,7 +66,6 @@ function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
 
@@ -91,6 +74,20 @@ function setupHooks(optionalCallback) {
  */
 // @ts-ignore
 window.Mocha['__zone_patch__'] = false;
+let activeFixture = null;
+function cleanup() {
+    // Not public, we need to call this to remove the last component from the DOM
+    try {
+        getTestBed().tearDownTestingModule();
+    }
+    catch (e) {
+        const notSupportedError = new Error(`Failed to teardown component. The version of Angular you are using may not be officially supported.`);
+        notSupportedError.docsUrl = 'https://on.cypress.io/component-framework-configuration';
+        throw notSupportedError;
+    }
+    getTestBed().resetTestingModule();
+    activeFixture = null;
+}
 // 'zone.js/testing' is not properly aliasing `it.skip` but it does provide `xit`/`xspecify`
 // Written up under https://github.com/angular/angular/issues/46297 but is not seeing movement
 // so we'll patch here pending a fix in that library
@@ -111,6 +108,7 @@ CypressAngularErrorHandler = __decorate([
  * @returns {MountConfig} MountConfig
  */
 function bootstrapModule(component, config) {
+    var _a;
     const testModuleMetaData = __rest(config, ["componentProperties"]);
     if (!testModuleMetaData.declarations) {
         testModuleMetaData.declarations = [];
@@ -128,7 +126,7 @@ function bootstrapModule(component, config) {
         useClass: CypressAngularErrorHandler,
     });
     // check if the component is a standalone component
-    if (component.ɵcmp.standalone) {
+    if ((_a = component.ɵcmp) === null || _a === void 0 ? void 0 : _a.standalone) {
         testModuleMetaData.imports.push(component);
     }
     else {
@@ -147,16 +145,8 @@ function bootstrapModule(component, config) {
  * @returns {Type<T>} componentFixture
  */
 function initTestBed(component, config) {
-    const { providers } = config, configRest = __rest(config, ["providers"]);
     const componentFixture = createComponentFixture(component);
-    getTestBed().configureTestingModule(Object.assign({}, bootstrapModule(componentFixture, configRest)));
-    if (providers != null) {
-        getTestBed().overrideComponent(componentFixture, {
-            add: {
-                providers,
-            },
-        });
-    }
+    getTestBed().configureTestingModule(Object.assign({}, bootstrapModule(componentFixture, config)));
     return componentFixture;
 }
 let WrapperComponent = class WrapperComponent {
@@ -189,6 +179,7 @@ function createComponentFixture(component) {
  */
 function setupFixture(component, config) {
     const fixture = getTestBed().createComponent(component);
+    setupComponent(config, fixture);
     fixture.whenStable().then(() => {
         var _a;
         fixture.autoDetectChanges((_a = config.autoDetectChanges) !== null && _a !== void 0 ? _a : true);
@@ -208,7 +199,7 @@ function setupComponent(config, fixture) {
         component = Object.assign(component, config.componentProperties);
     }
     if (config.autoSpyOutputs) {
-        Object.keys(component).forEach((key, index, keys) => {
+        Object.keys(component).forEach((key) => {
             const property = component[key];
             if (property instanceof EventEmitter) {
                 component[key] = createOutputSpy(`${key}Spy`);
@@ -228,44 +219,48 @@ function setupComponent(config, fixture) {
             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
  */
 function mount(component, config = {}) {
+    // 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 = {
-        fixture,
-        component: componentInstance,
+        fixture: activeFixture,
+        component: activeFixture.componentInstance,
     };
     const logMessage = typeof component === 'string' ? 'Component' : componentFixture.name;
     Cypress.log({
@@ -280,6 +275,15 @@ function mount(component, config = {}) {
  *
  * @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')
+ * })
  */
 const createOutputSpy = (alias) => {
     const emitter = new EventEmitter();
@@ -290,10 +294,6 @@ const createOutputSpy = (alias) => {
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false },
 });
-setupHooks(() => {
-    // Not public, we need to call this to remove the last component from the DOM
-    getTestBed()['tearDownTestingModule']();
-    getTestBed().resetTestingModule();
-});
+setupHooks(cleanup);
 
 export { createOutputSpy, mount };

package/lib/cli.js

@@ -331,9 +331,23 @@ module.exports = {
     }
 
     const {
-      CYPRESS_INTERNAL_ENV
+      CYPRESS_INTERNAL_ENV,
+      CYPRESS_DOWNLOAD_USE_CA
     } = process.env;
 
+    if (process.env.CYPRESS_DOWNLOAD_USE_CA) {
+      let msg = `
+        ${logSymbols.warning} Warning: It looks like you're setting CYPRESS_DOWNLOAD_USE_CA=${CYPRESS_DOWNLOAD_USE_CA}
+
+        The environment variable "CYPRESS_DOWNLOAD_USE_CA" is no longer required to be set.
+        
+        You can safely unset this environment variable.
+      `;
+      logger.log();
+      logger.warn(stripIndent(msg));
+      logger.log();
+    }
+
     if (!util.isValidCypressInternalEnvValue(CYPRESS_INTERNAL_ENV)) {
       debug('invalid CYPRESS_INTERNAL_ENV value', CYPRESS_INTERNAL_ENV);
       return errors.exitWithError(errors.errors.invalidCypressEnv)(`CYPRESS_INTERNAL_ENV=${CYPRESS_INTERNAL_ENV}`);

package/lib/tasks/download.js

@@ -56,18 +56,14 @@ const getBaseUrl = () => {
 
 const getCA = () => {
   return new Promise(resolve => {
-    if (!util.getEnv('CYPRESS_DOWNLOAD_USE_CA')) {
-      resolve();
-    }
-
-    if (process.env.npm_config_ca) {
-      resolve(process.env.npm_config_ca);
-    } else if (process.env.npm_config_cafile) {
+    if (process.env.npm_config_cafile) {
       fs.readFile(process.env.npm_config_cafile, 'utf8').then(cafileContent => {
         resolve(cafileContent);
       }).catch(() => {
         resolve();
       });
+    } else if (process.env.npm_config_ca) {
+      resolve(process.env.npm_config_ca);
     } else {
       resolve();
     }

package/lib/util.js

@@ -151,7 +151,7 @@ function isValidCypressInternalEnvValue(value) {
   if (_.isUndefined(value)) {
     // will get default value
     return true;
-  } // names of config environments, see "packages/server/config/app.yml"
+  } // names of config environments, see "packages/server/config/app.json"
 
 
   const names = ['development', 'test', 'staging', 'production'];
@@ -245,7 +245,7 @@ const getApplicationDataFolder = (...paths) => {
     env
   } = process; // allow overriding the app_data folder
 
-  let folder = env.CYPRESS_KONFIG_ENV || env.CYPRESS_INTERNAL_ENV || 'development';
+  let folder = env.CYPRESS_CONFIG_ENV || env.CYPRESS_INTERNAL_ENV || 'development';
   const PRODUCT_NAME = pkg.productName || pkg.name;
   const OS_DATA_PATH = ospath.data();
   const ELECTRON_APP_DATA_PATH = path.join(OS_DATA_PATH, PRODUCT_NAME);

package/mount-utils/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@cypress/mount-utils-v3.0.0](https://github.com/cypress-io/cypress/compare/@cypress/mount-utils-v2.1.0...@cypress/mount-utils-v3.0.0) (2022-11-07)
+
+
+### Bug Fixes
+
+* remove dependence on @cypress/<dep> types ([#24415](https://github.com/cypress-io/cypress/issues/24415)) ([58e0ab9](https://github.com/cypress-io/cypress/commit/58e0ab91604618ea6f75932622f7e66e419270e6))
+* remove last mounted component upon subsequent mount calls ([#24470](https://github.com/cypress-io/cypress/issues/24470)) ([f39eb1c](https://github.com/cypress-io/cypress/commit/f39eb1c19e0923bda7ae263168fc6448da942d54))
+* remove some CT functions and props ([#24419](https://github.com/cypress-io/cypress/issues/24419)) ([294985f](https://github.com/cypress-io/cypress/commit/294985f8b3e0fa00ed66d25f88c8814603766074))
+
+
+### BREAKING CHANGES
+
+* remove last mounted component upon subsequent mount calls of mount
+
 # [@cypress/mount-utils-v2.1.0](https://github.com/cypress-io/cypress/compare/@cypress/mount-utils-v2.0.1...@cypress/mount-utils-v2.1.0) (2022-08-30)
 
 

package/mount-utils/README.md

@@ -2,7 +2,7 @@
 
 > **Note** this package is not meant to be used outside of cypress component testing.
 
-This librares exports some shared types and utility functions designed to build adapters for components frameworks.
+This library exports some shared types and utility functions designed to build adapters for components frameworks.
 
 It is used in:
 
@@ -22,14 +22,11 @@ All the functionality used to create the first party Mount adapters is available
 
 - Receive a component as the first argument. This could be class, function etc - depends on the framework.
 - Return a Cypress Chainable (for example using `cy.wrap`) that resolves whatever is idiomatic for your framework
+- Call `getContainerEl` to access the root DOM element
 
 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 +36,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 +64,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 +77,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 +91,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 +121,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)
   })
 })
 ```