Skip to content

Conversation

JReinhold
Copy link
Contributor

@JReinhold JReinhold commented Mar 27, 2025

Depends on storybookjs/storybook#30943

This PR migrates to the new test provider API, and removes usage of the deprecated API.

That means:

  • replace title and description with a single render function when registering the test provider in the manager. The render function is a simple combination of the existing TestingModuleDescription component and the LegacyRender component from Storybook core that was responsible for combining title and description previously.
  • remove SidebarTop and SidebarBottom components, that were fallback when used in older Storybook versions where the testing module didn't exist yet.
  • Don't rely on the testing provider architecture with TESTING_MODULE_X events, but rather use the testingProviderStore when necessary.

Also replaced addon-essentials with addon-docs, as it was now failing in the latest alphas.

📦 Published PR as canary version: 4.0.0--canary.367.ede83ad.0

✨ Test out this PR locally via:

npm install @chromatic-com/[email protected]
# or 
yarn add @chromatic-com/[email protected]

Version

Published prerelease version: v4.0.0-next.4

Changelog

💥 Breaking Change

🚀 Enhancement

🐛 Bug Fix

⚠️ Pushed to next

Authors: 3

@JReinhold JReinhold self-assigned this Mar 27, 2025
@JReinhold JReinhold added enhancement Classification: Improvement to existing feature major Auto: Increment the major version when merged labels Mar 27, 2025
Copy link

codecov bot commented Mar 27, 2025

Codecov Report

Attention: Patch coverage is 0% with 179 lines in your changes missing coverage. Please review.

Project coverage is 6.00%. Comparing base (bb93412) to head (ede83ad).
Report is 70 commits behind head on next.

Files with missing lines Patch % Lines
src/TestProviderRender.tsx 0.00% 117 Missing ⚠️
src/preset.ts 0.00% 14 Missing ⚠️
src/components/BuildProgressBarInline.tsx 0.00% 10 Missing ⚠️
src/manager.tsx 0.00% 9 Missing ⚠️
src/screens/VisualTests/BuildEyebrow.tsx 0.00% 8 Missing ⚠️
src/screens/VisualTests/SnapshotComparison.tsx 0.00% 5 Missing ⚠️
src/screens/VisualTests/SnapshotControls.tsx 0.00% 4 Missing ⚠️
src/screens/VisualTests/StoryInfo.tsx 0.00% 4 Missing ⚠️
src/Panel.tsx 0.00% 2 Missing ⚠️
src/components/Eyebrow.tsx 0.00% 2 Missing ⚠️
... and 3 more
Additional details and impacted files
@@           Coverage Diff            @@
##            next    #367      +/-   ##
========================================
+ Coverage   5.86%   6.00%   +0.13%     
========================================
  Files        176     169       -7     
  Lines      14858   14272     -586     
  Branches     309     302       -7     
========================================
- Hits         872     857      -15     
+ Misses     13898   13333     -565     
+ Partials      88      82       -6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@JReinhold JReinhold added the release Auto: Create a `latest` release when merged label Mar 27, 2025
Comment on lines 190 to 215
let description: string | React.ReactNode;
switch (true) {
case !!warning:
description = <Link onClick={clickWarning}>{warning}</Link>;
break;
case testProviderState === 'test-provider-state:running':
description = localBuildProgress
? BUILD_STEP_CONFIG[localBuildProgress.currentStep].renderProgress(localBuildProgress)
: 'Starting...';
break;
case !!isOutdated:
description = 'Test results outdated';
break;
case localBuildProgress?.currentStep === 'aborted':
description = 'Aborted by user';
break;
case localBuildProgress?.currentStep === 'complete':
description = localBuildProgress.errorCount
? `Encountered ${pluralize('component error', localBuildProgress.errorCount, true)}`
: warningStatusCount
? `Found ${pluralize('story', warningStatusCount, true)} with ${pluralize('change', warningStatusCount)}`
: 'No visual changes detected';
break;
default:
description = 'Not run';
}
Copy link
Contributor Author

@JReinhold JReinhold Mar 27, 2025

Choose a reason for hiding this comment

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

this was essentially what the previous TestingModuleDescription component used to return. now we're setting description instead, and returning the JSX that LegacyRender would return - but simplified as it doesn't need to be generalized anymore.

@@ -1,6 +1,3 @@
import * as coreEvents from 'storybook/internal/core-events';
import { experimental_getStatusStore } from 'storybook/manager-api';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was really bad, I don't know why I thought this was a good idea initially. Because the preset also imports from this constants file, it could result in the preset pulling in manager-api too.

@JReinhold JReinhold marked this pull request as ready for review March 27, 2025 20:26
@JReinhold JReinhold requested a review from ghengeveld March 27, 2025 20:26
Copy link
Member

@ghengeveld ghengeveld left a comment

Choose a reason for hiding this comment

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

Code-wise this looks fine. I'll do a functional pass as well.

…hromaui/addon-visual-tests into jeppe/migrate-to-new-test-provider-api
@JReinhold JReinhold merged commit 05239ae into next Mar 31, 2025
8 of 9 checks passed
@JReinhold JReinhold deleted the jeppe/migrate-to-new-test-provider-api branch March 31, 2025 13:04
@ghengeveld
Copy link
Member

🚀 PR was released in v4.0.0 🚀

@ghengeveld ghengeveld added released Verdict: This issue/pull request has been released and removed prerelease labels May 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Classification: Improvement to existing feature major Auto: Increment the major version when merged release Auto: Create a `latest` release when merged released Verdict: This issue/pull request has been released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants