Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test: Enhance the context with canvas when the test package is used #28368

Merged
merged 25 commits into from
Jul 2, 2024
Merged

Test: Enhance the context with canvas when the test package is used #28368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
2485a11
Add canvas to the context in the test package
kasperpeulen Jun 26, 2024
1d6e703
Merge branch 'refs/heads/kasper/context-prop' into kasper/canvas
kasperpeulen Jun 27, 2024
67c490c
Add default canvas as empty object
kasperpeulen Jun 27, 2024
48e7135
Merge branch 'refs/heads/kasper/context-prop' into kasper/canvas
kasperpeulen Jun 27, 2024
9bdf213
Fix type issue
kasperpeulen Jun 27, 2024
a7bd8d3
Don't prebundle @storybook/csf as module augmentation fails that way
kasperpeulen Jun 27, 2024
291ae3f
Merge branch 'refs/heads/kasper/context-prop' into kasper/canvas
kasperpeulen Jun 27, 2024
281b1b3
Fix yarn lock
kasperpeulen Jun 27, 2024
53cae2d
Add userEvent as well, closes #17988
kasperpeulen Jun 28, 2024
1c4cacf
Rollback
kasperpeulen Jun 28, 2024
6eda181
Merge branch 'kasper/context-prop' into kasper/canvas
kasperpeulen Jun 28, 2024
8087ad7
Rollback userEvent
kasperpeulen Jun 28, 2024
baad958
Merge remote-tracking branch 'origin/kasper/canvas' into kasper/canvas
kasperpeulen Jun 28, 2024
b9f4f04
Fix test type
kasperpeulen Jun 28, 2024
1a4da68
Merge branch 'kasper/context-prop' into kasper/canvas
kasperpeulen Jun 28, 2024
5ff5a08
Fix angular types in test
kasperpeulen Jun 28, 2024
a49a005
Merge remote-tracking branch 'origin/kasper/canvas' into kasper/canvas
kasperpeulen Jun 28, 2024
880e081
Update code/lib/test/template/stories/loader-enhancements.stories.ts
kasperpeulen Jun 28, 2024
9a44fa7
Merge branch 'next' into kasper/canvas
kasperpeulen Jul 1, 2024
777df33
Use stable csf release
kasperpeulen Jul 2, 2024
623d4e3
Merge remote-tracking branch 'refs/remotes/origin/next' into kasper/c…
kasperpeulen Jul 2, 2024
e7c6a8f
Fix test package.json
kasperpeulen Jul 2, 2024
c48a684
Fix yarn.lock
kasperpeulen Jul 2, 2024
47c00ee
Fix import
kasperpeulen Jul 2, 2024
e9910ce
Fix dependencies
kasperpeulen Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion code/addons/links/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
},
"dependencies": {
"@storybook/csf": "0.1.10--canary.d841bb4.0",
"@storybook/csf": "0.1.10",
"@storybook/global": "^5.0.0",
"ts-dedent": "^2.0.0"
},
Expand Down
3 changes: 1 addition & 2 deletions code/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@
"prep": "bun ./scripts/prep.ts"
},
"dependencies": {
"@storybook/csf": "0.1.10--canary.d841bb4.0",
"@storybook/csf": "0.1.10",
"@types/express": "^4.17.21",
"@types/node": "^18.0.0",
"browser-assert": "^1.2.1",
Expand Down Expand Up @@ -276,7 +276,6 @@
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-slot": "^1.0.2",
"@storybook/csf": "0.1.10--canary.d841bb4.0",
"@storybook/docs-mdx": "3.1.0-next.0",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.5",
Expand Down
2 changes: 1 addition & 1 deletion code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,8 +188,8 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
loaded: {},
step: (label, play) => runStep(label, play, context),
context: null!,
canvas: {},
};

context.context = context;

const renderContext: RenderContext<TRenderer> = {
Expand Down
1 change: 1 addition & 0 deletions code/core/src/preview-api/modules/store/csf/portable-stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
step: (label, play) => story.runStep(label, play, context),
canvasElement: globalThis?.document?.body,
context: null!,
canvas: {},
...story,
};

