diff --git a/CODEOWNERS b/CODEOWNERS index de427497aba2..b0e8ad0575d4 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -29,6 +29,7 @@ /code/addons/storyshots-core/ @ndelangen /code/addons/storyshots-puppeteer/ @ndelangen /code/addons/storysource/ @ndelangen +/code/addons/themes/ @JReinhold @Integrayshaun /code/addons/toolbars/ @ndelangen @JReinhold /code/addons/viewport/ @yannbf @ndelangen diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts index 4163017fd7f9..fb32e0f543a0 100644 --- a/code/addons/a11y/src/a11yRunner.ts +++ b/code/addons/a11y/src/a11yRunner.ts @@ -45,12 +45,18 @@ const run = async (storyId: string) => { } const result = await axe.run(htmlElement, options); + + // Axe result contains class instances, which telejson deserializes in a + // way that violates: + // Content Security Policy directive: "script-src 'self' 'unsafe-inline'". + const resultJson = JSON.parse(JSON.stringify(result)); + // It's possible that we requested a new run on a different story. // Unfortunately, axe doesn't support a cancel method to abort current run. // We check if the story we run against is still the current one, // if not, trigger a new run using the current story if (activeStoryId === storyId) { - channel.emit(EVENTS.RESULT, result); + channel.emit(EVENTS.RESULT, resultJson); } else { active = false; run(activeStoryId); diff --git a/code/addons/themes/src/preview.tsx b/code/addons/themes/src/preview.tsx index 88b41773e9db..1ee39be54ed0 100644 --- a/code/addons/themes/src/preview.tsx +++ b/code/addons/themes/src/preview.tsx @@ -1,11 +1,7 @@ import type { Renderer, ProjectAnnotations } from '@storybook/types'; import { GLOBAL_KEY } from './constants'; -const preview: ProjectAnnotations = { - globals: { - // Required to make sure SB picks this up from URL params - [GLOBAL_KEY]: '', - }, +export const globals: ProjectAnnotations['globals'] = { + // Required to make sure SB picks this up from URL params + [GLOBAL_KEY]: '', }; - -export default preview; diff --git a/code/builders/builder-vite/README.md b/code/builders/builder-vite/README.md index ce675ab3f580..1e5026e36443 100644 --- a/code/builders/builder-vite/README.md +++ b/code/builders/builder-vite/README.md @@ -9,7 +9,6 @@ Build your stories with [vite](https://vitejs.dev/) for fast startup times and n - [Getting started with Vite and Storybook (on a new project)](#getting-started-with-vite-and-storybook-on-a-new-project) - [Migration from webpack / CRA](#migration-from-webpack--cra) - [Customize Vite config](#customize-vite-config) - - [Svelte Options](#svelte-options) - [TypeScript](#typescript) - [React Docgen](#react-docgen) - [Note about working directory](#note-about-working-directory) @@ -113,10 +112,6 @@ The `configType` variable will be either `"DEVELOPMENT"` or `"PRODUCTION"`. The function should return the updated Vite configuration. -### Svelte Options - -When using this builder with Svelte, your `svelte.config.js` file will be used automatically. - ### TypeScript Configure your `.storybook/main.ts` to use TypeScript: diff --git a/docs/writing-tests/stories-in-unit-tests.md b/docs/writing-tests/stories-in-unit-tests.md index 156294d5e480..f96a72c9fef2 100644 --- a/docs/writing-tests/stories-in-unit-tests.md +++ b/docs/writing-tests/stories-in-unit-tests.md @@ -172,26 +172,35 @@ If you intend to test multiple stories in a single test, use the `composeStories Storybook provides community-led addons for other frameworks like [Vue 2](https://storybook.js.org/addons/@storybook/testing-vue) and [Angular](https://storybook.js.org/addons/@storybook/testing-angular). However, these addons still lack support for the latest stable Storybook release. If you're interested in helping out, we recommend reaching out to the maintainers using the default communication channels (GitHub and [Discord server](https://discord.com/channels/486522875931656193/839297503446695956)). -### The args are not being passed to the test - +### The args are not being passed to the test + The components returned by `composeStories` or `composeStory` not only can be rendered as React components but also come with the combined properties from the story, meta, and global configuration. This means that if you want to access args or parameters, for instance, you can do so: + + + + + + -When using the `composeStories` or `composeStory` functions, the components being rendered will have a combination of properties from the story, meta, and global configuration. Therefore, if you need to access the args or parameters, you can do so as follows: +### The args are not being passed to the test - +When using the `composeStories` or `composeStory` functions, the components being rendered will have a combination of properties from the story, meta, and global configuration. Therefore, if you need to access the args or parameters, you can do so as follows: + + #### Learn about other UI tests - [Test runner](./test-runner.md) to automate test execution