miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(testing): update docs to use configuration generator (#18587)

Browse Source
This commit is contained in:
Caleb Ukle 2023-08-14 10:57:41 -05:00 committed by GitHub
parent 5ac66e4ab8
commit b3f68fe89e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/generated/packages/cypress/documents/overview.md
View File

@ -36,13 +36,13 @@ nx g @nx/web:app frontend
To generate an E2E project based on an existing project, run the following generator To generate an E2E project based on an existing project, run the following generator
```shell ```shell
nx g @nx/cypress:cypress-project your-app-name-e2e --project=your-app-name nx g @nx/cypress:configuration your-app-name-e2e --project=your-app-name
``` ```
Optionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`. Optionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`.
```shell ```shell
nx g @nx/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200 nx g @nx/cypress:configuration your-app-name-e2e --baseUrl=http://localhost:4200
``` ```
Replace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`. Replace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`.

2
docs/generated/packages/cypress/executors/cypress.json
View File

@ -149,7 +149,7 @@
}, },
"additionalProperties": true, "additionalProperties": true,
"required": ["cypressConfig"], "required": ["cypressConfig"],
"examplesFile": "Depending on your testing type, the Cypress executor is configured in different ways. The following are sample configurations that are created via the [cypress-project](/packages/cypress/generators/cypress-project) and [cypress-component-project](/packages/cypress/generators/cypress-component-project) generators.\n\n{% tabs %}\n{% tab label=\"E2E Testing\" %}\n\n```json\n\"targets\": {\n \"e2e\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app-e2e/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:serve\",\n \"testingType\": \"e2e\"\n }\n }\n}\n```\n\n{% callout type=\"note\" title=\"API Testing\" %}\nAPI testing with Cypress is the same setup as e2e testing. Just change which `devServerTarget` is used!\n{% /callout %}\n\n### Providing a Base URL\n\nIf `devServerTarget` is provided, the url returned from started the dev server will be passed to cypress as the `baseUrl` option.\n\nDefining a `baseUrl` in the executor options will override the inferred `baseUrl` from the `devServerTarget`.\n\nThe `baseUrl` defined in the Cypress config file is the last value used if no url is found in the `devServerTarget` or executor options.\n\n### Static Serving\n\nWhen running in CI it doesn't make sense to start up a dev server since there aren't changes to watch for.\n\nYou can use [`@nx/web:file-server`](/packages/web/executors/file-server) to serve the pre-built static files of your frontend project.\n\nIn some _frontend_ application, add a 'static-serve' target.\n\n```json\n\"serve-static\": {\n \"executor\": \"@nx/web:file-server\",\n \"options\":{\n \"buildTarget\": \"frontend:build\"\n }\n}\n```\n\nIn the _e2e_ application add a configuration to change `devServerTarget` to point to the `static-serve` from the _frontend_ application\n\n```json\n\"e2e\": {\n //...\n \"configurations\": {\n \"ci\": {\n \"devServerTarget\": \"frontend:serve-static\"\n }\n }\n}\n```\n\n{% callout type=\"note\" title=\"What about Node projects?\" %}\nThe same can be done for backend node apps with [`@nx/js:node` executor](/packages/js/executors/node)\n{% /callout %}\n\n```bash\nnx e2e my-app-e2e --configuration=ci\n```\n\n{% /tab %}\n{% tab label=\"Component Testing\" %}\n\n{% callout type=\"note\" title=\"Cypress Component Testing\" %}\nWhen adding component testing to a project, it's best to use the framework specific generator, instead `cypress-component-project` directly.\n\n- [React component testing](/packages/react/generators/cypress-component-configuration)\n- [Angular component testing](/packages/angular/generators/cypress-component-configuration)\n\n{% /callout %}\n\n```json\n\"targets\": {\n \"component-test\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:build\",\n \"testingType\": \"component\",\n \"skipServe\": true\n }\n }\n}\n```\n\nIt's important `skipServe` is set to true. Nx doesn't need to run the `devServerTarget`, Cypress creates its own dev server for component testing.\nInstead, Nx needs to know what build target to create the correct configuration to pass to Cypress, which is why it's still used in component testing.\n\n{% /tab %}\n{% /tabs %}\n\n### Environment Variables\n\nUsing [executor configurations](recipes/executors/use-executor-configurations#use-executor-configurations) offers flexibility to set environment variables\n\n```json\n\"targets\": {\n \"e2e\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app-e2e/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:serve\",\n \"testingType\": \"e2e\"\n },\n \"configurations\": {\n \"qa\": {\n \"env\": {\n \"API_URL\": \"https://api.qa.company.com\"\n }\n },\n \"dev\": {\n \"env\": {\n \"API_URL\": \"http://locahost:3333/api\"\n }\n }\n }\n }\n}\n```\n\nRead more on different ways to use [environment variables for cypress executor](/packages/cypress#environment-variables)\n" "examplesFile": "Depending on your testing type, the Cypress executor is configured in different ways. The following are sample configurations that are created via the [configuration](/packages/cypress/generators/configuration) and [cypress-component-configuration](/packages/cypress/generators/cypress-component-configuration) generators.\n\n{% tabs %}\n{% tab label=\"E2E Testing\" %}\n\n```json\n\"targets\": {\n \"e2e\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app-e2e/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:serve\",\n \"testingType\": \"e2e\"\n }\n }\n}\n```\n\n{% callout type=\"note\" title=\"API Testing\" %}\nAPI testing with Cypress is the same setup as e2e testing. Just change which `devServerTarget` is used!\n{% /callout %}\n\n### Providing a Base URL\n\nIf `devServerTarget` is provided, the url returned from started the dev server will be passed to cypress as the `baseUrl` option.\n\nDefining a `baseUrl` in the executor options will override the inferred `baseUrl` from the `devServerTarget`.\n\nThe `baseUrl` defined in the Cypress config file is the last value used if no url is found in the `devServerTarget` or executor options.\n\n### Static Serving\n\nWhen running in CI it doesn't make sense to start up a dev server since there aren't changes to watch for.\n\nYou can use [`@nx/web:file-server`](/packages/web/executors/file-server) to serve the pre-built static files of your frontend project.\n\nIn some _frontend_ application, add a 'static-serve' target.\n\n```json\n\"serve-static\": {\n \"executor\": \"@nx/web:file-server\",\n \"options\":{\n \"buildTarget\": \"frontend:build\"\n }\n}\n```\n\nIn the _e2e_ application add a configuration to change `devServerTarget` to point to the `static-serve` from the _frontend_ application\n\n```json\n\"e2e\": {\n //...\n \"configurations\": {\n \"ci\": {\n \"devServerTarget\": \"frontend:serve-static\"\n }\n }\n}\n```\n\n{% callout type=\"note\" title=\"What about Node projects?\" %}\nThe same can be done for backend node apps with [`@nx/js:node` executor](/packages/js/executors/node)\n{% /callout %}\n\n```bash\nnx e2e my-app-e2e --configuration=ci\n```\n\n{% /tab %}\n{% tab label=\"Component Testing\" %}\n\n{% callout type=\"note\" title=\"Cypress Component Testing\" %}\nWhen adding component testing to a project, it's best to use the framework specific generator, instead `cypress-component-project` directly.\n\n- [React component testing](/packages/react/generators/cypress-component-configuration)\n- [Angular component testing](/packages/angular/generators/cypress-component-configuration)\n\n{% /callout %}\n\n```json\n\"targets\": {\n \"component-test\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:build\",\n \"testingType\": \"component\",\n \"skipServe\": true\n }\n }\n}\n```\n\nIt's important `skipServe` is set to true. Nx doesn't need to run the `devServerTarget`, Cypress creates its own dev server for component testing.\nInstead, Nx needs to know what build target to create the correct configuration to pass to Cypress, which is why it's still used in component testing.\n\n{% /tab %}\n{% /tabs %}\n\n### Environment Variables\n\nUsing [executor configurations](recipes/executors/use-executor-configurations#use-executor-configurations) offers flexibility to set environment variables\n\n```json\n\"targets\": {\n \"e2e\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app-e2e/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:serve\",\n \"testingType\": \"e2e\"\n },\n \"configurations\": {\n \"qa\": {\n \"env\": {\n \"API_URL\": \"https://api.qa.company.com\"\n }\n },\n \"dev\": {\n \"env\": {\n \"API_URL\": \"http://localhost:3333/api\"\n }\n }\n }\n }\n}\n```\n\nRead more on different ways to use [environment variables for cypress executor](/packages/cypress#environment-variables)\n"
}, },
"description": "Run Cypress E2E tests.", "description": "Run Cypress E2E tests.",
"aliases": [], "aliases": [],

