From 368ca695cf56cd6b03599bff1966b897181dfbb2 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 11 May 2023 19:35:06 +0200
Subject: [PATCH] Merge pull request #22471 from
 sjwilczynski/stwilczy/idInComposeStories

CSF: expose story id in composeStories testing utility
---
 .../modules/store/csf/testing-utils/index.ts  |  1 +
 code/lib/types/src/modules/composedStory.ts   |  4 ++--
 .../react/src/__test__/internals.test.tsx     | 19 +++++++++++++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts
index 955c19eec9f2..1aa0763b13a9 100644
--- a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts
+++ b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts
@@ -88,6 +88,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
   composedStory.args = story.initialArgs as Partial<TArgs>;
   composedStory.play = story.playFunction as ComposedStoryPlayFn<TRenderer, Partial<TArgs>>;
   composedStory.parameters = story.parameters as Parameters;
+  composedStory.id = story.id;
 
   return composedStory;
 }
diff --git a/code/lib/types/src/modules/composedStory.ts b/code/lib/types/src/modules/composedStory.ts
index a5c37cc121a5..ce31138bac20 100644
--- a/code/lib/types/src/modules/composedStory.ts
+++ b/code/lib/types/src/modules/composedStory.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
-import type { Renderer } from '@storybook/csf';
+import type { Renderer, StoryId } from '@storybook/csf';
 
 import type {
   AnnotatedStoryFn,
@@ -33,7 +33,7 @@ export type ComposedStoryPlayFn<TRenderer extends Renderer = Renderer, TArgs = A
 export type PreparedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = AnnotatedStoryFn<
   TRenderer,
   TArgs
-> & { play: ComposedStoryPlayFn<TRenderer, TArgs>; args: TArgs };
+> & { play: ComposedStoryPlayFn<TRenderer, TArgs>; args: TArgs; id: StoryId };
 
 export type ComposedStory<TRenderer extends Renderer = Renderer, TArgs = Args> =
   | StoryFn<TRenderer, TArgs>
diff --git a/code/renderers/react/src/__test__/internals.test.tsx b/code/renderers/react/src/__test__/internals.test.tsx
index 9f5a05b993d9..6550e03dddbb 100644
--- a/code/renderers/react/src/__test__/internals.test.tsx
+++ b/code/renderers/react/src/__test__/internals.test.tsx
@@ -24,6 +24,25 @@ test('returns composed parameters from story', () => {
   );
 });
 
+describe('Id of the story', () => {
+  test('is exposed correctly when composeStories is used', () => {
+    expect(CSF2StoryWithParamsAndDecorator.id).toBe(
+      'example-button--csf-2-story-with-params-and-decorator'
+    );
+  });
+  test('is exposed correctly when composeStory is used and exportsName is passed', () => {
+    const exportName = Object.entries(stories).filter(
+      ([_, story]) => story === stories.CSF3Primary
+    )[0][0];
+    const Primary = composeStory(stories.CSF3Primary, stories.default, {}, exportName);
+    expect(Primary.id).toBe('example-button--csf-3-primary');
+  });
+  test("is not unique when composeStory is used and exportsName isn't passed", () => {
+    const Primary = composeStory(stories.CSF3Primary, stories.default);
+    expect(Primary.id).toContain('unknown');
+  });
+});
+
 // common in addons that need to communicate between manager and preview
 test('should pass with decorators that need addons channel', () => {
   const PrimaryWithChannels = composeStory(stories.CSF3Primary, stories.default, {