cypress 10.6.0 → 10.7.0

package/angular/CHANGELOG.md

@@ -1,3 +1,34 @@
+# @cypress/angular-v1.0.0 (2022-08-17)
+
+
+### 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))
+* remove dependency causing semantic-release to fail ([#23142](https://github.com/cypress-io/cypress/issues/23142)) ([20f89bf](https://github.com/cypress-io/cypress/commit/20f89bfa32636baa8922896e719962c703129abd))
+* 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))
+* add template support, teardown & standalone ([#23117](https://github.com/cypress-io/cypress/issues/23117)) ([d201b37](https://github.com/cypress-io/cypress/commit/d201b37b3d6b1e37a15a8d21d853acca47bfc666))
+* **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))
+* enable Angular CT support ([#23089](https://github.com/cypress-io/cypress/issues/23089)) ([94e78eb](https://github.com/cypress-io/cypress/commit/94e78eba0430eae97529058c40611e5f24dbf140))
+* 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)
 
 

package/angular/README.md

@@ -1,57 +1,37 @@
-> A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
+# @cypress/angular
 
-**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)
+Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
 
-## TLDR
+> **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.
 
-- 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/).
+## Install
 
-## Blog posts
+- Requires Cypress v7.0.0 or later
+- Requires [Node](https://nodejs.org/en/) version 12 or above
 
-- [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/)
+```sh
+npm install --save-dev @cypress/angular
+```
 
-## Install
+## Run
 
-Requires [Node](https://nodejs.org/en/) version 12 or above.
+Open cypress test runner
+```
+npx cypress open --component
+```
 
-```sh
-npm install --save-dev cypress @cypress/angular @cypress/webpack-dev-server
+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` allows you to mount a given Angular component as a mini web application and interact with it using Cypress commands
+- `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
 
@@ -68,87 +48,38 @@ describe('HelloWorldComponent', () => {
 })
 ```
 
-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
+```ts
+import { mount } from '@cypress/angular'
+import { HelloWorldComponent } from './hello-world.component'
 
-```json
-{
-  "env": {
-    "coverage": false
-  }
-}
+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')
+  })
+})
 ```
 
-## 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).
+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.
 
-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
+## Compatibility
 
-
-## Chat
-
-Come chat with us [on discord](https://discord.gg/7ZHYhZSW) in the #component-testing channel.
+| @cypress/angular | cypress |
+| -------------- | ------- |
+| >= v1          | >= v10.5  |
 
 ## 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
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
 
-[Changelog](./CHANGELOG.md)
+## License
 
-## Related tools
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/master/LICENSE)
 
-Same feature for unit testing components from other frameworks using Cypress
+This project is licensed under the terms of the [MIT license](/LICENSE).
 
-- [@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)
+## [Changelog](./CHANGELOG.md)

package/angular/dist/index.js

@@ -12,7 +12,7 @@ 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
@@ -128,9 +128,9 @@ function bootstrapModule(component, config) {
 function initTestBed(component, config) {
     const { providers } = config, configRest = __rest(config, ["providers"]);
     const componentFixture = createComponentFixture(component);
-    TestBed.configureTestingModule(Object.assign({}, bootstrapModule(componentFixture, configRest)));
+    getTestBed().configureTestingModule(Object.assign({}, bootstrapModule(componentFixture, configRest)));
     if (providers != null) {
-        TestBed.overrideComponent(componentFixture, {
+        getTestBed().overrideComponent(componentFixture, {
             add: {
                 providers,
             },
@@ -151,6 +151,8 @@ WrapperComponent = __decorate([
  */
 function createComponentFixture(component) {
     if (typeof component === 'string') {
+        // getTestBed().overrideTemplate is available in v14+
+        // The static TestBed.overrideTemplate is available across versions
         TestBed.overrideTemplate(WrapperComponent, component);
         return WrapperComponent;
     }
@@ -165,7 +167,7 @@ function createComponentFixture(component) {
  * @returns {ComponentFixture<T>} ComponentFixture
  */
 function setupFixture(component, config) {
-    const fixture = TestBed.createComponent(component);
+    const fixture = getTestBed().createComponent(component);
     fixture.whenStable().then(() => {
         var _a;
         fixture.autoDetectChanges((_a = config.autoDetectChanges) !== null && _a !== void 0 ? _a : true);
@@ -256,8 +258,8 @@ getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDyn
 });
 setupHooks(() => {
     // Not public, we need to call this to remove the last component from the DOM
-    TestBed['tearDownTestingModule']();
-    TestBed.resetTestingModule();
+    getTestBed()['tearDownTestingModule']();
+    getTestBed().resetTestingModule();
 });
 
 export { createOutputSpy, mount };

package/angular/dist/mount.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+/// <reference types="cypress" />
 import 'zone.js';
 import 'zone.js/testing';
 import { Type } from '@angular/core';

package/angular/package.json

@@ -2,23 +2,21 @@
   "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",
+    "build": "rollup -c rollup.config.mjs",
     "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",
+    "@angular/common": "^14.2.0",
+    "@angular/core": "^14.2.0",
+    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@cypress/mount-utils": "0.0.0-development",
+    "typescript": "^4.7.4",
     "zone.js": "~0.11.4"
   },
   "peerDependencies": {

package/mount-utils/package.json

@@ -12,7 +12,11 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "typescript": "^4.2.3"
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "rollup": "^2.38.5",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "typescript": "^4.7.4"
   },
   "files": [
     "dist"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "10.6.0",
+  "version": "10.7.0",
   "main": "index.js",
   "scripts": {
     "postinstall": "node index.js --exec install",
@@ -61,7 +61,8 @@
     "react",
     "vue2",
     "react18",
-    "angular"
+    "angular",
+    "svelte"
   ],
   "bin": {
     "cypress": "bin/cypress"
@@ -108,12 +109,17 @@
       "import": "./angular/dist/index.js",
       "require": "./angular/dist/index.js",
       "types": "./angular/dist/index.d.ts"
+    },
+    "./svelte": {
+      "import": "./svelte/dist/cypress-svelte.esm-bundler.js",
+      "require": "./svelte/dist/cypress-svelte.cjs.js",
+      "types": "./svelte/dist/index.d.ts"
     }
   },
   "buildInfo": {
     "commitBranch": "develop",
-    "commitSha": "89839eb2e0421f7485b4544866355d8be40bd331",
-    "commitDate": "2022-08-16T18:09:58.000Z",
+    "commitSha": "b5e6fd67a9080864274ffa54cef30ca6445650d1",
+    "commitDate": "2022-08-30T14:25:23.000Z",
     "stable": true
   },
   "description": "Cypress.io end to end testing tool",

package/react/dist/createMount.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="cypress" />
+/// <reference types="cypress" />
+/// <reference types="cypress" />
+/// <reference types="cypress" />
 import * as React from 'react';
 import type { InternalMountOptions, MountOptions, MountReturn, UnmountArgs } from './types';
 /**
@@ -10,7 +13,7 @@ import type { InternalMountOptions, MountOptions, MountReturn, UnmountArgs } fro
  * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
  * or people writing adapters for third-party, custom adapters.
  */
-export declare const makeMountFn: (type: 'mount' | 'rerender', jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string | undefined, internalMountOptions?: InternalMountOptions | undefined) => globalThis.Cypress.Chainable<MountReturn>;
+export declare const makeMountFn: (type: 'mount' | 'rerender', jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string, internalMountOptions?: InternalMountOptions) => globalThis.Cypress.Chainable<MountReturn>;
 /**
  * Create an `unmount` function. Performs all the non-React-version specific
  * behavior related to unmounting.
@@ -20,7 +23,7 @@ export declare const makeMountFn: (type: 'mount' | 'rerender', jsx: React.ReactN
  */
 export declare const makeUnmountFn: (options: UnmountArgs) => Cypress.Chainable<undefined>;
 declare const _mount: (jsx: React.ReactNode, options?: MountOptions) => Cypress.Chainable<MountReturn>;
-export declare const createMount: (defaultOptions: MountOptions) => (element: React.ReactElement, options?: Partial<import("@cypress/mount-utils").StyleOptions & import("./types").MountReactComponentOptions> | undefined) => Cypress.Chainable<MountReturn>;
+export declare const createMount: (defaultOptions: MountOptions) => (element: React.ReactElement, options?: MountOptions) => Cypress.Chainable<MountReturn>;
 /** @deprecated Should be removed in the next major version */
 export default _mount;
 export interface JSX extends Function {