diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 394b72f2bdedc..62ce4287bb0da 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -4203,9 +4203,9 @@ "disableCollapsible": false }, { - "id": "cypress-component-project", - "path": "/packages/cypress/generators/cypress-component-project", - "name": "cypress-component-project", + "id": "cypress-component-configuration", + "path": "/packages/cypress/generators/cypress-component-configuration", + "name": "cypress-component-configuration", "children": [], "isExternal": false, "disableCollapsible": false diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json index 4989c4f058ddb..8e755acb2171f 100644 --- a/docs/generated/manifests/packages.json +++ b/docs/generated/manifests/packages.json @@ -474,13 +474,13 @@ "path": "/packages/cypress/generators/cypress-e2e-configuration", "type": "generator" }, - "/packages/cypress/generators/cypress-component-project": { + "/packages/cypress/generators/cypress-component-configuration": { "description": "Set up Cypress Component Test for a project", - "file": "generated/packages/cypress/generators/cypress-component-project.json", + "file": "generated/packages/cypress/generators/cypress-component-configuration.json", "hidden": true, - "name": "cypress-component-project", - "originalFilePath": "/packages/cypress/src/generators/cypress-component-project/schema.json", - "path": "/packages/cypress/generators/cypress-component-project", + "name": "cypress-component-configuration", + "originalFilePath": "/packages/cypress/src/generators/cypress-component-configuration/schema.json", + "path": "/packages/cypress/generators/cypress-component-configuration", "type": "generator" }, "/packages/cypress/generators/migrate-to-cypress-11": { diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index 550955329139f..d36f5f969107d 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -468,11 +468,11 @@ }, { "description": "Set up Cypress Component Test for a project", - "file": "generated/packages/cypress/generators/cypress-component-project.json", + "file": "generated/packages/cypress/generators/cypress-component-configuration.json", "hidden": true, - "name": "cypress-component-project", - "originalFilePath": "/packages/cypress/src/generators/cypress-component-project/schema.json", - "path": "cypress/generators/cypress-component-project", + "name": "cypress-component-configuration", + "originalFilePath": "/packages/cypress/src/generators/cypress-component-configuration/schema.json", + "path": "cypress/generators/cypress-component-configuration", "type": "generator" }, { diff --git a/docs/generated/packages/cypress/generators/cypress-component-configuration.json b/docs/generated/packages/cypress/generators/cypress-component-configuration.json new file mode 100644 index 0000000000000..d99a2b20e5276 --- /dev/null +++ b/docs/generated/packages/cypress/generators/cypress-component-configuration.json @@ -0,0 +1,42 @@ +{ + "name": "cypress-component-configuration", + "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfiguration", + "schema": { + "$schema": "http://json-schema.org/schema", + "$id": "NxCypressComponentConfiguration", + "cli": "nx", + "title": "Set up Cypress component testing for a project", + "description": "Set up Cypress component test for a project.", + "type": "object", + "examples": [ + { + "command": "nx g @nrwl/cypress:cypress-component-configuration --project=my-cool-lib ", + "description": "Add cypress component testing to an existing project named my-cool-lib" + } + ], + "properties": { + "project": { + "type": "string", + "description": "The name of the project to add cypress component testing to", + "$default": { "$source": "projectName" }, + "x-prompt": "What project should we add Cypress component testing to?" + }, + "bundler": { + "description": "The Cypress bundler to use.", + "type": "string", + "enum": ["vite", "webpack"], + "x-prompt": "Which Cypress bundler do you want to use for the dev-server?", + "default": "webpack" + } + }, + "required": ["project"], + "examplesFile": "This is a framework-agnostic generator for adding component testing to a project.\n\n```bash\nnx g cypress-component-configuration --project=my-cool-project\n```\n\nRunning this generator, adds the required files to the specified project without any configurations for Cypress. It's best to use the framework specific generator, instead `cypress-component-configuration` directly\n\n- [React component testing](/packages/react/generators/cypress-component-configuration)\n- [Angular component testing](/packages/angular/generators/cypress-component-configuration)\n\nA new `component-test` target will be added to the specified project.\n\n```bash\nnx g component-test my-cool-project\n```\n\nRead more about [Cypress Component Testing](/cypress/cypress-component-testing)\n", + "presets": [] + }, + "description": "Set up Cypress Component Test for a project", + "hidden": true, + "implementation": "/packages/cypress/src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfiguration.ts", + "aliases": [], + "path": "/packages/cypress/src/generators/cypress-component-configuration/schema.json", + "type": "generator" +} diff --git a/docs/generated/packages/react/generators/cypress-component-configuration.json b/docs/generated/packages/react/generators/cypress-component-configuration.json index 4c06cdf99674b..c076ea07f1722 100644 --- a/docs/generated/packages/react/generators/cypress-component-configuration.json +++ b/docs/generated/packages/react/generators/cypress-component-configuration.json @@ -53,7 +53,7 @@ } }, "required": ["project"], - "examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/react/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your React project up and running with Cypress Component Testing.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\nThe following file will be added to projects where the Component Testing build target is using `webpack` for bundling:\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n component: nxComponentTestingPreset(__filename, {\n bundler: 'webpack',\n }),\n});\n```\n\nThe following file will be added to projects where the Component Testing build target is using `vite` for bundling:\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n component: nxComponentTestingPreset(__filename, {\n bundler: 'vite',\n }),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n component: {\n ...nxComponentTestingPreset(__filename, {\n bundler: 'webpack',\n }),\n // extra options here\n },\n});\n```\n\n## The `bundler` option\n\nComponent testing supports two different bundlers: `webpack` and `vite`. The Nx generator will pick up the bundler used in the specified project's build target. If the build target is using `@nrwl/webpack:webpack`, then the generator will use `webpack` as the bundler. If the build target is using `@nrwl/vite:build`, then the generator will use `vite` as the bundler.\n\nYou can manually set the bundler by passing `--bundler=webpack` or `--bundler=vite` to the generator, but that is not needed since the generator will pick up the correct bundler for you. However, if you want to use a different bundler than the one that is used in the build target, then you can manually set it using that flag.\n\n## Specifying a Build Target\n\nComponent testing requires a _build target_ to correctly run the component test dev server. This option can be manually specified with `--build-target=some-react-app:build`, but Nx will infer this usage from the [project graph](/concepts/mental-model#the-project-graph) if one isn't provided.\n\nFor React projects, the build target needs to be using the `@nrwl/webpack:webpack` executor.\nThe generator will throw an error if a build target can't be found and suggest passing one in manually.\n\nLetting Nx infer the build target by default\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nManually specifying the build target\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --build-target:some-react-app:build --generate-tests\n```\n\n{% callout type=\"note\" title=\"Build Target with Configuration\" %}\nIf you're wanting to use a build target with a specific configuration. i.e. `my-app:build:production`,\nthen manually providing `--build-target=my-app:build:production` is the best way to do that.\n{% /callout %}\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-react-project\n```\n\nHere is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.\n\n```json {% fileName=\"project.json\" %}\n{\n \"targets\" {\n \"component-test\": {\n \"executor\": \"@nrwl/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"/cypress.config.ts\",\n \"testingType\": \"component\",\n \"devServerTarget\": \"some-react-app:build\",\n \"skipServe\": true\n }\n }\n }\n}\n```\n\nNx also supports [Angular component testing](/packages/angular/generators/cypress-component-configuration).\n", + "examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/react/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your React project up and running with Cypress Component Testing.\n\n```shell\nnx g @nrwl/react:cypress-component-configuration --project=my-cool-react-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\nThe following file will be added to projects where the Component Testing build target is using `webpack` for bundling:\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n component: nxComponentTestingPreset(__filename, {\n bundler: 'webpack',\n }),\n});\n```\n\nThe following file will be added to projects where the Component Testing build target is using `vite` for bundling:\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n component: nxComponentTestingPreset(__filename, {\n bundler: 'vite',\n }),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n component: {\n ...nxComponentTestingPreset(__filename, {\n bundler: 'webpack',\n }),\n // extra options here\n },\n});\n```\n\n## The `bundler` option\n\nComponent testing supports two different bundlers: `webpack` and `vite`. The Nx generator will pick up the bundler used in the specified project's build target. If the build target is using `@nrwl/webpack:webpack`, then the generator will use `webpack` as the bundler. If the build target is using `@nrwl/vite:build`, then the generator will use `vite` as the bundler.\n\nYou can manually set the bundler by passing `--bundler=webpack` or `--bundler=vite` to the generator, but that is not needed since the generator will pick up the correct bundler for you. However, if you want to use a different bundler than the one that is used in the build target, then you can manually set it using that flag.\n\n## Specifying a Build Target\n\nComponent testing requires a _build target_ to correctly run the component test dev server. This option can be manually specified with `--build-target=some-react-app:build`, but Nx will infer this usage from the [project graph](/concepts/mental-model#the-project-graph) if one isn't provided.\n\nFor React projects, the build target needs to be using the `@nrwl/webpack:webpack` executor.\nThe generator will throw an error if a build target can't be found and suggest passing one in manually.\n\nLetting Nx infer the build target by default\n\n```shell\nnx g @nrwl/react:cypress-component-configuration --project=my-cool-react-project\n```\n\nManually specifying the build target\n\n```shell\nnx g @nrwl/react:cypress-component-configuration --project=my-cool-react-project --build-target:some-react-app:build --generate-tests\n```\n\n{% callout type=\"note\" title=\"Build Target with Configuration\" %}\nIf you're wanting to use a build target with a specific configuration. i.e. `my-app:build:production`,\nthen manually providing `--build-target=my-app:build:production` is the best way to do that.\n{% /callout %}\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nrwl/react:cypress-component-configuration --project=my-cool-react-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-react-project\n```\n\nHere is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.\n\n```json {% fileName=\"project.json\" %}\n{\n \"targets\" {\n \"component-test\": {\n \"executor\": \"@nrwl/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"/cypress.config.ts\",\n \"testingType\": \"component\",\n \"devServerTarget\": \"some-react-app:build\",\n \"skipServe\": true\n }\n }\n }\n}\n```\n\nNx also supports [Angular component testing](/packages/angular/generators/cypress-component-configuration).\n", "presets": [] }, "description": "Setup Cypress component testing for a React project", diff --git a/packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts b/packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts index 9c6437a2135c2..82f5f89c31874 100644 --- a/packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts +++ b/packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts @@ -1,4 +1,4 @@ -import { cypressComponentProject } from '@nx/cypress'; +import { cypressComponentConfiguration as baseCyCTConfig } from '@nx/cypress'; import { findBuildConfig } from '@nx/cypress/src/utils/find-target-options'; import { formatFiles, @@ -28,7 +28,7 @@ export async function cypressComponentConfiguration( options: CypressComponentConfigSchema ) { const projectConfig = readProjectConfiguration(tree, options.project); - const installTask = await cypressComponentProject(tree, { + const installTask = await baseCyCTConfig(tree, { project: options.project, skipFormat: true, }); diff --git a/packages/cypress/docs/cypress-component-project-examples.md b/packages/cypress/docs/cypress-component-configuration-examples.md similarity index 80% rename from packages/cypress/docs/cypress-component-project-examples.md rename to packages/cypress/docs/cypress-component-configuration-examples.md index c70b890edabfa..1db25d3b31deb 100644 --- a/packages/cypress/docs/cypress-component-project-examples.md +++ b/packages/cypress/docs/cypress-component-configuration-examples.md @@ -1,10 +1,10 @@ This is a framework-agnostic generator for adding component testing to a project. ```bash -nx g cypress-component-project --project=my-cool-project +nx g cypress-component-configuration --project=my-cool-project ``` -Running this generator, adds the required files to the specified project without any configurations for Cypress. It's best to use the framework specific generator, instead `cypress-component-project` directly +Running this generator, adds the required files to the specified project without any configurations for Cypress. It's best to use the framework specific generator, instead `cypress-component-configuration` directly - [React component testing](/packages/react/generators/cypress-component-configuration) - [Angular component testing](/packages/angular/generators/cypress-component-configuration) diff --git a/packages/cypress/generators.json b/packages/cypress/generators.json index 7af9d7578a8a3..a4763971eeb3d 100644 --- a/packages/cypress/generators.json +++ b/packages/cypress/generators.json @@ -20,9 +20,9 @@ "schema": "./src/generators/cypress-e2e-configuration/schema.json", "description": "Add a Cypress E2E Configuration to an existing project." }, - "cypress-component-project": { - "factory": "./src/generators/cypress-component-project/cypress-component-project#cypressComponentProject", - "schema": "./src/generators/cypress-component-project/schema.json", + "cypress-component-configuration": { + "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfiguration", + "schema": "./src/generators/cypress-component-configuration/schema.json", "description": "Set up Cypress Component Test for a project" }, "migrate-to-cypress-11": { @@ -51,9 +51,9 @@ "schema": "./src/generators/cypress-e2e-configuration/schema.json", "description": "Add a Cypress E2E Configuration to an existing project." }, - "cypress-component-project": { - "factory": "./src/generators/cypress-component-project/cypress-component-project#cypressComponentProject", - "schema": "./src/generators/cypress-component-project/schema.json", + "cypress-component-configuration": { + "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfiguration", + "schema": "./src/generators/cypress-component-configuration/schema.json", "description": "Set up Cypress Component Test for a project", "hidden": true }, diff --git a/packages/cypress/index.ts b/packages/cypress/index.ts index a1e7c9d5ba6aa..bab858ef04a73 100644 --- a/packages/cypress/index.ts +++ b/packages/cypress/index.ts @@ -1,6 +1,6 @@ export { cypressProjectGenerator } from './src/generators/cypress-project/cypress-project'; export { cypressInitGenerator } from './src/generators/init/init'; export { conversionGenerator } from './src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint'; -export { cypressComponentProject } from './src/generators/cypress-component-project/cypress-component-project'; +export { cypressComponentConfiguration } from './src/generators/cypress-component-configuration/cypress-component-configuration'; export { migrateCypressProject } from './src/generators/migrate-to-cypress-11/migrate-to-cypress-11'; export { cypressE2EConfigurationGenerator } from './src/generators/cypress-e2e-configuration/cypress-e2e-configuration'; diff --git a/packages/cypress/src/generators/cypress-component-project/__snapshots__/cypress-component-project.spec.ts.snap b/packages/cypress/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap similarity index 63% rename from packages/cypress/src/generators/cypress-component-project/__snapshots__/cypress-component-project.spec.ts.snap rename to packages/cypress/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap index 5e2a782e1a0b2..14954afcb2506 100644 --- a/packages/cypress/src/generators/cypress-component-project/__snapshots__/cypress-component-project.spec.ts.snap +++ b/packages/cypress/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Cypress Component Project should add base cypress component testing config 1`] = ` +exports[`Cypress Component Configuration should add base cypress component testing config 1`] = ` { "executor": "@nx/cypress:cypress", "options": { @@ -10,7 +10,7 @@ exports[`Cypress Component Project should add base cypress component testing con } `; -exports[`Cypress Component Project should not error when rerunning on an existing project 1`] = ` +exports[`Cypress Component Configuration should not error when rerunning on an existing project 1`] = ` { "executor": "@nx/cypress:cypress", "options": { diff --git a/packages/cypress/src/generators/cypress-component-project/cypress-component-project.spec.ts b/packages/cypress/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts similarity index 94% rename from packages/cypress/src/generators/cypress-component-project/cypress-component-project.spec.ts rename to packages/cypress/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts index 6a40f37d19554..5778a62ed1695 100644 --- a/packages/cypress/src/generators/cypress-component-project/cypress-component-project.spec.ts +++ b/packages/cypress/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts @@ -9,7 +9,7 @@ import { } from '@nx/devkit'; import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; import { installedCypressVersion } from '../../utils/cypress-version'; -import { cypressComponentProject } from './cypress-component-project'; +import { cypressComponentConfiguration } from './cypress-component-configuration'; jest.mock('../../utils/cypress-version'); let projectConfig: ProjectConfiguration = { @@ -31,7 +31,7 @@ let projectConfig: ProjectConfiguration = { }, }, }; -describe('Cypress Component Project', () => { +describe('Cypress Component Configuration', () => { let tree: Tree; let mockedInstalledCypressVersion: jest.Mock< ReturnType @@ -97,7 +97,7 @@ describe('Cypress Component Project', () => { it('should add base cypress component testing config', async () => { mockedInstalledCypressVersion.mockReturnValue(10); - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: 'cool-lib', skipFormat: false, }); @@ -156,7 +156,7 @@ describe('Cypress Component Project', () => { }; return json; }); - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: 'cool-lib', skipFormat: false, }); @@ -196,7 +196,7 @@ describe('Cypress Component Project', () => { }, }); - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: 'cool-lib', skipFormat: true, }); @@ -212,7 +212,7 @@ describe('Cypress Component Project', () => { mockedInstalledCypressVersion.mockReturnValue(9); await expect( async () => - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: 'cool-lib', skipFormat: true, }) diff --git a/packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts b/packages/cypress/src/generators/cypress-component-configuration/cypress-component-configuration.ts similarity index 93% rename from packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts rename to packages/cypress/src/generators/cypress-component-configuration/cypress-component-configuration.ts index 6eb177ac2f03b..d77dd2fc7b383 100644 --- a/packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts +++ b/packages/cypress/src/generators/cypress-component-configuration/cypress-component-configuration.ts @@ -20,11 +20,11 @@ import { cypressWebpackVersion, htmlWebpackPluginVersion, } from '../../utils/versions'; -import { CypressComponentProjectSchema } from './schema'; +import { CypressComponentConfigurationSchema } from './schema'; -export async function cypressComponentProject( +export async function cypressComponentConfiguration( tree: Tree, - options: CypressComponentProjectSchema + options: CypressComponentConfigurationSchema ) { const cyVersion = installedCypressVersion(); if (cyVersion && cyVersion < 10) { @@ -50,7 +50,7 @@ export async function cypressComponentProject( }; } -function updateDeps(tree: Tree, options: CypressComponentProjectSchema) { +function updateDeps(tree: Tree, options: CypressComponentConfigurationSchema) { const devDeps = { cypress: cypressVersion, }; @@ -68,7 +68,7 @@ function updateDeps(tree: Tree, options: CypressComponentProjectSchema) { function addProjectFiles( tree: Tree, projectConfig: ProjectConfiguration, - options: CypressComponentProjectSchema + options: CypressComponentConfigurationSchema ) { generateFiles( tree, @@ -86,7 +86,7 @@ function addProjectFiles( function addTargetToProject( tree: Tree, projectConfig: ProjectConfiguration, - options: CypressComponentProjectSchema + options: CypressComponentConfigurationSchema ) { projectConfig.targets['component-test'] = { executor: '@nx/cypress:cypress', diff --git a/packages/cypress/src/generators/cypress-component-project/files/cypress.config.ts__ext__ b/packages/cypress/src/generators/cypress-component-configuration/files/cypress.config.ts__ext__ similarity index 100% rename from packages/cypress/src/generators/cypress-component-project/files/cypress.config.ts__ext__ rename to packages/cypress/src/generators/cypress-component-configuration/files/cypress.config.ts__ext__ diff --git a/packages/cypress/src/generators/cypress-component-project/files/cypress/fixtures/example.json b/packages/cypress/src/generators/cypress-component-configuration/files/cypress/fixtures/example.json similarity index 100% rename from packages/cypress/src/generators/cypress-component-project/files/cypress/fixtures/example.json rename to packages/cypress/src/generators/cypress-component-configuration/files/cypress/fixtures/example.json diff --git a/packages/cypress/src/generators/cypress-component-project/files/cypress/support/commands.ts__ext__ b/packages/cypress/src/generators/cypress-component-configuration/files/cypress/support/commands.ts__ext__ similarity index 100% rename from packages/cypress/src/generators/cypress-component-project/files/cypress/support/commands.ts__ext__ rename to packages/cypress/src/generators/cypress-component-configuration/files/cypress/support/commands.ts__ext__ diff --git a/packages/cypress/src/generators/cypress-component-project/files/cypress/support/component-index.html b/packages/cypress/src/generators/cypress-component-configuration/files/cypress/support/component-index.html similarity index 100% rename from packages/cypress/src/generators/cypress-component-project/files/cypress/support/component-index.html rename to packages/cypress/src/generators/cypress-component-configuration/files/cypress/support/component-index.html diff --git a/packages/cypress/src/generators/cypress-component-project/files/cypress/support/component.ts__ext__ b/packages/cypress/src/generators/cypress-component-configuration/files/cypress/support/component.ts__ext__ similarity index 100% rename from packages/cypress/src/generators/cypress-component-project/files/cypress/support/component.ts__ext__ rename to packages/cypress/src/generators/cypress-component-configuration/files/cypress/support/component.ts__ext__ diff --git a/packages/cypress/src/generators/cypress-component-project/files/cypress/tsconfig.cy.json b/packages/cypress/src/generators/cypress-component-configuration/files/cypress/tsconfig.cy.json similarity index 100% rename from packages/cypress/src/generators/cypress-component-project/files/cypress/tsconfig.cy.json rename to packages/cypress/src/generators/cypress-component-configuration/files/cypress/tsconfig.cy.json diff --git a/packages/cypress/src/generators/cypress-component-project/schema.d.ts b/packages/cypress/src/generators/cypress-component-configuration/schema.d.ts similarity index 58% rename from packages/cypress/src/generators/cypress-component-project/schema.d.ts rename to packages/cypress/src/generators/cypress-component-configuration/schema.d.ts index 1b59ad0441d46..e2dffa940cb77 100644 --- a/packages/cypress/src/generators/cypress-component-project/schema.d.ts +++ b/packages/cypress/src/generators/cypress-component-configuration/schema.d.ts @@ -1,4 +1,4 @@ -export interface CypressComponentProjectSchema { +export interface CypressComponentConfigurationSchema { project: string; skipFormat: boolean; bundler?: 'webpack' | 'vite'; diff --git a/packages/cypress/src/generators/cypress-component-project/schema.json b/packages/cypress/src/generators/cypress-component-configuration/schema.json similarity index 80% rename from packages/cypress/src/generators/cypress-component-project/schema.json rename to packages/cypress/src/generators/cypress-component-configuration/schema.json index 48f2b0182ceba..d182c53f3069a 100644 --- a/packages/cypress/src/generators/cypress-component-project/schema.json +++ b/packages/cypress/src/generators/cypress-component-configuration/schema.json @@ -1,13 +1,13 @@ { "$schema": "http://json-schema.org/schema", - "$id": "NxCypressComponentProject", + "$id": "NxCypressComponentConfiguration", "cli": "nx", "title": "Set up Cypress component testing for a project", "description": "Set up Cypress component test for a project.", "type": "object", "examples": [ { - "command": "nx g @nrwl/cypress:cypress-component-project --project=my-cool-lib ", + "command": "nx g @nrwl/cypress:cypress-component-configuration --project=my-cool-lib ", "description": "Add cypress component testing to an existing project named my-cool-lib" } ], @@ -29,5 +29,5 @@ } }, "required": ["project"], - "examplesFile": "../../../docs/cypress-component-project-examples.md" + "examplesFile": "../../../docs/cypress-component-configuration-examples.md" } diff --git a/packages/cypress/src/migrations/update-15-0-0/update-cy-mount-usage.spec.ts b/packages/cypress/src/migrations/update-15-0-0/update-cy-mount-usage.spec.ts index 2afeb614dbe04..4da3c27a3654f 100644 --- a/packages/cypress/src/migrations/update-15-0-0/update-cy-mount-usage.spec.ts +++ b/packages/cypress/src/migrations/update-15-0-0/update-cy-mount-usage.spec.ts @@ -11,7 +11,7 @@ import { updateCyMountUsage, } from './update-cy-mount-usage'; import { libraryGenerator } from '@nx/js'; -import { cypressComponentProject } from '../../generators/cypress-component-project/cypress-component-project'; +import { cypressComponentConfiguration } from '../../generators/cypress-component-configuration/cypress-component-configuration'; jest.mock('../../utils/cypress-version'); // nested code imports graph from the repo, which might have innacurate graph version @@ -179,11 +179,11 @@ Cypress.Commands.add('login', (email, password) => { async function setup(tree: Tree) { await libraryGenerator(tree, { name: 'my-lib' }); await libraryGenerator(tree, { name: 'another-lib' }); - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: 'my-lib', skipFormat: false, }); - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: 'another-lib', skipFormat: false, }); diff --git a/packages/cypress/src/migrations/update-15-1-0/cypress-11.spec.ts b/packages/cypress/src/migrations/update-15-1-0/cypress-11.spec.ts index 9f9fbb17ade08..8b3f953b39e15 100644 --- a/packages/cypress/src/migrations/update-15-1-0/cypress-11.spec.ts +++ b/packages/cypress/src/migrations/update-15-1-0/cypress-11.spec.ts @@ -9,7 +9,7 @@ import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; import updateToCypress11 from './cypress-11'; import { installedCypressVersion } from '../../utils/cypress-version'; jest.mock('../../utils/cypress-version'); -import { cypressComponentProject } from '../../generators/cypress-component-project/cypress-component-project'; +import { cypressComponentConfiguration } from '../../generators/cypress-component-configuration/cypress-component-configuration'; describe('Cypress 11 Migration', () => { let tree: Tree; @@ -119,7 +119,7 @@ async function setup(tree: Tree) { await libraryGenerator(tree, { name: 'my-react-lib', }); - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: 'my-react-lib', skipFormat: true, }); @@ -266,7 +266,7 @@ describe('again', () => { name: 'my-ng-lib', }); - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: 'my-ng-lib', skipFormat: true, }); diff --git a/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts b/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts index 6645bb3be2b43..4c8952b48227b 100644 --- a/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts +++ b/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts @@ -22,11 +22,11 @@ export async function cypressComponentConfiguration( ) { const tasks: GeneratorCallback[] = []; - const { cypressComponentProject } = ensurePackage< + const { cypressComponentConfiguration } = ensurePackage< typeof import('@nx/cypress') >('@nx/cypress', nxVersion); tasks.push( - await cypressComponentProject(tree, { + await cypressComponentConfiguration(tree, { project: options.project, skipFormat: true, }) diff --git a/packages/react/docs/cypress-component-configuration-examples.md b/packages/react/docs/cypress-component-configuration-examples.md index cd66f019b35c3..bfca5fec7d733 100644 --- a/packages/react/docs/cypress-component-configuration-examples.md +++ b/packages/react/docs/cypress-component-configuration-examples.md @@ -11,7 +11,7 @@ If you want to test components via Storybook with Cypress, then check out the [s This generator is designed to get your React project up and running with Cypress Component Testing. ```shell -nx g @nrwl/react:cypress-component-project --project=my-cool-react-project +nx g @nrwl/react:cypress-component-configuration --project=my-cool-react-project ``` Running this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces. @@ -74,13 +74,13 @@ The generator will throw an error if a build target can't be found and suggest p Letting Nx infer the build target by default ```shell -nx g @nrwl/react:cypress-component-project --project=my-cool-react-project +nx g @nrwl/react:cypress-component-configuration --project=my-cool-react-project ``` Manually specifying the build target ```shell -nx g @nrwl/react:cypress-component-project --project=my-cool-react-project --build-target:some-react-app:build --generate-tests +nx g @nrwl/react:cypress-component-configuration --project=my-cool-react-project --build-target:some-react-app:build --generate-tests ``` {% callout type="note" title="Build Target with Configuration" %} @@ -93,7 +93,7 @@ then manually providing `--build-target=my-app:build:production` is the best way You can optionally use the `--generate-tests` flag to generate a test file for each component in your project. ```shell -nx g @nrwl/react:cypress-component-project --project=my-cool-react-project --generate-tests +nx g @nrwl/react:cypress-component-configuration --project=my-cool-react-project --generate-tests ``` ## Running Component Tests diff --git a/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts b/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts index c49bcc2a900f8..cb9eecaa094a5 100644 --- a/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts +++ b/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts @@ -18,9 +18,11 @@ export async function cypressComponentConfigGenerator( tree: Tree, options: CypressComponentConfigurationSchema ) { - const { cypressComponentProject } = ensurePackage('@nx/cypress', nxVersion); + const { cypressComponentConfiguration: baseCyCtConfig } = ensurePackage< + typeof import('@nx/cypress') + >('@nx/cypress', nxVersion); const projectConfig = readProjectConfiguration(tree, options.project); - const installTask = await cypressComponentProject(tree, { + const installTask = await baseCyCtConfig(tree, { project: options.project, skipFormat: true, });