Merge branch 'master' into develop

cypress-io · Aug 30, 2022 · b5e6fd6 · b5e6fd6 · cypress-bot · Aug 30, 2022
2 parents 7f2522f + 02e5b24
commit b5e6fd6
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 127 deletions.
diff --git 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)
 
 

diff --git 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
-
-<!-- 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)
diff --git 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",

diff --git 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)
 
 

diff --git 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<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
+        }),
+      )
     }),
   )
 }