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.

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

Addon Vitest: Add experimental vitest integration #28768

Merged
merged 204 commits into from
Aug 14, 2024
Merged

Conversation

kasperpeulen
Copy link
Contributor

@kasperpeulen kasperpeulen commented Jul 31, 2024

Closes #28388

What I did

This is the umbrella PR that will cover most of the work related to the Vitest integration project.

It includes a new Storybook addon called @storybook/experimental-addon-vitest, which currenly only includes a Vitest plugin. Later, it will include more functionality.

Additionally:

Core: Enable RSC support when parameters.react is set to true #28865

Now RSC can be enabled via parameters.react.rsc: true, as the flag is always on by default.

UI: Replace experimental_SIDEBAR_BOTTOM API with a status filter UI #28693

The bottom sidebar filter, which used to live in VTA, is now part of Storybook core. There should be no changes when using VTA with Storybook.

UI: Update sidebar status indicators and tooltips #28739

The status UI had a revamp with improved icons and styling.

Portable stories: Use internal Storybook renderers mechanism #28766

Portable stories now does not depend on testing-library.

Checklist for Contributors

Testing

This is extensively tested in unit tests and sandbox stories tests. If you want to test it yourself, there are a couple ways:
1 - Create any vite-based sandbox. It will already have the plugin set-up and you can just run yarn vitest to run tests in.
2 - On any vite-based Storybook, set up the addon via the npx storybook@next add @storybook/experimental-addon-vitest command
3 - On any vite-based Storybook, set up the addon by following the docs here https://web-git-8-3-pre-release-storybookjs.vercel.app/docs/8.3/writing-tests/test-runner-with-vitest from this PR: #28924

And run vitest to execute the tests. You can also test the VSCode/Jetbrains IDE integrations.

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/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-28768-sha-416cd00d. 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-28768-sha-416cd00d
Triggered by @kasperpeulen
Repository storybookjs/storybook
Branch vitest-integration
Commit 416cd00d
Datetime Wed Aug 14 14:11:53 UTC 2024 (1723644713)
Workflow run 10389237181

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=28768

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 76.3 MB 76.3 MB 0 B 1.36 0%
initSize 167 MB 169 MB 1.43 MB 62.64 0.8%
diffSize 91.1 MB 92.6 MB 1.43 MB 178.06 1.5%
buildSize 7.42 MB 7.46 MB 41.7 kB 12961.41 0.6%
buildSbAddonsSize 1.61 MB 1.61 MB -8 B -2.46 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 2.29 MB 2.3 MB 14.6 kB 1104.9 0.6%
buildSbPreviewSize 351 kB 350 kB -506 B -177.56 -0.1%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 4.45 MB 4.46 MB 14.1 kB 2190.77 0.3%
buildPreviewSize 2.97 MB 3 MB 27.6 kB 8579.87 0.9%
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 25.8s 7s -18s -810ms -1.16 -266.9%
generateTime 20.8s 19.5s -1s -293ms -0.14 -6.6%
initTime 19s 16.6s -2s -333ms -0.23 -14%
buildTime 10.6s 12.2s 1.5s 0.36 13%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 7.2s 8.5s 1.2s 0.26 14.9%
devManagerResponsive 4.7s 5.1s 434ms 0.18 8.4%
devManagerHeaderVisible 841ms 759ms -82ms -0.76 -10.8%
devManagerIndexVisible 885ms 794ms -91ms -0.7 -11.5%
devStoryVisibleUncached 1.3s 1.3s -54ms 0.09 -4%
devStoryVisible 886ms 807ms -79ms -0.76 -9.8%
devAutodocsVisible 773ms 715ms -58ms -0.47 -8.1%
devMDXVisible 658ms 709ms 51ms -0.42 7.2%
buildManagerHeaderVisible 705ms 735ms 30ms -0.19 4.1%
buildManagerIndexVisible 713ms 742ms 29ms -0.16 3.9%
buildStoryVisible 755ms 778ms 23ms -0.22 3%
buildAutodocsVisible 607ms 619ms 12ms -0.97 1.9%
buildMDXVisible 576ms 638ms 62ms -0.43 9.7%

Greptile Summary

The pull request integrates Vitest into the Storybook codebase, introducing new events and components for enhanced filtering capabilities.

  • MIGRATION.md: Updated to document changes from 8.2.x to 8.3.x, including the removal and deprecation of certain addon types.
  • code/core/src/core-events/index.ts: Added SET_FILTER event to the events enum.
  • code/core/src/manager-api/modules/stories.ts: Introduced SET_FILTER event for dynamic story filtering.
  • code/core/src/manager/components/sidebar/FilterToggle.tsx: Added a new FilterToggle component for the sidebar.
  • code/core/src/manager/components/sidebar/Sidebar.tsx: Removed bottom prop, simplifying the component structure.

ghengeveld and others added 30 commits July 23, 2024 17:14
UI: Replace `experimental_SIDEBAR_BOTTOM` API with a status filter UI
@yannbf yannbf merged commit bdea6d2 into next Aug 14, 2024
108 checks passed
@yannbf yannbf deleted the vitest-integration branch August 14, 2024 14:29
@github-actions github-actions bot mentioned this pull request Aug 14, 2024
8 tasks
@kasperpeulen kasperpeulen added the needs qa Indicates that this needs manual QA during the upcoming minor/major release label Aug 27, 2024
@JReinhold JReinhold removed the needs qa Indicates that this needs manual QA during the upcoming minor/major release label Aug 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: test ci:daily Run the CI jobs that normally run in the daily job. feature request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Tracking] Vitest integration
9 participants