lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`inject-decorator injectDecorator option is false - angular does not inject stories decorator after the all "storiesOf" functions 1`] = `
"import { Component } from '@angular/core';
import { storiesOf } from '@storybook/angular';
@Component({
selector: 'storybook-with-ng-content',
template: \`<div style=\\"color: #1e88e5;\\"><ng-content></ng-content></div>\`,
})
class WithNgContentComponent {}
storiesOf('Custom|ng-content', module).add('Default', () => ({
template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
moduleMetadata: {
declarations: [WithNgContentComponent],
},
}));
"
`;
exports[`inject-decorator injectDecorator option is false - flow does not inject stories decorator after the all "storiesOf" functions 1`] = `
"// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import TableComponent from '../components/TableComponent';
import type { JssClasses } from '../types';
type State = {
value: any,
};
type Props = {
classes: JssClasses,
name: string,
};
class Table extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
value: undefined,
};
}
state: State;
render() {
return <TableComponent />;
}
}
const stories = storiesOf('Table', module);
stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
"
`;
exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = `
"import { Component } from '@angular/core';
import { Store, StoreModule } from '@ngrx/store';
import { storiesOf, moduleMetadata } from '@storybook/angular';
@Component({
selector: 'storybook-comp-with-store',
template: '<div>{{this.getStoreState()}}</div>',
})
class WithStoreComponent {
private store: Store<any>;
constructor(store: Store<any>) {
this.store = store;
}
getStoreState(): string {
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
}
}
storiesOf('ngrx|Store', module)
.addDecorator(
moduleMetadata({
imports: [StoreModule.forRoot({})],
declarations: [WithStoreComponent],
})
)
.add('With component', () => {
return {
component: WithStoreComponent,
};
});"
`;
exports[`inject-decorator injectDecorator option is false does not inject stories decorator after the all "storiesOf" functions 1`] = `
"import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import { DocgenButton } from '../components/DocgenButton';
import FlowTypeButton from '../components/FlowTypeButton';
import BaseButton from '../components/BaseButton';
import TableComponent from '../components/TableComponent';
storiesOf('Addons|Info.React Docgen', module)
.add(
'Comments from PropType declarations',
withInfo(
'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
)(() => <DocgenButton onClick={action('clicked')} label=\\"Docgen Button\\" />)
)
.add(
'Comments from Flow declarations',
withInfo(
'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
)(() => <FlowTypeButton onClick={action('clicked')} label=\\"Flow Typed Button\\" />)
)
.add(
'Comments from component declaration',
withInfo(
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
);
const markdownDescription = \`
#### You can use markdown in your withInfo() description.
Sometimes you might want to manually include some code examples:
~~~js
const Button = () => <button />;
~~~
Maybe include a [link](http://storybook.js.org) to your project as well.
\`;
storiesOf('Addons|Info.Markdown', module).add(
'Displays Markdown in description',
withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.inline', module).add(
'Inlines component inside story',
withInfo({
text: 'Component should be inlined between description and PropType table',
inline: true, // Displays info inline vs click button to view
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.header', module).add(
'Shows or hides Info Addon header',
withInfo({
text: 'The Info Addon header should be hidden',
header: false, // Toggles display of header with component name and description
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.source', module).add(
'Shows or hides Info Addon source',
withInfo({
text: 'The Info Addon source section should be hidden',
source: false, // Displays the source of story Component
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.propTables', module).add(
'Shows additional component prop tables',
withInfo({
text: 'There should be a prop table added for a component not included in the story',
propTables: [FlowTypeButton],
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.propTablesExclude', module).add(
'Exclude component from prop tables',
withInfo({
text: 'This can exclude extraneous components from being displayed in prop tables.',
propTablesExclude: [FlowTypeButton],
})(() => (
<div>
<BaseButton label=\\"Button\\" />
<FlowTypeButton label=\\"Flow Typed Button\\" />
</div>
))
);
storiesOf('Addons|Info.Options.styles', module)
.add(
'Extend info styles with an object',
withInfo({
styles: {
button: {
base: {
background: 'purple',
},
},
header: {
h1: {
color: 'green',
},
},
},
})(() => <BaseButton label=\\"Button\\" />)
)
.add(
'Full control over styles using a function',
withInfo({
styles: stylesheet => ({
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.h1,
color: 'red',
},
},
}),
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.TableComponent', module).add(
'Use a custom component for the table',
withInfo({
TableComponent,
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Decorator', module)
.addDecorator((story, context) =>
withInfo('Info could be used as a global or local decorator as well.')(story)(context)
)
.add('Use Info as story decorator', () => <BaseButton label=\\"Button\\" />);
const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
const Input = hoc(() => <input type=\\"text\\" />);
const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
storiesOf('Addons|Info.GitHub issues', module).add(
'#1814',
withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
<div>
<Input />
<TextArea />
</div>
))
);
"
`;
exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
Object {
"default": Object {
"endBody": Object {
"col": 2,
"line": 15,
},
"endLoc": Object {
"col": 2,
"line": 15,
},
"startBody": Object {
"col": 54,
"line": 10,
},
"startLoc": Object {
"col": 43,
"line": 10,
},
},
}
`;
exports[`inject-decorator positive - angular injects stories decorator after the all "storiesOf" functions 1`] = `
"import { Component } from '@angular/core';
import { storiesOf } from '@storybook/angular';
@Component({
selector: 'storybook-with-ng-content',
template: \`<div style=\\"color: #1e88e5;\\"><ng-content></ng-content></div>\`,
})
class WithNgContentComponent {}
storiesOf('Custom|ng-content', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add('Default', () => ({
template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
moduleMetadata: {
declarations: [WithNgContentComponent],
},
}));
"
`;
exports[`inject-decorator positive - flow calculates "adds" map 1`] = `
Object {
"flow-class": Object {
"endBody": Object {
"col": 70,
"line": 35,
},
"endLoc": Object {
"col": 70,
"line": 35,
},
"startBody": Object {
"col": 26,
"line": 35,
},
"startLoc": Object {
"col": 12,
"line": 35,
},
},
}
`;
exports[`inject-decorator positive - flow injects stories decorator after the all "storiesOf" functions 1`] = `
"// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import TableComponent from '../components/TableComponent';
import type { JssClasses } from '../types';
type State = {
value: any,
};
type Props = {
classes: JssClasses,
name: string,
};
class Table extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
value: undefined,
};
}
state: State;
render() {
return <TableComponent />;
}
}
const stories = storiesOf('Table', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } });
stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
"
`;
exports[`inject-decorator positive - ts calculates "adds" map 1`] = `
Object {
"with-component": Object {
"endBody": Object {
"col": 3,
"line": 32,
},
"endLoc": Object {
"col": 3,
"line": 32,
},
"startBody": Object {
"col": 25,
"line": 28,
},
"startLoc": Object {
"col": 7,
"line": 28,
},
},
}
`;
exports[`inject-decorator positive - ts injects stories decorator after the all "storiesOf" functions 1`] = `
"import { Component } from '@angular/core';
import { Store, StoreModule } from '@ngrx/store';
import { storiesOf, moduleMetadata } from '@storybook/angular';
@Component({
selector: 'storybook-comp-with-store',
template: '<div>{{this.getStoreState()}}</div>',
})
class WithStoreComponent {
private store: Store<any>;
constructor(store: Store<any>) {
this.store = store;
}
getStoreState(): string {
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
}
}
storiesOf('ngrx|Store', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
.addDecorator(
moduleMetadata({
imports: [StoreModule.forRoot({})],
declarations: [WithStoreComponent],
})
)
.add('With component', () => {
return {
component: WithStoreComponent,
};
});"
`;
exports[`inject-decorator positive calculates "adds" map 1`] = `
Object {
"1814": Object {
"endBody": Object {
"col": 4,
"line": 152,
},
"endLoc": Object {
"col": 4,
"line": 152,
},
"startBody": Object {
"col": 2,
"line": 147,
},
"startLoc": Object {
"col": 2,
"line": 146,
},
},
"comments-from-component-declaration": Object {
"endBody": Object {
"col": 70,
"line": 28,
},
"endLoc": Object {
"col": 70,
"line": 28,
},
"startBody": Object {
"col": 4,
"line": 26,
},
"startLoc": Object {
"col": 4,
"line": 25,
},
},
"comments-from-flow-declarations": Object {
"endBody": Object {
"col": 85,
"line": 22,
},
"endLoc": Object {
"col": 85,
"line": 22,
},
"startBody": Object {
"col": 4,
"line": 20,
},
"startLoc": Object {
"col": 4,
"line": 19,
},
},
"comments-from-proptype-declarations": Object {
"endBody": Object {
"col": 79,
"line": 16,
},
"endLoc": Object {
"col": 79,
"line": 16,
},
"startBody": Object {
"col": 4,
"line": 14,
},
"startLoc": Object {
"col": 4,
"line": 13,
},
},
"displays-markdown-in-description": Object {
"endBody": Object {
"col": 96,
"line": 44,
},
"endLoc": Object {
"col": 96,
"line": 44,
},
"startBody": Object {
"col": 2,
"line": 44,
},
"startLoc": Object {
"col": 2,
"line": 43,
},
},
"exclude-component-from-prop-tables": Object {
"endBody": Object {
"col": 4,
"line": 89,
},
"endLoc": Object {
"col": 4,
"line": 89,
},
"startBody": Object {
"col": 2,
"line": 81,
},
"startLoc": Object {
"col": 2,
"line": 80,
},
},
"extend-info-styles-with-an-object": Object {
"endBody": Object {
"col": 43,
"line": 108,
},
"endLoc": Object {
"col": 43,
"line": 108,
},
"startBody": Object {
"col": 4,
"line": 95,
},
"startLoc": Object {
"col": 4,
"line": 94,
},
},
"full-control-over-styles-using-a-function": Object {
"endBody": Object {
"col": 43,
"line": 123,
},
"endLoc": Object {
"col": 43,
"line": 123,
},
"startBody": Object {
"col": 4,
"line": 112,
},
"startLoc": Object {
"col": 4,
"line": 111,
},
},
"inlines-component-inside-story": Object {
"endBody": Object {
"col": 41,
"line": 52,
},
"endLoc": Object {
"col": 41,
"line": 52,
},
"startBody": Object {
"col": 2,
"line": 49,
},
"startLoc": Object {
"col": 2,
"line": 48,
},
},
"shows-additional-component-prop-tables": Object {
"endBody": Object {
"col": 41,
"line": 76,
},
"endLoc": Object {
"col": 41,
"line": 76,
},
"startBody": Object {
"col": 2,
"line": 73,
},
"startLoc": Object {
"col": 2,
"line": 72,
},
},
"shows-or-hides-info-addon-header": Object {
"endBody": Object {
"col": 41,
"line": 60,
},
"endLoc": Object {
"col": 41,
"line": 60,
},
"startBody": Object {
"col": 2,
"line": 57,
},
"startLoc": Object {
"col": 2,
"line": 56,
},
},
"shows-or-hides-info-addon-source": Object {
"endBody": Object {
"col": 41,
"line": 68,
},
"endLoc": Object {
"col": 41,
"line": 68,
},
"startBody": Object {
"col": 2,
"line": 65,
},
"startLoc": Object {
"col": 2,
"line": 64,
},
},
"use-a-custom-component-for-the-table": Object {
"endBody": Object {
"col": 41,
"line": 130,
},
"endLoc": Object {
"col": 41,
"line": 130,
},
"startBody": Object {
"col": 2,
"line": 128,
},
"startLoc": Object {
"col": 2,
"line": 127,
},
},
"use-info-as-story-decorator": Object {
"endBody": Object {
"col": 73,
"line": 137,
},
"endLoc": Object {
"col": 73,
"line": 137,
},
"startBody": Object {
"col": 38,
"line": 137,
},
"startLoc": Object {
"col": 7,
"line": 137,
},
},
}
`;
exports[`inject-decorator positive injects stories decorator after the all "storiesOf" functions 1`] = `
"import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import { DocgenButton } from '../components/DocgenButton';
import FlowTypeButton from '../components/FlowTypeButton';
import BaseButton from '../components/BaseButton';
import TableComponent from '../components/TableComponent';
storiesOf('Addons|Info.React Docgen', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
.add(
'Comments from PropType declarations',
withInfo(
'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
)(() => <DocgenButton onClick={action('clicked')} label=\\"Docgen Button\\" />)
)
.add(
'Comments from Flow declarations',
withInfo(
'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
)(() => <FlowTypeButton onClick={action('clicked')} label=\\"Flow Typed Button\\" />)
)
.add(
'Comments from component declaration',
withInfo(
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
);
const markdownDescription = \`
#### You can use markdown in your withInfo() description.
Sometimes you might want to manually include some code examples:
~~~js
const Button = () => <button />;
~~~
Maybe include a [link](http://storybook.js.org) to your project as well.
\`;
storiesOf('Addons|Info.Markdown', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
'Displays Markdown in description',
withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.inline', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
'Inlines component inside story',
withInfo({
text: 'Component should be inlined between description and PropType table',
inline: true, // Displays info inline vs click button to view
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.header', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
'Shows or hides Info Addon header',
withInfo({
text: 'The Info Addon header should be hidden',
header: false, // Toggles display of header with component name and description
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.source', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
'Shows or hides Info Addon source',
withInfo({
text: 'The Info Addon source section should be hidden',
source: false, // Displays the source of story Component
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.propTables', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
'Shows additional component prop tables',
withInfo({
text: 'There should be a prop table added for a component not included in the story',
propTables: [FlowTypeButton],
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.propTablesExclude', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
'Exclude component from prop tables',
withInfo({
text: 'This can exclude extraneous components from being displayed in prop tables.',
propTablesExclude: [FlowTypeButton],
})(() => (
<div>
<BaseButton label=\\"Button\\" />
<FlowTypeButton label=\\"Flow Typed Button\\" />
</div>
))
);
storiesOf('Addons|Info.Options.styles', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
.add(
'Extend info styles with an object',
withInfo({
styles: {
button: {
base: {
background: 'purple',
},
},
header: {
h1: {
color: 'green',
},
},
},
})(() => <BaseButton label=\\"Button\\" />)
)
.add(
'Full control over styles using a function',
withInfo({
styles: stylesheet => ({
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.h1,
color: 'red',
},
},
}),
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.TableComponent', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
'Use a custom component for the table',
withInfo({
TableComponent,
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Decorator', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
.addDecorator((story, context) =>
withInfo('Info could be used as a global or local decorator as well.')(story)(context)
)
.add('Use Info as story decorator', () => <BaseButton label=\\"Button\\" />);
const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
const Input = hoc(() => <input type=\\"text\\" />);
const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
storiesOf('Addons|Info.GitHub issues', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
'#1814',
withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
<div>
<Input />
<TextArea />
</div>
))
);
"
`;
exports[`inject-decorator stories with ugly comments in ts should delete ugly comments from the generated story source 1`] = `
"
import React from 'react';
@Component({
selector: 'storybook-comp-with-store',
template: '<div>{{this.getStoreState()}}</div>',
})
class WithStoreComponent {
private store: Store<any>;
constructor(store: Store<any>) {
this.store = store;
}
getStoreState(): string {
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
}
}
import { storiesOf } from '@storybook/react';
const x = 0;
storiesOf('Foo', module)
.add('bar', () => <div>baz</div>);
/*
This is actually a good comment that will help
users to understand what's going on here.
*/"
`;
exports[`inject-decorator stories with ugly comments should delete ugly comments from the generated story source 1`] = `
"
import React from 'react';
import { storiesOf } from '@storybook/react';
const x = 0;
storiesOf('Foo', module)
.add('bar', () => <div>baz</div>);
/*
This is actually a good comment that will help
users to understand what's going on here.
*/"
`;
exports[`inject-decorator will not change the source when there are no "storiesOf" functions 1`] = `
"while(true) {
console.log(\\"it's a kind of magic\\");
}"
`;