cypress 10.11.0 → 11.0.0

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/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

@@ -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)
   })
 })
 ```

package/mount-utils/dist/index.d.ts

@@ -1,54 +1,40 @@
+export declare const ROOT_SELECTOR = "[data-cy-root]";
 /**
- * Additional styles to inject into the document.
- * A component might need 3rd party libraries from CDN,
- * local CSS files and custom styles.
+ * Gets the root element used to mount the component.
+ * @returns {HTMLElement} The root element
+ * @throws {Error} If the root element is not found
  */
-export interface StyleOptions {
-    /**
-     * Creates <link href="..." /> element for each stylesheet
-     * @alias stylesheet
-     */
-    stylesheets: string | string[];
-    /**
-     * Creates <link href="..." /> element for each stylesheet
-     * @alias stylesheets
-     */
-    stylesheet: string | string[];
-    /**
-     * Creates <style>...</style> element and inserts given CSS.
-     * @alias styles
-     */
-    style: string | string[];
-    /**
-     * Creates <style>...</style> element for each given CSS text.
-     * @alias style
-     */
-    styles: string | string[];
-    /**
-     * Loads each file and creates a <style>...</style> element
-     * with the loaded CSS
-     * @alias cssFile
-     */
-    cssFiles: string | string[];
-    /**
-     * Single CSS file to load into a <style></style> element
-     * @alias cssFile
-     */
-    cssFile: string | string[];
-}
-export declare const ROOT_SELECTOR = "[data-cy-root]";
 export declare const getContainerEl: () => HTMLElement;
+export declare function checkForRemovedStyleOptions(mountingOptions: Record<string, any>): void;
+/**
+ * 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
+ */
+export declare function setupHooks(optionalCallback?: Function): void;
 /**
  * Remove any style or extra link elements from the iframe placeholder
  * left from any previous test
  *
+ * Removed as of Cypress 11.0.0
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
 export declare function cleanupStyles(): void;
+/**
+ * Additional styles to inject into the document.
+ * A component might need 3rd party libraries from CDN,
+ * local CSS files and custom styles.
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+export declare type StyleOptions = unknown;
 /**
  * Injects custom style text or CSS file or 3rd party style resources
  * into the given document.
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
 export declare const injectStylesBeforeElement: (options: Partial<StyleOptions & {
     log: boolean;
-}>, document: Document, el: HTMLElement | null) => HTMLElement;
-export declare function setupHooks(optionalCallback?: Function): void;
+}>, document: Document, el: HTMLElement | null) => void;