From 63590f29588d4adcbbeac1f80257cf9fdf527b85 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 2 Nov 2023 11:22:58 +0100 Subject: [PATCH 1/7] Add a readme for the test package --- code/lib/test/README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 code/lib/test/README.md diff --git a/code/lib/test/README.md b/code/lib/test/README.md new file mode 100644 index 000000000000..fed15b0ab7c1 --- /dev/null +++ b/code/lib/test/README.md @@ -0,0 +1,38 @@ +# Storybook Test + +The `@storybook/test` package contains utilities to be used to test your story in the `play` function. + +## Installation + +Install this addon by adding the `@storybook/test` dependency: + +```sh +npm install -D @storybook/test +pnpm add -D @storybook/test +yarn add -D @storybook/test +``` + +## Usage + +The test package exports an instrumented version `@vitest/spy`, `@vitest/expect` (based on `chai`), `@testing-library/dom` and `@testing-library/user-event`. +The instrumentation makes sure you can debug those methods in the addon-interactions panel. + +```ts +import { Button } from './Button'; +import { within, userEvent, expect, fn } from '@storybook/test'; + +export default { + component: Button, + args: { + onClick: fn(), + }, +}; + +export const Demo = { + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole('button')); + await expect(args.onClick).toHaveBeenCalled(); + }, +}; +``` From beda7e2762287a91cdceb9f3f058c36d2108e22c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 3 Nov 2023 09:01:27 +0100 Subject: [PATCH 2/7] Update code/lib/test/README.md Co-authored-by: Ian VanSchooten --- code/lib/test/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/test/README.md b/code/lib/test/README.md index fed15b0ab7c1..e3e731fe2f64 100644 --- a/code/lib/test/README.md +++ b/code/lib/test/README.md @@ -14,7 +14,7 @@ yarn add -D @storybook/test ## Usage -The test package exports an instrumented version `@vitest/spy`, `@vitest/expect` (based on `chai`), `@testing-library/dom` and `@testing-library/user-event`. +The test package exports instrumented versions of [@vitest/spy](https://vitest.dev/api/mock.html), [@vitest/expect](https://vitest.dev/api/expect.html) (based on [chai](https://www.chaijs.com/)), [@testing-library/dom](https://testing-library.com/docs/dom-testing-library/intro) and [@testing-library/user-event](https://testing-library.com/docs/user-event/intro). The instrumentation makes sure you can debug those methods in the addon-interactions panel. ```ts From e5dc4d83aeae0f4d262233b0ff952cbddb3250df Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 3 Nov 2023 09:01:36 +0100 Subject: [PATCH 3/7] Update code/lib/test/README.md Co-authored-by: Ian VanSchooten --- code/lib/test/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/test/README.md b/code/lib/test/README.md index e3e731fe2f64..6e581b5e56c3 100644 --- a/code/lib/test/README.md +++ b/code/lib/test/README.md @@ -15,7 +15,7 @@ yarn add -D @storybook/test ## Usage The test package exports instrumented versions of [@vitest/spy](https://vitest.dev/api/mock.html), [@vitest/expect](https://vitest.dev/api/expect.html) (based on [chai](https://www.chaijs.com/)), [@testing-library/dom](https://testing-library.com/docs/dom-testing-library/intro) and [@testing-library/user-event](https://testing-library.com/docs/user-event/intro). -The instrumentation makes sure you can debug those methods in the addon-interactions panel. +The instrumentation makes sure you can debug those methods in the [addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions) panel. ```ts import { Button } from './Button'; From bb24d000c9f1f6916fb0adc69fe71b5d5c6bd178 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 3 Nov 2023 09:01:45 +0100 Subject: [PATCH 4/7] Update code/lib/test/README.md Co-authored-by: Ian VanSchooten --- code/lib/test/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/test/README.md b/code/lib/test/README.md index 6e581b5e56c3..2169ba4ce5f8 100644 --- a/code/lib/test/README.md +++ b/code/lib/test/README.md @@ -1,6 +1,6 @@ # Storybook Test -The `@storybook/test` package contains utilities to be used to test your story in the `play` function. +The `@storybook/test` package contains utilities for testing your stories inside `play` functions. ## Installation From 06aee66773ab3637da962d47e6a3b5902c4145aa Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 3 Nov 2023 09:04:04 +0100 Subject: [PATCH 5/7] Update README.md with clarification on package usage --- code/lib/test/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/test/README.md b/code/lib/test/README.md index 2169ba4ce5f8..d12b43c51e31 100644 --- a/code/lib/test/README.md +++ b/code/lib/test/README.md @@ -12,6 +12,8 @@ pnpm add -D @storybook/test yarn add -D @storybook/test ``` +Note that this package is not an addon, so you don't have to add it to your `main.js/main.ts` file. + ## Usage The test package exports instrumented versions of [@vitest/spy](https://vitest.dev/api/mock.html), [@vitest/expect](https://vitest.dev/api/expect.html) (based on [chai](https://www.chaijs.com/)), [@testing-library/dom](https://testing-library.com/docs/dom-testing-library/intro) and [@testing-library/user-event](https://testing-library.com/docs/user-event/intro). From de903be4ee0a1daec96cc7973d24d586366ea3b9 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 3 Nov 2023 16:01:59 +0100 Subject: [PATCH 6/7] Update code/lib/test/README.md Co-authored-by: Kyle Gach --- code/lib/test/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/test/README.md b/code/lib/test/README.md index d12b43c51e31..825ab086c104 100644 --- a/code/lib/test/README.md +++ b/code/lib/test/README.md @@ -4,7 +4,7 @@ The `@storybook/test` package contains utilities for testing your stories inside ## Installation -Install this addon by adding the `@storybook/test` dependency: +Install the package by adding the `@storybook/test` dev dependency: ```sh npm install -D @storybook/test From 8114b3344d80fd74a1ab7782b5f1d798f58acc3d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 3 Nov 2023 16:02:11 +0100 Subject: [PATCH 7/7] Update code/lib/test/README.md Co-authored-by: Kyle Gach --- code/lib/test/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/test/README.md b/code/lib/test/README.md index 825ab086c104..9c28efa303bd 100644 --- a/code/lib/test/README.md +++ b/code/lib/test/README.md @@ -20,6 +20,7 @@ The test package exports instrumented versions of [@vitest/spy](https://vitest.d The instrumentation makes sure you can debug those methods in the [addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions) panel. ```ts +// Button.stories.ts import { Button } from './Button'; import { within, userEvent, expect, fn } from '@storybook/test';