mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-02 05:03:44 +08:00
Generalize api. import react-test-renderer only in react loader
This commit is contained in:
igor
parent
a5eb21c745
commit
9ba4b74894
3
addons/storyshots/src/angular/loader.js
vendored
3
addons/storyshots/src/angular/loader.js
vendored
@ -30,6 +30,9 @@ function load(options) {
|
||||
return {
|
||||
framework: 'angular',
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for angular');
|
||||
},
|
||||
storybook: require.requireActual('@storybook/angular'),
|
||||
};
|
||||
}
|
||||
|
||||
@ -6,8 +6,14 @@ import addons from '@storybook/addons';
|
||||
import loadFramework from './frameworkLoader';
|
||||
import createChannel from './storybook-channel-mock';
|
||||
import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
|
||||
import { multiSnapshotWithOptions, snapshotWithOptions, snapshot } from './test-bodies';
|
||||
import { shallowSnapshot, renderOnly } from './react/test-bodies';
|
||||
|
||||
import {
|
||||
multiSnapshotWithOptions,
|
||||
snapshotWithOptions,
|
||||
snapshot,
|
||||
shallowSnapshot,
|
||||
renderOnly,
|
||||
} from './test-bodies';
|
||||
|
||||
global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
|
||||
|
||||
@ -27,7 +33,7 @@ export default function testStorySnapshots(options = {}) {
|
||||
|
||||
addons.setChannel(createChannel());
|
||||
|
||||
const { storybook, framework, renderTree } = loadFramework(options);
|
||||
const { storybook, framework, renderTree, renderShallowTree } = loadFramework(options);
|
||||
const stories = storybook.getStorybook();
|
||||
|
||||
if (stories.length === 0) {
|
||||
@ -70,6 +76,7 @@ export default function testStorySnapshots(options = {}) {
|
||||
story,
|
||||
context,
|
||||
renderTree,
|
||||
renderShallowTree,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@ function load(options) {
|
||||
return {
|
||||
framework: 'react',
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderShallowTree: require.requireActual('./renderShallowTree').default,
|
||||
storybook: require.requireActual('@storybook/react'),
|
||||
};
|
||||
}
|
||||
|
||||
10
addons/storyshots/src/react/renderShallowTree.js
Normal file
10
addons/storyshots/src/react/renderShallowTree.js
Normal file
@ -0,0 +1,10 @@
|
||||
import shallow from 'react-test-renderer/shallow';
|
||||
|
||||
function getRenderedTree(story, context, { renderer, serializer }) {
|
||||
const storyElement = story.render(context);
|
||||
const shallowRenderer = renderer || shallow.createRenderer();
|
||||
const tree = shallowRenderer.render(storyElement);
|
||||
return serializer ? serializer(tree) : tree;
|
||||
}
|
||||
|
||||
export default getRenderedTree;
|
||||
@ -1,14 +0,0 @@
|
||||
import reactTestRenderer from 'react-test-renderer';
|
||||
import shallow from 'react-test-renderer/shallow';
|
||||
|
||||
export function shallowSnapshot({ story, context, options: { renderer, serializer } }) {
|
||||
const shallowRenderer = renderer || shallow.createRenderer();
|
||||
const tree = shallowRenderer.render(story.render(context));
|
||||
const serializedTree = serializer ? serializer(tree) : tree;
|
||||
expect(serializedTree).toMatchSnapshot();
|
||||
}
|
||||
|
||||
export function renderOnly({ story, context }) {
|
||||
const storyElement = story.render(context);
|
||||
reactTestRenderer.create(storyElement);
|
||||
}
|
||||
@ -17,6 +17,7 @@ function load(options) {
|
||||
|
||||
return {
|
||||
renderTree: require('../react/renderTree').default,
|
||||
renderShallowTree: require('../react/renderShallowTree').default,
|
||||
framework: 'rn',
|
||||
storybook,
|
||||
};
|
||||
|
||||
@ -36,4 +36,19 @@ export const multiSnapshotWithOptions = options => ({ story, context, renderTree
|
||||
snapshotFileName: getSnapshotFileName(context),
|
||||
});
|
||||
|
||||
export function shallowSnapshot({ story, context, renderShallowTree, options = {} }) {
|
||||
const result = renderShallowTree(story, context, options);
|
||||
expect(result).toMatchSnapshot();
|
||||
}
|
||||
|
||||
export function renderOnly({ story, context, renderTree }) {
|
||||
const result = renderTree(story, context, {});
|
||||
|
||||
if (typeof result.then === 'function') {
|
||||
return result;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export const snapshot = snapshotWithOptions({});
|
||||
|
||||
@ -25,6 +25,9 @@ function load(options) {
|
||||
return {
|
||||
framework: 'vue',
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for vue');
|
||||
},
|
||||
storybook: require.requireActual('@storybook/vue'),
|
||||
};
|
||||
}
|
||||
|
||||
@ -0,0 +1,122 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<Unknown
|
||||
className="css-1yjiefr"
|
||||
onClick={[Function]}
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</Unknown>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<Unknown
|
||||
className="css-1yjiefr"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</Unknown>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<Unknown
|
||||
className="css-1yjiefr"
|
||||
onClick={[Function]}
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</Unknown>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
<Unknown
|
||||
className="css-1yjiefr"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</Unknown>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<glamorous(article)>
|
||||
<glamorous(h1)>
|
||||
Welcome to storybook
|
||||
</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)>
|
||||
src/stories
|
||||
</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(a)
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
stories
|
||||
</glamorous(a)>
|
||||
|
||||
for a component called
|
||||
|
||||
<glamorous(code)>
|
||||
Button
|
||||
</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)>
|
||||
Button
|
||||
</glamorous(code)>
|
||||
stories located at
|
||||
<glamorous(code)>
|
||||
src/stories/index.js
|
||||
</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"
|
||||
>
|
||||
Writing Stories
|
||||
</glamorous(a)>
|
||||
|
||||
section in our documentation.
|
||||
</p>
|
||||
<glamorous(p)>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
<glamorous(code)>
|
||||
.storybook/webpack.config.js
|
||||
</glamorous(code)>
|
||||
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</glamorous(p)>
|
||||
</glamorous(article)>
|
||||
`;
|
||||
@ -0,0 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"😀 😎 👍 💯\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"😀 😎 👍 💯\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Welcome to storybook\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"This is a UI component dev environment for your app.\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"We've added some basic stories inside the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"directory.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"A story is a single state of one or more UI components. You can have as many stories as you want.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Basically a story is like a visual test case.)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"See these sample\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"button\\",\\"tabIndex\\":\\"0\\",\\"children\\":\\"stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"for a component called\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\".\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Just like that, you can add your own components as stories.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"You can also edit those components and see changes right away.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Try editing the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\" stories located at \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories/index.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\".)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Usually we create stories with smaller UI components in the app.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"href\\":\\"https://storybook.js.org/basics/writing-stories\\",\\"target\\":\\"_blank\\",\\"rel\\":\\"noopener noreferrer\\",\\"children\\":\\"Writing Stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"section in our documentation.\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"type\\":\\"b\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"NOTE:\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\".storybook/webpack.config.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"to add webpack loaders and plugins you are using in this project.\\"]},\\"_owner\\":null,\\"_store\\":{}}]},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
8
addons/storyshots/stories/storyshot.renderOnly.test.js
Normal file
8
addons/storyshots/stories/storyshot.renderOnly.test.js
Normal file
@ -0,0 +1,8 @@
|
||||
import path from 'path';
|
||||
import initStoryshots, { renderOnly } from '../src';
|
||||
|
||||
initStoryshots({
|
||||
framework: 'react',
|
||||
configPath: path.join(__dirname, '..', '.storybook'),
|
||||
test: renderOnly,
|
||||
});
|
||||
8
addons/storyshots/stories/storyshot.shallow.test.js
Normal file
8
addons/storyshots/stories/storyshot.shallow.test.js
Normal file
@ -0,0 +1,8 @@
|
||||
import path from 'path';
|
||||
import initStoryshots, { shallowSnapshot } from '../src';
|
||||
|
||||
initStoryshots({
|
||||
framework: 'react',
|
||||
configPath: path.join(__dirname, '..', '.storybook'),
|
||||
test: shallowSnapshot,
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
import path from 'path';
|
||||
import initStoryshots, { shallowSnapshot } from '../src';
|
||||
|
||||
initStoryshots({
|
||||
framework: 'react',
|
||||
configPath: path.join(__dirname, '..', '.storybook'),
|
||||
test: data =>
|
||||
shallowSnapshot({
|
||||
...data,
|
||||
options: {
|
||||
serializer: JSON.stringify,
|
||||
},
|
||||
}),
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user