Skip to content

Commit

Permalink
docs: update testplane-storybook docs (autoscreenshotSelector)
Browse files Browse the repository at this point in the history
  • Loading branch information
KuznetsovRoman committed Dec 5, 2024
1 parent 03ff156 commit e31a0b6
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 9 deletions.
47 changes: 43 additions & 4 deletions docs/plugins/testplane-storybook.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,18 @@ With this minimal config, you will be able to run `npx testplane --storybook` to
<td>true</td>
<td>Enable / disable auto-screenshot tests</td>
</tr>
<tr>
<td>autoscreenshotSelector</td>
<td>`String`</td>
<td>""</td>
<td>Custom selector, which will be used in auto-screenshot tests</td>
</tr>
<tr>
<td>autoScreenshotStorybookGlobals</td>
<td>`Record<string, Record<string, unknown>>`</td>
<td>{}</td>
<td>Run multiple auto-screenshot tests with different [storybook globals](https://storybook.js.org/docs/7/essentials/toolbars-and-globals#globals)</td>
</tr>
<tr>
<td>localport</td>
<td>`Number`</td>
Expand Down Expand Up @@ -113,6 +125,28 @@ With this minimal config, you will be able to run `npx testplane --storybook` to
unconditionally.
</Admonition>

#### autoScreenshotStorybookGlobals

For example, with `autoScreenshotStorybookGlobals` set to:

```json
{
"default": {},
"light theme": {
"theme": "light"
},
"dark theme": {
"theme": "dark"
}
}
```

3 autoscreenshot tests will be generated for each story, each test having its corresponding storybook globals value:

- `... Autoscreenshot default`
- `... Autoscreenshot light theme`
- `... Autoscreenshot dark theme`

## Advanced usage

If you have `ts-node` in your project, you can write your Testplane tests right inside of storybook story files:
Expand Down Expand Up @@ -151,11 +185,16 @@ const meta: WithTestplane<Meta<typeof Button>> = {
title: "Example/Button",
component: Button,
testplane: {
skip: false, // if true, skips all Testplane tests from this story file
autoscreenshotSelector: ".my-selector", // Custom selector to auto-screenshot elements
browserIds: ["chrome"], // Testplane browsers to run tests from this story file
// If true, skips all Testplane tests from this story file
skip: false,
// Overrides default autoscreenshotSelector from plugin config
autoscreenshotSelector: ".my-selector",
// Extends default autoScreenshotStorybookGlobals from plugin config
autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } },
// Testplane browsers to run tests from this story file
browserIds: ["chrome"],
// Overrides default assertView options for tests from this file
assertViewOpts: {
// override default assertView options for tests from this file
ignoreDiffPixelCount: 5,
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,19 @@ export default {
<td>autoScreenshots</td>
<td>`Boolean`</td>
<td>true</td>
<td>Включить / отключить авто матическое скриншотное тестирование (будут выполняться только вручную описанные tetplane-тесты)</td>
<td>Включить / отключить автоматическое скриншотное тестирование</td>
</tr>
<tr>
<td>autoscreenshotSelector</td>
<td>`String`</td>
<td>""</td>
<td>Кастомный селектор, используемый в автоматических скриншотных тестах</td>
</tr>
<tr>
<td>autoScreenshotStorybookGlobals</td>
<td>`Record<string, Record<string, unknown>>`</td>
<td>{}</td>
<td>Комплекты [глобальных параметров storybook](https://storybook.js.org/docs/7/essentials/toolbars-and-globals#globals), для каждого из которых следует генерировать автоматические скриншотные тесты</td>
</tr>
<tr>
<td>localport</td>
Expand Down Expand Up @@ -114,6 +126,28 @@ export default {
будет отключена принудительно для оптимизации скорости прохождения тестов.
</Admonition>

#### autoScreenshotStorybookGlobals

К примеру, с `autoScreenshotStorybookGlobals` со значением:

```json
{
"default": {},
"light theme": {
"theme": "light"
},
"dark theme": {
"theme": "dark"
}
}
```

Для каждой стори будут сгенерированы 3 автоскриншотных теста, каждый из которых устанавливает соответствующие глобальные параметры сторибука:

- `... Autoscreenshot default`
- `... Autoscreenshot light theme`
- `... Autoscreenshot dark theme`

## Продвинутое использование

Если на Вашем проекте используется `ts-node`, то Вы можете писать testplane-тесты прямо внутри истории:
Expand Down Expand Up @@ -152,11 +186,16 @@ const meta: WithTestplane<Meta<typeof Button>> = {
title: "Example/Button",
component: Button,
testplane: {
skip: false, // если true, все testplane-тесты этого файла будут отключены
autoscreenshotSelector: ".my-selector", // переопределение селектора для скриншота (например, если нужно сделать скриншот не всего элемента)
browserIds: ["chrome"], // названия браузеров testplane, в которых нужно запустить тест
// Если true, все testplane-тесты этого файла будут отключены
skip: false,
// Переопределяет autoscreenshotSelector, описанный в конфиге плагина
autoscreenshotSelector: ".my-selector",
// Расширяет autoScreenshotStorybookGlobals, описанные в конфиге плагина
autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } },
// Список Testplane браузеров, в которых нужно запустить тест
browserIds: ["chrome"],
// Переопределяет опции команды assertView для тестов конкретного файла
assertViewOpts: {
// секция для переопределения опций команды assertView для конкретного файла
ignoreDiffPixelCount: 5,
},
},
Expand Down

0 comments on commit e31a0b6

Please sign in to comment.