-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
UI: Add test numbers to sidebar #32418
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.
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
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
6 files reviewed, 2 comments
@@ -575,6 +575,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ | |||
// The story index we receive on fetchStoryIndex is not, but all the prepared fields are optional | |||
// so we can cast one to the other easily enough | |||
setIndex: async (input) => { | |||
console.log('setIndex', input); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Debug logging should be removed before merging to production
console.log('setIndex', input); | |
// console.log('setIndex', input); |
@@ -590,6 +591,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ | |||
allStatuses, | |||
}); | |||
|
|||
console.log({ oldHash, filteredIndex: addPreparedStories(newFilteredHash, oldFilteredHash) }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Debug logging should be removed before merging to production
console.log({ oldHash, filteredIndex: addPreparedStories(newFilteredHash, oldFilteredHash) }); | |
// console.log({ oldHash, filteredIndex: addPreparedStories(newFilteredHash, oldFilteredHash) }); |
View your CI Pipeline Execution ↗ for commit 32650c3
☁️ Nx Cloud last updated this comment at |
Will park this PR until further discussions! |
Closes #
What I did
Now stories with tests will have a numbered badge
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal
,ci:merged
orci:daily
GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/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-32418-sha-6377e85a
. Try it out in a new sandbox by runningnpx [email protected] sandbox
or in an existing project withnpx [email protected] upgrade
.More information
0.0.0-pr-32418-sha-6377e85a
yann/add-test-numbers
6377e85a
1757064700
)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=32418
Greptile Summary
Updated On: 2025-09-05 09:32:23 UTC
This PR adds visual test count indicators to the Storybook sidebar as numbered badges on story nodes. The implementation introduces a new
numberBadge
prop to theStoryNode
component that displays the count of tests associated with each story. The badge shows numbers 1-9 directly and "9+" for counts above 9, with styling that adapts to selection states.The changes span several key areas:
TreeNode.tsx
to addIconWithBadge
andNumberBadge
styled components, along with a newnumberBadge
prop forStoryNode
TreeNode.stories.tsx
to demonstrate different badge states (no tests, some tests, many tests)mockdata.ts
to include multiple test entries for proper testing of the badge functionalityfindAllLeafStoryIds
function instories.ts
to reorder conditional logic for better handling of nodes with childrenThis feature integrates with Storybook's existing navigation tree structure and supports the broader initiative to add test syntax support in CSF (Component Story Format). The badges provide users with immediate visual feedback about test coverage and help identify which stories have associated tests.
PR Description Notes:
Confidence score: 3/5
code/core/src/manager-api/modules/stories.ts
which contains debug logging that should be removed