Core: Testing Module UI improvements #30773

ghengeveld · 2025-03-07T15:13:08Z

Closes #30746

What I did

Removed the "edit mode" toggle, instead options can be updated directly.
Added a "clear statuses" button which removes all statuses (dots in the sidebar).
Status dots are now clickable, to quickly find where the status originates.
Buttons are now slightly larger and the Run all button hides its label if necessary.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-30773-sha-82bd1734. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information


Published version	`0.0.0-pr-30773-sha-82bd1734`
Triggered by	@ghengeveld
Repository	storybookjs/storybook
Branch	`test-polish`
Commit	`82bd1734`
Datetime	Wed Mar 12 16:37:13 UTC 2025 (`1741797433`)
Workflow run	13816703833

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=30773

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	79.9 MB	79.9 MB	0 B	0.32	0%
initSize	79.9 MB	79.9 MB	0 B	0.32	0%
diffSize	97 B	97 B	0 B	-	0%
buildSize	7.47 MB	7.57 MB	97.1 kB	1.06	1.3%
buildSbAddonsSize	1.98 MB	1.98 MB	116 B	0.91	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.89 MB	2.76 kB	Infinity	0.1%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.06 MB	4.06 MB	2.88 kB	0.98	0.1%
buildPreviewSize	3.42 MB	3.51 MB	94.2 kB	0.92	2.7%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	11.5s	7.7s	-3s -799ms	-1.25	🔰-48.9%
generateTime	20.2s	21.5s	1.2s	1.46	🔺5.9%
initTime	4.9s	4.9s	-35ms	0.55	-0.7%
buildTime	9.1s	9.2s	110ms	-0.09	1.2%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.6s	4.8s	235ms	-0.41	4.8%
devManagerResponsive	4.4s	4.6s	227ms	-0.4	4.9%
devManagerHeaderVisible	782ms	761ms	-21ms	-0.4	-2.8%
devManagerIndexVisible	793ms	780ms	-13ms	-0.5	-1.7%
devStoryVisibleUncached	2.7s	2.4s	-262ms	-0.55	-10.6%
devStoryVisible	1.2s	1.1s	-10ms	-0.38	-0.8%
devAutodocsVisible	1.1s	1s	-52ms	-0.5	-4.9%
devMDXVisible	1.1s	1s	-39ms	-0.6	-3.6%
buildManagerHeaderVisible	880ms	841ms	-39ms	-0.21	-4.6%
buildManagerIndexVisible	885ms	859ms	-26ms	-0.19	-3%
buildStoryVisible	869ms	831ms	-38ms	-0.21	-4.6%
buildAutodocsVisible	618ms	745ms	127ms	-0.38	17%
buildMDXVisible	666ms	692ms	26ms	-0.64	3.8%

Greptile Summary

This PR enhances the Testing Module UI with significant usability improvements, focusing on more direct interactions and clearer status indicators.

Removed edit mode toggle in code/addons/test/src/components/TestProviderRender.tsx in favor of direct option updates
Added clickable status dots with new openTestsPanel and openA11yPanel functions in code/core/src/manager/components/sidebar/TestingModule.tsx
Implemented new clear statuses button with SweepIcon in code/core/src/manager/components/sidebar/SidebarBottom.tsx
Added default tooltip delays (200ms hide, 400ms show) in code/core/src/components/components/tooltip/WithTooltip.tsx
Updated @storybook/icons from 1.2.12 to 1.4.0 across multiple addon packages

…t fit and add a tooltip for it

nx-cloud · 2025-03-07T15:17:54Z

View your CI Pipeline Execution ↗ for commit 82bd173.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 53s	View ↗

☁️ Nx Cloud last updated this comment at 2025-03-12 16:33:05 UTC

storybook-pr-benchmarking · 2025-03-07T15:25:46Z

Package Benchmarks

^{Commit: 82bd173, ran on 12 March 2025 at 16:40:16 UTC}

No significant changes detected, all good. 👏

…lay to hover tooltips

greptile-apps

