Skip to content

Commit

Permalink
Fix storyshots renderer option
Browse files Browse the repository at this point in the history
  • Loading branch information
Martin Lehmann committed Mar 21, 2018
1 parent 7717d47 commit b41ffb6
Show file tree
Hide file tree
Showing 3 changed files with 185 additions and 117 deletions.
2 changes: 1 addition & 1 deletion addons/storyshots/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion addons/storyshots/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
298 changes: 183 additions & 115 deletions addons/storyshots/stories/__snapshots__/storyshot.enzyme.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -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>
`;

exports[`Storyshots Welcome to Storybook 1`] = `
<article
className="css-1fqbdip"
>
<h1
className="css-nil"
<Component
className="css-1yjiefr"
onClick={[Function]}
>
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"
>
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"
className="css-1yjiefr"
onClick={[Function]}
>
stories
Hello Button
</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"
</Component>
</Button>
`;

exports[`Storyshots Welcome to Storybook 1`] = `
<Welcome
showApp={[Function]}
showKind={null}
showStory={null}
>
<glamorous(article)>
<article
className="css-1fqbdip"
>
.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>
`;

0 comments on commit b41ffb6

Please sign in to comment.