c56d3f7ee4
I (and others https://github.com/storybooks/storybook/issues/25) had a hard time finding information about how to apply styles from CSS frameworks like Boostrap etc... Maybe this link in the section about CSS testing makes it a bit easier?
1.7 KiB
| id | title |
|---|---|
| css-style-testing | CSS/Style Testing |
We can also use Storybook as the base for CSS/Style testing with stories as the base. For information on how to correctly apply all of your styles as well as styles from CSS frameworks like Boostrap, Semantic UI or similar check the configurations section. Back to CSS/Style testing: let's 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. 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, but we'll be able to use frameworks which are based on URL as the input source. (Such as BackstopJS and Gemini)
In the future we are also planning to smooth this process with the help of StoryShots.