Merge pull request #28368 from storybookjs/kasper/canvas

Test: Enhance the context with canvas when the test package is used
storybookjs · Jul 2, 2024 · 71d100b · 71d100b
2 parents 9781303 + e9910ce
commit 71d100b
Show file tree

Hide file tree

Showing 17 changed files with 78 additions and 29 deletions.
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
@@ -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"
   },

diff --git a/code/core/package.json b/code/core/package.json
@@ -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",
@@ -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",

diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -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> = {

diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -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,
   };
 

diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
@@ -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;

diff --git a/code/frameworks/angular/src/client/decorators.test.ts b/code/frameworks/angular/src/client/decorators.test.ts
@@ -26,6 +26,7 @@ const defaultContext: Addon_StoryContext<AngularRenderer> = {
   canvasElement: undefined,
   step: undefined,
   context: undefined,
+  canvas: undefined,
 };
 
 defaultContext.context = defaultContext;

diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json
@@ -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",

diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
@@ -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",

diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
@@ -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"

diff --git a/code/lib/test/package.json b/code/lib/test/package.json
@@ -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",

diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts
@@ -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';
@@ -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 },
   {
@@ -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;
diff --git a/code/lib/test/template/stories/loader-enhancements.stories.ts b/code/lib/test/template/stories/loader-enhancements.stories.ts
@@ -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 = {
+  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());
+//   },
+// };
diff --git a/code/package.json b/code/package.json
@@ -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",

diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
@@ -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",

diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts
@@ -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';
 

diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/decorators.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/decorators.stories.ts
@@ -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';

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -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"
@@ -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:*"
@@ -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"
@@ -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"
@@ -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
 
@@ -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"
@@ -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"
@@ -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"
@@ -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"