Merge branch 'master' into develop

Author: mike-plummer

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

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

npm/angular/package.json

@@ -2,7 +2,6 @@
  "name": "@cypress/angular",
  "version": "0.0.0-development",
  "description": "Test Angular Components using Cypress",
- "private": true,
  "main": "dist/index.js",
  "scripts": {
  "prebuild": "rimraf dist",

npm/cypress-schematic/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/schematic-v2.0.3](https://github.com/cypress-io/cypress/compare/@cypress/schematic-v2.0.2...@cypress/schematic-v2.0.3) (2022-08-17)
+
+
+### Bug Fixes
+
+* cypress-schematic add exception for nguniversal ssr dev server ([#23348](https://github.com/cypress-io/cypress/issues/23348)) ([1f05ff0](https://github.com/cypress-io/cypress/commit/1f05ff0fd75db2d02a777bd497b30179b4b407f5))
+
 # [@cypress/schematic-v2.0.2](https://github.com/cypress-io/cypress/compare/@cypress/schematic-v2.0.1...@cypress/schematic-v2.0.2) (2022-08-10)
 
 

npm/cypress-schematic/src/builders/cypress/index.ts

@@ -16,10 +16,10 @@ import { CypressBuilderOptions } from './cypressBuilderOptions'
 type CypressOptions = Partial<CypressCommandLine.CypressRunOptions> &
 Partial<CypressCommandLine.CypressOpenOptions>;
 
-type StartDevServerProps = {
+type CypressStartDevServerProps = {
  devServerTarget: string
  watch: boolean
- context: any
+ context: BuilderContext
 }
 
 function runCypress (
@@ -102,20 +102,33 @@ function initCypress (userOptions: CypressBuilderOptions): Observable<BuilderOut
 export function startDevServer ({
  devServerTarget,
  watch,
- context }: StartDevServerProps): Observable<string> {
- const overrides = {
- watch,
- }
-
- //@ts-ignore
- return scheduleTargetAndForget(context, targetFromTargetString(devServerTarget), overrides).pipe(
- //@ts-ignore
- map((output: any) => {
- if (!output.success && !watch) {
- throw new Error('Could not compile application files')
+ context }: CypressStartDevServerProps): Observable<string> {
+ const buildTarget = targetFromTargetString(devServerTarget)
+
+ return from(context.getBuilderNameForTarget(buildTarget)).pipe(
+ switchMap((builderName) => {
+ let overrides = {}
+
+ // @NOTE: Do not forward watch option if not supported by the target dev server,
+ // this is relevant for running Cypress against dev server target that does not support this option,
+ // for instance @nguniversal/builders:ssr-dev-server.
+ // see https://github.com/nrwl/nx/blob/f930117ed6ab13dccc40725c7e9551be081cc83d/packages/cypress/src/executors/cypress/cypress.impl.ts
+ if (builderName !== '@nguniversal/builders:ssr-dev-server') {
+ console.info(`Passing watch mode to DevServer - watch mode is ${watch}`)
+ overrides = {
+ watch,
+ }
  }
 
- return output.baseUrl as string
+ return scheduleTargetAndForget(context, targetFromTargetString(devServerTarget), overrides).pipe(
+ map((output: any) => {
+ if (!output.success && !watch) {
+ throw new Error('Could not compile application files')
+ }
+
+ return output.baseUrl as string
+ }),
+ )
  }),
  )
 }