2
docs/generated/packages/cypress/generators/cypress-project.json
View File

@ -73,7 +73,7 @@
} }
}, },
"required": ["name"], "required": ["name"],
"examplesFile": "Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app\n```\n\nWhen providing `--project` option, the generator will look for the `serve` target in that given project. This allows the [cypress executor](/packages/cypress/executors/cypress) to spin up the project and start the cypress runner.\n\nIf you prefer to not have the project served automatically, you can provide a `--base-url` argument in place of `--project`\n\n```bash\nnx g cypress-project --name=my-app-e2e --base-url=http://localhost:1234\n```\n\n{% callout type=\"note\" title=\"What about API Projects?\" %}\nYou can also run the `cypress-project` generator against API projects like a [Nest API](/packages/nest/generators/application#@nx/nest:application).\nIf there is a URL to visit then you can test it with Cypress!\n{% /callout %}\n\n## Using Cypress with Vite.js\n\nNow, you can generate your Cypress project with Vite.js as the bundler:\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app --bundler=vite\n```\n\nThis generator will pass the `bundler` information (`bundler: 'vite'`) to our `nxE2EPreset`, in your project's `cypress.config.ts` file (eg. `my-app-e2e/cypress.config.ts`).\n\n### Customizing the Vite.js configuration\n\nThe `nxE2EPreset` will then use the `bundler` information to generate the correct settings for your Cypress project to use Vite.js. In the background, the way this works is that it's using a custom Vite preprocessor for your files, that's called on the `file:preprocessor` event. If you want to customize this behaviour, you can do so like this in your project's `cypress.config.ts` file:\n\n```ts\nimport { defineConfig } from 'cypress';\nimport { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';\n\nconst config = nxE2EPreset(__filename, { bundler: 'vite' });\nexport default defineConfig({\n e2e: {\n ...config,\n setupNodeEvents(on, config): {\n config.setupNodeEvents(on);\n // Your settings here\n }\n },\n});\n```\n", "examplesFile": "Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.\n\n```bash\nnx g configuration --name=my-app-e2e --project=my-app\n```\n\nWhen providing `--project` option, the generator will look for the `serve` target in that given project. This allows the [cypress executor](/packages/cypress/executors/cypress) to spin up the project and start the cypress runner.\n\nIf you prefer to not have the project served automatically, you can provide a `--base-url` argument in place of `--project`\n\n```bash\nnx g configuration --name=my-app-e2e --base-url=http://localhost:1234\n```\n\n{% callout type=\"note\" title=\"What about API Projects?\" %}\nYou can also run the `configuration` generator against API projects like a [Nest API](/packages/nest/generators/application#@nx/nest:application).\nIf there is a URL to visit then you can test it with Cypress!\n{% /callout %}\n\n## Using Cypress with Vite.js\n\nNow, you can generate your Cypress project with Vite.js as the bundler:\n\n```bash\nnx g configuration --name=my-app-e2e --project=my-app --bundler=vite\n```\n\nThis generator will pass the `bundler` information (`bundler: 'vite'`) to our `nxE2EPreset`, in your project's `cypress.config.ts` file (eg. `my-app-e2e/cypress.config.ts`).\n\n### Customizing the Vite.js configuration\n\nThe `nxE2EPreset` will then use the `bundler` information to generate the correct settings for your Cypress project to use Vite.js. In the background, the way this works is that it's using a custom Vite preprocessor for your files, that's called on the `file:preprocessor` event. If you want to customize this behaviour, you can do so like this in your project's `cypress.config.ts` file:\n\n```ts\nimport { defineConfig } from 'cypress';\nimport { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';\n\nconst config = nxE2EPreset(__filename, { bundler: 'vite' });\nexport default defineConfig({\n e2e: {\n ...config,\n setupNodeEvents(on, config): {\n config.setupNodeEvents(on);\n // Your settings here\n }\n },\n});\n```\n",
"presets": [] "presets": []
}, },
"description": "Add a Cypress E2E Project.", "description": "Add a Cypress E2E Project.",

6
docs/generated/packages/jest/documents/overview.md
View File

@ -14,7 +14,7 @@ nx g @nx/web:app frontend
### Adding Jest to an Existing Project ### Adding Jest to an Existing Project
Add Jest to a project using the `jest-project` generator from `@nx/jest`. Add Jest to a project using the `configuration` generator from `@nx/jest`.
First, install `@nx/jest`, if not already installed using your preferred package manager. First, install `@nx/jest`, if not already installed using your preferred package manager.
@ -26,10 +26,10 @@ npm install --save-dev @nx/jest
yarn add --dev @nx/jest yarn add --dev @nx/jest
``` ```
Once installed, run the `jest-project` generator Once installed, run the `configuration` generator
```shell ```shell
nx g @nx/jest:jest-project --project=<project-name> nx g @nx/jest:configuration --project=<project-name>
``` ```
> Hint: You can use the `--dry-run` flag to see what will be generated. > Hint: You can use the `--dry-run` flag to see what will be generated.

4
docs/shared/packages/cypress/cypress-plugin.md
View File

@ -36,13 +36,13 @@ nx g @nx/web:app frontend
To generate an E2E project based on an existing project, run the following generator To generate an E2E project based on an existing project, run the following generator
```shell ```shell
nx g @nx/cypress:cypress-project your-app-name-e2e --project=your-app-name nx g @nx/cypress:configuration your-app-name-e2e --project=your-app-name
``` ```
Optionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`. Optionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`.
```shell ```shell
nx g @nx/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200 nx g @nx/cypress:configuration your-app-name-e2e --baseUrl=http://localhost:4200
``` ```
Replace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`. Replace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`.

