diff --git a/src/screens/VisualTests/VisualTests.tsx b/src/screens/VisualTests/VisualTests.tsx index 20d85345..43b08f80 100644 --- 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 index 99f41ff7..38b5f5cf 100644 --- 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 index 7b8f2af3..e67a4786 100644 --- 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> = { @@ -22,6 +24,7 @@ function chooseWorseStatus(status: API_StatusValue | null, oldStatus: API_Status } export function testsToStatusUpdate( + api: API, tests: readonly T[] ): API_StatusUpdate { const storyIdToStatus: Record = {}; @@ -34,6 +37,10 @@ export function testsToStatusUpdate( storyIdToStatus[test.story.storyId] ); }); + const openAddonPanel = () => { + api.setSelectedPanel(PANEL_ID); + api.togglePanel(true); + }; const update = Object.fromEntries( Object.entries(storyIdToStatus).map(([storyId, status]) => [ storyId, @@ -41,6 +48,7 @@ export function testsToStatusUpdate( status, title: "Visual Tests", description: "Chromatic Visual Tests", + onClick: openAddonPanel, }, ]) );