Add onClick handler for story statuses to open VTA panel

chromaui · Jul 31, 2024 · df0b83c · df0b83c
1 parent 0f06c8e
commit df0b83c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
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,
@@ -45,7 +51,7 @@ it("handles single test with changes", () => {
 
 it("handles multiple tests", () => {
   expect(
-    testsToStatusUpdate([
+    testsToStatusUpdate(api, [
       {
         id: "1",
         status: TestStatus.Pending,
@@ -79,7 +85,7 @@ it("handles multiple tests", () => {
 
 it("handles multiple viewports", () => {
   expect(
-    testsToStatusUpdate([
+    testsToStatusUpdate(api, [
       {
         id: "1",
         status: TestStatus.Broken,
@@ -108,7 +114,7 @@ it("handles multiple viewports", () => {
 
 it("handles multiple viewports, reverse order", () => {
   expect(
-    testsToStatusUpdate([
+    testsToStatusUpdate(api, [
       {
         id: "1",
         status: TestStatus.Pending,

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,
       },
     ])
   );