diff --git a/docs/plugins/testplane-storybook.mdx b/docs/plugins/testplane-storybook.mdx index 53bfd0e..0a1c075 100644 --- a/docs/plugins/testplane-storybook.mdx +++ b/docs/plugins/testplane-storybook.mdx @@ -85,6 +85,18 @@ With this minimal config, you will be able to run `npx testplane --storybook` to true Enable / disable auto-screenshot tests + + autoscreenshotSelector + `String` + "" + Custom selector, which will be used in auto-screenshot tests + + + autoScreenshotStorybookGlobals + `Record>` + {} + Run multiple auto-screenshot tests with different [storybook globals](https://storybook.js.org/docs/7/essentials/toolbars-and-globals#globals) + localport `Number` @@ -113,6 +125,28 @@ With this minimal config, you will be able to run `npx testplane --storybook` to unconditionally. +#### 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: @@ -151,11 +185,16 @@ const meta: WithTestplane> = { 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, }, }, diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/plugins/testplane-storybook.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/plugins/testplane-storybook.mdx index 5d9f187..5b2c9b1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/plugins/testplane-storybook.mdx +++ b/i18n/ru/docusaurus-plugin-content-docs/current/plugins/testplane-storybook.mdx @@ -83,7 +83,19 @@ export default { autoScreenshots `Boolean` true - Включить / отключить авто матическое скриншотное тестирование (будут выполняться только вручную описанные tetplane-тесты) + Включить / отключить автоматическое скриншотное тестирование + + + autoscreenshotSelector + `String` + "" + Кастомный селектор, используемый в автоматических скриншотных тестах + + + autoScreenshotStorybookGlobals + `Record>` + {} + Комплекты [глобальных параметров storybook](https://storybook.js.org/docs/7/essentials/toolbars-and-globals#globals), для каждого из которых следует генерировать автоматические скриншотные тесты localport @@ -114,6 +126,28 @@ export default { будет отключена принудительно для оптимизации скорости прохождения тестов. +#### autoScreenshotStorybookGlobals + +К примеру, с `autoScreenshotStorybookGlobals` со значением: + +```json +{ + "default": {}, + "light theme": { + "theme": "light" + }, + "dark theme": { + "theme": "dark" + } +} +``` + +Для каждой стори будут сгенерированы 3 автоскриншотных теста, каждый из которых устанавливает соответствующие глобальные параметры сторибука: + +- `... Autoscreenshot default` +- `... Autoscreenshot light theme` +- `... Autoscreenshot dark theme` + ## Продвинутое использование Если на Вашем проекте используется `ts-node`, то Вы можете писать testplane-тесты прямо внутри истории: @@ -152,11 +186,16 @@ const meta: WithTestplane> = { 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, }, },