6
docs/shared/packages/jest/jest-plugin.md
View File

@ -14,7 +14,7 @@ nx g @nx/web:app frontend
### Adding Jest to an Existing Project ### Adding Jest to an Existing Project
Add Jest to a project using the `jest-project` generator from `@nx/jest`. Add Jest to a project using the `configuration` generator from `@nx/jest`.
First, install `@nx/jest`, if not already installed using your preferred package manager. First, install `@nx/jest`, if not already installed using your preferred package manager.
@ -26,10 +26,10 @@ npm install --save-dev @nx/jest
yarn add --dev @nx/jest yarn add --dev @nx/jest
``` ```
Once installed, run the `jest-project` generator Once installed, run the `configuration` generator
```shell ```shell
nx g @nx/jest:jest-project --project=<project-name> nx g @nx/jest:configuration --project=<project-name>
``` ```
> Hint: You can use the `--dry-run` flag to see what will be generated. > Hint: You can use the `--dry-run` flag to see what will be generated.

4
packages/cypress/docs/cypress-examples.md
View File

@ -1,4 +1,4 @@
Depending on your testing type, the Cypress executor is configured in different ways. The following are sample configurations that are created via the [cypress-project](/packages/cypress/generators/cypress-project) and [cypress-component-project](/packages/cypress/generators/cypress-component-project) generators. Depending on your testing type, the Cypress executor is configured in different ways. The following are sample configurations that are created via the [configuration](/packages/cypress/generators/configuration) and [cypress-component-configuration](/packages/cypress/generators/cypress-component-configuration) generators.
{% tabs %} {% tabs %}
{% tab label="E2E Testing" %} {% tab label="E2E Testing" %}
@ -118,7 +118,7 @@ Using [executor configurations](recipes/executors/use-executor-configurations#us
}, },
"dev": { "dev": {
"env": { "env": {
"API_URL": "http://locahost:3333/api" "API_URL": "http://localhost:3333/api"
} }
} }
} }

8
packages/cypress/docs/cypress-project-examples.md
View File

@ -1,7 +1,7 @@
Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for. Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.
```bash ```bash
nx g cypress-project --name=my-app-e2e --project=my-app nx g configuration --name=my-app-e2e --project=my-app
``` ```
When providing `--project` option, the generator will look for the `serve` target in that given project. This allows the [cypress executor](/packages/cypress/executors/cypress) to spin up the project and start the cypress runner. When providing `--project` option, the generator will look for the `serve` target in that given project. This allows the [cypress executor](/packages/cypress/executors/cypress) to spin up the project and start the cypress runner.
@ -9,11 +9,11 @@ When providing `--project` option, the generator will look for the `serve` targe
If you prefer to not have the project served automatically, you can provide a `--base-url` argument in place of `--project` If you prefer to not have the project served automatically, you can provide a `--base-url` argument in place of `--project`
```bash ```bash
nx g cypress-project --name=my-app-e2e --base-url=http://localhost:1234 nx g configuration --name=my-app-e2e --base-url=http://localhost:1234
``` ```
{% callout type="note" title="What about API Projects?" %} {% callout type="note" title="What about API Projects?" %}
You can also run the `cypress-project` generator against API projects like a [Nest API](/packages/nest/generators/application#@nx/nest:application). You can also run the `configuration` generator against API projects like a [Nest API](/packages/nest/generators/application#@nx/nest:application).
If there is a URL to visit then you can test it with Cypress! If there is a URL to visit then you can test it with Cypress!
{% /callout %} {% /callout %}
@ -22,7 +22,7 @@ If there is a URL to visit then you can test it with Cypress!
Now, you can generate your Cypress project with Vite.js as the bundler: Now, you can generate your Cypress project with Vite.js as the bundler:
```bash ```bash
nx g cypress-project --name=my-app-e2e --project=my-app --bundler=vite nx g configuration --name=my-app-e2e --project=my-app --bundler=vite
``` ```
This generator will pass the `bundler` information (`bundler: 'vite'`) to our `nxE2EPreset`, in your project's `cypress.config.ts` file (eg. `my-app-e2e/cypress.config.ts`). This generator will pass the `bundler` information (`bundler: 'vite'`) to our `nxE2EPreset`, in your project's `cypress.config.ts` file (eg. `my-app-e2e/cypress.config.ts`).