docs(testing): document adding Cypress E2E app for an existing project (#7669)

This commit is contained in:
Brandon 2021-11-09 11:15:34 -06:00 committed by GitHub
parent 0b0c37dbd1
commit 62d5d43dd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 77 additions and 301 deletions

View File

@ -49,6 +49,24 @@ nx g @nrwl/web:app frontend
└── tsconfig.base.json
```
### Creating a Cypress E2E project for an existing project
You can create a new Cypress E2E project for an existing project.
If the `@nrwl/cypress` package is not installed, install the version that matches your `@nrwl/workspace` version.
```sh
npm install --save-dev @nrwl/cypress
```
Next, generate an E2E project based on an existing project.
```sh
nx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name
```
Replace `your-app-name` with the app's name as defined in your `workspace.json` file.
### Testing Applications
Simply run `nx e2e frontend-e2e` to execute e2e tests with Cypress.
@ -59,7 +77,7 @@ Screenshots and videos will be accessible in `dist/apps/frontend/screenshots` an
### Watching for Changes
With, `ng e2e frontend-e2e --watch` Cypress will start in the application mode.
With, `nx e2e frontend-e2e --watch` Cypress will start in the application mode.
Running Cypress with `--watch` is a great way to enhance dev workflow - you can build up test files with the application running and Cypress will re-run those tests as you enhance and add to the suite.

View File

@ -22,7 +22,9 @@ The full path for the main entry point to the app, relative to the current works
Type: `string`
The full path for the new output directory, relative to the current workspace. By default, writes output to a folder named dist/ in the current project.
The full path for the new output directory, relative to the current workspace.
By default, writes output to a folder named dist/ in the current project.
### tsConfig (_**required**_)
@ -96,22 +98,14 @@ Type: `boolean`
Delete the output path before building.
### deployUrl
### ~~deployUrl~~
Type: `string`
**Deprecated:** Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.
URL where files will be deployed.
### ~~extractCss~~
Default: `true`
Type: `boolean`
**Deprecated:** Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.
Extract CSS from global styles into '.css' files instead of '.js'.
### extractLicenses
Default: `true`

View File

@ -18,38 +18,6 @@ Type: `array`
List of hosts that are allowed to access the dev server.
### ~~aot~~
Type: `boolean`
**Deprecated:** Use the "aot" option in the browser builder instead.
Build using Ahead of Time compilation.
### ~~baseHref~~
Type: `string`
**Deprecated:** Use the "baseHref" option in the browser builder instead.
Base url for the application being built.
### ~~commonChunk~~
Type: `boolean`
**Deprecated:** Use the "commonChunk" option in the browser builder instead.
Generate a seperate bundle containing code used across multiple bundles.
### ~~deployUrl~~
Type: `string`
**Deprecated:** Use the "deployUrl" option in the browser builder instead.
URL where files will be deployed.
### disableHostCheck
Default: `false`
@ -66,16 +34,6 @@ Type: `boolean`
Enable hot module replacement.
### ~~hmrWarning~~
Default: `true`
Type: `boolean`
**Deprecated:** No longer has an effect.
Show a warning when the --hmr option is enabled.
### host
Default: `localhost`
@ -102,14 +60,6 @@ Type: `boolean`
Opens the url in default browser.
### ~~optimization~~
Type: `boolean`
**Deprecated:** Use the "optimization" option in the browser builder instead.
Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, tree-shaking and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.
### poll
Type: `number`
@ -124,14 +74,6 @@ Type: `number`
Port to listen on.
### ~~progress~~
Type: `boolean`
**Deprecated:** Use the "progress" option in the browser builder instead.
Log progress to the console while building.
### proxyConfig
Type: `string`
@ -150,24 +92,6 @@ Type: `string`
The pathname where the app will be served.
### ~~servePathDefaultWarning~~
Default: `true`
Type: `boolean`
**Deprecated:** No longer has an effect.
Show a warning when deploy-url/base-href use unsupported serve path values.
### ~~sourceMap~~
Type: `boolean`
**Deprecated:** Use the "sourceMap" option in the browser builder instead.
Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.
### ssl
Default: `false`
@ -188,14 +112,6 @@ Type: `string`
SSL key to use for serving HTTPS.
### ~~vendorChunk~~
Type: `boolean`
**Deprecated:** Use the "vendorChunk" option in the browser builder instead.
Generate a seperate bundle containing only vendor libraries. This option should only used for development.
### verbose
Type: `boolean`

View File

@ -176,6 +176,12 @@ Type: `string`
Run only tests with a name that matches the regex pattern. (https://jestjs.io/docs/cli#--testnamepatternregex)
### testPathIgnorePatterns
Type: `array`
An array of regexp pattern strings that is matched against all tests paths before executing the test. Only run those tests with a path that does not match with the provided regexp expressions. (https://jestjs.io/docs/cli#--testpathignorepatternsregexarray)
### testPathPattern
Type: `array`

View File

@ -84,7 +84,7 @@ Default: `eslint`
Type: `string`
Possible values: `eslint`, `tslint`
Possible values: `eslint`
The tool to use for running lint checks.

View File

@ -22,7 +22,9 @@ The full path for the main entry point to the app, relative to the current works
Type: `string`
The full path for the new output directory, relative to the current workspace. By default, writes output to a folder named dist/ in the current project.
The full path for the new output directory, relative to the current workspace.
By default, writes output to a folder named dist/ in the current project.
### tsConfig (_**required**_)
@ -96,22 +98,14 @@ Type: `boolean`
Delete the output path before building.
### deployUrl
### ~~deployUrl~~
Type: `string`
**Deprecated:** Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.
URL where files will be deployed.
### ~~extractCss~~
Default: `true`
Type: `boolean`
**Deprecated:** Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.
Extract CSS from global styles into '.css' files instead of '.js'.
### extractLicenses
Default: `true`

View File

@ -18,38 +18,6 @@ Type: `array`
List of hosts that are allowed to access the dev server.
### ~~aot~~
Type: `boolean`
**Deprecated:** Use the "aot" option in the browser builder instead.
Build using Ahead of Time compilation.
### ~~baseHref~~
Type: `string`
**Deprecated:** Use the "baseHref" option in the browser builder instead.
Base url for the application being built.
### ~~commonChunk~~
Type: `boolean`
**Deprecated:** Use the "commonChunk" option in the browser builder instead.
Generate a seperate bundle containing code used across multiple bundles.
### ~~deployUrl~~
Type: `string`
**Deprecated:** Use the "deployUrl" option in the browser builder instead.
URL where files will be deployed.
### disableHostCheck
Default: `false`
@ -66,16 +34,6 @@ Type: `boolean`
Enable hot module replacement.
### ~~hmrWarning~~
Default: `true`
Type: `boolean`
**Deprecated:** No longer has an effect.
Show a warning when the --hmr option is enabled.
### host
Default: `localhost`
@ -102,14 +60,6 @@ Type: `boolean`
Opens the url in default browser.
### ~~optimization~~
Type: `boolean`
**Deprecated:** Use the "optimization" option in the browser builder instead.
Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, tree-shaking and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.
### poll
Type: `number`
@ -124,14 +74,6 @@ Type: `number`
Port to listen on.
### ~~progress~~
Type: `boolean`
**Deprecated:** Use the "progress" option in the browser builder instead.
Log progress to the console while building.
### proxyConfig
Type: `string`
@ -150,24 +92,6 @@ Type: `string`
The pathname where the app will be served.
### ~~servePathDefaultWarning~~
Default: `true`
Type: `boolean`
**Deprecated:** No longer has an effect.
Show a warning when deploy-url/base-href use unsupported serve path values.
### ~~sourceMap~~
Type: `boolean`
**Deprecated:** Use the "sourceMap" option in the browser builder instead.
Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.
### ssl
Default: `false`
@ -188,14 +112,6 @@ Type: `string`
SSL key to use for serving HTTPS.
### ~~vendorChunk~~
Type: `boolean`
**Deprecated:** Use the "vendorChunk" option in the browser builder instead.
Generate a seperate bundle containing only vendor libraries. This option should only used for development.
### verbose
Type: `boolean`

View File

@ -50,14 +50,6 @@ Type: `string`
A directory where the library is placed.
### enableIvy
Default: `false`
Type: `boolean`
Enable Ivy for library in `tsconfig.lib.prod.json`. Should not be used with publishable libraries.
### importPath
Type: `string`

View File

@ -176,6 +176,12 @@ Type: `string`
Run only tests with a name that matches the regex pattern. (https://jestjs.io/docs/cli#--testnamepatternregex)
### testPathIgnorePatterns
Type: `array`
An array of regexp pattern strings that is matched against all tests paths before executing the test. Only run those tests with a path that does not match with the provided regexp expressions. (https://jestjs.io/docs/cli#--testpathignorepatternsregexarray)
### testPathPattern
Type: `array`

View File

@ -84,7 +84,7 @@ Default: `eslint`
Type: `string`
Possible values: `eslint`, `tslint`
Possible values: `eslint`
The tool to use for running lint checks.

View File

@ -22,7 +22,9 @@ The full path for the main entry point to the app, relative to the current works
Type: `string`
The full path for the new output directory, relative to the current workspace. By default, writes output to a folder named dist/ in the current project.
The full path for the new output directory, relative to the current workspace.
By default, writes output to a folder named dist/ in the current project.
### tsConfig (_**required**_)
@ -96,22 +98,14 @@ Type: `boolean`
Delete the output path before building.
### deployUrl
### ~~deployUrl~~
Type: `string`
**Deprecated:** Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.
URL where files will be deployed.
### ~~extractCss~~
Default: `true`
Type: `boolean`
**Deprecated:** Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.
Extract CSS from global styles into '.css' files instead of '.js'.
### extractLicenses
Default: `true`

View File

@ -18,38 +18,6 @@ Type: `array`
List of hosts that are allowed to access the dev server.
### ~~aot~~
Type: `boolean`
**Deprecated:** Use the "aot" option in the browser builder instead.
Build using Ahead of Time compilation.
### ~~baseHref~~
Type: `string`
**Deprecated:** Use the "baseHref" option in the browser builder instead.
Base url for the application being built.
### ~~commonChunk~~
Type: `boolean`
**Deprecated:** Use the "commonChunk" option in the browser builder instead.
Generate a seperate bundle containing code used across multiple bundles.
### ~~deployUrl~~
Type: `string`
**Deprecated:** Use the "deployUrl" option in the browser builder instead.
URL where files will be deployed.
### disableHostCheck
Default: `false`
@ -66,16 +34,6 @@ Type: `boolean`
Enable hot module replacement.
### ~~hmrWarning~~
Default: `true`
Type: `boolean`
**Deprecated:** No longer has an effect.
Show a warning when the --hmr option is enabled.
### host
Default: `localhost`
@ -102,14 +60,6 @@ Type: `boolean`
Opens the url in default browser.
### ~~optimization~~
Type: `boolean`
**Deprecated:** Use the "optimization" option in the browser builder instead.
Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, tree-shaking and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.
### poll
Type: `number`
@ -124,14 +74,6 @@ Type: `number`
Port to listen on.
### ~~progress~~
Type: `boolean`
**Deprecated:** Use the "progress" option in the browser builder instead.
Log progress to the console while building.
### proxyConfig
Type: `string`
@ -150,24 +92,6 @@ Type: `string`
The pathname where the app will be served.
### ~~servePathDefaultWarning~~
Default: `true`
Type: `boolean`
**Deprecated:** No longer has an effect.
Show a warning when deploy-url/base-href use unsupported serve path values.
### ~~sourceMap~~
Type: `boolean`
**Deprecated:** Use the "sourceMap" option in the browser builder instead.
Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.
### ssl
Default: `false`
@ -188,14 +112,6 @@ Type: `string`
SSL key to use for serving HTTPS.
### ~~vendorChunk~~
Type: `boolean`
**Deprecated:** Use the "vendorChunk" option in the browser builder instead.
Generate a seperate bundle containing only vendor libraries. This option should only used for development.
### verbose
Type: `boolean`

View File

@ -176,6 +176,12 @@ Type: `string`
Run only tests with a name that matches the regex pattern. (https://jestjs.io/docs/cli#--testnamepatternregex)
### testPathIgnorePatterns
Type: `array`
An array of regexp pattern strings that is matched against all tests paths before executing the test. Only run those tests with a path that does not match with the provided regexp expressions. (https://jestjs.io/docs/cli#--testpathignorepatternsregexarray)
### testPathPattern
Type: `array`

View File

@ -84,7 +84,7 @@ Default: `eslint`
Type: `string`
Possible values: `eslint`, `tslint`
Possible values: `eslint`
The tool to use for running lint checks.

View File

@ -49,6 +49,24 @@ nx g @nrwl/web:app frontend
└── tsconfig.base.json
```
### Creating a Cypress E2E project for an existing project
You can create a new Cypress E2E project for an existing project.
If the `@nrwl/cypress` package is not installed, install the version that matches your `@nrwl/workspace` version.
```sh
npm install --save-dev @nrwl/cypress
```
Next, generate an E2E project based on an existing project.
```sh
nx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name
```
Replace `your-app-name` with the app's name as defined in your `workspace.json` file.
### Testing Applications
Simply run `nx e2e frontend-e2e` to execute e2e tests with Cypress.
@ -59,7 +77,7 @@ Screenshots and videos will be accessible in `dist/apps/frontend/screenshots` an
### Watching for Changes
With, `ng e2e frontend-e2e --watch` Cypress will start in the application mode.
With, `nx e2e frontend-e2e --watch` Cypress will start in the application mode.
Running Cypress with `--watch` is a great way to enhance dev workflow - you can build up test files with the application running and Cypress will re-run those tests as you enhance and add to the suite.