-
-
-
-
-
-
-
-
-
- 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/docs/src/docs/react-storybook/index.js b/docs/src/docs/react-storybook/index.js
deleted file mode 100644
index dba7c086415f..000000000000
--- a/docs/src/docs/react-storybook/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-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/docs/src/docs/react-storybook/testing/css-style-testing.js b/docs/src/docs/react-storybook/testing/css-style-testing.js
deleted file mode 100644
index e230d9dce2a8..000000000000
--- a/docs/src/docs/react-storybook/testing/css-style-testing.js
+++ /dev/null
@@ -1,36 +0,0 @@
-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/docs/src/docs/react-storybook/testing/interaction-testing.js b/docs/src/docs/react-storybook/testing/interaction-testing.js
deleted file mode 100644
index 23eb7d5241e0..000000000000
--- a/docs/src/docs/react-storybook/testing/interaction-testing.js
+++ /dev/null
@@ -1,22 +0,0 @@
-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/docs/src/docs/react-storybook/testing/manual-testing.js b/docs/src/docs/react-storybook/testing/manual-testing.js
deleted file mode 100644
index afd4e023f01e..000000000000
--- a/docs/src/docs/react-storybook/testing/manual-testing.js
+++ /dev/null
@@ -1,24 +0,0 @@
-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.