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