+
+
+
+
+
+
+
+
+
+ Try Now
+
+
+ npm i -g getstorybook
+ cd my-react-app
+ getstorybook
+
+
+
+
+
+
+
+
+
+ Read Docs
++
+ ));
+ ~~~
+
+
+ > You can also pass a list of directories, instead of a single directory, as shown below.
+ > ~~~js
+ > {
+ > "scripts": {
+ > "start-storybook": "start-storybook -s ./public,./static -p 9001"
+ > }
+ > }
+ > ~~~
+
+ ## Absolute versus relative paths
+
+ Sometimes, you may want to deploy your storybook into a subpath, like https://kadira-samples.github.io/react-button.
+
+ In this case, you need to have all your images and media files with relative paths. Otherwise, Storybook cannot locate those files.
+
+ If you load static content via importing, this is automatic and you do not have to do anything.
+
+ If you are using a static directory, then you need to use _relative paths_ to load images.
+ `,
+};
diff --git a/src/docs/react-storybook/index.js b/src/docs/react-storybook/index.js
new file mode 100644
index 000000000000..dba7c086415f
--- /dev/null
+++ b/src/docs/react-storybook/index.js
@@ -0,0 +1,49 @@
+export default [
+ {
+ id: 'basics',
+ heading: 'Basics',
+ items: [
+ require('./basics/introduction').default,
+ require('./basics/quick-start-guide').default,
+ require('./basics/slow-start-guide').default,
+ require('./basics/writing-stories').default,
+ require('./basics/exporting-storybook').default,
+ require('./basics/faq').default,
+ ],
+ },
+ {
+ id: 'configurations',
+ heading: 'Configurations',
+ items: [
+ require('./configurations/default-config').default,
+ require('./configurations/custom-webpack-config').default,
+ require('./configurations/custom-babel-config').default,
+ require('./configurations/add-custom-head-tags').default,
+ require('./configurations/serving-static-files').default,
+ require('./configurations/env-vars').default,
+ require('./configurations/cli-options').default,
+ ],
+ },
+ {
+ id: 'testing',
+ heading: 'Testing',
+ items: [
+ require('./testing/react-ui-testing').default,
+ require('./testing/structural-testing').default,
+ require('./testing/interaction-testing').default,
+ require('./testing/css-style-testing').default,
+ require('./testing/manual-testing').default,
+ ],
+ },
+ {
+ id: 'addons',
+ heading: 'Addons',
+ items: [
+ require('./addons/introduction').default,
+ require('./addons/using-addons').default,
+ require('./addons/addon-gallery').default,
+ require('./addons/writing-addons').default,
+ require('./addons/api').default,
+ ],
+ },
+];
diff --git a/src/docs/react-storybook/testing/css-style-testing.js b/src/docs/react-storybook/testing/css-style-testing.js
new file mode 100644
index 000000000000..e230d9dce2a8
--- /dev/null
+++ b/src/docs/react-storybook/testing/css-style-testing.js
@@ -0,0 +1,36 @@
+import { stripIndent } from 'common-tags';
+
+import storybookScreenshot from './static/storybook-screenshot.png';
+import storybookIframeScreenshot from './static/storybook-iframe-screenshot.png';
+
+export default {
+ id: 'css-style-testing',
+ title: 'CSS/Style Testing',
+ content: stripIndent`
+ We can also use Storybook as the base for CSS/Style testing with stories as the base. First, have a look at the following Storybook.
+
+ 
+
+ In that, you can see the Storybook's manager UI. It has UI elements that are not related to your app. However, there's a way to access just a single story.
+
+ For an example, let's assume the above storybook runs on port 9009 and we can access it via [http://localhost:9009](http://localhost:9009/).
+ Then Let's pick a single story: the "with text" story of the Button. So, in this case:
+
+ * selectedKind = Button
+ * selectedStory = with text
+
+ Then, we can see the above story using the following URL:
+
+ http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text&dataId=0
+
+ 
+
+ Just like that, you can access all of the stories in your Storybook.
+
+ ## Supported CSS/Style Testing Frameworks
+
+ It will be hard to use all the frameworks we've [mentioned](/docs/react-storybook/testing/react-ui-testing#3-css-style-testing), but we'll be able to use frameworks which are based on URL as the input source. (Such as [BackstopJS](https://github.com/garris/BackstopJS) and [Gemini](https://github.com/gemini-testing/gemini))
+
+ > In the future we are also planning to smooth this process with the help of [StoryShots](https://github.com/storybooks/storyshots).
+ `,
+};
diff --git a/src/docs/react-storybook/testing/interaction-testing.js b/src/docs/react-storybook/testing/interaction-testing.js
new file mode 100644
index 000000000000..23eb7d5241e0
--- /dev/null
+++ b/src/docs/react-storybook/testing/interaction-testing.js
@@ -0,0 +1,22 @@
+import { stripIndent } from 'common-tags';
+
+import specsAddon from './static/specs-addon.png';
+
+export default {
+ id: 'interaction-testing',
+ title: 'Interaction Testing',
+ content: stripIndent`
+ For the interaction testing, [Enzyme](https://github.com/airbnb/enzyme) is the best tool we can use. With that, we can [simulate](http://airbnb.io/enzyme/docs/api/ReactWrapper/simulate.html) user inputs and see what they are doing.
+
+ You can directly write these kind of tests with a full-featured testing framework, such as **Mocha** or **Jest**. Have a look at the [Enzyme guidelines](https://github.com/airbnb/enzyme/) for more information on how to integrate them.
+
+ ## Specs Addon
+
+ If you like to write your tests directly inside your stories, we also have an addon called [specs](https://github.com/mthuret/storybook-addon-specifications).
+
+ 
+
+ With that, you can write test specs directly inside stories.
+ Additionally, you also can use your CI server to run those tests.
+ `,
+};
diff --git a/src/docs/react-storybook/testing/manual-testing.js b/src/docs/react-storybook/testing/manual-testing.js
new file mode 100644
index 000000000000..afd4e023f01e
--- /dev/null
+++ b/src/docs/react-storybook/testing/manual-testing.js
@@ -0,0 +1,24 @@
+import { stripIndent } from 'common-tags';
+
+export default {
+ id: 'manual-testing',
+ title: 'Manual Testing',
+ content: stripIndent`
+ Now we arrive at the most interesting (but also hardest) part of UI testing. We usually do this as a team.
+
+ First, we need to make a pretty solid Storybook or a set of Storybooks covering most of the scenarios of our UI components. For that we can follow the following structure:
+
+ * Write stories for your individual UI components.
+ * Write another set of stories for integrating the above UI components (you could consider your pages).
+
+ For the individual UI components, you may be using a different repository. Then, keep a storybook inside it for those components. Then, in the main app, write stories for integrations.
+
+ ## Testing Plan
+ Open a new PR (or multiple of them). Then run your Storybook and start reviewing one story at a time. Then you can comment on the PR.
+
+ > To get a better result, you can use **Storybook Hub**, where you can comment inside individual stories and share your storybook with non-developers.