Skip to content

Commit e31a0b6

Browse files
docs: update testplane-storybook docs (autoscreenshotSelector)
1 parent 03ff156 commit e31a0b6

File tree

2 files changed

+87
-9
lines changed

2 files changed

+87
-9
lines changed

docs/plugins/testplane-storybook.mdx

+43-4
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,18 @@ With this minimal config, you will be able to run `npx testplane --storybook` to
8585
<td>true</td>
8686
<td>Enable / disable auto-screenshot tests</td>
8787
</tr>
88+
<tr>
89+
<td>autoscreenshotSelector</td>
90+
<td>`String`</td>
91+
<td>""</td>
92+
<td>Custom selector, which will be used in auto-screenshot tests</td>
93+
</tr>
94+
<tr>
95+
<td>autoScreenshotStorybookGlobals</td>
96+
<td>`Record<string, Record<string, unknown>>`</td>
97+
<td>{}</td>
98+
<td>Run multiple auto-screenshot tests with different [storybook globals](https://storybook.js.org/docs/7/essentials/toolbars-and-globals#globals)</td>
99+
</tr>
88100
<tr>
89101
<td>localport</td>
90102
<td>`Number`</td>
@@ -113,6 +125,28 @@ With this minimal config, you will be able to run `npx testplane --storybook` to
113125
unconditionally.
114126
</Admonition>
115127

128+
#### autoScreenshotStorybookGlobals
129+
130+
For example, with `autoScreenshotStorybookGlobals` set to:
131+
132+
```json
133+
{
134+
"default": {},
135+
"light theme": {
136+
"theme": "light"
137+
},
138+
"dark theme": {
139+
"theme": "dark"
140+
}
141+
}
142+
```
143+
144+
3 autoscreenshot tests will be generated for each story, each test having its corresponding storybook globals value:
145+
146+
- `... Autoscreenshot default`
147+
- `... Autoscreenshot light theme`
148+
- `... Autoscreenshot dark theme`
149+
116150
## Advanced usage
117151

118152
If you have `ts-node` in your project, you can write your Testplane tests right inside of storybook story files:
@@ -151,11 +185,16 @@ const meta: WithTestplane<Meta<typeof Button>> = {
151185
title: "Example/Button",
152186
component: Button,
153187
testplane: {
154-
skip: false, // if true, skips all Testplane tests from this story file
155-
autoscreenshotSelector: ".my-selector", // Custom selector to auto-screenshot elements
156-
browserIds: ["chrome"], // Testplane browsers to run tests from this story file
188+
// If true, skips all Testplane tests from this story file
189+
skip: false,
190+
// Overrides default autoscreenshotSelector from plugin config
191+
autoscreenshotSelector: ".my-selector",
192+
// Extends default autoScreenshotStorybookGlobals from plugin config
193+
autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } },
194+
// Testplane browsers to run tests from this story file
195+
browserIds: ["chrome"],
196+
// Overrides default assertView options for tests from this file
157197
assertViewOpts: {
158-
// override default assertView options for tests from this file
159198
ignoreDiffPixelCount: 5,
160199
},
161200
},

i18n/ru/docusaurus-plugin-content-docs/current/plugins/testplane-storybook.mdx

+44-5
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,19 @@ export default {
8383
<td>autoScreenshots</td>
8484
<td>`Boolean`</td>
8585
<td>true</td>
86-
<td>Включить / отключить авто матическое скриншотное тестирование (будут выполняться только вручную описанные tetplane-тесты)</td>
86+
<td>Включить / отключить автоматическое скриншотное тестирование</td>
87+
</tr>
88+
<tr>
89+
<td>autoscreenshotSelector</td>
90+
<td>`String`</td>
91+
<td>""</td>
92+
<td>Кастомный селектор, используемый в автоматических скриншотных тестах</td>
93+
</tr>
94+
<tr>
95+
<td>autoScreenshotStorybookGlobals</td>
96+
<td>`Record<string, Record<string, unknown>>`</td>
97+
<td>{}</td>
98+
<td>Комплекты [глобальных параметров storybook](https://storybook.js.org/docs/7/essentials/toolbars-and-globals#globals), для каждого из которых следует генерировать автоматические скриншотные тесты</td>
8799
</tr>
88100
<tr>
89101
<td>localport</td>
@@ -114,6 +126,28 @@ export default {
114126
будет отключена принудительно для оптимизации скорости прохождения тестов.
115127
</Admonition>
116128

129+
#### autoScreenshotStorybookGlobals
130+
131+
К примеру, с `autoScreenshotStorybookGlobals` со значением:
132+
133+
```json
134+
{
135+
"default": {},
136+
"light theme": {
137+
"theme": "light"
138+
},
139+
"dark theme": {
140+
"theme": "dark"
141+
}
142+
}
143+
```
144+
145+
Для каждой стори будут сгенерированы 3 автоскриншотных теста, каждый из которых устанавливает соответствующие глобальные параметры сторибука:
146+
147+
- `... Autoscreenshot default`
148+
- `... Autoscreenshot light theme`
149+
- `... Autoscreenshot dark theme`
150+
117151
## Продвинутое использование
118152

119153
Если на Вашем проекте используется `ts-node`, то Вы можете писать testplane-тесты прямо внутри истории:
@@ -152,11 +186,16 @@ const meta: WithTestplane<Meta<typeof Button>> = {
152186
title: "Example/Button",
153187
component: Button,
154188
testplane: {
155-
skip: false, // если true, все testplane-тесты этого файла будут отключены
156-
autoscreenshotSelector: ".my-selector", // переопределение селектора для скриншота (например, если нужно сделать скриншот не всего элемента)
157-
browserIds: ["chrome"], // названия браузеров testplane, в которых нужно запустить тест
189+
// Если true, все testplane-тесты этого файла будут отключены
190+
skip: false,
191+
// Переопределяет autoscreenshotSelector, описанный в конфиге плагина
192+
autoscreenshotSelector: ".my-selector",
193+
// Расширяет autoScreenshotStorybookGlobals, описанные в конфиге плагина
194+
autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } },
195+
// Список Testplane браузеров, в которых нужно запустить тест
196+
browserIds: ["chrome"],
197+
// Переопределяет опции команды assertView для тестов конкретного файла
158198
assertViewOpts: {
159-
// секция для переопределения опций команды assertView для конкретного файла
160199
ignoreDiffPixelCount: 5,
161200
},
162201
},

0 commit comments

Comments
 (0)