GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 07:11:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix storyshots renderer option

Browse Source
This commit is contained in:
Martin Lehmann 2018-03-21 15:38:11 +01:00
parent 7717d47ce8
commit b41ffb691c
3 changed files with 186 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/storyshots/README.md
View File

@ -349,7 +349,7 @@ Run a custom test function for each story, rather than the default (a vanilla sn
### `renderer`
Pass a custom renderer (such as enzymes `mount`) to record snapshots.
Pass a custom renderer (such as enzymes `mount`) to record snapshots. Note that setting `test` overrides `renderer`.
```js
import initStoryshots from '@storybook/addon-storyshots';

2
addons/storyshots/src/index.js
View File

@ -53,7 +53,7 @@ export default function testStorySnapshots(options = {}) {
serializer: options.serializer,
};
const testMethod = options.test || snapshotWithOptions({ options: snapshotOptions });
const testMethod = options.test || snapshotWithOptions(snapshotOptions);
methods.forEach(method => {
if (typeof testMethod[method] === 'function') {

300
addons/storyshots/stories/__snapshots__/storyshot.enzyme.test.js.snap
View File

@ -1,144 +1,212 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<button
className="css-1yjiefr"
<Button
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
<Component
className="css-1yjiefr"
onClick={[Function]}
>
😀 😎 👍 💯
</span>
</button>
<button
className="css-1yjiefr"
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
</Component>
</Button>
`;
exports[`Storyshots Another Button with text 1`] = `
<button
className="css-1yjiefr"
<Button
onClick={[Function]}
>
Hello Button
</button>
<Component
className="css-1yjiefr"
onClick={[Function]}
>
<button
className="css-1yjiefr"
onClick={[Function]}
>
Hello Button
</button>
</Component>
</Button>
`;
exports[`Storyshots Button with some emoji 1`] = `
<button
className="css-1yjiefr"
<Button
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
<Component
className="css-1yjiefr"
onClick={[Function]}
>
😀 😎 👍 💯
</span>
</button>
<button
className="css-1yjiefr"
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
</Component>
</Button>
`;
exports[`Storyshots Button with text 1`] = `
<button
className="css-1yjiefr"
<Button
onClick={[Function]}
>
Hello Button
</button>
<Component
className="css-1yjiefr"
onClick={[Function]}
>
<button
className="css-1yjiefr"
onClick={[Function]}
>
Hello Button
</button>
</Component>
</Button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<article
className="css-1fqbdip"
<Welcome
showApp={[Function]}
showKind={null}
showStory={null}
>
<h1
className="css-nil"
>
Welcome to storybook
</h1>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<code
className="css-mteq83"
<glamorous(article)>
<article
className="css-1fqbdip"
>
src/stories
</code>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<button
className="css-1opliz7"
onClick={[Function]}
>
stories
</button>
for a component called
<code
className="css-mteq83"
>
Button
</code>
.
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
className="css-mteq83"
>
Button
</code>
stories located at
<code
className="css-mteq83"
>
src/stories/index.js
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
className="css-ca0824"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
className="css-bwdon3"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
className="css-mteq83"
>
.storybook/webpack.config.js
</code>
to add webpack loaders and plugins you are using in this project.
</p>
</article>
<glamorous(h1)>
<h1
className="css-nil"
>
Welcome to storybook
</h1>
</glamorous(h1)>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<glamorous(code)>
<code
className="css-mteq83"
>
src/stories
</code>
</glamorous(code)>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<glamorous(glamorous(glamorous(a)))
onClick={[Function]}
>
<button
className="css-1opliz7"
onClick={[Function]}
>
stories
</button>
</glamorous(glamorous(glamorous(a)))>
for a component called
<glamorous(code)>
<code
className="css-mteq83"
>
Button
</code>
</glamorous(code)>
.
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<glamorous(code)>
<code
className="css-mteq83"
>
Button
</code>
</glamorous(code)>
stories located at
<glamorous(code)>
<code
className="css-mteq83"
>
src/stories/index.js
</code>
</glamorous(code)>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<glamorous(a)
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
<a
className="css-ca0824"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
Writing Stories
</a>
</glamorous(a)>
section in our documentation.
</p>
<glamorous(p)>
<p
className="css-bwdon3"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<glamorous(code)>
<code
className="css-mteq83"
>
.storybook/webpack.config.js
</code>
</glamorous(code)>
to add webpack loaders and plugins you are using in this project.
</p>
</glamorous(p)>
</article>
</glamorous(article)>
</Welcome>
`;