cypress 10.3.0 → 10.5.0

package/angular/CHANGELOG.md

@@ -0,0 +1,55 @@
+# @cypress/angular-v1.0.0 (2022-08-04)
+
+
+### Bug Fixes
+
+* **angular:** set rxjs versions > 6.6.0 as dependency ([#16676](https://github.com/cypress-io/cypress/issues/16676)) ([46de81e](https://github.com/cypress-io/cypress/commit/46de81e75fd18bc37cb884e9a751106fff4d08ad))
+* scaffold correct config file ([#19776](https://github.com/cypress-io/cypress/issues/19776)) ([8f32960](https://github.com/cypress-io/cypress/commit/8f32960ef803f539f065d41f01fff33bfe33ed5d))
+* scope config to current testing type ([#20677](https://github.com/cypress-io/cypress/issues/20677)) ([61f7cfc](https://github.com/cypress-io/cypress/commit/61f7cfc59284a2938e0a1c15d74ee75215ba5f8b))
+* terminal error message for non migrated config ([#21467](https://github.com/cypress-io/cypress/issues/21467)) ([3274da7](https://github.com/cypress-io/cypress/commit/3274da7842f5ef1ddad62b1c630d0ff9120e4289))
+* update scaffold template to use correct path ([#20047](https://github.com/cypress-io/cypress/issues/20047)) ([6e80359](https://github.com/cypress-io/cypress/commit/6e803597a379222cf936e5977c8314d693ee1912))
+
+
+### Features
+
+* add devServer to config file ([#18962](https://github.com/cypress-io/cypress/issues/18962)) ([2573375](https://github.com/cypress-io/cypress/commit/2573375b5b6616efd2d213a94cd55fd8e0385864))
+* **angular:** angular mount ([#22858](https://github.com/cypress-io/cypress/issues/22858)) ([4131b1f](https://github.com/cypress-io/cypress/commit/4131b1fa8482ae08113bef337965baa1ac12f66c))
+* Deprecate run-ct / open-ct, and update all examples to use --ct instead ([#18422](https://github.com/cypress-io/cypress/issues/18422)) ([196e8f6](https://github.com/cypress-io/cypress/commit/196e8f62cc6d27974f235945cb5700624b3dae41))
+* ProjectLifecycleManager & general launchpad cleanup ([#19347](https://github.com/cypress-io/cypress/issues/19347)) ([4626f74](https://github.com/cypress-io/cypress/commit/4626f7481c9904fec484aa167a02e0197a3095c4))
+* remove testFiles reference ([#20565](https://github.com/cypress-io/cypress/issues/20565)) ([5670344](https://github.com/cypress-io/cypress/commit/567034459089d9d53dfab5556cb9369fb335c3db))
+* support specPattern, deprecate integrationFolder and componentFolder ([#19319](https://github.com/cypress-io/cypress/issues/19319)) ([792980a](https://github.com/cypress-io/cypress/commit/792980ac12746ef47b9c944ebe4c6c353a187ab2))
+* support webpack-dev-server v4 ([#17918](https://github.com/cypress-io/cypress/issues/17918)) ([16e4759](https://github.com/cypress-io/cypress/commit/16e4759e0196f68c5f0525efb020211337748f94))
+* swap the #__cy_root id selector to become data-cy-root for component mounting ([#20951](https://github.com/cypress-io/cypress/issues/20951)) ([0e7b555](https://github.com/cypress-io/cypress/commit/0e7b555f93fb403f431c5de4a07ae7ad6ac89ba2))
+* Use .config files ([#18578](https://github.com/cypress-io/cypress/issues/18578)) ([081dd19](https://github.com/cypress-io/cypress/commit/081dd19cc6da3da229a7af9c84f62730c85a5cd6))
+* use devServer instad of startDevServer ([#20092](https://github.com/cypress-io/cypress/issues/20092)) ([8a6768f](https://github.com/cypress-io/cypress/commit/8a6768fee6f46b908c5a9daf23da8b804a6c627f))
+* use hoisted yarn install in binary build ([#17285](https://github.com/cypress-io/cypress/issues/17285)) ([e4f5b10](https://github.com/cypress-io/cypress/commit/e4f5b106d49d6ac0857c5fdac886f83b99558c88))
+* Use plugins on config files ([#18798](https://github.com/cypress-io/cypress/issues/18798)) ([bb8251b](https://github.com/cypress-io/cypress/commit/bb8251b752ac44f1184f9160194cf12d41fc867f))
+* use supportFile by testingType ([#19364](https://github.com/cypress-io/cypress/issues/19364)) ([0366d4f](https://github.com/cypress-io/cypress/commit/0366d4fa8971e5e5189c6fd6450cc3c8d72dcfe1))
+
+# @cypress/angular-v1.0.0 (2022-08-04)
+
+
+### Bug Fixes
+
+* **angular:** set rxjs versions > 6.6.0 as dependency ([#16676](https://github.com/cypress-io/cypress/issues/16676)) ([46de81e](https://github.com/cypress-io/cypress/commit/46de81e75fd18bc37cb884e9a751106fff4d08ad))
+* scaffold correct config file ([#19776](https://github.com/cypress-io/cypress/issues/19776)) ([8f32960](https://github.com/cypress-io/cypress/commit/8f32960ef803f539f065d41f01fff33bfe33ed5d))
+* scope config to current testing type ([#20677](https://github.com/cypress-io/cypress/issues/20677)) ([61f7cfc](https://github.com/cypress-io/cypress/commit/61f7cfc59284a2938e0a1c15d74ee75215ba5f8b))
+* terminal error message for non migrated config ([#21467](https://github.com/cypress-io/cypress/issues/21467)) ([3274da7](https://github.com/cypress-io/cypress/commit/3274da7842f5ef1ddad62b1c630d0ff9120e4289))
+* update scaffold template to use correct path ([#20047](https://github.com/cypress-io/cypress/issues/20047)) ([6e80359](https://github.com/cypress-io/cypress/commit/6e803597a379222cf936e5977c8314d693ee1912))
+
+
+### Features
+
+* add devServer to config file ([#18962](https://github.com/cypress-io/cypress/issues/18962)) ([2573375](https://github.com/cypress-io/cypress/commit/2573375b5b6616efd2d213a94cd55fd8e0385864))
+* **angular:** angular mount ([#22858](https://github.com/cypress-io/cypress/issues/22858)) ([4131b1f](https://github.com/cypress-io/cypress/commit/4131b1fa8482ae08113bef337965baa1ac12f66c))
+* Deprecate run-ct / open-ct, and update all examples to use --ct instead ([#18422](https://github.com/cypress-io/cypress/issues/18422)) ([196e8f6](https://github.com/cypress-io/cypress/commit/196e8f62cc6d27974f235945cb5700624b3dae41))
+* ProjectLifecycleManager & general launchpad cleanup ([#19347](https://github.com/cypress-io/cypress/issues/19347)) ([4626f74](https://github.com/cypress-io/cypress/commit/4626f7481c9904fec484aa167a02e0197a3095c4))
+* remove testFiles reference ([#20565](https://github.com/cypress-io/cypress/issues/20565)) ([5670344](https://github.com/cypress-io/cypress/commit/567034459089d9d53dfab5556cb9369fb335c3db))
+* support specPattern, deprecate integrationFolder and componentFolder ([#19319](https://github.com/cypress-io/cypress/issues/19319)) ([792980a](https://github.com/cypress-io/cypress/commit/792980ac12746ef47b9c944ebe4c6c353a187ab2))
+* support webpack-dev-server v4 ([#17918](https://github.com/cypress-io/cypress/issues/17918)) ([16e4759](https://github.com/cypress-io/cypress/commit/16e4759e0196f68c5f0525efb020211337748f94))
+* swap the #__cy_root id selector to become data-cy-root for component mounting ([#20951](https://github.com/cypress-io/cypress/issues/20951)) ([0e7b555](https://github.com/cypress-io/cypress/commit/0e7b555f93fb403f431c5de4a07ae7ad6ac89ba2))
+* Use .config files ([#18578](https://github.com/cypress-io/cypress/issues/18578)) ([081dd19](https://github.com/cypress-io/cypress/commit/081dd19cc6da3da229a7af9c84f62730c85a5cd6))
+* use devServer instad of startDevServer ([#20092](https://github.com/cypress-io/cypress/issues/20092)) ([8a6768f](https://github.com/cypress-io/cypress/commit/8a6768fee6f46b908c5a9daf23da8b804a6c627f))
+* use hoisted yarn install in binary build ([#17285](https://github.com/cypress-io/cypress/issues/17285)) ([e4f5b10](https://github.com/cypress-io/cypress/commit/e4f5b106d49d6ac0857c5fdac886f83b99558c88))
+* Use plugins on config files ([#18798](https://github.com/cypress-io/cypress/issues/18798)) ([bb8251b](https://github.com/cypress-io/cypress/commit/bb8251b752ac44f1184f9160194cf12d41fc867f))
+* use supportFile by testingType ([#19364](https://github.com/cypress-io/cypress/issues/19364)) ([0366d4f](https://github.com/cypress-io/cypress/commit/0366d4fa8971e5e5189c6fd6450cc3c8d72dcfe1))

package/angular/README.md

@@ -0,0 +1,154 @@
+> A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
+
+**Jump to:** [Comparison](#comparison), [Blog posts](#blog-posts), [Install](#install), Examples: [basic](#basic-examples), [advanced](#advanced-examples), [full](#full-examples), [external](#external-examples), [Style options](#options), [Code coverage](#code-coverage), [Visual testing](#visual-testing), [Common problems](#common-problems), [Chat](#chat)
+
+## TLDR
+
+- What is this? This package allows you to use [Cypress](https://www.cypress.io/) test runner to unit test your Angular components with zero effort. Here is a typical component testing, notice there is not external URL shown, since it is mounting the component directly.
+
+![Example component test](images/dynamic.gif)
+
+- How is this different from [Angular Testing](https://angular.io/guide/testing) or [ATL](https://testing-library.com/docs/angular-testing-library/intro/)? It is similar in functionality BUT runs the component in the real browser with full power of Cypress E2E test runner: [live GUI, full API, screen recording, CI support, cross-platform](https://www.cypress.io/features/), and [visual testing](https://on.cypress.io/visual-testing). 
+- Read [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/) by Gleb Bahmutov
+
+## Comparison
+
+<!-- prettier-ignore-start -->
+Feature | Jest / Karma / ATL | Cypress + `@cypress/angular`
+--- | --- | ---
+Test runs in real browser | ❌ | ✅
+Supports shallow mount | ✅ | ❌
+Supports full mount | ✅ | ✅
+Test speed | 🏎 | [as fast as the app works in the browser](#fast-enough)
+Test can use additional plugins | maybe | use any [Cypress plugin](https://on.cypress.io/plugins)
+Test can interact with component | synthetic limited API | use any [Cypress command](https://on.cypress.io/api)
+Test can be debugged | via terminal and Node debugger | use browser DevTools
+Built-in time traveling debugger | ❌ | Cypress time traveling debugger
+Re-run tests on file or test change | ✅ | ✅
+Test output on CI | terminal | terminal, screenshots, videos
+Tests can be run in parallel | ✅ | ✅ via [parallelization](https://on.cypress.io/parallelization)
+Test against interface | if using `@testing-library/angular` | ✅ and can use `@testing-library/cypress`
+Spying and stubbing methods | Jest mocks | [Sinon library](https://on.cypress.io/stubs-spies-and-clocks)
+Stubbing imports | ✅ | ✅
+Stubbing clock | ✅ | ✅
+Code coverage | ✅ | ✅
+<!-- prettier-ignore-end -->
+
+If you are coming from Jest + ATL world, read [Test The Interface Not The Implementation](https://glebbahmutov.com/blog/test-the-interface/).
+
+## Blog posts
+
+- [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/)
+
+## Install
+
+Requires [Node](https://nodejs.org/en/) version 12 or above.
+
+```sh
+npm install --save-dev cypress @cypress/angular @cypress/webpack-dev-server
+```
+
+
+## API
+
+- `mount` allows you to mount a given Angular component as a mini web application and interact with it using Cypress commands
+
+## 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')
+  })
+})
+```
+
+Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
+
+### Basic examples
+Coming Soon...
+
+
+### Advanced examples
+Coming Soon...
+
+### Full examples
+Coming Soon...
+
+### External examples
+Coming Soon...
+
+## Options
+
+
+## Code coverage
+
+In order to use code coverage you can follow the instructions from [docs](https://github.com/cypress-io/code-coverage). In most of cases you need to install 2 dependencies: 
+
+```
+npm i @cypress/code-coverage babel-plugin-istanbul
+
+yarn add @cypress/code-coverage babel-plugin-istanbul
+```
+
+If you are using [plugins/cra-v3](plugins/cra-v3) it instruments the code on the fly using `babel-plugin-istanbul` and generates report using dependency [cypress-io/code-coverage](https://github.com/cypress-io/code-coverage) (included). If you want to disable code coverage instrumentation and reporting, use `--env coverage=false` or `CYPRESS_coverage=false` or set in your `cypress.json` file
+
+```json
+{
+  "env": {
+    "coverage": false
+  }
+}
+```
+
+## Visual testing
+
+You can use any Cypress [Visual Testing plugin](https://on.cypress.io/plugins#visual-testing) to perform [visual testing](https://on.cypress.io/visual-testing) from the component tests. This repo has several example projects, see [visual-sudoku](examples/visual-sudoku), [visual-testing-with-percy](examples/visual-testing-with-percy), [visual-testing-with-happo](examples/visual-testing-with-happo), and [visual-testing-with-applitools](examples/visual-testing-with-applitools).
+
+For a larger Do-It-Yourself example with an hour long list of explanation videos, see [bahmutov/sudoku](https://github.com/bahmutov/sudoku) repository. I explain how to write visual testing using open source tools in this [blog post](https://glebbahmutov.com/blog/open-source-visual-testing-of-components/), [video talk](https://www.youtube.com/watch?v=00BNExlJUU8), and [slides](https://slides.com/bahmutov/i-see-what-is-going-on).
+
+## Common problems
+
+
+## Chat
+
+Come chat with us [on discord](https://discord.gg/7ZHYhZSW) in the #component-testing channel.
+
+## Development
+
+See [docs/development.md](./docs/development.md)
+
+## Debugging
+
+You can see verbose logs from this plugin by running with environment variable
+
+```
+DEBUG=@cypress/angular
+```
+
+Because finding and modifying Webpack settings while running this plugin is done by [find-webpack](https://github.com/bahmutov/find-webpack) module, you might want to enable its debug messages too.
+
+```
+DEBUG=@cypress/angular,find-webpack
+```
+
+## Changelog
+
+[Changelog](./CHANGELOG.md)
+
+## Related tools
+
+Same feature for unit testing components from other frameworks using Cypress
+
+- [@cypress/react](https://github.com/cypress-io/cypress/tree/develop/npm/react)
+- [@cypress/vue](https://github.com/cypress-io/cypress/tree/develop/npm/vue)
+- [cypress-cycle-unit-test](https://github.com/bahmutov/cypress-cycle-unit-test)
+- [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test)
+- [@cypress/angular](https://github.com/bahmutov/@cypress/angular)
+- [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test)
+- [cypress-angularjs-unit-test](https://github.com/bahmutov/cypress-angularjs-unit-test)

package/angular/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './mount';

package/angular/dist/index.js

@@ -0,0 +1,263 @@
+
+/**
+ * @cypress/angular v0.0.0-development
+ * (c) 2022 Cypress.io
+ * Released under the MIT License
+ */
+
+import 'zone.js';
+import 'zone.js/testing';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter } from '@angular/core';
+import { getTestBed, TestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+/**
+ * Remove any style or extra link elements from the iframe placeholder
+ * left from any previous test
+ *
+ */
+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
+    // 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') {
+        return;
+    }
+    // When running component specs, we cannot allow "cy.visit"
+    // because it will wipe out our preparation work, and does not make much sense
+    // thus we overwrite "cy.visit" to throw an error
+    Cypress.Commands.overwrite('visit', () => {
+        throw new Error('cy.visit from a component spec is not allowed');
+    });
+    // @ts-ignore
+    Cypress.on('test:before:run', () => {
+        optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
+        cleanupStyles();
+    });
+}
+
+/**
+ * @hack fixes "Mocha has already been patched with Zone" error.
+ */
+// @ts-ignore
+window.Mocha['__zone_patch__'] = false;
+/**
+ * Bootstraps the TestModuleMetaData passed to the TestBed
+ *
+ * @param {Type<T>} component Angular component being mounted
+ * @param {MountConfig} config TestBed configuration passed into the mount function
+ * @returns {MountConfig} MountConfig
+ */
+function bootstrapModule(component, config) {
+    const testModuleMetaData = __rest(config, ["componentProperties"]);
+    if (!testModuleMetaData.declarations) {
+        testModuleMetaData.declarations = [];
+    }
+    if (!testModuleMetaData.imports) {
+        testModuleMetaData.imports = [];
+    }
+    // check if the component is a standalone component
+    if (component.ɵcmp.standalone) {
+        testModuleMetaData.imports.push(component);
+    }
+    else {
+        testModuleMetaData.declarations.push(component);
+    }
+    if (!testModuleMetaData.imports.includes(CommonModule)) {
+        testModuleMetaData.imports.push(CommonModule);
+    }
+    return testModuleMetaData;
+}
+/**
+ * Initializes the TestBed
+ *
+ * @param {Type<T> | string} component Angular component being mounted or its template
+ * @param {MountConfig} config TestBed configuration passed into the mount function
+ * @returns {Type<T>} componentFixture
+ */
+function initTestBed(component, config) {
+    const { providers } = config, configRest = __rest(config, ["providers"]);
+    const componentFixture = createComponentFixture(component);
+    TestBed.configureTestingModule(Object.assign({}, bootstrapModule(componentFixture, configRest)));
+    if (providers != null) {
+        TestBed.overrideComponent(componentFixture, {
+            add: {
+                providers,
+            },
+        });
+    }
+    return componentFixture;
+}
+let WrapperComponent = class WrapperComponent {
+};
+WrapperComponent = __decorate([
+    Component({ selector: 'cy-wrapper-component', template: '' })
+], WrapperComponent);
+/**
+ * Returns the Component if Type<T> or creates a WrapperComponent
+ *
+ * @param {Type<T> | string} component The component you want to create a fixture of
+ * @returns {Type<T> | WrapperComponent}
+ */
+function createComponentFixture(component) {
+    if (typeof component === 'string') {
+        TestBed.overrideTemplate(WrapperComponent, component);
+        return WrapperComponent;
+    }
+    return component;
+}
+/**
+ * Creates the ComponentFixture
+ *
+ * @param {Type<T>} component Angular component being mounted
+ * @param {MountConfig<T>} config MountConfig
+
+ * @returns {ComponentFixture<T>} ComponentFixture
+ */
+function setupFixture(component, config) {
+    const fixture = TestBed.createComponent(component);
+    fixture.whenStable().then(() => {
+        var _a;
+        fixture.autoDetectChanges((_a = config.autoDetectChanges) !== null && _a !== void 0 ? _a : true);
+    });
+    return fixture;
+}
+/**
+ * Gets the componentInstance and Object.assigns any componentProperties() passed in the MountConfig
+ *
+ * @param {MountConfig} config TestBed configuration passed into the mount function
+ * @param {ComponentFixture<T>} fixture Fixture for debugging and testing a component.
+ * @returns {T} Component being mounted
+ */
+function setupComponent(config, fixture) {
+    let component = fixture.componentInstance;
+    if (config === null || config === void 0 ? void 0 : config.componentProperties) {
+        component = Object.assign(component, config.componentProperties);
+    }
+    if (config.autoSpyOutputs) {
+        Object.keys(component).forEach((key, index, keys) => {
+            const property = component[key];
+            if (property instanceof EventEmitter) {
+                component[key] = createOutputSpy(`${key}Spy`);
+            }
+        });
+    }
+    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
+ * @example
+ * import { HelloWorldComponent } from 'hello-world/hello-world.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')
+ * })
+ *
+ * or
+ *
+ * it('can mount with template', () => {
+ *  mount('<app-hello-world></app-hello-world>', {
+ *    declarations: [HelloWorldComponent],
+ *    providers: [MyService],
+ *    imports: [SharedModule]
+ *  })
+ * })
+ * @returns Cypress.Chainable<MountResponse<T>>
+ */
+function mount(component, config = {}) {
+    const componentFixture = initTestBed(component, config);
+    const fixture = setupFixture(componentFixture, config);
+    const componentInstance = setupComponent(config, fixture);
+    const mountResponse = {
+        fixture,
+        component: componentInstance,
+    };
+    const logMessage = typeof component === 'string' ? 'Component' : componentFixture.name;
+    Cypress.log({
+        name: 'mount',
+        message: logMessage,
+        consoleProps: () => ({ result: mountResponse }),
+    });
+    return cy.wrap(mountResponse, { log: false });
+}
+/**
+ * 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>
+ */
+const createOutputSpy = (alias) => {
+    const emitter = new EventEmitter();
+    cy.spy(emitter, 'emit').as(alias);
+    return emitter;
+};
+// Only needs to run once, we reset before each test
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false },
+});
+setupHooks(() => {
+    // Not public, we need to call this to remove the last component from the DOM
+    TestBed['tearDownTestingModule']();
+    TestBed.resetTestingModule();
+});
+
+export { createOutputSpy, mount };

package/angular/dist/mount.d.ts

@@ -0,0 +1,111 @@
+/// <reference types="cypress" />
+import 'zone.js';
+import 'zone.js/testing';
+import { Type } from '@angular/core';
+import { ComponentFixture, TestModuleMetadata } 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
+ */
+export 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>
+ */
+export 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 {Type<T> | string} component Angular component being mounted or its template
+ * @param {MountConfig<T>} config configuration used to configure the TestBed
+ * @example
+ * import { HelloWorldComponent } from 'hello-world/hello-world.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')
+ * })
+ *
+ * or
+ *
+ * it('can mount with template', () => {
+ *  mount('<app-hello-world></app-hello-world>', {
+ *    declarations: [HelloWorldComponent],
+ *    providers: [MyService],
+ *    imports: [SharedModule]
+ *  })
+ * })
+ * @returns Cypress.Chainable<MountResponse<T>>
+ */
+export 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>
+ */
+export declare const createOutputSpy: <T>(alias: string) => any;

package/angular/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@cypress/angular",
+  "version": "0.0.0-development",
+  "description": "Test Angular Components using Cypress",
+  "private": true,
+  "main": "dist/index.js",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "rollup -c rollup.config.js",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
+    "build-prod": "yarn build",
+    "check-ts": "tsc --noEmit"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@angular/common": "^14.0.6",
+    "@angular/core": "^14.0.6",
+    "@angular/platform-browser-dynamic": "^14.0.6",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "typescript": "~4.2.3",
+    "zone.js": "~0.11.4"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=13",
+    "@angular/core": ">=13",
+    "@angular/platform-browser-dynamic": ">=13",
+    "zone.js": ">=0.11.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cypress-io/cypress.git"
+  },
+  "homepage": "https://github.com/cypress-io/cypress/blob/master/npm/angular/#readme",
+  "author": "Jordan Powell",
+  "bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Fangular&template=1-bug-report.md&title=",
+  "keywords": [
+    "angular",
+    "cypress",
+    "cypress-io",
+    "test",
+    "testing"
+  ],
+  "contributors": [
+    {
+      "name": "Jordan Powell",
+      "social": "@jordanpowell88"
+    },
+    {
+      "name": "Zach Williams",
+      "social": "@ZachJW34"
+    }
+  ],
+  "module": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "standard": {
+    "globals": [
+      "Cypress",
+      "cy",
+      "expect"
+    ]
+  }
+}