Add test that uses conditional decorator wrapping hook

storybookjs · May 18, 2023 · c718894 · c718894
1 parent 304d9bd
commit c718894
Showing 1 changed file with 29 additions and 0 deletions.
diff --git a/code/lib/store/template/stories/decorators.stories.ts b/code/lib/store/template/stories/decorators.stories.ts
@@ -2,6 +2,8 @@ import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
+import { useEffect } from '@storybook/preview-api';
+import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events';
 
 export default {
   component: globalThis.Components.Pre,
@@ -25,3 +27,30 @@ export const Inheritance = {
     await expect(canvas.getByTestId('pre').innerText).toEqual('story component project starting');
   },
 };
+
+export const Hooks = {
+  decorators: [
+    // conditional decorator
+    (storyFn: PartialStoryFn, context: StoryContext) => (context.args.condition ? storyFn() : null),
+    // decorator that uses hooks
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      useEffect(() => {});
+      return storyFn();
+    },
+  ],
+  args: {
+    text: 'text',
+    condition: true,
+  },
+  play: async ({ id, args }: PlayFunctionContext<any>) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: { condition: !args.condition },
+    });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+  },
+};