Add onClick handler for story statuses to open VTA panel

chromaui · Aug 20, 2024 · e5021bd · e5021bd
1 parent 0f06c8e
commit e5021bd
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
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,
       },
     ])
   );