From c80c4a2be8d1b6c6c19f6c299724568b1e0be7cc Mon Sep 17 00:00:00 2001 From: Mark berry Date: Sun, 15 Oct 2023 04:03:37 -0500 Subject: [PATCH 1/5] Avoid CSP issue in A11y --- code/addons/a11y/src/a11yRunner.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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); From 031534ff3e3a1760dc57228808ec46a33d419988 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Oct 2023 10:53:15 +0200 Subject: [PATCH 2/5] export globals const instead of default --- code/addons/themes/src/preview.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) 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; From bf06b671b338479d1965407de44363b806ecec1a Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Oct 2023 11:32:23 +0200 Subject: [PATCH 3/5] add codeowners for addon-themes --- CODEOWNERS | 1 + 1 file changed, 1 insertion(+) 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 From 6359db30bc160bc9949538f1d07ecfea44fc5387 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 27 Oct 2023 15:25:27 +0100 Subject: [PATCH 4/5] Docs: Builder Vite - Remove outdated Svelte reference --- code/builders/builder-vite/README.md | 5 ----- 1 file changed, 5 deletions(-) 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: From 1a132870b3b1022ee1f68a1beed98ce50a071b9a Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 27 Oct 2023 16:31:27 +0100 Subject: [PATCH 5/5] Docs: Fix conditional rendering for Unit testing --- docs/writing-tests/stories-in-unit-tests.md | 23 +++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) 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