From 9893fc130ef94c694cccdcb4c13677226a6f3df5 Mon Sep 17 00:00:00 2001 From: Isaac Mann Date: Fri, 16 Aug 2019 12:53:24 -0400 Subject: [PATCH] chore: createTestUiLib takes a libName argument --- e2e/storybook.test.ts | 11 +++- e2e/utils.ts | 14 ++--- .../src/schematics/stories/stories.spec.ts | 2 +- packages/angular/src/utils/testing.ts | 12 ++-- .../configuration/configuration.spec.ts | 2 +- .../files/.storybook/webpack.config.js | 62 +++++++++++++++++++ .../cypress-project/cypress-project.spec.ts | 2 +- .../storybook/src/schematics/ng-add/ng-add.ts | 18 +++++- packages/storybook/src/utils/testing.ts | 12 ++-- packages/storybook/src/utils/versions.ts | 1 + 10 files changed, 107 insertions(+), 29 deletions(-) create mode 100644 packages/storybook/src/schematics/configuration/files/.storybook/webpack.config.js diff --git a/e2e/storybook.test.ts b/e2e/storybook.test.ts index 658113bb32732..d8a58e78a9bf0 100644 --- 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 index d223d45623b03..1fb03ad3017b5 100644 --- 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` ), `` ); 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 index a4071260b7b08..0e14474ae55e1 100644 --- 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 index 9797b368853e9..fb82e5996da12 100644 --- 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 { +export async function createTestUILib(libName: string): Promise { 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`, `` ); 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 index 85a91d1a632ad..d488d1f0a639c 100644 --- 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 new file mode 100644 index 0000000000000..887a6736e5ee9 --- /dev/null +++ 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 index 5d507927cb7bc..4b6cfb84dc155 100644 --- 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 index 50ce9d7c86d74..54bdb68140100 100644 --- 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 index f7a80beac34de..48371daf5b627 100644 --- 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 { +export async function createTestUILib(libName: string): Promise { 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`, `` ); 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 index 24e94a67ae7ad..986baf46e6e6b 100644 --- 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';