fix(nx): update storybook configuration (#2104)

nrwl · Nov 30, 2019 · c4cba1c · c4cba1c
1 parent 093e693
commit c4cba1c
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 21 deletions.
diff --git a/e2e/storybook.test.ts b/e2e/storybook.test.ts
@@ -129,9 +129,9 @@ forEachCli(() => {
             `
           );
 
-          expect(
-            runCLI(`run ${mylib}-e2e:e2e --configuration=headless --no-watch`)
-          ).toContain('All specs passed!');
+          expect(runCLI(`run ${mylib}-e2e:e2e --no-watch`)).toContain(
+            'All specs passed!'
+          );
         }, 1000000);
       });
     }

diff --git a/packages/storybook/migrations.json b/packages/storybook/migrations.json
@@ -1,3 +1,9 @@
 {
-  "schematics": {}
+  "schematics": {
+    "update-builder-8.8.2": {
+      "version": "8.8.2",
+      "description": "Update storybook builder and tsconfig",
+      "factory": "./src/migrations/update-8-8-2/update-builder-8-8-2"
+    }
+  }
 }
diff --git a/packages/storybook/src/migrations/update-8-8-2/update-builder-8-8-2.spec.ts b/packages/storybook/src/migrations/update-8-8-2/update-builder-8-8-2.spec.ts
@@ -0,0 +1,157 @@
+import { Tree } from '@angular-devkit/schematics';
+import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+import {
+  updateJsonInTree,
+  readJsonInTree,
+  updateWorkspaceInTree,
+  readWorkspace,
+  getWorkspacePath
+} from '@nrwl/workspace';
+
+import * as path from 'path';
+
+describe('Update 8-8-2', () => {
+  let tree: Tree;
+  let schematicRunner: SchematicTestRunner;
+
+  beforeEach(async () => {
+    tree = Tree.empty();
+    schematicRunner = new SchematicTestRunner(
+      '@nrwl/storybook',
+      path.join(__dirname, '../../../migrations.json')
+    );
+  });
+
+  it(`should remove headless/watch as options for e2e builder`, async () => {
+    tree.create(
+      'workspace.json',
+      JSON.stringify({
+        projects: {
+          ['home-ui']: {
+            projectType: 'library',
+            root: 'libs/home/ui',
+            sourceRoot: 'libs/home/ui/src',
+            prefix: 'app',
+            architect: {
+              storybook: {
+                builder: '@nrwl/storybook:storybook',
+                options: {
+                  uiFramework: '@storybook/angular',
+                  port: 4400,
+                  config: {
+                    configFolder: 'libs/home/ui/.storybook'
+                  }
+                }
+              }
+            }
+          },
+          ['home-ui-e2e']: {
+            root: 'apps/home-ui-e2e',
+            sourceRoot: 'apps/home-ui-e2e/src',
+            architect: {
+              e2e: {
+                builder: '@nrwl/cypress:cypress',
+                options: {
+                  cypressConfig: 'apps/home-ui-e2e/cypress.json',
+                  tsConfig: 'apps/home-ui-e2e/tsconfig.e2e.json',
+                  devServerTarget: 'home-ui:storybook',
+                  headless: false,
+                  watch: true
+                },
+                configurations: {
+                  headless: {
+                    devServerTarget: 'home-ui:storybook:ci',
+                    headless: true
+                  }
+                }
+              }
+            }
+          }
+        }
+      })
+    );
+
+    tree = await schematicRunner
+      .runSchematicAsync('update-builder-8.8.2', {}, tree)
+      .toPromise();
+
+    const config = readWorkspace(tree);
+    expect(
+      config.projects['home-ui-e2e'].architect.e2e.options.headless
+    ).toBeUndefined();
+    expect(
+      config.projects['home-ui-e2e'].architect.e2e.options.watch
+    ).toBeUndefined();
+    expect(
+      config.projects['home-ui-e2e'].architect.e2e.configurations
+    ).toBeUndefined();
+  });
+
+  it(`should add emitDecoratorMetadata to storybook tsconfig.json`, async () => {
+    tree.create(
+      'libs/home/ui/.storybook/tsconfig.json',
+      JSON.stringify({
+        extends: '../tsconfig.json',
+        exclude: ['../src/test.ts', '../**/*.spec.ts'],
+        include: ['../src/**/*']
+      })
+    );
+    tree.create(
+      'workspace.json',
+      JSON.stringify({
+        projects: {
+          ['home-ui']: {
+            projectType: 'library',
+            root: 'libs/home/ui',
+            sourceRoot: 'libs/home/ui/src',
+            prefix: 'app',
+            architect: {
+              storybook: {
+                builder: '@nrwl/storybook:storybook',
+                options: {
+                  uiFramework: '@storybook/angular',
+                  port: 4400,
+                  config: {
+                    configFolder: 'libs/home/ui/.storybook'
+                  }
+                }
+              }
+            }
+          },
+          ['home-ui-e2e']: {
+            root: 'apps/home-ui-e2e',
+            sourceRoot: 'apps/home-ui-e2e/src',
+            architect: {
+              e2e: {
+                builder: '@nrwl/cypress:cypress',
+                options: {
+                  cypressConfig: 'apps/home-ui-e2e/cypress.json',
+                  tsConfig: 'apps/home-ui-e2e/tsconfig.e2e.json',
+                  devServerTarget: 'home-ui:storybook',
+                  headless: false,
+                  watch: true
+                },
+                configurations: {
+                  headless: {
+                    devServerTarget: 'home-ui:storybook:ci',
+                    headless: true
+                  }
+                }
+              }
+            }
+          }
+        }
+      })
+    );
+
+    tree = await schematicRunner
+      .runSchematicAsync('update-builder-8.8.2', {}, tree)
+      .toPromise();
+
+    const tsconfig = readJsonInTree(
+      tree,
+      'libs/home/ui/.storybook/tsconfig.json'
+    );
+    expect(tsconfig.compilerOptions.emitDecoratorMetadata).toBe(true);
+  });
+});
diff --git a/packages/storybook/src/migrations/update-8-8-2/update-builder-8-8-2.ts b/packages/storybook/src/migrations/update-8-8-2/update-builder-8-8-2.ts
@@ -0,0 +1,61 @@
+import { Rule, chain } from '@angular-devkit/schematics';
+import {
+  updateWorkspaceInTree,
+  readWorkspaceJson,
+  readWorkspace,
+  updateJsonInTree
+} from '@nrwl/workspace';
+
+export default function update(): Rule {
+  return chain([
+    updateWorkspaceInTree(config => {
+      const filteredProjects = [];
+      Object.keys(config.projects).forEach(name => {
+        if (
+          config.projects[name].architect &&
+          config.projects[name].architect.e2e &&
+          config.projects[name].architect.e2e.builder ===
+            '@nrwl/cypress:cypress' &&
+          config.projects[name].architect.e2e.options.devServerTarget.endsWith(
+            ':storybook'
+          )
+        ) {
+          filteredProjects.push(config.projects[name]);
+        }
+      });
+      filteredProjects.forEach(p => {
+        delete p.architect.e2e.options.headless;
+        delete p.architect.e2e.options.watch;
+        delete p.architect.e2e.configurations;
+      });
+      return config;
+    }),
+    (tree, context) => {
+      const workspace = readWorkspace(tree);
+      const tsconfigUpdateRules = [];
+      Object.keys(workspace.projects).forEach(name => {
+        if (
+          workspace.projects[name].architect &&
+          workspace.projects[name].architect.storybook &&
+          workspace.projects[name].architect.storybook.builder ===
+            '@nrwl/storybook:storybook' &&
+          workspace.projects[name].architect.storybook.options.config
+            .configFolder
+        ) {
+          const storybookFolderPath =
+            workspace.projects[name].architect.storybook.options.config
+              .configFolder;
+          tsconfigUpdateRules.push(
+            updateJsonInTree(`${storybookFolderPath}/tsconfig.json`, json => ({
+              ...json,
+              compilerOptions: {
+                emitDecoratorMetadata: true
+              }
+            }))
+          );
+        }
+      });
+      return chain(tsconfigUpdateRules);
+    }
+  ]);
+}
diff --git a/packages/storybook/src/schematics/configuration/lib-files/.storybook/tsconfig.json b/packages/storybook/src/schematics/configuration/lib-files/.storybook/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
   "exclude": ["../src/test.ts", "../**/*.spec.ts"],
   "include": ["../src/**/*"]
 }
diff --git a/packages/storybook/src/schematics/cypress-project/cypress-project.spec.ts b/packages/storybook/src/schematics/cypress-project/cypress-project.spec.ts
@@ -35,13 +35,8 @@ describe('schematic:cypress-project', () => {
     expect(project.architect.e2e.options.devServerTarget).toEqual(
       'test-ui-lib:storybook'
     );
-    expect(project.architect.e2e.options.headless).toEqual(false);
-    expect(project.architect.e2e.options.watch).toEqual(true);
-    expect(
-      project.architect.e2e.configurations.headless.devServerTarget
-    ).toEqual('test-ui-lib:storybook:ci');
-    expect(project.architect.e2e.configurations.headless.headless).toEqual(
-      true
-    );
+    expect(project.architect.e2e.options.headless).toBeUndefined();
+    expect(project.architect.e2e.options.watch).toBeUndefined();
+    expect(project.architect.e2e.configurations.headless).toBeUndefined();
   });
 });
diff --git a/packages/storybook/src/schematics/cypress-project/cypress-project.ts b/packages/storybook/src/schematics/cypress-project/cypress-project.ts
@@ -75,15 +75,7 @@ function updateAngularJsonBuilder(
       ...e2eTarget,
       options: <any>{
         ...e2eTarget.options,
-        devServerTarget: `${targetProjectName}:storybook`,
-        headless: false,
-        watch: true
-      },
-      configurations: <any>{
-        headless: {
-          devServerTarget: `${targetProjectName}:storybook:ci`,
-          headless: true
-        }
+        devServerTarget: `${targetProjectName}:storybook`
       }
     };
     return workspace;