chore: createTestUiLib takes a libName argument

nrwl · Aug 16, 2019 · 9893fc1 · 9893fc1
1 parent f98111b
commit 9893fc1
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 29 deletions.
diff --git a/e2e/storybook.test.ts b/e2e/storybook.test.ts
@@ -4,7 +4,8 @@ import {
   runCLI,
   supportUi,
   newProject,
-  runYarnInstall
+  runYarnInstall,
+  uniq
 } from './utils';
 
 forEachCli(() => {
@@ -13,8 +14,12 @@ forEachCli(() => {
       describe('running Storybook and Cypress', () => {
         it('should execute e2e tests using Cypress running against Storybook', () => {
           newProject();
-          createTestUILib();
-          const mylib = 'test-ui-lib';
+
+          const myapp = uniq('myapp');
+          runCLI(`generate @nrwl/angular:app ${myapp} --no-interactive`);
+
+          const mylib = uniq('test-ui-lib');
+          createTestUILib(mylib);
 
           runCLI(
             `generate @nrwl/storybook:configuration ${mylib} --configureCypress --generateStories --generateCypressSpecs --noInteractive`

diff --git a/e2e/utils.ts b/e2e/utils.ts
@@ -141,16 +141,14 @@ exports.default = default_1;`
   execSync(`cp -a ${tmpBackupProjPath()} ${tmpProjPath()}`);
 }
 
-export function createTestUILib(): void {
-  runCLI('g @nrwl/angular:library test-ui-lib --no-interactive');
+export function createTestUILib(libName: string): void {
+  runCLI(`g @nrwl/angular:library ${libName} --no-interactive`);
   runCLI(
-    'g @schematics/angular:component test-button --project=test-ui-lib --no-interactive'
+    `g @schematics/angular:component test-button --project=${libName} --no-interactive`
   );
 
   writeFileSync(
-    tmpProjPath(
-      'libs/test-ui-lib/src/lib/test-button/test-button.component.ts'
-    ),
+    tmpProjPath(`libs/${libName}/src/lib/test-button/test-button.component.ts`),
     `
 import { Component, OnInit, Input } from '@angular/core';
 
@@ -178,12 +176,12 @@ export class TestButtonComponent implements OnInit {
 
   writeFileSync(
     tmpProjPath(
-      'libs/test-ui-lib/src/lib/test-button/test-button.component.html'
+      `libs/${libName}/src/lib/test-button/test-button.component.html`
     ),
     `<button [attr.type]="type" [ngClass]="style"></button>`
   );
   runCLI(
-    'g @schematics/angular:component test-other --project=test-ui-lib --no-interactive'
+    `g @schematics/angular:component test-other --project=${libName} --no-interactive`
   );
 
   execSync(`cp -a ${tmpBackupProjPath()} ${tmpProjPath()}`);

diff --git a/packages/angular/src/schematics/stories/stories.spec.ts b/packages/angular/src/schematics/stories/stories.spec.ts
@@ -11,7 +11,7 @@ describe('schematic:stories', () => {
   let appTree: Tree;
 
   beforeEach(async () => {
-    appTree = await createTestUILib();
+    appTree = await createTestUILib('test-ui-lib');
   });
 
   describe('Storybook stories', () => {

diff --git a/packages/angular/src/utils/testing.ts b/packages/angular/src/utils/testing.ts
@@ -167,24 +167,24 @@ export function createLib(tree: Tree, libName: string): Tree {
   return tree;
 }
 
-export async function createTestUILib(): Promise<Tree> {
+export async function createTestUILib(libName: string): Promise<Tree> {
   let appTree = Tree.empty();
   appTree = createEmptyWorkspace(appTree);
   appTree = await callRule(
     externalSchematic('@nrwl/angular', 'library', {
-      name: 'test-ui-lib'
+      name: libName
     }),
     appTree
   );
   appTree = await callRule(
     externalSchematic('@schematics/angular', 'component', {
       name: 'test-button',
-      project: 'test-ui-lib'
+      project: libName
     }),
     appTree
   );
   appTree.overwrite(
-    'libs/test-ui-lib/src/lib/test-button/test-button.component.ts',
+    `libs/${libName}/src/lib/test-button/test-button.component.ts`,
     `
 import { Component, OnInit, Input } from '@angular/core';
 
@@ -210,13 +210,13 @@ export class TestButtonComponent implements OnInit {
 `
   );
   appTree.overwrite(
-    'libs/test-ui-lib/src/lib/test-button/test-button.component.html',
+    `libs/${libName}/src/lib/test-button/test-button.component.html`,
     `<button [attr.type]="type" [ngClass]="style"></button>`
   );
   appTree = await callRule(
     externalSchematic('@schematics/angular', 'component', {
       name: 'test-other',
-      project: 'test-ui-lib'
+      project: libName
     }),
     appTree
   );

diff --git a/packages/storybook/src/schematics/configuration/configuration.spec.ts b/packages/storybook/src/schematics/configuration/configuration.spec.ts
@@ -7,7 +7,7 @@ describe('schematic:configuration', () => {
   let appTree: Tree;
 
   beforeEach(async () => {
-    appTree = await createTestUILib();
+    appTree = await createTestUILib('test-ui-lib');
   });
 
   it('should generate files', async () => {

diff --git a/packages/storybook/src/schematics/configuration/files/.storybook/webpack.config.js b/packages/storybook/src/schematics/configuration/files/.storybook/webpack.config.js
@@ -0,0 +1,62 @@
+// Export a function. Accept the base config as the only param.
+module.exports = async ({ config, mode }) => {
+  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
+
+  r = config.module.rules.filter(rule => rule.test != '/\\.s(c|a)ss$/');
+
+  // Make whatever fine-grained changes you need
+  r.push({
+    test: /\.scss$/,
+    // test: /\.s(c|a)ss$/,
+    use: [
+      'to-string-loader',
+      {
+        loader: 'style-loader',
+        options: {
+          sourceMap: true
+        }
+      },
+      {
+        loader: 'css-loader',
+        options: {
+          sourceMap: true
+        }
+      },
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true
+        }
+      }
+    ]
+  });
+
+  r = r.filter(rule => rule.test != '/\\.css$/');
+
+  // Make whatever fine-grained changes you need
+  r.push({
+    test: /\.css$/,
+    use: [
+      'to-string-loader',
+      {
+        loader: 'style-loader',
+        options: {
+          sourceMap: true
+        }
+      },
+      {
+        loader: 'css-loader',
+        options: {
+          sourceMap: true
+        }
+      }
+    ]
+  });
+
+  config.module.rules = r;
+
+  // Return the altered config
+  return config;
+};
diff --git a/packages/storybook/src/schematics/cypress-project/cypress-project.spec.ts b/packages/storybook/src/schematics/cypress-project/cypress-project.spec.ts
@@ -6,7 +6,7 @@ describe('schematic:cypress-project', () => {
   let appTree: Tree;
 
   beforeEach(async () => {
-    appTree = await createTestUILib();
+    appTree = await createTestUILib('test-ui-lib');
   });
 
   it('should generate files', async () => {

diff --git a/packages/storybook/src/schematics/ng-add/ng-add.ts b/packages/storybook/src/schematics/ng-add/ng-add.ts
@@ -14,7 +14,8 @@ import {
   babelCoreVersion,
   babelLoaderVersion,
   storybookAddonKnobsVersion,
-  storybookAngularVersion
+  storybookAngularVersion,
+  storybookAddonKnobsTypesVersion
 } from '../../utils/versions';
 import { Schema } from './schema';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
@@ -30,12 +31,23 @@ function checkDependenciesInstalled(): Rule {
         { name: '@storybook/addon-knobs', version: storybookAddonKnobsVersion },
         {
           name: '@types/storybook__addon-knobs',
-          version: storybookAddonKnobsVersion
+          version: storybookAddonKnobsTypesVersion
         },
         { name: 'babel-loader', version: babelLoaderVersion },
-        { name: '@babel/core', version: babelCoreVersion }
+        { name: '@babel/core', version: babelCoreVersion },
+        { name: 'to-string-loader', version: '*' },
+        { name: 'css-loader', version: '*' }
       );
     }
+    if (
+      !packageJson.dependencies['@angular/forms'] &&
+      !packageJson.devDependencies['@angular/forms']
+    ) {
+      dependencyList.push({
+        name: '@angular/forms',
+        version: '*'
+      });
+    }
 
     if (!dependencyList.length) {
       return noop();

diff --git a/packages/storybook/src/utils/testing.ts b/packages/storybook/src/utils/testing.ts
@@ -37,24 +37,24 @@ export function runMigration(migrationName: string, options: any, tree: Tree) {
     .toPromise();
 }
 
-export async function createTestUILib(): Promise<Tree> {
+export async function createTestUILib(libName: string): Promise<Tree> {
   let appTree = Tree.empty();
   appTree = createEmptyWorkspace(appTree);
   appTree = await callRule(
     externalSchematic('@nrwl/angular', 'library', {
-      name: 'test-ui-lib'
+      name: libName
     }),
     appTree
   );
   appTree = await callRule(
     externalSchematic('@schematics/angular', 'component', {
       name: 'test-button',
-      project: 'test-ui-lib'
+      project: libName
     }),
     appTree
   );
   appTree.overwrite(
-    'libs/test-ui-lib/src/lib/test-button/test-button.component.ts',
+    `libs/${libName}/src/lib/test-button/test-button.component.ts`,
     `
 import { Component, OnInit, Input } from '@angular/core';
 
@@ -80,13 +80,13 @@ export class TestButtonComponent implements OnInit {
 `
   );
   appTree.overwrite(
-    'libs/test-ui-lib/src/lib/test-button/test-button.component.html',
+    `libs/${libName}/src/lib/test-button/test-button.component.html`,
     `<button [attr.type]="type" [ngClass]="style"></button>`
   );
   appTree = await callRule(
     externalSchematic('@schematics/angular', 'component', {
       name: 'test-other',
-      project: 'test-ui-lib'
+      project: libName
     }),
     appTree
   );

diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts
@@ -1,4 +1,5 @@
 export const storybookAngularVersion = '5.1.11';
 export const storybookAddonKnobsVersion = '5.1.11';
+export const storybookAddonKnobsTypesVersion = '5.0.3';
 export const babelCoreVersion = '7.5.4';
 export const babelLoaderVersion = '8.0.6';