Skip to content

Commit

Permalink
Add Storyshots addon
Browse files Browse the repository at this point in the history
igor-dv committed Apr 24, 2018
1 parent c24e5ee commit f868afd
Showing 11 changed files with 197 additions and 3 deletions.
2 changes: 1 addition & 1 deletion ADDONS_SUPPORT.md
Original file line number Diff line number Diff line change
@@ -14,6 +14,6 @@
|[links](addons/links) |+|+|+|+|+|+|+|
|[notes](addons/notes) |+| |+|+|+|+|+|
|[options](addons/options) |+|+|+|+|+|+|+|
|[storyshots](addons/storyshots) |+|+|+|+| | | |
|[storyshots](addons/storyshots) |+|+|+|+| | |+|
|[storysource](addons/storysource)|+| |+|+|+|+|+|
|[viewport](addons/viewport) |+| |+|+|+|+|+|
3 changes: 2 additions & 1 deletion addons/storyshots/src/frameworkLoader.js
Original file line number Diff line number Diff line change
@@ -2,8 +2,9 @@ import loaderReact from './react/loader';
import loaderRn from './rn/loader';
import loaderAngular from './angular/loader';
import loaderVue from './vue/loader';
import loaderHTML from './html/loader';

const loaders = [loaderReact, loaderAngular, loaderRn, loaderVue];
const loaders = [loaderReact, loaderAngular, loaderRn, loaderVue, loaderHTML];

function loadFramework(options) {
const loader = loaders.find(frameworkLoader => frameworkLoader.test(options));
32 changes: 32 additions & 0 deletions addons/storyshots/src/html/loader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import global from 'global';
import runWithRequireContext from '../require_context';
import loadConfig from '../config-loader';

function test(options) {
return options.framework === 'html';
}

function load(options) {
global.STORYBOOK_ENV = 'html';

const { content, contextOpts } = loadConfig({
configDirPath: options.configPath,
babelConfigPath: '@storybook/html/dist/server/config/babel',
});

runWithRequireContext(content, contextOpts);

return {
framework: 'html',
renderTree: require.requireActual('./renderTree').default,
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for HTML');
},
storybook: require.requireActual('@storybook/html'),
};
}

export default {
load,
test,
};
16 changes: 16 additions & 0 deletions addons/storyshots/src/html/renderTree.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { document, Node } from 'global';

function getRenderedTree(story, context) {
const component = story.render(context);

if (component instanceof Node) {
return component;
}

const section = document.createElement('section');
section.innerHTML = component;

return section.firstChild;
}

export default getRenderedTree;
9 changes: 9 additions & 0 deletions examples/html-kitchen-sink/htmlshots.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import path from 'path';
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';

initStoryshots({
framework: 'html',
integrityOptions: { cwd: path.join(__dirname, 'stories') },
configPath: path.join(__dirname, '.storybook'),
test: multiSnapshotWithOptions({}),
});
1 change: 1 addition & 0 deletions examples/html-kitchen-sink/package.json
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@
"@storybook/addon-links": "^4.0.0-alpha.3",
"@storybook/addon-notes": "^4.0.0-alpha.3",
"@storybook/addon-options": "^4.0.0-alpha.3",
"@storybook/addon-storyshots": "^4.0.0-alpha.3",
"@storybook/addon-storysource": "^4.0.0-alpha.3",
"@storybook/addon-viewport": "^4.0.0-alpha.3",
"@storybook/core": "^4.0.0-alpha.3",
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Addons|Centered button in center 1`] = `
<div
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
>
<div
style="margin: auto;"
>
<button>
I am a Button !
</button>
</div>
</div>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Addons|Notes Simple note 1`] = `


`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Demo button 1`] = `
<button>
Hello Button
</button>
`;

exports[`Storyshots Demo heading 1`] = `
<h1>
Hello World
</h1>
`;

exports[`Storyshots Welcome Welcome 1`] = `
<div
class="main"
>


<h1>
Welcome to Storybook for HTML
</h1>


<p>
This is a UI component dev environment for your plain HTML snippets.
</p>


<p>

We've added some basic stories inside the
<code
class="code"
>
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
<a
class="link"
data-sb-kind="Demo"
data-sb-story="button"
href="#"
>
stories
</a>


</p>


<p>
<img
class="logo"
src="logo.svg"
/>
</p>


<p>

Just like that, you can add your own snippets as stories.

<br />

You can also edit those snippets and see changes right away.

<br />


</p>


<p>

Usually we create stories with smaller UI components in the app.
<br />

Have a look at the

<a
class="link"
href="https://storybook.js.org/basics/writing-stories"
target="_blank"
>

Writing Stories

</a>

section in our documentation.

</p>


</div>
`;
2 changes: 1 addition & 1 deletion examples/html-kitchen-sink/stories/index.stories.js
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ storiesOf('Demo', module)
.add('heading', () => '<h1>Hello World</h1>')
.add('button', () => {
const button = document.createElement('button');
button.innerText = 'Hello Button';
button.innerHTML = 'Hello Button';
button.addEventListener('click', action('Click'));
return button;
});
1 change: 1 addition & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ module.exports = {
'<rootDir>/lib',
'<rootDir>/examples/cra-kitchen-sink',
'<rootDir>/examples/vue-kitchen-sink',
'<rootDir>/examples/html-kitchen-sink',
'<rootDir>/examples/official-storybook',
'<rootDir>/examples/angular-cli',
],

0 comments on commit f868afd

Please sign in to comment.