_{22 file(s) reviewed, 5 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-03-12T16:28:20Z

code/addons/test/src/components/TestProviderRender.stories.tsx

+      (await canvas.findByLabelText('Enable watch mode')).click();
+      await expect(mockStore.setState).toHaveBeenCalledOnce();
+
+      await expect(await canvas.findByLabelText('Coverage (unavailable)')).not.toBeDisabled();


logic: This assertion may be flaky since it checks for a disabled state that depends on watch mode. Consider adding a wait or checking the state transition.

greptile-apps · 2025-03-12T16:28:20Z

code/addons/test/src/components/TestProviderRender.stories.tsx

+export const AccessibilityViolations: Story = {
+  args: Default.args,
+  beforeEach: async () => {
+    mockStore.setState({
+      ...storeOptions.initialState,
+      config: { ...storeOptions.initialState.config, a11y: true },
    });
  },
+  play: async ({ canvas }) => {
+    userEvent.hover(await canvas.findByLabelText(/Accessibility status:/));
+  },


logic: AccessibilityViolations story doesn't actually simulate any violations - it's identical to AccessibilityEnabled. Should include mock violation data to properly test this state.

greptile-apps · 2025-03-12T16:28:41Z

code/addons/test/src/components/TestProviderRender.tsx

+                    state.running && config.coverage
+                      ? 'Testing in progress'


logic: Using config.coverage here instead of config.a11y for accessibility testing tooltip

Suggested change

state.running && config.coverage

? 'Testing in progress'

state.running && config.a11y

? 'Testing in progress'

greptile-apps · 2025-03-12T16:29:20Z

code/core/src/manager/components/sidebar/SidebarBottom.tsx

+              clearStatuses: () => {
+                // TODO
+              },


logic: Empty placeholder function needs implementation for clearing statuses. This is a critical missing piece that should be implemented before merging.

greptile-apps · 2025-03-12T16:29:21Z

code/core/src/manager/components/sidebar/SidebarBottom.tsx

@@ -166,6 +166,10 @@ export const SidebarBottomBase = ({
          <TestingModule
            {...{
              testProviders: testProvidersArray,
+              statusCount: Object.keys(status).length,


style: Using Object.keys(status).length may not accurately reflect the actual number of statuses since status is a nested object structure. Consider using a more precise counting method.

yes, this would only count the number of stories with statuses, not the total number of statuses.

the way it is used below, you could probably just make it a hasStatuses-boolean? When my PR is merged, we could also perhaps get the data directly in TestingModule with the useStatus hook and a selector

JReinhold · 2025-03-12T19:28:02Z

code/core/src/manager/components/sidebar/LegacyRender.tsx

@@ -5,23 +5,23 @@ import type { TestProviders } from 'storybook/internal/core-events';
 import { useStorybookApi } from 'storybook/internal/manager-api';


Do you agree that we should get rid of this LegacyRender for 9.0, and migrate VTA to the modern one?

When we update VTA to use UniversalStore, it's going to have to use a Storybook version that supports it. Once we do that, we can update VTA to provide its own rendering and get rid of LegacyRender. The reason LegacyRender is still around is because older VTA versions will still be using it. We need to make a clean cut at some point, where a certain VTA version needs a certain SB version and vice-versa.

JReinhold

Code looks great! ✨ Reviewing functionality and stories tomorrow.

ghengeveld added 3 commits March 7, 2025 11:16

Remove edit mode toggle from Testing Module and update its layout

6467142

Tweak gaps between buttons

14dccdc

Add clear statuses button, hide 'Run all' button label when it doesn'…

209fc43

…t fit and add a tooltip for it

ghengeveld added feature request ci:normal labels Mar 7, 2025

ghengeveld self-assigned this Mar 7, 2025

ghengeveld added 2 commits March 7, 2025 16:39

Upgrade @storybook/icons and use new Sweep icon in Testing Module

c1ce02f

Show numbers up to 1000 in the filter buttons, rather than up to 100

c386cbc

ghengeveld force-pushed the test-polish branch from 08a3759 to c386cbc Compare March 7, 2025 15:40

ghengeveld added 5 commits March 7, 2025 16:41

Remove active status from clear button

3da84d0

Change tooltip when running

ad8bddc

Mark coverage as unavailable while watch mode is active, and add a de…

aad7da7

…lay to hover tooltips

Revisit status tooltips and add stories for some missing variants

e225af6

Merge branch 'next' into test-polish

82bd173

ghengeveld marked this pull request as ready for review March 12, 2025 16:26

ghengeveld requested review from yannbf and JReinhold March 12, 2025 16:26

greptile-apps bot reviewed Mar 12, 2025

View reviewed changes

JReinhold reviewed Mar 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core: Testing Module UI improvements #30773

Core: Testing Module UI improvements #30773

ghengeveld commented Mar 7, 2025 •

edited by storybook-bot

Loading

nx-cloud bot commented Mar 7, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Mar 7, 2025 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Mar 12, 2025

greptile-apps bot Mar 12, 2025

greptile-apps bot Mar 12, 2025

greptile-apps bot Mar 12, 2025

greptile-apps bot Mar 12, 2025

JReinhold Mar 12, 2025

JReinhold Mar 12, 2025

ghengeveld Mar 13, 2025 •

edited

Loading

JReinhold left a comment

		@@ -5,23 +5,23 @@ import type { TestProviders } from 'storybook/internal/core-events';
		import { useStorybookApi } from 'storybook/internal/manager-api';

Core: Testing Module UI improvements #30773

Are you sure you want to change the base?

Core: Testing Module UI improvements #30773

Conversation

ghengeveld commented Mar 7, 2025 • edited by storybook-bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

nx-cloud bot commented Mar 7, 2025 • edited Loading

storybook-pr-benchmarking bot commented Mar 7, 2025 • edited Loading

Package Benchmarks

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Mar 12, 2025

Choose a reason for hiding this comment

greptile-apps bot Mar 12, 2025

Choose a reason for hiding this comment

greptile-apps bot Mar 12, 2025

Choose a reason for hiding this comment

greptile-apps bot Mar 12, 2025

Choose a reason for hiding this comment

greptile-apps bot Mar 12, 2025

Choose a reason for hiding this comment

JReinhold Mar 12, 2025

Choose a reason for hiding this comment

JReinhold Mar 12, 2025

Choose a reason for hiding this comment

ghengeveld Mar 13, 2025 • edited Loading

Choose a reason for hiding this comment

JReinhold left a comment

Choose a reason for hiding this comment

ghengeveld commented Mar 7, 2025 •

edited by storybook-bot

Loading

nx-cloud bot commented Mar 7, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Mar 7, 2025 •

edited

Loading

ghengeveld Mar 13, 2025 •

edited

Loading