diff --git a/docs/plugins/testplane-storybook.mdx b/docs/plugins/testplane-storybook.mdx index 0a1c075..2752d8a 100644 --- a/docs/plugins/testplane-storybook.mdx +++ b/docs/plugins/testplane-storybook.mdx @@ -151,11 +151,6 @@ For example, with `autoScreenshotStorybookGlobals` set to: If you have `ts-node` in your project, you can write your Testplane tests right inside of storybook story files: - - Storybook story files must have `.js` or `.ts` extension for this to work. Formats `jsx/tsx` are - not supported yet. - - ```typescript title="stories/Primary.stories.ts" import type { StoryObj } from "@storybook/react"; import type { WithTestplane } from "@testplane/storybook"; @@ -184,12 +179,14 @@ import type { Meta, StoryObj } from "@storybook/react"; const meta: WithTestplane> = { title: "Example/Button", component: Button, - testplane: { + testplaneConfig: { // If true, skips all Testplane tests from this story file skip: false, - // Overrides default autoscreenshotSelector from plugin config + // Overrides default "autoScreenshots" value from plugin config + autoScreenshots: true, + // Overrides default "autoscreenshotSelector" value from plugin config autoscreenshotSelector: ".my-selector", - // Extends default autoScreenshotStorybookGlobals from plugin config + // Extends default "autoScreenshotStorybookGlobals" value from plugin config autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } }, // Testplane browsers to run tests from this story file browserIds: ["chrome"], @@ -203,6 +200,71 @@ const meta: WithTestplane> = { export default meta; ``` +And then override these options for specific exports: + +```typescript +import type { StoryObj } from "@storybook/react"; +import type { WithTestplane } from "@testplane/storybook"; + +export const Primary: WithTestplane = { + args: { + primary: true, + label: "Button", + }, + testplaneConfig: { + // Overrides testplaneConfig.skip from default export + skip: true, + // Extends testplaneConfig.assertViewOpts from default export + assertViewOpts: { + // "ignoreDiffPixelCount: 5" config value will be inherited from default export + ignoreElements: [".some-selector"], + }, + // Add extra globals set + autoScreenshotStorybookGlobals: { "eng locale": { locale: "en" } }, + }, +}; +``` + +You can also disable specific sets for the whole story-file (in default export) and for the single story (in named export) by setting null value to the set: + +```typescript +import type { WithTestplane } from "@testplane/storybook"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: WithTestplane> = { + title: "Example/Button", + component: Button, + testplaneConfig: { + autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } }, + }, +}; + +export default meta; + +export const Primary: WithTestplane = { + // ...other Storybook properties + testplaneConfig: { + // Don't test this story in dark theme + autoScreenshotStorybookGlobals: { "dark theme": null }, + }, +}; +``` + +Besides extending and disabling, you also can overwrite "autoScreenshotStorybookGlobals", providing the value as a function: + +```typescript +import type { StoryObj } from "@storybook/react"; +import type { WithTestplane } from "@testplane/storybook"; + +export const Primary: WithTestplane = { + // ...other Storybook properties + testplaneConfig: { + // Replaces all global sets with this one + autoScreenshotStorybookGlobals: () => ({ "eng locale": { locale: "en" } }), + }, +}; +``` + If you decide to create separate config for storybook auto-tests (which is suggested), you need to specify config path via CLI option. For example: ```bash 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 5b2c9b1..44f27b2 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 @@ -185,12 +185,14 @@ import type { Meta, StoryObj } from "@storybook/react"; const meta: WithTestplane> = { title: "Example/Button", component: Button, - testplane: { + testplaneConfig: { // Если true, все testplane-тесты этого файла будут отключены skip: false, - // Переопределяет autoscreenshotSelector, описанный в конфиге плагина + // Переопределяет опцию "autoScreenshots", описанную в конфиге плагина + autoScreenshots: true, + // Переопределяет "autoscreenshotSelector", описанный в конфиге плагина autoscreenshotSelector: ".my-selector", - // Расширяет autoScreenshotStorybookGlobals, описанные в конфиге плагина + // Расширяет "autoScreenshotStorybookGlobals", описанные в конфиге плагина autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } }, // Список Testplane браузеров, в которых нужно запустить тест browserIds: ["chrome"], @@ -204,6 +206,71 @@ const meta: WithTestplane> = { export default meta; ``` +И затем переопределить эти опции для конкретных экспортов: + +```typescript +import type { StoryObj } from "@storybook/react"; +import type { WithTestplane } from "@testplane/storybook"; + +export const Primary: WithTestplane = { + args: { + primary: true, + label: "Button", + }, + testplaneConfig: { + // Переопределяет testplaneConfig.skip из экспорта по умолчанию + skip: true, + // Расширяет testplaneConfig.assertViewOpts из экспорта по умолчанию + assertViewOpts: { + // Значение "ignoreDiffPixelCount: 5" будет унаследовано из default export + ignoreElements: [".some-selector"], + }, + // Добавляет дополнительные наборы глобальных значений Storybook + autoScreenshotStorybookGlobals: { "ru locale": { locale: "ru" } }, + }, +}; +``` + +Вы также можете отключить конкретные наборы для всего файла историй (в экспорте по умолчанию) и для отдельной истории (в именованном экспорте), установив значение null: + +```typescript +import type { WithTestplane } from "@testplane/storybook"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: WithTestplane> = { + title: "Example/Button", + component: Button, + testplaneConfig: { + autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } }, + }, +}; + +export default meta; + +export const Primary: WithTestplane = { + // ...другие свойства Storybook + testplaneConfig: { + // Не тестировать эту story в темной теме + autoScreenshotStorybookGlobals: { "dark theme": null }, + }, +}; +``` + +Помимо расширения и отключения, Вы также можете полностью перезаписать "autoScreenshotStorybookGlobals", передав значение как функцию: + +```typescript +import type { StoryObj } from "@storybook/react"; +import type { WithTestplane } from "@testplane/storybook"; + +export const Primary: WithTestplane = { + // ...другие свойства Storybook + testplaneConfig: { + // Заменяет все глобальные наборы Storybook значений для этой story + autoScreenshotStorybookGlobals: () => ({ "ru locale": { locale: "ru" } }), + }, +}; +``` + В Вашем проекте уже могут быть настроены другие типы тестирования, запускающиеся с помощью `testplane`. Чтобы не смешивать сущности, мы рекомендуем для storybook описать отдельный конфиг, а при запуске указывать путь к нему с помощью CLI-опции. Например: ```bash