Expand Down
5 changes: 3 additions & 2 deletions code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,16 @@ export function prepareStory<TRenderer extends Renderer>(
const addExtraContext = (
context: PreparedStory & Pick<StoryContext, 'args' | 'globals'>
): StoryContext => {
const extraContext = {
const extraContext: StoryContext = {
...context,
hooks: new HooksContext(),
viewMode: 'story' as const,
loaded: {},
abortSignal: new AbortController().signal,
canvasElement: {},
step: vi.fn(),
context: undefined! as StoryContext,
context: null! as StoryContext,
canvas: null!,
};
extraContext.context = extraContext;
return extraContext;
Expand Down
1 change: 1 addition & 0 deletions code/frameworks/angular/src/client/decorators.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const defaultContext: Addon_StoryContext<AngularRenderer> = {
canvasElement: undefined,
step: undefined,
context: undefined,
canvas: undefined,
};

defaultContext.context = defaultContext;
Expand Down
2 changes: 1 addition & 1 deletion code/lib/blocks/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/csf": "0.1.10--canary.d841bb4.0",
"@storybook/csf": "0.1.10",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.5",
"@types/lodash": "^4.14.167",
Expand Down
2 changes: 1 addition & 1 deletion code/lib/codemod/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"@babel/preset-env": "^7.24.4",
"@babel/types": "^7.24.0",
"@storybook/core": "workspace:*",
"@storybook/csf": "0.1.10--canary.d841bb4.0",
"@storybook/csf": "0.1.10",
"@types/cross-spawn": "^6.0.2",
"cross-spawn": "^7.0.3",
"globby": "^14.0.1",
Expand Down
2 changes: 1 addition & 1 deletion code/lib/source-loader/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/csf": "0.1.10--canary.d841bb4.0",
"@storybook/csf": "0.1.10",
"estraverse": "^5.2.0",
"lodash": "^4.17.21",
"prettier": "^3.1.1"
Expand Down
1 change: 1 addition & 0 deletions code/lib/test/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/csf": "0.1.10",
"@storybook/instrumenter": "workspace:*",
"@testing-library/dom": "10.1.0",
"@testing-library/jest-dom": "6.4.5",
Expand Down
30 changes: 26 additions & 4 deletions code/lib/test/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { instrument } from '@storybook/instrumenter';
import { type LoaderFunction } from '@storybook/csf';
import type { LoaderFunction } from '@storybook/csf';
import chai from 'chai';
import { global } from '@storybook/global';
import { expect as rawExpect } from './expect';
Expand All @@ -11,10 +11,20 @@ import {
resetAllMocks,
restoreAllMocks,
} from './spy';
import type { Renderer } from 'storybook/internal/types';
import { type queries, within } from './testing-library';

export * from './spy';

type Queries = ReturnType<typeof within<typeof queries>>;

declare module '@storybook/csf' {
interface Canvas extends Queries {}
interface StoryContext {
// TODO enable this in a later PR, once we have time to QA this properly
// userEvent: ReturnType<typeof userEvent.setup>;
}
}

export const { expect } = instrument(
{ expect: rawExpect },
{
Expand Down Expand Up @@ -84,12 +94,24 @@ export const traverseArgs = (value: unknown, depth = 0, key?: string): unknown =
return value;
};

const nameSpiesAndWrapActionsInSpies: LoaderFunction<Renderer> = ({ initialArgs }) => {
const nameSpiesAndWrapActionsInSpies: LoaderFunction = ({ initialArgs }) => {
traverseArgs(initialArgs);
};

const enhanceContext: LoaderFunction = (context) => {
if (globalThis.HTMLElement && context.canvasElement instanceof globalThis.HTMLElement) {
context.canvas = within(context.canvasElement);
// TODO enable this in a later PR, once we have time to QA this properly
// context.userEvent = userEvent.setup();
}
};

// We are using this as a default Storybook loader, when the test package is used. This avoids the need for optional peer dependency workarounds.
// eslint-disable-next-line no-underscore-dangle
(global as any).__STORYBOOK_TEST_LOADERS__ = [resetAllMocksLoader, nameSpiesAndWrapActionsInSpies];
(global as any).__STORYBOOK_TEST_LOADERS__ = [
resetAllMocksLoader,
nameSpiesAndWrapActionsInSpies,
enhanceContext,
];
// eslint-disable-next-line no-underscore-dangle
(global as any).__STORYBOOK_TEST_ON_MOCK_CALL__ = onMockCall;
24 changes: 24 additions & 0 deletions code/lib/test/template/stories/loader-enhancements.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* eslint-disable @typescript-eslint/naming-convention,storybook/prefer-pascal-case */
import { expect, within, userEvent as globalUserEvent } from '@storybook/test';

const meta = {
component: globalThis.Components.Button,
parameters: { chromatic: { disable: true } },
args: { label: 'Button' },
};

export default meta;

export const canvas_is_equal_to_within_canvas_element = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not camelCase?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because iFindCamelCaseHarderToReadForLongerSentences

async play({ canvas, canvasElement }) {
const oldCanvas = within(canvasElement);
await expect(canvas satisfies typeof oldCanvas).toEqual(oldCanvas);
},
};

// TODO enable this in a later PR, once we have time to QA this properly
// export const context_user_event_is_equal_to_user_event_setup = {
// async play({ userEvent }) {
// await expect(userEvent satisfies typeof globalUserEvent).toEqual(globalUserEvent.setup());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suspect this won't be equal, as setup() supposedly creates a new instance of UserEvent.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but toEqual doesn't check for reference. Structurally it was equal.

// },
// };
2 changes: 1 addition & 1 deletion code/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
"@storybook/codemod": "workspace:*",
"@storybook/core": "workspace:*",
"@storybook/core-webpack": "workspace:*",
"@storybook/csf": "0.1.10--canary.d841bb4.0",
"@storybook/csf": "0.1.10",
"@storybook/csf-plugin": "workspace:*",
"@storybook/ember": "workspace:*",
"@storybook/eslint-config-storybook": "^4.0.0",
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/csf": "0.1.10--canary.d841bb4.0",
"@storybook/csf": "0.1.10",
"@storybook/global": "^5.0.0",
"@types/fs-extra": "^11.0.1",
"fs-extra": "^11.1.0",
Expand Down
3 changes: 1 addition & 2 deletions code/renderers/vue3/src/render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

import type { App } from 'vue';
import { createApp, h, isReactive, isVNode, reactive } from 'vue';
import type { ArgsStoryFn, RenderContext } from 'storybook/internal/types';
import type { Args, StoryContext } from '@storybook/csf';
import type { ArgsStoryFn, RenderContext, StoryContext, Args } from 'storybook/internal/types';
import type { PreviewWeb } from 'storybook/internal/preview-api';
import type { StoryFnVueReturnType, StoryID, VueRenderer } from './types';

Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue3/template/stories_vue3-vite-default-ts/decorators.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { DecoratorFunction } from '@storybook/csf';
import type { DecoratorFunction } from 'storybook/internal/types';
import { global as globalThis } from '@storybook/global';
import type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';
import { h } from 'vue';
Expand Down
23 changes: 12 additions & 11 deletions code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5270,7 +5270,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-links@workspace:addons/links"
dependencies:
"@storybook/csf": "npm:0.1.10--canary.d841bb4.0"
"@storybook/csf": "npm:0.1.10"
"@storybook/global": "npm:^5.0.0"
fs-extra: "npm:^11.1.0"
ts-dedent: "npm:^2.0.0"
Expand Down Expand Up @@ -5493,7 +5493,7 @@ __metadata:
resolution: "@storybook/blocks@workspace:lib/blocks"
dependencies:
"@storybook/addon-actions": "workspace:*"
"@storybook/csf": "npm:0.1.10--canary.d841bb4.0"
"@storybook/csf": "npm:0.1.10"
"@storybook/global": "npm:^5.0.0"
"@storybook/icons": "npm:^1.2.5"
"@storybook/test": "workspace:*"
Expand Down Expand Up @@ -5645,7 +5645,7 @@ __metadata:
"@babel/preset-env": "npm:^7.24.4"
"@babel/types": "npm:^7.24.0"
"@storybook/core": "workspace:*"
"@storybook/csf": "npm:0.1.10--canary.d841bb4.0"
"@storybook/csf": "npm:0.1.10"
"@types/cross-spawn": "npm:^6.0.2"
"@types/jscodeshift": "npm:^0.11.10"
ansi-regex: "npm:^5.0.1"
Expand Down Expand Up @@ -5739,7 +5739,7 @@ __metadata:
"@radix-ui/react-dialog": "npm:^1.0.5"
"@radix-ui/react-scroll-area": "npm:^1.0.5"
"@radix-ui/react-slot": "npm:^1.0.2"
"@storybook/csf": "npm:0.1.10--canary.d841bb4.0"
"@storybook/csf": "npm:0.1.10"
"@storybook/docs-mdx": "npm:3.1.0-next.0"
"@storybook/global": "npm:^5.0.0"
"@storybook/icons": "npm:^1.2.5"
Expand Down Expand Up @@ -5875,12 +5875,12 @@ __metadata:
languageName: unknown
linkType: soft

"@storybook/csf@npm:0.1.10--canary.d841bb4.0":
version: 0.1.10--canary.d841bb4.0
resolution: "@storybook/csf@npm:0.1.10--canary.d841bb4.0"
"@storybook/csf@npm:0.1.10":
version: 0.1.10
resolution: "@storybook/csf@npm:0.1.10"
dependencies:
type-fest: "npm:^2.19.0"
checksum: 10c0/35a9b5cf88a3378fb362d0a1988265ec218aa98d54b82b56e78a4c1142b3beed6e2ee42bd8731bac009fd8133e085c92af43541028468865b51c0b1220ded338
checksum: 10c0/c5bd17b92aeb8be5918cfad238bfef4c08553f8c60b6284e1cabb8646aeb6f8d6ab4343a77954a5c9924ca717cf306c239c0b061915918137136aa0c9b4be5ab
languageName: node
linkType: hard

Expand Down Expand Up @@ -6472,7 +6472,7 @@ __metadata:
"@storybook/codemod": "workspace:*"
"@storybook/core": "workspace:*"
"@storybook/core-webpack": "workspace:*"
"@storybook/csf": "npm:0.1.10--canary.d841bb4.0"
"@storybook/csf": "npm:0.1.10"
"@storybook/csf-plugin": "workspace:*"
"@storybook/ember": "workspace:*"
"@storybook/eslint-config-storybook": "npm:^4.0.0"
Expand Down Expand Up @@ -6607,7 +6607,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/server@workspace:renderers/server"
dependencies:
"@storybook/csf": "npm:0.1.10--canary.d841bb4.0"
"@storybook/csf": "npm:0.1.10"
"@storybook/global": "npm:^5.0.0"
"@types/fs-extra": "npm:^11.0.1"
fs-extra: "npm:^11.1.0"
Expand All @@ -6623,7 +6623,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/source-loader@workspace:lib/source-loader"
dependencies:
"@storybook/csf": "npm:0.1.10--canary.d841bb4.0"
"@storybook/csf": "npm:0.1.10"
estraverse: "npm:^5.2.0"
lodash: "npm:^4.17.21"
prettier: "npm:^3.1.1"
Expand Down Expand Up @@ -6725,6 +6725,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/test@workspace:lib/test"
dependencies:
"@storybook/csf": "npm:0.1.10"
"@storybook/instrumenter": "workspace:*"
"@testing-library/dom": "npm:10.1.0"
"@testing-library/jest-dom": "npm:6.4.5"
Expand Down