Merge pull request #332 from chromaui/sb83-compat

Update story status reporting for Storybook 8.3 and use new `SET_FILTER` event
chromaui · Aug 20, 2024 · ba939d9 · ba939d9
2 parents 8f4ec27 + f043bff
commit ba939d9
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 12 deletions.
diff --git a/src/components/SidebarBottom.tsx b/src/components/SidebarBottom.tsx
@@ -53,7 +53,7 @@ export const SidebarBottomBase = ({ api, status }: SidebarBottomProps) => {
     <Wrapper id="sidebar-bottom-wrapper">
       {hasWarnings && (
         <SidebarToggleButton
-          id="changes-found-filter"
+          id="warnings-found-filter"
           active={showWarnings}
           count={warnings.length}
           label="Change"

diff --git a/src/screens/GuidedTour/GuidedTour.tsx b/src/screens/GuidedTour/GuidedTour.tsx
@@ -9,6 +9,8 @@ import { useSelectedStoryState } from "../VisualTests/BuildContext";
 import { Confetti } from "./Confetti";
 import { Tooltip, TooltipProps } from "./Tooltip";
 
+const SET_FILTER = "setFilter"; // TODO: Import from @storybook/core-events once available
+
 type GuidedTourStep = TooltipProps["step"];
 
 interface TourProps {
@@ -75,14 +77,22 @@ export const GuidedTour = ({
   }, []);
 
   useEffect(() => {
-    // Listen for internal event to indicate a filter was set before moving to next step.
-    managerApi.once(ENABLE_FILTER, () => {
+    const onFilter = () => {
       setStepIndex(1);
       // Force a resize to make sure the react-joyride centers on the sidebar properly. Timeout is needed to make sure the filter takes place.
       setTimeout(() => {
         window.dispatchEvent(new Event("resize"));
       }, 100);
-    });
+    };
+
+    // Listen for event to indicate a filter was set before moving to next step.
+    // Storybook before v8.3 didn't have SET_FILTER, those versions use ENABLE_FILTER instead.
+    managerApi.on(ENABLE_FILTER, onFilter);
+    managerApi.on(SET_FILTER, onFilter);
+    return () => {
+      managerApi.off(ENABLE_FILTER, onFilter);
+      managerApi.off(SET_FILTER, onFilter);
+    };
   }, [managerApi, setStepIndex]);
 
   useEffect(() => {
@@ -107,7 +117,7 @@ export const GuidedTour = ({
         </>
       ),
       floaterProps: {
-        target: "#changes-found-filter",
+        target: "#warnings-found-filter",
         options: {
           preventOverflow: {
             boundariesElement: "window",

diff --git a/src/screens/VisualTests/VisualTests.stories.tsx b/src/screens/VisualTests/VisualTests.stories.tsx
@@ -704,6 +704,7 @@ export const Pending = {
       expect(args.updateBuildStatus).toHaveBeenCalledWith({
         "button--primary": {
           status: "warn",
+          onClick: expect.anything(),
           title: "Visual Tests",
           description: "Chromatic Visual Tests",
         },

diff --git a/src/screens/VisualTests/VisualTests.tsx b/src/screens/VisualTests/VisualTests.tsx
@@ -264,7 +264,8 @@ export const VisualTestsWithoutSelectedBuildId = ({
     "testsForStatus" in lastBuildOnBranch &&
     lastBuildOnBranch.testsForStatus?.nodes &&
     getFragment(FragmentStatusTestFields, lastBuildOnBranch.testsForStatus.nodes);
-  const statusUpdate = lastBuildOnBranchIsSelectable && testsToStatusUpdate(testsForStatus || []);
+  const statusUpdate =
+    lastBuildOnBranchIsSelectable && testsToStatusUpdate(managerApi, testsForStatus || []);
   useEffect(() => {
     updateBuildStatus((state) => ({
       ...createEmptyStoryStatusUpdate(state),

diff --git a/src/utils/testsToStatusUpdate.test.ts b/src/utils/testsToStatusUpdate.test.ts
@@ -1,11 +1,17 @@
-import { expect, it } from "vitest";
+import type { API } from "@storybook/manager-api";
+import { expect, it, vi } from "vitest";
 
 import { TestStatus } from "../gql/graphql";
 import { testsToStatusUpdate } from "./testsToStatusUpdate";
 
+const api: API = {
+  setSelectedPanel: vi.fn(),
+  togglePanel: vi.fn(),
+} as any;
+
 it("handles single test with no changes", () => {
   expect(
-    testsToStatusUpdate([
+    testsToStatusUpdate(api, [
       {
         id: "1",
         status: TestStatus.Passed,
@@ -23,7 +29,7 @@ it("handles single test with no changes", () => {
 
 it("handles single test with changes", () => {
   expect(
-    testsToStatusUpdate([
+    testsToStatusUpdate(api, [
       {
         id: "1",
         status: TestStatus.Pending,
@@ -36,6 +42,7 @@ it("handles single test with changes", () => {
     {
       "story--id": {
         "description": "Chromatic Visual Tests",
+        "onClick": [Function],
         "status": "warn",
         "title": "Visual Tests",
       },
@@ -45,7 +52,7 @@ it("handles single test with changes", () => {
 
 it("handles multiple tests", () => {
   expect(
-    testsToStatusUpdate([
+    testsToStatusUpdate(api, [
       {
         id: "1",
         status: TestStatus.Pending,
@@ -65,11 +72,13 @@ it("handles multiple tests", () => {
     {
       "story--id": {
         "description": "Chromatic Visual Tests",
+        "onClick": [Function],
         "status": "warn",
         "title": "Visual Tests",
       },
       "story2--id": {
         "description": "Chromatic Visual Tests",
+        "onClick": [Function],
         "status": "error",
         "title": "Visual Tests",
       },
@@ -79,7 +88,7 @@ it("handles multiple tests", () => {
 
 it("handles multiple viewports", () => {
   expect(
-    testsToStatusUpdate([
+    testsToStatusUpdate(api, [
       {
         id: "1",
         status: TestStatus.Broken,
@@ -99,6 +108,7 @@ it("handles multiple viewports", () => {
     {
       "story--id": {
         "description": "Chromatic Visual Tests",
+        "onClick": [Function],
         "status": "error",
         "title": "Visual Tests",
       },
@@ -108,7 +118,7 @@ it("handles multiple viewports", () => {
 
 it("handles multiple viewports, reverse order", () => {
   expect(
-    testsToStatusUpdate([
+    testsToStatusUpdate(api, [
       {
         id: "1",
         status: TestStatus.Pending,
@@ -128,6 +138,7 @@ it("handles multiple viewports, reverse order", () => {
     {
       "story--id": {
         "description": "Chromatic Visual Tests",
+        "onClick": [Function],
         "status": "error",
         "title": "Visual Tests",
       },

diff --git a/src/utils/testsToStatusUpdate.ts b/src/utils/testsToStatusUpdate.ts
@@ -1,5 +1,7 @@
+import type { API } from "@storybook/manager-api";
 import type { API_StatusUpdate, API_StatusValue, StoryId } from "@storybook/types";
 
+import { PANEL_ID } from "../constants";
 import { StatusTestFieldsFragment, TestStatus } from "../gql/graphql";
 
 export const statusMap: Partial<Record<TestStatus, API_StatusValue>> = {
@@ -22,6 +24,7 @@ function chooseWorseStatus(status: API_StatusValue | null, oldStatus: API_Status
 }
 
 export function testsToStatusUpdate<T extends StatusTestFieldsFragment>(
+  api: API,
   tests: readonly T[]
 ): API_StatusUpdate {
   const storyIdToStatus: Record<StoryId, API_StatusValue | null> = {};
@@ -34,13 +37,18 @@ export function testsToStatusUpdate<T extends StatusTestFieldsFragment>(
       storyIdToStatus[test.story.storyId]
     );
   });
+  const openAddonPanel = () => {
+    api.setSelectedPanel(PANEL_ID);
+    api.togglePanel(true);
+  };
   const update = Object.fromEntries(
     Object.entries(storyIdToStatus).map(([storyId, status]) => [
       storyId,
       status && {
         status,
         title: "Visual Tests",
         description: "Chromatic Visual Tests",
+        onClick: openAddonPanel,
       },
     ])
   );