@@ -6,9 +6,62 @@ won't be using for our component library.
66
77## Installation
88
9- - add storybook to a nuxt project
10- - clear extras
9+ After creating a nuxt project running ` npx storybook@latest init ` command sets
10+ up pretty much everything.
11+
12+ It creates a lot of extra files, remove them to have a clear start.
13+
14+ > [ !NOTE]
15+ >
16+ > We use ` .js ` instead of ` .ts ` . Convert all typescript files into js and remove
17+ > all type definitions to have less boilerplate.
18+
19+ ` npm run storybook ` runs the storybook ui separately.
20+
21+ ## Adding a component
22+
23+ Under ` /components ` folder add a ` .stories.js ` file per component to have it on
24+ the storybook ui. See ` Sample.vue ` and ` Sample.stories.js ` for a sample
25+ component.
26+
27+ ``` javascript
28+ export default {
29+ title: ' Sample'
30+ component: Sample,
31+ tags: [' autodocs'
32+ };
33+ ```
34+
35+ > [ !NOTE]
36+ >
37+ > ` tags: ['autodocs'] ` creates an extra ` Docs ` page with all the stories in it.
1138
1239## Adding a Story
1340
14- - add a story to a component
41+ Exporting a constant in ` .stories.js ` file is enough for adding a new story.
42+ Each story means a new instance of a component to test its different variants.
43+
44+ ``` javascript
45+ export const Red = {
46+ args: {
47+ color: ' red'
48+ },
49+ };
50+ ```
51+
52+ This sample simply creates a story where it has ` color ` property is set up to
53+ ` 'red' ` value.
54+
55+ ## Key Takeaways
56+
57+ - Visual testing is where you get a screenshot of a successful run, to compare
58+ it in further test runs which allows regression testing
59+ - e2e (End-to-end) testing is done by rendering a page by recording and
60+ replaying user interactions through browser apis, and then asserting dom
61+ states to check the outcome
62+ - UI component testing, relies heavily on different variants of a component in a
63+ single page, which is not a hard task to do manually.
64+ - Visual testing and unit testing is done using other frameworks and libraries
65+ which we can use directly
66+ - Nuxt has its own test setup where visual testing is possible as well as unit
67+ testing and e2e testing
0 commit comments