From cc6c9f55a39709baabf7d24faf5b303e55668d7a Mon Sep 17 00:00:00 2001 From: igor Date: Sun, 28 Jan 2018 12:03:19 +0200 Subject: [PATCH 1/4] Add option to pass custom styles for angular components --- .../src/client/preview/angular/helpers.ts | 9 ++++---- .../src/client/preview/angular/types.ts | 1 + .../src/stories/custom-styles.stories.ts | 22 +++++++++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 examples/angular-cli/src/stories/custom-styles.stories.ts diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 8de90a47f09e..69e0e060535d 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -68,26 +68,27 @@ const getModule = ( return NgModule(moduleMeta)(moduleClass); }; -const createComponentFromTemplate = (template: string): Function => { +const createComponentFromTemplate = (template: string, styles: string[]): Function => { const componentClass = class DynamicComponent {}; return Component({ template: template, + styles: styles, })(componentClass); }; const initModule = ( currentStory: IGetStoryWithContext, context: IContext, - reRender: boolean = false, + reRender: boolean = false ): Function => { const storyObj = currentStory(context); - const { component, template, props, moduleMetadata = {} } = storyObj; + const { component, template, props, styles, moduleMetadata = {} } = storyObj; let AnnotatedComponent; if (template) { - AnnotatedComponent = createComponentFromTemplate(template); + AnnotatedComponent = createComponentFromTemplate(template, styles); } else { AnnotatedComponent = component; } diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts index f24ab7beb2a9..d8da614648e3 100644 --- a/app/angular/src/client/preview/angular/types.ts +++ b/app/angular/src/client/preview/angular/types.ts @@ -16,6 +16,7 @@ export interface NgStory { propsMeta?: ICollection; moduleMetadata?: NgModuleMetadata; template?: string; + styles?: string[]; } export interface NgError { diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts new file mode 100644 index 000000000000..410bf4942528 --- /dev/null +++ b/examples/angular-cli/src/stories/custom-styles.stories.ts @@ -0,0 +1,22 @@ +import { storiesOf } from '@storybook/angular'; +import { action } from '@storybook/addon-actions'; +import { Button } from '@storybook/angular/demo'; + +storiesOf('Custom Style', module).add('Default', () => ({ + template: ``, + moduleMetadata: { + declarations: [Button], + }, + props: { + text: 'Button with custom styles', + onClick: action('log'), + }, + styles: [ + ` + storybook-button-component { + background-color: yellow; + padding: 25px; + } + `, + ], +})); From f71a7e8c1f878e7bd549d202940fe667afc7343b Mon Sep 17 00:00:00 2001 From: igor Date: Sun, 28 Jan 2018 16:17:29 +0200 Subject: [PATCH 2/4] Add snapshot --- .../custom-styles.stories.storyshot | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot new file mode 100644 index 000000000000..eeb8e98df4b0 --- /dev/null +++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Custom Style Default 1`] = ` + + + + + + + + + + + +`; From 0609f0a02bcfc66a4a7ba2ba83d97823a8ba4504 Mon Sep 17 00:00:00 2001 From: igor Date: Mon, 29 Jan 2018 09:22:46 +0200 Subject: [PATCH 3/4] Support styles with knobs --- addons/knobs/src/angular/helpers.js | 7 ++- .../src/client/preview/angular/helpers.ts | 4 +- .../custom-styles.stories.storyshot | 28 +++++++++ .../src/stories/custom-styles.stories.ts | 57 +++++++++++++------ 4 files changed, 73 insertions(+), 23 deletions(-) diff --git a/addons/knobs/src/angular/helpers.js b/addons/knobs/src/angular/helpers.js index 6e0a7e27befd..3b05496d41d9 100644 --- a/addons/knobs/src/angular/helpers.js +++ b/addons/knobs/src/angular/helpers.js @@ -86,11 +86,12 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch return KnobWrapperComponent; }; -const createComponentFromTemplate = template => { +const createComponentFromTemplate = (template, styles) => { const componentClass = class DynamicComponent {}; return Component({ template, + styles, })(componentClass); }; @@ -106,10 +107,10 @@ export function prepareComponent({ getStory, context, channel, knobStore }) { resetKnobs(knobStore, channel); const story = getStory(context); let { component } = story; - const { template } = story; + const { template, styles } = story; if (!component) { - component = createComponentFromTemplate(template); + component = createComponentFromTemplate(template, styles); } const { componentMeta, props, params, moduleMetadata } = getComponentMetadata({ diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 69e0e060535d..00f703453464 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -72,8 +72,8 @@ const createComponentFromTemplate = (template: string, styles: string[]): Functi const componentClass = class DynamicComponent {}; return Component({ - template: template, - styles: styles, + template, + styles, })(componentClass); }; diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot index eeb8e98df4b0..454a8bf5b983 100644 --- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot @@ -24,3 +24,31 @@ exports[`Storyshots Custom Style Default 1`] = ` `; + +exports[`Storyshots Custom Style With Knobs 1`] = ` + + + + + + + + + + + +`; diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts index 410bf4942528..7bf4e59958c0 100644 --- a/examples/angular-cli/src/stories/custom-styles.stories.ts +++ b/examples/angular-cli/src/stories/custom-styles.stories.ts @@ -1,22 +1,43 @@ import { storiesOf } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; +import { withKnobs, text } from '@storybook/addon-knobs/angular'; import { Button } from '@storybook/angular/demo'; -storiesOf('Custom Style', module).add('Default', () => ({ - template: ``, - moduleMetadata: { - declarations: [Button], - }, - props: { - text: 'Button with custom styles', - onClick: action('log'), - }, - styles: [ - ` - storybook-button-component { - background-color: yellow; - padding: 25px; - } - `, - ], -})); +storiesOf('Custom Style', module) + .add('Default', () => ({ + template: ``, + moduleMetadata: { + declarations: [Button], + }, + props: { + text: 'Button with custom styles', + onClick: action('log'), + }, + styles: [ + ` + storybook-button-component { + background-color: yellow; + padding: 25px; + } + `, + ], + })) + .addDecorator(withKnobs) + .add('With Knobs', () => ({ + template: ``, + moduleMetadata: { + declarations: [Button], + }, + props: { + text: text('text', 'Button with custom styles'), + onClick: action('log'), + }, + styles: [ + ` + storybook-button-component { + background-color: red; + padding: 25px; + } + `, + ], + })); From 3be77c2dc869758ea5c7c4a2c017144b1385dc35 Mon Sep 17 00:00:00 2001 From: Javid Jamae Date: Mon, 29 Jan 2018 12:55:02 -0800 Subject: [PATCH 4/4] Added documentation related to issue #1820 --- addons/storyshots/README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md index d7cf20f5b375..097e47913df4 100644 --- a/addons/storyshots/README.md +++ b/addons/storyshots/README.md @@ -122,6 +122,30 @@ Now run your Jest test command. (Usually, `npm test`.) Then you can see all of y ![Screenshot](docs/storyshots.png) +### Using `createNodeMock` to mock refs + +`react-test-renderer` doesn't provide refs for rendered components. By +default, it returns null when the refs are referenced. In order to mock +out elements that rely on refs, you will have to use the +`createNodeMock` option [added to React](https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing) starting with version 15.4.0. + +Here is an example of how to specify the `createNodeMock` option in Storyshots: + +```js +import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots' +import TextareaThatUsesRefs from '../component/TextareaThatUsesRefs' + +initStoryshots({ + test: snapshotWithOptions({ + createNodeMock: (element) => { + if (element.type === TextareaThatUsesRefs) { + return document.createElement('textarea') + } + }, + }), +}) +``` + ## Configure Storyshots for image snapshots ( alpha ) /*\ **React-native** is **not supported** by this test function.