Skip to content

Conversation

yannbf
Copy link
Member

@yannbf yannbf commented Sep 5, 2025

Closes #

What I did

Now stories with tests will have a numbered badge

image

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-32418-sha-6377e85a. 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-32418-sha-6377e85a
Triggered by @yannbf
Repository storybookjs/storybook
Branch yann/add-test-numbers
Commit 6377e85a
Datetime Fri Sep 5 09:31:40 UTC 2025 (1757064700)
Workflow run 17489417457

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 the StoryNode 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:

  • UI Components: Modified TreeNode.tsx to add IconWithBadge and NumberBadge styled components, along with a new numberBadge prop for StoryNode
  • Story Examples: Updated TreeNode.stories.tsx to demonstrate different badge states (no tests, some tests, many tests)
  • Mock Data: Enhanced mockdata.ts to include multiple test entries for proper testing of the badge functionality
  • Explorer Stories: Added examples showing both test selection and story-with-tests selection scenarios
  • Core Logic: Modified findAllLeafStoryIds function in stories.ts to reorder conditional logic for better handling of nodes with children
  • Test Infrastructure: Updated component testing stories to support the new test metadata patterns with tags

This 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:

  • The PR description lacks details in the "What I did" section
  • No testing checkboxes are marked, despite this being a UI feature that would benefit from manual testing verification
  • No issue number is referenced in the "Closes #" section

Confidence score: 3/5

  • This PR introduces new UI functionality with some debugging code that needs cleanup before merging
  • Score reflects the presence of console.log statements in production code and incomplete PR documentation
  • Pay close attention to code/core/src/manager-api/modules/stories.ts which contains debug logging that should be removed

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.

6 files reviewed, 2 comments

Edit Code Review Bot Settings | Greptile

@@ -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);
Copy link
Contributor

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

Suggested change
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) });
Copy link
Contributor

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

Suggested change
console.log({ oldHash, filteredIndex: addPreparedStories(newFilteredHash, oldFilteredHash) });
// console.log({ oldHash, filteredIndex: addPreparedStories(newFilteredHash, oldFilteredHash) });

Copy link

nx-cloud bot commented Sep 5, 2025

View your CI Pipeline Execution ↗ for commit 32650c3

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

☁️ Nx Cloud last updated this comment at 2025-09-05 10:15:40 UTC

@yannbf
Copy link
Member Author

yannbf commented Sep 5, 2025

Will park this PR until further discussions!

@yannbf yannbf closed this Sep 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant