From 22ef23309013d0a2ee7b0714cdc3a338172d3b67 Mon Sep 17 00:00:00 2001 From: Pascal Iske Date: Fri, 28 Jun 2019 11:28:15 +0200 Subject: [PATCH 1/4] fix(angular): fix ng module metadata extraction for forRoot imports --- app/angular/src/client/preview/angular/helpers.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 878e109a6a55..f009837a04c5 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -54,11 +54,14 @@ const createComponentFromTemplate = (template: string, styles: string[]) => { }; const extractNgModuleMetadata = (importItem: any): NgModule => { + const target = importItem && importItem.ngModule ? importItem.ngModule : importItem; const decoratorKey = '__annotations__'; const decorators: any[] = - Reflect && Reflect.getOwnPropertyDescriptor - ? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value - : importItem[decoratorKey]; + Reflect && + Reflect.getOwnPropertyDescriptor && + Reflect.getOwnPropertyDescriptor(target, decoratorKey) + ? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value + : target[decoratorKey]; if (!decorators || decorators.length === 0) { return null; From 5ad8d18e9038ce6a1f8f48a325d356f9b2a95e66 Mon Sep 17 00:00:00 2001 From: Pascal Iske Date: Fri, 28 Jun 2019 11:28:15 +0200 Subject: [PATCH 2/4] fix(angular): fix ng module metadata extraction for forRoot imports --- .../src/frameworks/angular/helpers.ts | 13 ++++++++----- app/angular/src/client/preview/angular/helpers.ts | 13 ++++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts index ca60567193c9..63296e55cd25 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts @@ -31,11 +31,14 @@ const createComponentFromTemplate = (template: string) => { })(componentClass); }; const extractNgModuleMetadata = (importItem: any): NgModule => { + const target = importItem && importItem.ngModule ? importItem.ngModule : importItem; const decoratorKey = '__annotations__'; const decorators: any[] = - Reflect && Reflect.getOwnPropertyDescriptor - ? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value - : importItem[decoratorKey]; + Reflect && + Reflect.getOwnPropertyDescriptor && + Reflect.getOwnPropertyDescriptor(target, decoratorKey) + ? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value + : target[decoratorKey]; if (!decorators || decorators.length === 0) { return null; @@ -86,7 +89,7 @@ export const initModuleData = (storyObj: NgStory): any => { ? createComponentFromTemplate(template) : component; - const componentRequiesDeclaration = + const componentRequiresDeclaration = isCreatingComponentFromTemplate || !getExistenceOfComponentInModules( component, @@ -94,7 +97,7 @@ export const initModuleData = (storyObj: NgStory): any => { moduleMetadata.imports ); - const componentDeclarations = componentRequiesDeclaration + const componentDeclarations = componentRequiresDeclaration ? [AppComponent, AnnotatedComponent] : [AppComponent]; diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 878e109a6a55..32c605e5957f 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -54,11 +54,14 @@ const createComponentFromTemplate = (template: string, styles: string[]) => { }; const extractNgModuleMetadata = (importItem: any): NgModule => { + const target = importItem && importItem.ngModule ? importItem.ngModule : importItem; const decoratorKey = '__annotations__'; const decorators: any[] = - Reflect && Reflect.getOwnPropertyDescriptor - ? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value - : importItem[decoratorKey]; + Reflect && + Reflect.getOwnPropertyDescriptor && + Reflect.getOwnPropertyDescriptor(target, decoratorKey) + ? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value + : target[decoratorKey]; if (!decorators || decorators.length === 0) { return null; @@ -110,7 +113,7 @@ const initModule = (storyFn: IStoryFn) => { ? createComponentFromTemplate(template, styles) : component; - const componentRequiesDeclaration = + const componentRequiresDeclaration = isCreatingComponentFromTemplate || !getExistenceOfComponentInModules( component, @@ -118,7 +121,7 @@ const initModule = (storyFn: IStoryFn) => { moduleMetadata.imports ); - const componentDeclarations = componentRequiesDeclaration + const componentDeclarations = componentRequiresDeclaration ? [AppComponent, AnnotatedComponent] : [AppComponent]; From 3a4f4141df8b8176dcc22e0b260ae139eb4678f3 Mon Sep 17 00:00:00 2001 From: Pascal Iske Date: Tue, 23 Jul 2019 17:51:59 +0200 Subject: [PATCH 3/4] test(angular): add test story for angular forRoot bugfix See #7224 for more deatil on the bugfix. --- .../stories/module-context/chips.module.ts | 16 ++++- .../module-context-forRoot.stories.ts | 62 +++++++++++++++++++ 2 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts diff --git a/examples/angular-cli/src/stories/module-context/chips.module.ts b/examples/angular-cli/src/stories/module-context/chips.module.ts index 606a96797665..e6bc1b24326a 100644 --- a/examples/angular-cli/src/stories/module-context/chips.module.ts +++ b/examples/angular-cli/src/stories/module-context/chips.module.ts @@ -1,4 +1,4 @@ -import { NgModule } from '@angular/core'; +import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ChipComponent } from './chip.component'; import { ChipsGroupComponent } from './chips-group.component'; @@ -16,4 +16,16 @@ import { CHIP_COLOR } from './chip-color.token'; }, ], }) -export class ChipsModule {} +export class ChipsModule { + public static forRoot(): ModuleWithProviders { + return { + ngModule: ChipsModule, + providers: [ + { + provide: CHIP_COLOR, + useValue: '#eeeeee', + }, + ], + }; + } +} diff --git a/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts b/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts new file mode 100644 index 000000000000..7f9e1f56a41c --- /dev/null +++ b/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts @@ -0,0 +1,62 @@ +import { storiesOf, moduleMetadata } from '@storybook/angular'; +import { withKnobs, text, object } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; + +import { ChipsModule } from './chips.module'; +import { ChipsGroupComponent } from './chips-group.component'; +import { ChipComponent } from './chip.component'; + +storiesOf('Custom|Feature Module as Context with forRoot', module) + .addDecorator(withKnobs) + .addDecorator( + moduleMetadata({ + imports: [ChipsModule.forRoot()], + }) + ) + .add( + 'Component with self and dependencies declared in its feature module', + () => { + const props: { [K in keyof ChipsGroupComponent]?: any } = { + chips: object('Chips', [ + { + id: 1, + text: 'Chip 1', + }, + { + id: 2, + text: 'Chip 2', + }, + ]), + removeChipClick: action('Remove chip'), + removeAllChipsClick: action('Remove all chips clicked'), + }; + return { + component: ChipsGroupComponent, + props, + }; + }, + { + notes: `This component includes a child component, a pipe, and a default provider, all which come from + the specified feature module.`, + } + ) + .add('Component with default providers', () => { + const props: { [K in keyof ChipComponent]?: any } = { + displayText: text('Display Text', 'My Chip'), + removeClicked: action('Remove icon clicked'), + }; + return { + component: ChipComponent, + props, + }; + }) + .add('Component with overridden provider', () => { + const props: { [K in keyof ChipComponent]?: any } = { + displayText: text('Display Text', 'My Chip'), + removeClicked: action('Remove icon clicked'), + }; + return { + component: ChipComponent, + props, + }; + }); From 34386b9a7aacaff101d1cac2699f3e21e6a8b3c8 Mon Sep 17 00:00:00 2001 From: Pascal Iske Date: Tue, 23 Jul 2019 18:14:37 +0200 Subject: [PATCH 4/4] test(angular): update storyshots for angular stories --- .../module-context-forRoot.stories.storyshot | 134 ++++++++++++++++++ .../module-context.stories.storyshot | 40 +++--- .../__snapshots__/on-push.stories.storyshot | 2 +- 3 files changed, 155 insertions(+), 21 deletions(-) create mode 100644 examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot new file mode 100644 index 000000000000..eaf3db5a9d02 --- /dev/null +++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot @@ -0,0 +1,134 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Custom|Feature Module as Context with forRoot Component with default providers 1`] = ` + + + + My Chíp + +
+ + ✕ + +
+ + +`; + +exports[`Storyshots Custom|Feature Module as Context with forRoot Component with overridden provider 1`] = ` + + + + My Chíp + +
+ + ✕ + +
+ + +`; + +exports[`Storyshots Custom|Feature Module as Context with forRoot Component with self and dependencies declared in its feature module 1`] = ` + + + + + + Chíp 1 + +
+ + ✕ + +
+ + + + Chíp 2 + +
+ + ✕ + +
+ + +
+ Remove All +
+ + +`; diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot index a7645463e23a..d61ddd41ba4c 100644 --- a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot +++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot @@ -7,21 +7,21 @@ exports[`Storyshots Custom|Feature Module as Context Component with default prov target={[Function ViewContainerRef_]} > My Chíp
✕ @@ -38,21 +38,21 @@ exports[`Storyshots Custom|Feature Module as Context Component with overridden p target={[Function ViewContainerRef_]} > My Chíp
✕ @@ -69,28 +69,28 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep target={[Function ViewContainerRef_]} > Chíp 1
✕ @@ -98,24 +98,24 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
Chíp 2
✕ @@ -124,7 +124,7 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
Remove All diff --git a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot index 3fe8857f4718..e449b7c64137 100644 --- a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot +++ b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot @@ -7,7 +7,7 @@ exports[`Storyshots Core|OnPush Class-specified component with OnPush and Knobs target={[Function ViewContainerRef_]} > Word of the day: OnPush