Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Addon Test: Optimize internal dependencies #29595

Merged
merged 3 commits into from
Nov 13, 2024
+79 −33
Merged

Addon Test: Optimize internal dependencies #29595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f231139
Addon Test: Optimize internal dependencies
yannbf Nov 13, 2024
657e8ad
Build: Fix flaky e2e test
yannbf Nov 13, 2024
32fff17
Merge branch 'next' into yann/fix-e2e-flake-discrepancy-test
yannbf Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions code/addons/test/src/vitest-plugin/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,16 @@ export const storybookTest = (options?: UserOptions): Plugin => {
config.test.server.deps.inline.push('@storybook/experimental-addon-test');
}

config.optimizeDeps ??= {};
config.optimizeDeps = {
...config.optimizeDeps,
include: [
...(config.optimizeDeps.include ?? []),
'react-dom/test-utils',
'@storybook/experimental-addon-test/**',
],
};

if (frameworkName?.includes('vue3')) {
config.define ??= {};
config.define.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = 'false';
Expand Down
6 changes: 3 additions & 3 deletions code/core/src/manager/components/sidebar/TestingModule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,10 +175,10 @@ const DynamicInfo = ({ state }: { state: TestProviders[keyof TestProviders] }) =
const Title = state.title;
return (
<Info>
<TitleWrapper crashed={state.crashed}>
<TitleWrapper crashed={state.crashed} id="testing-module-title">
<Title {...state} />
</TitleWrapper>
<DescriptionWrapper>
<DescriptionWrapper id="testing-module-description">
<Description {...state} />
</DescriptionWrapper>
</Info>
Expand Down Expand Up @@ -244,7 +244,7 @@ export const TestingModule = ({
>
<Content ref={contentRef}>
{testProviders.map((state) => (
<TestProvider key={state.id}>
<TestProvider key={state.id} data-module-id={state.id}>
<DynamicInfo state={state} />
<Actions>
{state.watchable && (
Expand Down
4 changes: 4 additions & 0 deletions code/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import { defineConfig, devices } from '@playwright/test';
/** Read environment variables from file. https://github.com/motdotla/dotenv */
// require('dotenv').config();

// Comment this out and fill in the values to run E2E tests locally using the Playwright extension easily
// process.env.STORYBOOK_URL = 'http://localhost:6006';
// process.env.STORYBOOK_TEMPLATE_NAME = 'react-vite/default-ts';

/** See https://playwright.dev/docs/test-configuration. */
export default defineConfig({
testDir: './e2e-tests',
Expand Down
2 changes: 1 addition & 1 deletion test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-controls",
"@storybook/experimental-addon-test",
"@storybook/addon-controls"
],
framework: {
name: "@storybook/react-vite",
Expand Down
43 changes: 37 additions & 6 deletions test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,22 @@ test.describe("component testing", () => {
if ((await testStoryElement.getAttribute("aria-expanded")) !== "true") {
testStoryElement.click();
}

const testingModuleDescription = await page.locator('[data-module-id="storybook/test/test-provider"]').locator('#testing-module-description');

await page.getByRole('button', { name: 'Run tests' }).click();
await expect(testingModuleDescription).toContainText('Not run');

const runTestsButton = await page.getByLabel('Start component tests')

await runTestsButton.click();

await expect(testingModuleDescription).toContainText('Testing', { timeout: 60000 });

// Wait for test results to appear
await expect(testingModuleDescription).toHaveText(/Ran \d+ tests/, { timeout: 60000 });

const errorFilter = page.getByLabel("Toggle errors");
await expect(errorFilter).toBeVisible({ timeout: 30000 });
await expect(errorFilter).toBeVisible();

// Assert discrepancy: CLI pass + Browser fail
const failingStoryElement = page.locator(
Expand Down Expand Up @@ -107,18 +117,39 @@ test.describe("component testing", () => {

const sbPage = new SbPage(page, expect);
await sbPage.navigateToStory("addons/test", "Expected Failure");

// For whatever reason, sometimes it takes longer for the story to load
const storyElement = sbPage
.getCanvasBodyElement()
.getByRole("button", { name: "test" });
await expect(storyElement).toBeVisible({ timeout: 10000 });

await page.getByRole('button', { name: 'Run tests' }).click();
await expect(page.locator('#testing-module-title')).toHaveText('Component tests');

const testingModuleDescription = await page.locator('[data-module-id="storybook/test/test-provider"]').locator('#testing-module-description');

await expect(testingModuleDescription).toContainText('Not run');

const runTestsButton = await page.getByLabel('Start component tests')
const watchModeButton = await page.getByLabel('Enable watch mode for Component tests')
await expect(runTestsButton).toBeEnabled();
await expect(watchModeButton).toBeEnabled();

await runTestsButton.click();

await expect(runTestsButton).toBeDisabled();
await expect(watchModeButton).toBeDisabled();

await expect(testingModuleDescription).toContainText('Testing');

// Wait for test results to appear
await expect(testingModuleDescription).toHaveText(/Ran \d+ tests/, { timeout: 30000 });

await expect(runTestsButton).toBeEnabled();
await expect(watchModeButton).toBeEnabled();

const errorFilter = page.getByLabel("Toggle errors");
await expect(errorFilter).toBeVisible({ timeout: 30000 });
await expect(errorFilter).toBeVisible();

// Assert for expected success
const successfulStoryElement = page.locator(
Expand Down Expand Up @@ -147,7 +178,7 @@ test.describe("component testing", () => {
await expect(sidebarItems).toHaveCount(1);
});

test("should execute tests via testing module UI watch mode", async ({
test("should execute watch mode tests via testing module UI", async ({
page,
browserName,
}) => {
Expand Down
1 change: 1 addition & 0 deletions test-storybooks/portable-stories-kitchen-sink/react/stories/AddonTest.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Meta } from '@storybook/react'
import { instrument } from '@storybook/instrumenter'
import type { StoryAnnotations } from 'storybook/internal/types';

Expand Down
46 changes: 23 additions & 23 deletions test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1769,11 +1769,11 @@ __metadata:
linkType: soft

"@storybook/components@file:../../../code/deprecated/components::locator=portable-stories-react%40workspace%3A.":
version: 8.4.0-alpha.7
resolution: "@storybook/components@file:../../../code/deprecated/components#../../../code/deprecated/components::hash=a9048b&locator=portable-stories-react%40workspace%3A."
version: 8.5.0-alpha.4
resolution: "@storybook/components@file:../../../code/deprecated/components#../../../code/deprecated/components::hash=60237a&locator=portable-stories-react%40workspace%3A."
peerDependencies:
storybook: "workspace:^"
checksum: 10/2e10c1adea642a4c1245d18d97ef20aa6a5aae7b0ef0dda10db113e31a76231e68aa263fe62ee966061d2a6841abe069df21be14fb5141dc7df73d17a94ff154
storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
checksum: 10/0366ac53c8eed65b69aaa174337d27ec2283c446b328811f92ffc9de0a219860afd2e3bdc5f11c30485c43c21d246ff036bca74429ba307dc557917d14a9beba
languageName: node
linkType: hard

Expand Down Expand Up @@ -1829,8 +1829,8 @@ __metadata:
linkType: hard

"@storybook/experimental-addon-test@file:../../../code/addons/test::locator=portable-stories-react%40workspace%3A.":
version: 8.4.0-alpha.7
resolution: "@storybook/experimental-addon-test@file:../../../code/addons/test#../../../code/addons/test::hash=82a764&locator=portable-stories-react%40workspace%3A."
version: 8.5.0-alpha.4
resolution: "@storybook/experimental-addon-test@file:../../../code/addons/test#../../../code/addons/test::hash=6bed1d&locator=portable-stories-react%40workspace%3A."
dependencies:
"@storybook/csf": "npm:^0.1.11"
"@storybook/global": "npm:^5.0.0"
Expand All @@ -1853,7 +1853,7 @@ __metadata:
optional: true
vitest:
optional: true
checksum: 10/e3092244dbfd410cd43a3561d84aa05fe158264e624bc4cb500f2c8efc425f01ec5ead5e25e322a6ebb9cad5f704a52bbd15bf2abc9b7f6e99db89c08f37382e
checksum: 10/9d842f824d9891bd19e508d654ce7f9f7cf8c73090588b84f29b2649e68338d13d7cd85a6d4bd92fe6beef276eb12783445bed4a4249563a5986f6f537ccc6d8
languageName: node
linkType: hard

Expand Down Expand Up @@ -1886,20 +1886,20 @@ __metadata:
linkType: soft

"@storybook/manager-api@file:../../../code/deprecated/manager-api::locator=portable-stories-react%40workspace%3A.":
version: 8.4.0-alpha.7
resolution: "@storybook/manager-api@file:../../../code/deprecated/manager-api#../../../code/deprecated/manager-api::hash=3b0337&locator=portable-stories-react%40workspace%3A."
version: 8.5.0-alpha.4
resolution: "@storybook/manager-api@file:../../../code/deprecated/manager-api#../../../code/deprecated/manager-api::hash=8c9581&locator=portable-stories-react%40workspace%3A."
peerDependencies:
storybook: "workspace:^"
checksum: 10/ad5bff1af09421670ff6b60df46231c737d7d3530c0930995fb4b39060781f7d6f276c0f941d8e534accc5dbae66f564d246e0da018b9c5ca3ee1e811b04f325
storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
checksum: 10/20f439e660e49c2bba2ce4fc73ddb9306c04cea9e6eaa0ddc23fc2047e135b7df4cc0b742dc662cee71013051b0d7e9e9e7a4f28323c1734fc6ad024ac47b9db
languageName: node
linkType: hard

"@storybook/preview-api@file:../../../code/deprecated/preview-api::locator=portable-stories-react%40workspace%3A.":
version: 8.4.0-alpha.7
resolution: "@storybook/preview-api@file:../../../code/deprecated/preview-api#../../../code/deprecated/preview-api::hash=56e670&locator=portable-stories-react%40workspace%3A."
version: 8.5.0-alpha.4
resolution: "@storybook/preview-api@file:../../../code/deprecated/preview-api#../../../code/deprecated/preview-api::hash=a7858a&locator=portable-stories-react%40workspace%3A."
peerDependencies:
storybook: "workspace:^"
checksum: 10/0242d50ab4d165b926bc389791a3deb76fd0148dc1f39b31ec2ae7e77f017613b87cf0efc89ec8b6ae72128b9cc84b3289e921eaa1940180fc3482d158339fbd
storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
checksum: 10/29559a5fd2698758e0bcf5442421fb583da5d95344f9740dcdc3615b3bec3dfb105f134fba08423a1fd1a68fbfa2615c91408271c4ef8926d43c0b5c6f8d0bb8
languageName: node
linkType: hard

Expand Down Expand Up @@ -1938,12 +1938,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/react@portal:../../../code/renderers/react::locator=portable-stories-react%40workspace%3A."
dependencies:
"@storybook/components": "workspace:^"
"@storybook/components": "workspace:*"
"@storybook/global": "npm:^5.0.0"
"@storybook/manager-api": "workspace:^"
"@storybook/preview-api": "workspace:^"
"@storybook/manager-api": "workspace:*"
"@storybook/preview-api": "workspace:*"
"@storybook/react-dom-shim": "workspace:*"
"@storybook/theming": "workspace:^"
"@storybook/theming": "workspace:*"
peerDependencies:
"@storybook/test": "workspace:*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
Expand Down Expand Up @@ -1976,11 +1976,11 @@ __metadata:
linkType: soft

"@storybook/theming@file:../../../code/deprecated/theming::locator=portable-stories-react%40workspace%3A.":
version: 8.4.0-alpha.7
resolution: "@storybook/theming@file:../../../code/deprecated/theming#../../../code/deprecated/theming::hash=3f019a&locator=portable-stories-react%40workspace%3A."
version: 8.5.0-alpha.4
resolution: "@storybook/theming@file:../../../code/deprecated/theming#../../../code/deprecated/theming::hash=74a1c8&locator=portable-stories-react%40workspace%3A."
peerDependencies:
storybook: "workspace:^"
checksum: 10/80024449814b032a9156fe2c70ff481fcfd04f5812c818b162dadadad36b9e642e1577ec51fd1330937d30853538c216662aad8f002cc75d088dc73e019afc2d
storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
checksum: 10/387dd03f4a10a4a1f6381a9e150a3c4a96a5ce3f6aec4557a954fa3c629630e667a5e60003fed6a5ed31a7844dcd3507bcf996614e1ddb0cda8ad74b6922f3b4
languageName: node
linkType: hard

Expand Down