Fix portable stories & failing tests

storybookjs · Jun 11, 2024 · 7563fd2 · 7563fd2
1 parent d89481e
commit 7563fd2
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 11 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
@@ -66,7 +66,7 @@ export const docsRenderer = {
 };
 export const teardownrenderToCanvas: Mock<[TeardownRenderToCanvas]> = vi.fn();
 export const projectAnnotations = {
-  globals: { a: 'b' },
+  initialGlobals: { a: 'b' },
   globalTypes: {},
   decorators: [vi.fn((s) => s())],
   render: vi.fn(),

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
@@ -3353,7 +3353,7 @@ describe('PreviewWeb', () => {
       return {
         ...projectAnnotations,
         args: { global: 'added' },
-        globals: { a: 'edited' },
+        initialGlobals: { a: 'edited' },
         decorators: [newGlobalDecorator],
       };
     };

diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts
@@ -19,6 +19,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -45,6 +46,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -75,6 +77,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -111,6 +114,7 @@ describe('composeConfigs', () => {
       argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       argTypesEnhancers: [],
       globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       loaders: [],
       beforeEach: [],
@@ -150,6 +154,7 @@ describe('composeConfigs', () => {
       argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       argTypesEnhancers: [],
       globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       loaders: [],
       beforeEach: [],
@@ -180,6 +185,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: ['1', '2', '3', '4'],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: ['1', '2', '3', '4'],
       beforeEach: [],
@@ -210,6 +216,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: ['1', '2', '3'],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: ['1', '2', '3'],
       beforeEach: [],
@@ -236,6 +243,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -263,6 +271,7 @@ describe('composeConfigs', () => {
         { a: '4', secondPass: true },
       ],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -293,6 +302,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],

diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts
@@ -42,6 +42,10 @@ export function composeConfigs<TRenderer extends Renderer>(
 ): ProjectAnnotations<TRenderer> {
   const allArgTypeEnhancers = getArrayField(moduleExportList, 'argTypesEnhancers');
   const stepRunners = getField(moduleExportList, 'runStep');
+  const initialGlobals = combineParameters(
+    getObjectField(moduleExportList, 'globals'),
+    getObjectField(moduleExportList, 'initialGlobals')
+  );
 
   return {
     parameters: combineParameters(...getField(moduleExportList, 'parameters')),
@@ -55,9 +59,8 @@ export function composeConfigs<TRenderer extends Renderer>(
       ...allArgTypeEnhancers.filter((e) => !e.secondPass),
       ...allArgTypeEnhancers.filter((e) => e.secondPass),
     ],
-    initialGlobals:
-      getObjectField(moduleExportList, 'initialGlobals') ??
-      getObjectField(moduleExportList, 'globals'),
+    globals: initialGlobals, // deprecated
+    initialGlobals,
     globalTypes: getObjectField(moduleExportList, 'globalTypes'),
     loaders: getArrayField(moduleExportList, 'loaders'),
     beforeEach: getArrayField(moduleExportList, 'beforeEach'),

diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts
@@ -23,7 +23,7 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
   initialGlobals,
   ...annotations
 }: ProjectAnnotations<TRenderer>): NormalizedProjectAnnotations<TRenderer> {
-  if (globals) {
+  if (!initialGlobals && globals) {
     deprecate(dedent`
       The preview.js 'globals' field is deprecated and will be removed in Storybook 9.0.
       Please use 'initialGlobals' instead. Learn more:

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
@@ -99,7 +99,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     hooks: new HooksContext(),
     globals: {
       ...globalsFromGlobalTypes,
-      ...normalizedProjectAnnotations.globals,
+      ...normalizedProjectAnnotations.initialGlobals,
     },
     args: { ...story.initialArgs },
     viewMode: 'story',

diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx
@@ -81,7 +81,7 @@ describe('projectAnnotations', () => {
 
   it('renders with custom projectAnnotations via composeStory params', () => {
     const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globals: { locale: 'pt' },
+      initialGlobals: { locale: 'pt' },
     });
     const { getByText } = render(<WithPortugueseText />);
     const buttonElement = getByText('Olá!');

diff --git a/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts b/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts
@@ -93,7 +93,7 @@ describe('projectAnnotations', () => {
 
   it('renders with custom projectAnnotations via composeStory params', () => {
     const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globals: { locale: 'pt' },
+      initialGlobals: { locale: 'pt' },
     });
     const { getByText } = render(WithPortugueseText.Component, WithPortugueseText.props);
     const buttonElement = getByText('Olá!');

diff --git a/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
@@ -71,7 +71,7 @@ describe('projectAnnotations', () => {
 
   it('renders with custom projectAnnotations via composeStory params', () => {
     const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globals: { locale: 'pt' },
+      initialGlobals: { locale: 'pt' },
     });
     const { getByText } = render(WithPortugueseText);
     const buttonElement = getByText('Olá!');

diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts
@@ -80,7 +80,7 @@ describe('projectAnnotations', () => {
 
   it('renders with custom projectAnnotations via composeStory params', () => {
     const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globals: { locale: 'pt' },
+      initialGlobals: { locale: 'pt' },
     });
     const { getByText } = render(WithPortugueseText.Component, WithPortugueseText.props);
     const buttonElement = getByText('Olá!');