From 2707c15ddaeff29659ea2483aaa9c617cdc70216 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 7 May 2024 10:17:49 +0200 Subject: [PATCH 1/3] Build: Add E2E tests for the module mocking stories --- code/e2e-tests/module-mocking.spec.ts | 49 +++++++++++++++++++ .../template/stories/before-each.stories.ts | 25 +++++++--- 2 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 code/e2e-tests/module-mocking.spec.ts diff --git a/code/e2e-tests/module-mocking.spec.ts b/code/e2e-tests/module-mocking.spec.ts new file mode 100644 index 000000000000..8b6b43713b61 --- /dev/null +++ b/code/e2e-tests/module-mocking.spec.ts @@ -0,0 +1,49 @@ +import { test, expect } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; + +test.describe('module-mocking', () => { + test.beforeEach(async ({ page }) => { + await page.goto(storybookUrl); + + await new SbPage(page).waitUntilLoaded(); + }); + + test('should assert story lifecycle order', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('lib/test/before-each', 'before-each-order'); + + await sbPage.viewAddonPanel('Actions'); + const logItem = await page.locator('#storybook-panel-root #panel-tab-content'); + await expect(logItem).toBeVisible(); + + const expectedTexts = [ + '1 - [from loaders]', + '2 - [from meta beforeEach]', + '3 - [from story beforeEach]', + '4 - [from decorator]', + '5 - [from onClick]', + ]; + + // Assert that each LI text content contains the expected text in order + for (let i = 0; i < expectedTexts.length; i++) { + const nthText = await logItem.locator(`li >> nth=${i}`).innerText(); + expect(nthText).toMatch(expectedTexts[i]); + } + }); + + test('should assert that utils import is mocked', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('lib/test/module-mocking', 'basic'); + + await sbPage.viewAddonPanel('Actions'); + const logItem = await page.locator('#storybook-panel-root #panel-tab-content', { + hasText: 'foo: []', + }); + await expect(logItem).toBeVisible(); + }); +}); diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts index 9af203a7baaf..a6f613e7698c 100644 --- a/code/lib/test/template/stories/before-each.stories.ts +++ b/code/lib/test/template/stories/before-each.stories.ts @@ -2,9 +2,12 @@ import { expect, mocked, getByRole, spyOn, userEvent } from '@storybook/test'; const meta = { component: globalThis.Components.Button, - beforeEach() { + loaders() { spyOn(console, 'log').mockName('console.log'); - console.log('first'); + console.log('1 - [from loaders]'); + }, + beforeEach() { + console.log('2 - [from meta beforeEach]'); }, }; @@ -15,17 +18,27 @@ export const BeforeEachOrder = { chromatic: { disable: true }, }, beforeEach() { - console.log('second'); + console.log('3 - [from story beforeEach]'); + }, + decorators: (StoryFn: any) => { + console.log('4 - [from decorator]'); + return StoryFn(); }, args: { label: 'Button', onClick: () => { - console.log('third'); + console.log('5 - [from onClick]'); }, }, - async play({ canvasElement }) { + async play({ canvasElement }: any) { await userEvent.click(getByRole(canvasElement, 'button')); - await expect(mocked(console.log).mock.calls).toEqual([['first'], ['second'], ['third']]); + await expect(mocked(console.log).mock.calls).toEqual([ + ['1 - [from loaders]'], + ['2 - [from meta beforeEach]'], + ['3 - [from story beforeEach]'], + ['4 - [from decorator]'], + ['5 - [from onClick]'], + ]); }, }; From 561ad9813eb7b67a3801f2e66d587553290830dd Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 7 May 2024 14:59:32 +0200 Subject: [PATCH 2/3] fix mock name --- code/lib/test/template/stories/utils.mock.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/test/template/stories/utils.mock.ts b/code/lib/test/template/stories/utils.mock.ts index 15c648e88c00..80fac1f308f2 100644 --- a/code/lib/test/template/stories/utils.mock.ts +++ b/code/lib/test/template/stories/utils.mock.ts @@ -1,4 +1,4 @@ import { fn } from '@storybook/test'; import * as utils from './utils'; -export const foo = fn(utils.foo); +export const foo = fn(utils.foo).mockName('foo'); From 0ac197dba959871ed30d98fce2c1738db9dd0238 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 7 May 2024 15:31:00 +0200 Subject: [PATCH 3/3] Fix CRA not respecting storybook import condition names. --- code/presets/create-react-app/src/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/code/presets/create-react-app/src/index.ts b/code/presets/create-react-app/src/index.ts index 2fc78a1cfa0d..a6664fded0e7 100644 --- a/code/presets/create-react-app/src/index.ts +++ b/code/presets/create-react-app/src/index.ts @@ -126,6 +126,14 @@ const webpack = async ( ...getModulePath(CWD), ], plugins: [PnpWebpackPlugin as any], + // manual copy from builder-webpack because defaults are disabled in this CRA preset + conditionNames: [ + ...(webpackConfig.resolve?.conditionNames ?? []), + 'storybook', + 'stories', + 'test', + '...', + ], }, resolveLoader, } as Configuration;