Skip to content
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
78 changes: 70 additions & 8 deletions docs/plugins/testplane-storybook.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<Admonition type="info">
Storybook story files must have `.js` or `.ts` extension for this to work. Formats `jsx/tsx` are
not supported yet.
</Admonition>

```typescript title="stories/Primary.stories.ts"
import type { StoryObj } from "@storybook/react";
import type { WithTestplane } from "@testplane/storybook";
Expand Down Expand Up @@ -184,12 +179,14 @@ import type { Meta, StoryObj } from "@storybook/react";
const meta: WithTestplane<Meta<typeof Button>> = {
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"],
Expand All @@ -203,6 +200,71 @@ const meta: WithTestplane<Meta<typeof Button>> = {
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<StoryObj> = {
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<Meta<typeof Button>> = {
title: "Example/Button",
component: Button,
testplaneConfig: {
autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } },
},
};

export default meta;

export const Primary: WithTestplane<StoryObj> = {
// ...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<StoryObj> = {
// ...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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -185,12 +185,14 @@ import type { Meta, StoryObj } from "@storybook/react";
const meta: WithTestplane<Meta<typeof Button>> = {
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"],
Expand All @@ -204,6 +206,71 @@ const meta: WithTestplane<Meta<typeof Button>> = {
export default meta;
```

И затем переопределить эти опции для конкретных экспортов:

```typescript
import type { StoryObj } from "@storybook/react";
import type { WithTestplane } from "@testplane/storybook";

export const Primary: WithTestplane<StoryObj> = {
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<Meta<typeof Button>> = {
title: "Example/Button",
component: Button,
testplaneConfig: {
autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } },
},
};

export default meta;

export const Primary: WithTestplane<StoryObj> = {
// ...другие свойства 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<StoryObj> = {
// ...другие свойства Storybook
testplaneConfig: {
// Заменяет все глобальные наборы Storybook значений для этой story
autoScreenshotStorybookGlobals: () => ({ "ru locale": { locale: "ru" } }),
},
};
```

В Вашем проекте уже могут быть настроены другие типы тестирования, запускающиеся с помощью `testplane`. Чтобы не смешивать сущности, мы рекомендуем для storybook описать отдельный конфиг, а при запуске указывать путь к нему с помощью CLI-опции. Например:

```bash
Expand Down