From 1819cb4e14b751ce14118de80d008f87892b8ecb Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 26 Jun 2024 12:10:39 +0200 Subject: [PATCH] Add extra tests --- .../preview-web/PreviewWeb.mockdata.ts | 15 +++++++++++-- .../modules/preview-web/PreviewWeb.test.ts | 2 +- .../src/modules/store/StoryStore.test.ts | 18 ++++++++++------ .../modules/store/csf/prepareStory.test.ts | 2 +- .../template/stories/before-each.stories.ts | 21 +++++++++++++++++++ 5 files changed, 48 insertions(+), 10 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts index ded5833ed667..202e17f291ef 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts @@ -11,8 +11,15 @@ import { STORY_THREW_EXCEPTION, } from '@storybook/core-events'; -import type { ModuleImportFn, StoryIndex, TeardownRenderToCanvas } from '@storybook/types'; +import type { + ModuleImportFn, + ProjectAnnotations, + Renderer, + StoryIndex, + TeardownRenderToCanvas, +} from '@storybook/types'; import type { RenderPhase } from './render/StoryRender'; +import { composeConfigs } from '../store'; export const componentOneExports = { default: { @@ -65,7 +72,7 @@ export const docsRenderer = { unmount: vi.fn(), }; export const teardownrenderToCanvas: Mock<[TeardownRenderToCanvas]> = vi.fn(); -export const projectAnnotations = { +const rawProjectAnnotations = { initialGlobals: { a: 'b' }, globalTypes: {}, decorators: [vi.fn((s) => s())], @@ -73,6 +80,10 @@ export const projectAnnotations = { renderToCanvas: vi.fn().mockReturnValue(teardownrenderToCanvas), parameters: { docs: { renderer: () => docsRenderer } }, }; +export const projectAnnotations = composeConfigs([ + rawProjectAnnotations, +]) as ProjectAnnotations & typeof rawProjectAnnotations; + export const getProjectAnnotations = vi.fn(() => projectAnnotations as any); export const storyIndex: StoryIndex = { diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 8d4a37436bdf..0c4650a37b9a 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -949,7 +949,7 @@ describe('PreviewWeb', () => { forceRemount: true, storyContext: expect.objectContaining({ loaded: { l: 8 }, // This is the value returned by the *first* loader call - args: { foo: 'a', new: 'arg', one: 'mapped-1' }, + args: { foo: 'a', one: 'mapped-1' }, }), }), 'story-element' diff --git a/code/lib/preview-api/src/modules/store/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts index 51d7664b468d..3ee5af35022d 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -5,6 +5,7 @@ import { prepareStory } from './csf/prepareStory'; import { processCSFFile } from './csf/processCSFFile'; import { StoryStore } from './StoryStore'; import type { HooksContext } from './hooks'; +import { composeConfigs } from './csf/composeConfigs'; // Spy on prepareStory/processCSFFile vi.mock('./csf/prepareStory', async (importOriginal) => { @@ -41,12 +42,14 @@ const importFn = vi.fn(async (path) => { return path === './src/ComponentOne.stories.js' ? componentOneExports : componentTwoExports; }); -const projectAnnotations: ProjectAnnotations = { - globals: { a: 'b' }, - globalTypes: { a: { type: 'string' } }, - argTypes: { a: { type: 'string' } }, - render: vi.fn(), -}; +const projectAnnotations: ProjectAnnotations = composeConfigs([ + { + globals: { a: 'b' }, + globalTypes: { a: { type: 'string' } }, + argTypes: { a: { type: 'string' } }, + render: vi.fn(), + }, +]); const storyIndex: StoryIndex = { v: 5, @@ -660,6 +663,7 @@ describe('StoryStore', () => { "fileName": "./src/ComponentOne.stories.js", }, "playFunction": undefined, + "runStep": [Function], "story": "A", "storyFn": [Function], "subcomponents": undefined, @@ -707,6 +711,7 @@ describe('StoryStore', () => { "fileName": "./src/ComponentOne.stories.js", }, "playFunction": undefined, + "runStep": [Function], "story": "B", "storyFn": [Function], "subcomponents": undefined, @@ -754,6 +759,7 @@ describe('StoryStore', () => { "fileName": "./src/ComponentTwo.stories.js", }, "playFunction": undefined, + "runStep": [Function], "story": "C", "storyFn": [Function], "subcomponents": undefined, diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts index e2bb5550af62..7818d2bd4752 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts @@ -765,7 +765,7 @@ describe('prepareMeta', () => { ...preparedStory } = prepareStory({ id, name, moduleExport }, meta, { render }); - const { ...preparedMeta } = prepareMeta( + const preparedMeta = prepareMeta( meta, normalizeProjectAnnotations(composeConfigs([{ render }])), {} diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts index a6f613e7698c..da392737103c 100644 --- a/code/lib/test/template/stories/before-each.stories.ts +++ b/code/lib/test/template/stories/before-each.stories.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/naming-convention,storybook/prefer-pascal-case */ import { expect, mocked, getByRole, spyOn, userEvent } from '@storybook/test'; const meta = { @@ -42,3 +43,23 @@ export const BeforeEachOrder = { ]); }, }; + +export const before_each_and_loaders_can_extend_context = { + parameters: { chromatic: { disable: true } }, + loaders(context) { + context.foo = ['bar']; + }, + beforeEach(context) { + context.foo = [...context.foo, 'baz']; + }, + async play({ foo }) { + await expect(foo).toEqual(['bar', 'baz']); + }, +}; + +export const context_prop_is_available = { + parameters: { chromatic: { disable: true } }, + async play({ context, canvasElement }) { + await expect(context.canvasElement).toEqual(canvasElement); + }, +};