Skip to content

Core: Testing Module UI improvements #30773

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
Merged
merged 24 commits into from
Mar 17, 2025
Merged

Core: Testing Module UI improvements #30773

merged 24 commits into from
Mar 17, 2025

Conversation

ghengeveld
Copy link
Member

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

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 storybook@0.0.0-pr-30773-sha-82bd1734 sandbox or in an existing project with npx storybook@0.0.0-pr-30773-sha-82bd1734 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

@ghengeveld ghengeveld self-assigned this Mar 7, 2025
@nx-cloud Nx Cloud
Copy link

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

View your CI Pipeline Execution ↗ for commit 6b505e1.

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

☁️ Nx Cloud last updated this comment at 2025-03-17 13:32:25 UTC

@storybook-pr-benchmarking
Copy link

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

Package Benchmarks

Commit: 6b505e1, ran on 17 March 2025 at 13:39:03 UTC

No significant changes detected, all good. 👏

@ghengeveld ghengeveld marked this pull request as ready for review March 12, 2025 16:26
@ghengeveld ghengeveld requested review from yannbf and JReinhold March 12, 2025 16:26
greptile-apps[bot]
greptile-apps bot reviewed Mar 12, 2025
View reviewed changes
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

JReinhold
JReinhold reviewed Mar 12, 2025
View reviewed changes
JReinhold
JReinhold reviewed Mar 12, 2025
View reviewed changes
Copy link
Contributor

@JReinhold JReinhold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks great! ✨ Reviewing functionality and stories tomorrow.

JReinhold
JReinhold requested changes Mar 13, 2025
View reviewed changes
Copy link
Contributor

@JReinhold JReinhold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. There's a bug, where at the end of a run, it will briefly show "Not run", and accessibility will say "(N skipped)", and then it will display the final results afterwards.
not-run-bug.mp4
  1. There's a bug, where opening the sidebar context menu for a story/group will show the two statuses (component tests, a11y) as unknown even though the overall status of the stories are green from a previous global run. then, when you trigger a focused run for that specific story/group, then the individual CT+a11y statuses will correctly be green.
status-sub-state.mp4

@ghengeveld
Copy link
Member Author

@JReinhold Those issues would be preexisting. Let's address them in a separate PR. I couldn't reproduce the first issue by the way.

@ghengeveld ghengeveld requested a review from JReinhold March 17, 2025 12:34
JReinhold
JReinhold approved these changes Mar 17, 2025
View reviewed changes
@JReinhold JReinhold merged commit 354363b into next Mar 17, 2025
51 of 54 checks passed
@JReinhold JReinhold deleted the test-polish branch March 17, 2025 13:52
@JReinhold
Copy link
Contributor

I'll do a follow up PR to potentially address the UI changes here. https://www.chromatic.com/build?appId=635781f3500dd2c49e189caf&number=17803

@github-actions github-actions bot mentioned this pull request Mar 17, 2025
Merged
9 tasks
@JReinhold JReinhold mentioned this pull request Mar 17, 2025
Merged
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

@JReinhold JReinhold JReinhold approved these changes

@yannbf yannbf Awaiting requested review from yannbf

Assignees

@ghengeveld ghengeveld

Labels
ci:normal feature request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Tracking]: Test Polish 💅
2 participants
@ghengeveld @JReinhold
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy