Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update testplane-storybook docs (autoscreenshotSelector) #47

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading