diff --git a/addons/storyshots/src/angular/loader.js b/addons/storyshots/src/angular/loader.js index 66ab73ebf77..aae9bb4a3cf 100644 --- a/addons/storyshots/src/angular/loader.js +++ b/addons/storyshots/src/angular/loader.js @@ -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'), }; } diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js index f5c2339fbc6..7829bbda903 100644 --- a/addons/storyshots/src/index.js +++ b/addons/storyshots/src/index.js @@ -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, }); }); } diff --git a/addons/storyshots/src/react/loader.js b/addons/storyshots/src/react/loader.js index fd0a8171a4a..552ed5b5ea8 100644 --- a/addons/storyshots/src/react/loader.js +++ b/addons/storyshots/src/react/loader.js @@ -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'), }; } diff --git a/addons/storyshots/src/react/renderShallowTree.js b/addons/storyshots/src/react/renderShallowTree.js new file mode 100644 index 00000000000..4b7b6a9225c --- /dev/null +++ b/addons/storyshots/src/react/renderShallowTree.js @@ -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; diff --git a/addons/storyshots/src/react/test-bodies.js b/addons/storyshots/src/react/test-bodies.js deleted file mode 100644 index e100771499d..00000000000 --- a/addons/storyshots/src/react/test-bodies.js +++ /dev/null @@ -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); -} diff --git a/addons/storyshots/src/rn/loader.js b/addons/storyshots/src/rn/loader.js index eaddd550bb4..5d0d3a92534 100644 --- a/addons/storyshots/src/rn/loader.js +++ b/addons/storyshots/src/rn/loader.js @@ -17,6 +17,7 @@ function load(options) { return { renderTree: require('../react/renderTree').default, + renderShallowTree: require('../react/renderShallowTree').default, framework: 'rn', storybook, }; diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js index 9c0c036a060..2cc98c8c72b 100644 --- a/addons/storyshots/src/test-bodies.js +++ b/addons/storyshots/src/test-bodies.js @@ -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({}); diff --git a/addons/storyshots/src/vue/loader.js b/addons/storyshots/src/vue/loader.js index 8789bf6d3b5..4b8e3342943 100644 --- a/addons/storyshots/src/vue/loader.js +++ b/addons/storyshots/src/vue/loader.js @@ -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'), }; } diff --git a/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap b/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap new file mode 100644 index 00000000000..15dd9f09577 --- /dev/null +++ b/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap @@ -0,0 +1,122 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Another Button with some emoji 1`] = ` + + 😀 😎 👍 💯 + +`; + +exports[`Storyshots Another Button with text 1`] = ` + + Hello Button + +`; + +exports[`Storyshots Button with some emoji 1`] = ` + + 😀 😎 👍 💯 + +`; + +exports[`Storyshots Button with text 1`] = ` + + Hello Button + +`; + +exports[`Storyshots Welcome to Storybook 1`] = ` + + + Welcome to storybook + +

+ This is a UI component dev environment for your app. +

+

+ We've added some basic stories inside the + + + src/stories + + + directory. +
+ A story is a single state of one or more UI components. You can have as many stories as you want. +
+ (Basically a story is like a visual test case.) +

+

+ See these sample + + + stories + + + for a component called + + + Button + + . +

+

+ Just like that, you can add your own components as stories. +
+ You can also edit those components and see changes right away. +
+ (Try editing the + + Button + + stories located at + + src/stories/index.js + + .) +

+

+ Usually we create stories with smaller UI components in the app. +
+ Have a look at the + + + Writing Stories + + + section in our documentation. +

+ + + NOTE: + +
+ Have a look at the + + + .storybook/webpack.config.js + + + to add webpack loaders and plugins you are using in this project. + + +`; diff --git a/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap b/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap new file mode 100644 index 00000000000..c9abf91b566 --- /dev/null +++ b/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap @@ -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\\":{}}"`; diff --git a/addons/storyshots/stories/storyshot.renderOnly.test.js b/addons/storyshots/stories/storyshot.renderOnly.test.js new file mode 100644 index 00000000000..e620764ed58 --- /dev/null +++ b/addons/storyshots/stories/storyshot.renderOnly.test.js @@ -0,0 +1,8 @@ +import path from 'path'; +import initStoryshots, { renderOnly } from '../src'; + +initStoryshots({ + framework: 'react', + configPath: path.join(__dirname, '..', '.storybook'), + test: renderOnly, +}); diff --git a/addons/storyshots/stories/storyshot.shallow.test.js b/addons/storyshots/stories/storyshot.shallow.test.js new file mode 100644 index 00000000000..ade88a49a69 --- /dev/null +++ b/addons/storyshots/stories/storyshot.shallow.test.js @@ -0,0 +1,8 @@ +import path from 'path'; +import initStoryshots, { shallowSnapshot } from '../src'; + +initStoryshots({ + framework: 'react', + configPath: path.join(__dirname, '..', '.storybook'), + test: shallowSnapshot, +}); diff --git a/addons/storyshots/stories/storyshot.shallowWithOptions.test.js b/addons/storyshots/stories/storyshot.shallowWithOptions.test.js new file mode 100644 index 00000000000..c5c9a79871c --- /dev/null +++ b/addons/storyshots/stories/storyshot.shallowWithOptions.test.js @@ -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, + }, + }), +});