feat(storybook): infer Cypress project name from app source (#5404)

nrwl · Apr 22, 2021 · bd21728 · bd21728
1 parent 90b83da
commit bd21728
Show file tree

Hide file tree

Showing 32 changed files with 96 additions and 179 deletions.
diff --git a/docs/angular/api-angular/generators/storybook-configuration.md b/docs/angular/api-angular/generators/storybook-configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Placed at the root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### generateCypressSpecs
 
 Type: `boolean`

diff --git a/docs/angular/api-react/generators/storybook-configuration.md b/docs/angular/api-react/generators/storybook-configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Placed at the root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### generateCypressSpecs
 
 Type: `boolean`

diff --git a/docs/angular/api-storybook/generators/configuration.md b/docs/angular/api-storybook/generators/configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Added at root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### js
 
 Default: `false`

diff --git a/docs/angular/api-storybook/generators/cypress-project.md b/docs/angular/api-storybook/generators/cypress-project.md
@@ -24,12 +24,6 @@ nx g cypress-project ... --dry-run
 
 ## Options
 
-### cypressName
-
-Type: `string`
-
-The name of the Cypress project. Inferred from 'name' by default
-
 ### directory
 
 Type: `string`

diff --git a/docs/node/api-angular/generators/storybook-configuration.md b/docs/node/api-angular/generators/storybook-configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Placed at the root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### generateCypressSpecs
 
 Type: `boolean`

diff --git a/docs/node/api-react/generators/storybook-configuration.md b/docs/node/api-react/generators/storybook-configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Placed at the root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### generateCypressSpecs
 
 Type: `boolean`

diff --git a/docs/node/api-storybook/generators/configuration.md b/docs/node/api-storybook/generators/configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Added at root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### js
 
 Default: `false`

diff --git a/docs/node/api-storybook/generators/cypress-project.md b/docs/node/api-storybook/generators/cypress-project.md
@@ -24,12 +24,6 @@ nx g cypress-project ... --dry-run
 
 ## Options
 
-### cypressName
-
-Type: `string`
-
-The name of the Cypress project. Inferred from 'name' by default
-
 ### directory
 
 Type: `string`

diff --git a/docs/react/api-angular/generators/storybook-configuration.md b/docs/react/api-angular/generators/storybook-configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Placed at the root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### generateCypressSpecs
 
 Type: `boolean`

diff --git a/docs/react/api-react/generators/storybook-configuration.md b/docs/react/api-react/generators/storybook-configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Placed at the root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### generateCypressSpecs
 
 Type: `boolean`

diff --git a/docs/react/api-storybook/generators/configuration.md b/docs/react/api-storybook/generators/configuration.md
@@ -36,12 +36,6 @@ Type: `string`
 
 A directory where the Cypress project will be placed. Added at root by default.
 
-### cypressName
-
-Type: `string`
-
-A custom name for the Cypress project. Inferred from 'name' by default.
-
 ### js
 
 Default: `false`

diff --git a/docs/react/api-storybook/generators/cypress-project.md b/docs/react/api-storybook/generators/cypress-project.md
@@ -24,12 +24,6 @@ nx g cypress-project ... --dry-run
 
 ## Options
 
-### cypressName
-
-Type: `string`
-
-The name of the Cypress project. Inferred from 'name' by default
-
 ### directory
 
 Type: `string`

diff --git a/...s/angular/src/schematics/storybook-configuration/__snapshots__/configuration.spec.ts.snap b/...s/angular/src/schematics/storybook-configuration/__snapshots__/configuration.spec.ts.snap
@@ -60,20 +60,20 @@ Array [
   "/.storybook/main.js",
   "/.storybook/tsconfig.json",
   "/.storybook/webpack.config.js",
-  "/apps/one/two/lib-test/cypress.json",
-  "/apps/one/two/lib-test/tsconfig.e2e.json",
-  "/apps/one/two/lib-test/tsconfig.json",
-  "/apps/one/two/lib-test/.eslintrc.json",
-  "/apps/one/two/lib-test/src/fixtures/example.json",
-  "/apps/one/two/lib-test/src/plugins/index.js",
-  "/apps/one/two/lib-test/src/support/commands.ts",
-  "/apps/one/two/lib-test/src/support/index.ts",
-  "/apps/one/two/lib-test/src/integration/test-button/test-button.component.spec.ts",
-  "/apps/one/two/lib-test/src/integration/test-other/test-other.component.spec.ts",
-  "/apps/one/two/lib-test/src/integration/barrel-button/barrel-button.component.spec.ts",
-  "/apps/one/two/lib-test/src/integration/variable-declare-button/variable-declare-button.component.spec.ts",
-  "/apps/one/two/lib-test/src/integration/variable-declare-view/variable-declare-view.component.spec.ts",
-  "/apps/one/two/lib-test/src/integration/nested-button/nested-button.component.spec.ts",
+  "/apps/one/two/test-ui-lib-e2e/cypress.json",
+  "/apps/one/two/test-ui-lib-e2e/tsconfig.e2e.json",
+  "/apps/one/two/test-ui-lib-e2e/tsconfig.json",
+  "/apps/one/two/test-ui-lib-e2e/.eslintrc.json",
+  "/apps/one/two/test-ui-lib-e2e/src/fixtures/example.json",
+  "/apps/one/two/test-ui-lib-e2e/src/plugins/index.js",
+  "/apps/one/two/test-ui-lib-e2e/src/support/commands.ts",
+  "/apps/one/two/test-ui-lib-e2e/src/support/index.ts",
+  "/apps/one/two/test-ui-lib-e2e/src/integration/test-button/test-button.component.spec.ts",
+  "/apps/one/two/test-ui-lib-e2e/src/integration/test-other/test-other.component.spec.ts",
+  "/apps/one/two/test-ui-lib-e2e/src/integration/barrel-button/barrel-button.component.spec.ts",
+  "/apps/one/two/test-ui-lib-e2e/src/integration/variable-declare-button/variable-declare-button.component.spec.ts",
+  "/apps/one/two/test-ui-lib-e2e/src/integration/variable-declare-view/variable-declare-view.component.spec.ts",
+  "/apps/one/two/test-ui-lib-e2e/src/integration/nested-button/nested-button.component.spec.ts",
 ]
 `;
 

diff --git a/packages/angular/src/schematics/storybook-configuration/configuration.spec.ts b/packages/angular/src/schematics/storybook-configuration/configuration.spec.ts
@@ -116,7 +116,6 @@ describe('schematic:configuration', () => {
         generateCypressSpecs: true,
         generateStories: true,
         cypressDirectory: 'one/two',
-        cypressName: 'lib-test',
       },
       appTree
     );

diff --git a/packages/angular/src/schematics/storybook-configuration/configuration.ts b/packages/angular/src/schematics/storybook-configuration/configuration.ts
@@ -4,11 +4,13 @@ import {
   Rule,
   schematic,
   noop,
+  Tree,
 } from '@angular-devkit/schematics';
 import { StorybookStoriesSchema } from '../stories/stories';
 import { StorybookConfigureSchema } from './schema';
 import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
-import { getE2eProjectName } from '@nrwl/cypress';
+import { getE2eProjectName } from '@nrwl/cypress/src/utils/project-name';
+import { getWorkspace } from '@nrwl/workspace';
 
 export default function (schema: StorybookConfigureSchema): Rule {
   if (schema.generateCypressSpecs && !schema.generateStories) {
@@ -24,18 +26,20 @@ export default function (schema: StorybookConfigureSchema): Rule {
       configureCypress: schema.configureCypress,
       linter: schema.linter,
       cypressDirectory: schema.cypressDirectory,
-      cypressName: schema.cypressName,
     }),
     schema.generateStories ? generateStories(schema) : noop(),
   ]);
 }
 
 function generateStories(schema: StorybookConfigureSchema): Rule {
-  return (tree, context) => {
-    const e2eProjectName = getE2eProjectName({
-      name: schema.cypressName || `${schema.name}-e2e`,
-      directory: schema.cypressDirectory,
-    });
+  return async (tree: Tree, context) => {
+    const workspace = await getWorkspace(tree);
+    const project = workspace.projects.get(schema.name);
+    const e2eProjectName = getE2eProjectName(
+      schema.name,
+      project.root,
+      schema.cypressDirectory
+    );
     return schematic<StorybookStoriesSchema>('stories', {
       name: schema.name,
       generateCypressSpecs:

diff --git a/packages/angular/src/schematics/storybook-configuration/schema.d.ts b/packages/angular/src/schematics/storybook-configuration/schema.d.ts
@@ -7,5 +7,4 @@ export interface StorybookConfigureSchema {
   generateCypressSpecs: boolean;
   linter: Linter;
   cypressDirectory?: string;
-  cypressName?: string;
 }
diff --git a/packages/angular/src/schematics/storybook-configuration/schema.json b/packages/angular/src/schematics/storybook-configuration/schema.json
@@ -30,10 +30,6 @@
       "type": "string",
       "description": "A directory where the Cypress project will be placed. Placed at the root by default."
     },
-    "cypressName": {
-      "type": "string",
-      "description": "A custom name for the Cypress project. Inferred from 'name' by default."
-    },
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",

diff --git a/packages/cypress/index.ts b/packages/cypress/index.ts
@@ -1,6 +1,3 @@
-export {
-  cypressProjectGenerator,
-  getE2eProjectName,
-} from './src/generators/cypress-project/cypress-project';
+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';
diff --git a/packages/cypress/src/generators/cypress-project/cypress-project.spec.ts b/packages/cypress/src/generators/cypress-project/cypress-project.spec.ts
@@ -1,6 +1,6 @@
 import { readJson, readProjectConfiguration, Tree } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { cypressProjectGenerator, getE2eProjectName } from './cypress-project';
+import { cypressProjectGenerator } from './cypress-project';
 import { Schema } from './schema';
 import { Linter } from '@nrwl/linter';
 
@@ -295,17 +295,5 @@ describe('schematic:cypress-project', () => {
         'apps/one/two/other-e2e/src/integration/app.spec.ts',
       ].forEach((path) => expect(tree.exists(path)).toBeTruthy());
     });
-    test.each`
-      name         | directory    | projectName
-      ${'app-e2e'} | ${'one/two'} | ${'one-two-app-e2e'}
-      ${'app-e2e'} | ${'one'}     | ${'one-app-e2e'}
-      ${'app-e2e'} | ${undefined} | ${'app-e2e'}
-      ${'app'}     | ${undefined} | ${'app'}
-    `(
-      'name $name and directory $directory should result in project name $projectName',
-      ({ name, directory, projectName }) => {
-        expect(getE2eProjectName({ name, directory })).toEqual(projectName);
-      }
-    );
   });
 });
diff --git a/packages/cypress/src/generators/cypress-project/cypress-project.ts b/packages/cypress/src/generators/cypress-project/cypress-project.ts
@@ -8,6 +8,7 @@ import {
   joinPathFragments,
   names,
   offsetFromRoot,
+  readProjectConfiguration,
   toJS,
   Tree,
   updateJson,
@@ -19,6 +20,7 @@ import { join } from 'path';
 // app
 import { Schema } from './schema';
 import { eslintPluginCypressVersion } from '../../utils/versions';
+import { filePathPrefix } from '../../utils/project-name';
 
 export interface CypressProjectSchema extends Schema {
   projectName: string;
@@ -136,26 +138,11 @@ export async function cypressProjectGenerator(host: Tree, schema: Schema) {
   return installTask;
 }
 
-export function getE2eProjectName({
-  name,
-  directory,
-}: {
-  name: string;
-  directory?: string;
-}) {
-  return `${directory ? filePathToProjectName(directory, name) : name}`;
-}
-
-function filePathToProjectName(directory: string, name: string) {
-  return `${names(directory).fileName}-${name}`.replace(
-    new RegExp('/', 'g'),
-    '-'
-  );
-}
-
 function normalizeOptions(host: Tree, options: Schema): CypressProjectSchema {
   const { appsDir } = getWorkspaceLayout(host);
-  const projectName = getE2eProjectName(options);
+  const projectName = options.directory
+    ? `${filePathPrefix(options.directory)}-${options.name}`
+    : options.name;
   const projectRoot = options.directory
     ? joinPathFragments(
         appsDir,

diff --git a/packages/cypress/src/utils/project-name.ts b/packages/cypress/src/utils/project-name.ts
@@ -0,0 +1,22 @@
+import { names } from '@nrwl/devkit';
+
+export function getUnscopedLibName(libRoot: string) {
+  return libRoot.substr(libRoot.lastIndexOf('/') + 1);
+}
+
+export function getE2eProjectName(
+  targetProjectName: string,
+  targetLibRoot: string,
+  cypressDirectory?: string
+) {
+  if (cypressDirectory) {
+    return `${filePathPrefix(cypressDirectory)}-${getUnscopedLibName(
+      targetLibRoot
+    )}-e2e`;
+  }
+  return `${targetProjectName}-e2e`;
+}
+
+export function filePathPrefix(directory: string) {
+  return `${names(directory).fileName}`.replace(new RegExp('/', 'g'), '-');
+}
diff --git a/packages/react/src/generators/storybook-configuration/configuration.spec.ts b/packages/react/src/generators/storybook-configuration/configuration.spec.ts
@@ -140,19 +140,18 @@ describe('react:storybook-configuration', () => {
       configureCypress: true,
       generateCypressSpecs: true,
       cypressDirectory: 'one/two',
-      cypressName: 'app-test-e2e',
     });
     [
-      'apps/one/two/app-test-e2e/cypress.json',
-      'apps/one/two/app-test-e2e/src/fixtures/example.json',
-      'apps/one/two/app-test-e2e/src/plugins/index.js',
-      'apps/one/two/app-test-e2e/src/support/commands.ts',
-      'apps/one/two/app-test-e2e/src/support/index.ts',
-      'apps/one/two/app-test-e2e/tsconfig.e2e.json',
-      'apps/one/two/app-test-e2e/tsconfig.json',
-      'apps/one/two/app-test-e2e/.eslintrc.json',
-      'apps/one/two/app-test-e2e/src/integration/test-ui-lib/test-ui-lib.spec.ts',
-      'apps/one/two/app-test-e2e/src/integration/my-component/my-component.spec.ts',
+      'apps/one/two/test-ui-lib-e2e/cypress.json',
+      'apps/one/two/test-ui-lib-e2e/src/fixtures/example.json',
+      'apps/one/two/test-ui-lib-e2e/src/plugins/index.js',
+      'apps/one/two/test-ui-lib-e2e/src/support/commands.ts',
+      'apps/one/two/test-ui-lib-e2e/src/support/index.ts',
+      'apps/one/two/test-ui-lib-e2e/tsconfig.e2e.json',
+      'apps/one/two/test-ui-lib-e2e/tsconfig.json',
+      'apps/one/two/test-ui-lib-e2e/.eslintrc.json',
+      'apps/one/two/test-ui-lib-e2e/src/integration/test-ui-lib/test-ui-lib.spec.ts',
+      'apps/one/two/test-ui-lib-e2e/src/integration/my-component/my-component.spec.ts',
     ].forEach((file) => {
       expect(appTree.exists(file)).toBeTruthy();
     });