From b3f68fe89ec75ba1c9854900fa8c7a05cbf2cb2d Mon Sep 17 00:00:00 2001 From: Caleb Ukle Date: Mon, 14 Aug 2023 10:57:41 -0500 Subject: [PATCH] docs(testing): update docs to use configuration generator (#18587) --- docs/generated/packages/cypress/documents/overview.md | 4 ++-- docs/generated/packages/cypress/executors/cypress.json | 2 +- .../packages/cypress/generators/cypress-project.json | 2 +- docs/generated/packages/jest/documents/overview.md | 6 +++--- docs/shared/packages/cypress/cypress-plugin.md | 4 ++-- docs/shared/packages/jest/jest-plugin.md | 6 +++--- packages/cypress/docs/cypress-examples.md | 4 ++-- packages/cypress/docs/cypress-project-examples.md | 8 ++++---- 8 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/generated/packages/cypress/documents/overview.md b/docs/generated/packages/cypress/documents/overview.md index 52868da3b9..986a180e81 100644 --- a/docs/generated/packages/cypress/documents/overview.md +++ b/docs/generated/packages/cypress/documents/overview.md @@ -36,13 +36,13 @@ nx g @nx/web:app frontend To generate an E2E project based on an existing project, run the following generator ```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`. ```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`. diff --git a/docs/generated/packages/cypress/executors/cypress.json b/docs/generated/packages/cypress/executors/cypress.json index 7eead1fc5c..b4e2003f1e 100644 --- a/docs/generated/packages/cypress/executors/cypress.json +++ b/docs/generated/packages/cypress/executors/cypress.json @@ -149,7 +149,7 @@ }, "additionalProperties": true, "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.", "aliases": [], diff --git a/docs/generated/packages/cypress/generators/cypress-project.json b/docs/generated/packages/cypress/generators/cypress-project.json index 4db500f466..66998139d5 100644 --- a/docs/generated/packages/cypress/generators/cypress-project.json +++ b/docs/generated/packages/cypress/generators/cypress-project.json @@ -73,7 +73,7 @@ } }, "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": [] }, "description": "Add a Cypress E2E Project.", diff --git a/docs/generated/packages/jest/documents/overview.md b/docs/generated/packages/jest/documents/overview.md index e88f78bb95..62eeb24522 100644 --- a/docs/generated/packages/jest/documents/overview.md +++ b/docs/generated/packages/jest/documents/overview.md @@ -14,7 +14,7 @@ nx g @nx/web:app frontend ### 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. @@ -26,10 +26,10 @@ npm install --save-dev @nx/jest yarn add --dev @nx/jest ``` -Once installed, run the `jest-project` generator +Once installed, run the `configuration` generator ```shell -nx g @nx/jest:jest-project --project= +nx g @nx/jest:configuration --project= ``` > Hint: You can use the `--dry-run` flag to see what will be generated. diff --git a/docs/shared/packages/cypress/cypress-plugin.md b/docs/shared/packages/cypress/cypress-plugin.md index 52868da3b9..986a180e81 100644 --- a/docs/shared/packages/cypress/cypress-plugin.md +++ b/docs/shared/packages/cypress/cypress-plugin.md @@ -36,13 +36,13 @@ nx g @nx/web:app frontend To generate an E2E project based on an existing project, run the following generator ```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`. ```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`. diff --git a/docs/shared/packages/jest/jest-plugin.md b/docs/shared/packages/jest/jest-plugin.md index e88f78bb95..62eeb24522 100644 --- a/docs/shared/packages/jest/jest-plugin.md +++ b/docs/shared/packages/jest/jest-plugin.md @@ -14,7 +14,7 @@ nx g @nx/web:app frontend ### 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. @@ -26,10 +26,10 @@ npm install --save-dev @nx/jest yarn add --dev @nx/jest ``` -Once installed, run the `jest-project` generator +Once installed, run the `configuration` generator ```shell -nx g @nx/jest:jest-project --project= +nx g @nx/jest:configuration --project= ``` > Hint: You can use the `--dry-run` flag to see what will be generated. diff --git a/packages/cypress/docs/cypress-examples.md b/packages/cypress/docs/cypress-examples.md index fc6bd2707b..5214dacf71 100644 --- a/packages/cypress/docs/cypress-examples.md +++ b/packages/cypress/docs/cypress-examples.md @@ -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 %} {% tab label="E2E Testing" %} @@ -118,7 +118,7 @@ Using [executor configurations](recipes/executors/use-executor-configurations#us }, "dev": { "env": { - "API_URL": "http://locahost:3333/api" + "API_URL": "http://localhost:3333/api" } } } diff --git a/packages/cypress/docs/cypress-project-examples.md b/packages/cypress/docs/cypress-project-examples.md index 9daaedaff4..c99903aa4c 100644 --- a/packages/cypress/docs/cypress-project-examples.md +++ b/packages/cypress/docs/cypress-project-examples.md @@ -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. ```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. @@ -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` ```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?" %} -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! {% /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: ```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`).