Upgrade Storybook to 8.x (next) #2373
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import * as React from "react"; | ||
| import wonderBlocksTheme from "./wonder-blocks-theme"; | ||
| import {Decorator} from "@storybook/react"; | ||
|
There was a problem hiding this comment. Totally out of the blue and unrelated to this PR, but it looks like you don't have https://github.com/Khan/perseus/blob/main/.eslintrc.js#L220..L236 There was a problem hiding this comment. Great point! I'll add this rule in a separate PR. I'll probably wait until WB is in a more "quiet" state to apply the changes :) |
||
| import {color} from "@khanacademy/wonder-blocks-tokens"; | ||
| import Link from "@khanacademy/wonder-blocks-link"; | ||
| import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming"; | ||
|
|
@@ -95,31 +95,29 @@ const parameters = { | |
| }, | ||
| }; | ||
|
|
||
| const withThemeSwitcher: Decorator = ( | ||
| Story, | ||
| {globals: {theme}, parameters: {enableRenderStateRootDecorator}}, | ||
| ) => { | ||
| if (enableRenderStateRootDecorator) { | ||
| return ( | ||
| <RenderStateRoot> | ||
| <ThemeSwitcherContext.Provider value={theme}> | ||
| <Story /> | ||
| </ThemeSwitcherContext.Provider> | ||
| </RenderStateRoot> | ||
| ); | ||
| } | ||
| return ( | ||
| <ThemeSwitcherContext.Provider value={theme}> | ||
| <Story /> | ||
| </ThemeSwitcherContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| const preview: Preview = { | ||
| parameters, | ||
| decorators: [withThemeSwitcher], | ||
| globalTypes: { | ||
| // Allow the user to select a theme from the toolbar. | ||
| theme: { | ||
|
|
@@ -146,6 +144,8 @@ const preview: Preview = { | |
| }, | ||
| }, | ||
| }, | ||
|
|
||
| tags: ["autodocs"], | ||
| }; | ||
|
|
||
| export default preview; | ||
|
There was a problem hiding this comment. note: This file was generated when I added the experimental addon. More info here: https://storybook.js.org/docs/writing-tests/test-addon#automatic-setup |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { beforeAll } from 'vitest'; | ||
| import { setProjectAnnotations } from '@storybook/react'; | ||
| import * as projectAnnotations from './preview'; | ||
|
|
||
| // This is an important step to apply the right configuration when testing your stories. | ||
| // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations | ||
| const project = setProjectAnnotations([projectAnnotations]); | ||
|
|
||
| beforeAll(project.beforeAll); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -82,46 +82,50 @@ export const Default: StoryComponentType = { | |
| * The `onChange` prop is optional in case the toggle will | ||
| * be wrapped in a larger clickable component. | ||
| */ | ||
| export const Controlled: StoryComponentType = { | ||
|
There was a problem hiding this comment. note: This component doesn't have any big changes, just moved the code around to support CSF3. |
||
| render: function Render() { | ||
| const [checkedOne, setCheckedOne] = React.useState(false); | ||
| const [checkedTwo, setCheckedTwo] = React.useState(false); | ||
|
|
||
|
There was a problem hiding this comment. In previous versions of Storybook you had to manually navigate to each story and press "play" to run the tests, right? There was a problem hiding this comment. Right! and that made it hard to determine when we introduced a regression with these interaction tests. I also added the CI step to ensure that we don't introduce issues in the future. NOTE: Storybook uses the test-runner for this, but it will be replaced by this new test addon. The previous runner used Jest + Playwright, and they wanted to switch to Vitest specially because they can run these tests in browsers as well as in headless mode. This is a new There was a problem hiding this comment. More context here: https://storybook.js.org/blog/storybook-test-sneak-peek/ |
||
| return ( | ||
| <View style={styles.column}> | ||
| <Switch checked={checkedOne} onChange={setCheckedOne} /> | ||
| <Switch | ||
| testId="test-switch" | ||
| aria-label="test switch" | ||
| checked={checkedTwo} | ||
| onChange={setCheckedTwo} | ||
| icon={<PhosphorIcon icon={magnifyingGlassIcon} />} | ||
| /> | ||
| </View> | ||
| ); | ||
| }, | ||
| play: async ({canvasElement}) => { | ||
| const canvas = within(canvasElement); | ||
|
|
||
| const switchWithIcon = canvas.getByTestId("test-switch"); | ||
| const switchInput = canvas.getByRole("switch", {name: "test switch"}); | ||
|
|
||
| await userEvent.tab(); | ||
| await userEvent.tab(); | ||
|
|
||
| expect(switchWithIcon).toHaveStyle( | ||
| "background-color: rgba(33, 36, 44, 0.5)", | ||
| ); | ||
| expect(switchWithIcon).toHaveStyle( | ||
| "outline: 2px solid rgb(24, 101, 242)", | ||
| ); | ||
| expect(switchInput).toHaveProperty("checked", false); | ||
|
|
||
| await userEvent.click(switchWithIcon); | ||
| // Wait for animations to finish | ||
| await new Promise((resolve) => setTimeout(resolve, 150)); | ||
|
|
||
| expect(switchInput).toHaveProperty("checked", true); | ||
| expect(switchWithIcon).toHaveStyle( | ||
| "background-color: rgb(24, 101, 242)", | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Storybook upgrades always want to drop this back in. I finally searched when it's needed. Apparently in Yarn PnP situations module resolution can fail without this. Good to know we can remove this in Perseus too then.
https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oh I see, thanks for the context.