From 1f05ff0fd75db2d02a777bd497b30179b4b407f5 Mon Sep 17 00:00:00 2001 From: Conrad Magnus Kirschner <35291593+conradkirschner@users.noreply.github.com> Date: Wed, 17 Aug 2022 02:32:27 +0200 Subject: [PATCH 1/4] fix: cypress-schematic add exception for nguniversal ssr dev server (#23348) * fix: cypress-schematic remove watch option if dev server dont support it * fix: cypress-schematic only set watch mode if not nguniversal ssr dev server * fix: cypress-schematic only set watch mode if not nguniversal ssr dev server * fix: cypress-schematic only set watch mode if not nguniversal ssr dev server * fix: cypress-schematic only set watch mode if not nguniversal ssr dev server * fix: cypress-schematic only set watch mode if not nguniversal ssr dev server * fix: cypress-schematic only set watch mode if not nguniversal ssr dev server * fix: cypress-schematic only set watch mode if not nguniversal ssr dev server * Update npm/cypress-schematic/src/builders/cypress/index.ts Co-authored-by: Zachary Williams * fix: cypress-schematic only set watch mode if not nguniversal ssr dev server Co-authored-by: Zachary Williams --- .../src/builders/cypress/index.ts | 41 ++++++++++++------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/npm/cypress-schematic/src/builders/cypress/index.ts b/npm/cypress-schematic/src/builders/cypress/index.ts index bd4d265760c9..1c41501aae36 100644 --- a/npm/cypress-schematic/src/builders/cypress/index.ts +++ b/npm/cypress-schematic/src/builders/cypress/index.ts @@ -16,10 +16,10 @@ import { CypressBuilderOptions } from './cypressBuilderOptions' type CypressOptions = Partial & Partial; -type StartDevServerProps = { +type CypressStartDevServerProps = { devServerTarget: string watch: boolean - context: any + context: BuilderContext } function runCypress ( @@ -98,20 +98,33 @@ function initCypress (userOptions: CypressBuilderOptions): Observable { - 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 { + 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 + }), + ) }), ) } From 187a735358ba8fb0689e876640f928647ff5b3f6 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Wed, 17 Aug 2022 10:28:54 -0400 Subject: [PATCH 2/4] chore: release @cypress/schematic-v2.0.3 [skip ci] --- npm/cypress-schematic/CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/npm/cypress-schematic/CHANGELOG.md b/npm/cypress-schematic/CHANGELOG.md index 410b6018dca2..0c9b0380c5e9 100644 --- a/npm/cypress-schematic/CHANGELOG.md +++ b/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) From d4a034dbc6b7a79f357a8f6d423fddb6f05f44a3 Mon Sep 17 00:00:00 2001 From: Jordan Date: Wed, 17 Aug 2022 11:59:06 -0400 Subject: [PATCH 3/4] build(angular): publish @cypress/angular to npm (#23387) --- npm/angular/README.md | 155 +++++++++++---------------------------- npm/angular/package.json | 1 - 2 files changed, 43 insertions(+), 113 deletions(-) diff --git a/npm/angular/README.md b/npm/angular/README.md index 25af1cc22f35..ef4d366a4435 100644 --- a/npm/angular/README.md +++ b/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 - - -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 | ✅ | ✅ - - -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('', { + 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) diff --git a/npm/angular/package.json b/npm/angular/package.json index f8601c9604b8..9ebd6c020c74 100644 --- a/npm/angular/package.json +++ b/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", From 02e5b24c63c2a6f3b3eede5f17b80c9b6de21416 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Wed, 17 Aug 2022 12:37:31 -0400 Subject: [PATCH 4/4] chore: release @cypress/angular-v1.0.0 [skip ci] --- npm/angular/CHANGELOG.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/npm/angular/CHANGELOG.md b/npm/angular/CHANGELOG.md index 2611b8c5e452..ef48cf256fd1 100644 --- a/npm/angular/CHANGELOG.md +++ b/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)