From 1ae444c263fe213153bc564962b7114bdcf4d93e Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 20 Sep 2023 13:54:37 +0200 Subject: [PATCH 1/4] Replace 'viewports' with 'modes' --- src/components/ModeSelector.stories.ts | 22 ++++---- src/components/ModeSelector.tsx | 22 ++++---- src/gql/gql.ts | 4 +- src/gql/graphql.ts | 8 +-- .../SnapshotComparison.stories.tsx | 4 +- src/screens/VisualTests/SnapshotControls.tsx | 50 +++++++++---------- src/screens/VisualTests/graphql.ts | 15 +----- src/utils/storyData.ts | 13 +---- src/utils/summarizeTests.test.ts | 30 +++-------- src/utils/summarizeTests.ts | 24 ++++----- src/utils/useTests.ts | 14 ++---- 11 files changed, 81 insertions(+), 125 deletions(-) diff --git a/src/components/ModeSelector.stories.ts b/src/components/ModeSelector.stories.ts index eb38dd32..29ae7cff 100644 --- a/src/components/ModeSelector.stories.ts +++ b/src/components/ModeSelector.stories.ts @@ -5,11 +5,9 @@ import { ComparisonResult } from "../gql/graphql"; import { ModeSelector } from "./ModeSelector"; const viewport800Px = { - id: "_800", name: "800px", }; const viewport1200Px = { - id: "_1200", name: "1200px", }; @@ -29,7 +27,7 @@ export const WithSingleViewportChanged: Story = { selectedMode: viewport1200Px, modeResults: [ { - viewport: viewport1200Px, + mode: viewport1200Px, result: ComparisonResult.Changed, }, ], @@ -42,7 +40,7 @@ export const WithSingleViewportAccepted: Story = { selectedMode: viewport1200Px, modeResults: [ { - viewport: viewport1200Px, + mode: viewport1200Px, result: ComparisonResult.Changed, }, ], @@ -54,7 +52,7 @@ export const WithSingleViewportEqual: Story = { selectedMode: viewport1200Px, modeResults: [ { - viewport: viewport1200Px, + mode: viewport1200Px, result: ComparisonResult.Equal, }, ], @@ -66,7 +64,7 @@ export const WithSingleViewportError: Story = { selectedMode: viewport1200Px, modeResults: [ { - viewport: viewport1200Px, + mode: viewport1200Px, result: ComparisonResult.CaptureError, }, ], @@ -78,11 +76,11 @@ export const WithManyViewportsEqual: Story = { selectedMode: viewport800Px, modeResults: [ { - viewport: viewport800Px, + mode: viewport800Px, result: ComparisonResult.Equal, }, { - viewport: viewport1200Px, + mode: viewport1200Px, result: ComparisonResult.Equal, }, ], @@ -94,11 +92,11 @@ export const WithManyViewportsSecondSelected: Story = { selectedMode: viewport1200Px, modeResults: [ { - viewport: viewport800Px, + mode: viewport800Px, result: ComparisonResult.Equal, }, { - viewport: viewport1200Px, + mode: viewport1200Px, result: ComparisonResult.Changed, }, ], @@ -110,11 +108,11 @@ export const WithManyViewportsVaried: Story = { selectedMode: viewport800Px, modeResults: [ { - viewport: viewport800Px, + mode: viewport800Px, result: ComparisonResult.Equal, }, { - viewport: viewport1200Px, + mode: viewport1200Px, result: ComparisonResult.Changed, }, ], diff --git a/src/components/ModeSelector.tsx b/src/components/ModeSelector.tsx index cf676052..e3e3fa03 100644 --- a/src/components/ModeSelector.tsx +++ b/src/components/ModeSelector.tsx @@ -3,7 +3,7 @@ import { Icon } from "@storybook/design-system"; import { styled } from "@storybook/theming"; import React from "react"; -import { ComparisonResult, ViewportInfo } from "../gql/graphql"; +import { ComparisonResult, TestMode } from "../gql/graphql"; import { aggregateResult } from "../utils/aggregateResult"; import { ArrowIcon } from "./icons/ArrowIcon"; import { StatusDot, StatusDotWrapper } from "./StatusDot"; @@ -18,13 +18,13 @@ const IconWrapper = styled.div(({ theme }) => ({ }, })); -type ModeData = Pick; +type ModeData = Pick; interface ModeSelectorProps { isAccepted: boolean; selectedMode: ModeData; - onSelectMode: (viewport: ModeData) => void; - modeResults: { viewport: ModeData; result?: ComparisonResult }[]; + onSelectMode: (mode: ModeData) => void; + modeResults: { mode: ModeData; result?: ComparisonResult }[]; } export const ModeSelector = ({ @@ -43,12 +43,12 @@ export const ModeSelector = ({ const links = modeResults.length > 1 && - modeResults.map(({ viewport, result }) => ({ - id: viewport.id, - title: viewport.name, + modeResults.map(({ mode, result }) => ({ + id: mode.name, + title: mode.name, right: !isAccepted && result !== ComparisonResult.Equal && , - onClick: () => onSelectMode(viewport), - active: selectedMode === viewport, + onClick: () => onSelectMode(mode), + active: selectedMode.name === mode.name, })); return ( @@ -56,9 +56,7 @@ export const ModeSelector = ({ hasChrome={false} placement="top" trigger="hover" - tooltip={ - - } + tooltip={} > {links ? ( diff --git a/src/gql/gql.ts b/src/gql/gql.ts index 31c8fc13..7f70bab2 100644 --- a/src/gql/gql.ts +++ b/src/gql/gql.ts @@ -20,7 +20,7 @@ const documents = { "\n fragment SelectedBuildFields on Build {\n __typename\n id\n number\n branch\n commit\n committedAt\n uncommittedHash\n status\n ... on StartedBuild {\n startedAt\n testsForStory: tests(storyId: $storyId) {\n nodes {\n ...StoryTestFields\n }\n }\n }\n ... on CompletedBuild {\n startedAt\n testsForStory: tests(storyId: $storyId) {\n nodes {\n ...StoryTestFields\n }\n }\n }\n }\n": types.SelectedBuildFieldsFragmentDoc, "\n fragment StatusTestFields on Test {\n id\n status\n story {\n storyId\n }\n }\n": types.StatusTestFieldsFragmentDoc, "\n fragment LastBuildOnBranchTestFields on Test {\n status\n }\n": types.LastBuildOnBranchTestFieldsFragmentDoc, - "\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n viewport {\n id\n name\n width\n isDefault\n }\n }\n parameters {\n viewport {\n id\n name\n width\n isDefault\n }\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n": types.StoryTestFieldsFragmentDoc, + "\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n }\n mode {\n name\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n": types.StoryTestFieldsFragmentDoc, "\n mutation ReviewTest($input: ReviewTestInput!) {\n reviewTest(input: $input) {\n updatedTests {\n id\n status\n }\n userErrors {\n ... on UserError {\n __typename\n message\n }\n ... on BuildSupersededError {\n build {\n id\n }\n }\n ... on TestUnreviewableError {\n test {\n id\n }\n }\n }\n }\n }\n": types.ReviewTestDocument, }; @@ -69,7 +69,7 @@ export function graphql(source: "\n fragment LastBuildOnBranchTestFields on Tes /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n viewport {\n id\n name\n width\n isDefault\n }\n }\n parameters {\n viewport {\n id\n name\n width\n isDefault\n }\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n"): (typeof documents)["\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n viewport {\n id\n name\n width\n isDefault\n }\n }\n parameters {\n viewport {\n id\n name\n width\n isDefault\n }\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n"]; +export function graphql(source: "\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n }\n mode {\n name\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n"): (typeof documents)["\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n }\n mode {\n name\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/src/gql/graphql.ts b/src/gql/graphql.ts index 2a979242..fe2a912c 100644 --- a/src/gql/graphql.ts +++ b/src/gql/graphql.ts @@ -1488,7 +1488,7 @@ export type StatusTestFieldsFragment = { __typename?: 'Test', id: string, status export type LastBuildOnBranchTestFieldsFragment = { __typename?: 'Test', status: TestStatus } & { ' $fragmentName'?: 'LastBuildOnBranchTestFieldsFragment' }; -export type StoryTestFieldsFragment = { __typename?: 'Test', id: string, status: TestStatus, result?: TestResult | null, webUrl: any, comparisons: Array<{ __typename?: 'TestComparison', id: string, result?: ComparisonResult | null, browser: { __typename?: 'BrowserInfo', id: string, key: Browser, name: string, version: string }, captureDiff?: { __typename?: 'CaptureDiff', diffImage?: { __typename?: 'CaptureOverlayImage', imageUrl: any, imageWidth: number } | null } | null, headCapture?: { __typename?: 'Capture', captureImage?: { __typename?: 'CaptureImage', imageUrl: any, imageWidth: number } | null, captureError?: { __typename?: 'CaptureErrorComponentOffPage', kind: CaptureErrorKind } | { __typename?: 'CaptureErrorFailedJS', error: any, kind: CaptureErrorKind } | { __typename?: 'CaptureErrorImageTooLarge', kind: CaptureErrorKind } | { __typename?: 'CaptureErrorInteractionFailure', error: any, kind: CaptureErrorKind } | { __typename?: 'CaptureErrorJSError', error: any, kind: CaptureErrorKind } | { __typename?: 'CaptureErrorNavigationTimeout', kind: CaptureErrorKind } | { __typename?: 'CaptureErrorNoJS', kind: CaptureErrorKind } | { __typename?: 'CaptureErrorStoryMissing', kind: CaptureErrorKind } | null } | null, baseCapture?: { __typename?: 'Capture', captureImage?: { __typename?: 'CaptureImage', imageUrl: any, imageWidth: number } | null } | null, viewport: { __typename?: 'ViewportInfo', id: string, name: string, width: number, isDefault: boolean } }>, parameters: { __typename?: 'TestParameters', viewport: { __typename?: 'ViewportInfo', id: string, name: string, width: number, isDefault: boolean } }, story?: { __typename?: 'Story', storyId: string, name: string, component?: { __typename?: 'Component', name: string } | null } | null } & { ' $fragmentName'?: 'StoryTestFieldsFragment' }; +export type StoryTestFieldsFragment = { __typename?: 'Test', id: string, status: TestStatus, result?: TestResult | null, webUrl: any, comparisons: Array<{ __typename?: 'TestComparison', id: string, result?: ComparisonResult | null, browser: { __typename?: 'BrowserInfo', id: string, key: Browser, name: string, version: string }, captureDiff?: { __typename?: 'CaptureDiff', diffImage?: { __typename?: 'CaptureOverlayImage', imageUrl: any, imageWidth: number } | null } | null, headCapture?: { __typename?: 'Capture', captureImage?: { __typename?: 'CaptureImage', imageUrl: any, imageWidth: number } | null, captureError?: { __typename?: 'CaptureErrorComponentOffPage', kind: CaptureErrorKind } | { __typename?: 'CaptureErrorFailedJS', error: any, kind: CaptureErrorKind } | { __typename?: 'CaptureErrorImageTooLarge', kind: CaptureErrorKind } | { __typename?: 'CaptureErrorInteractionFailure', error: any, kind: CaptureErrorKind } | { __typename?: 'CaptureErrorJSError', error: any, kind: CaptureErrorKind } | { __typename?: 'CaptureErrorNavigationTimeout', kind: CaptureErrorKind } | { __typename?: 'CaptureErrorNoJS', kind: CaptureErrorKind } | { __typename?: 'CaptureErrorStoryMissing', kind: CaptureErrorKind } | null } | null, baseCapture?: { __typename?: 'Capture', captureImage?: { __typename?: 'CaptureImage', imageUrl: any, imageWidth: number } | null } | null }>, mode: { __typename?: 'TestMode', name: string }, story?: { __typename?: 'Story', storyId: string, name: string, component?: { __typename?: 'Component', name: string } | null } | null } & { ' $fragmentName'?: 'StoryTestFieldsFragment' }; export type ReviewTestMutationVariables = Exact<{ input: ReviewTestInput; @@ -1500,9 +1500,9 @@ export type ReviewTestMutation = { __typename?: 'Mutation', reviewTest?: { __typ export const StatusTestFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StatusTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}}]} as unknown as DocumentNode; export const LastBuildOnBranchTestFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]} as unknown as DocumentNode; export const LastBuildOnBranchBuildFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LastBuildOnBranchBuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"committedAt"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"testsForStatus"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1000"}},{"kind":"Argument","name":{"kind":"Name","value":"statuses"},"value":{"kind":"Variable","name":{"kind":"Name","value":"testStatuses"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StatusTestFields"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStatus"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"statuses"},"value":{"kind":"Variable","name":{"kind":"Name","value":"testStatuses"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StatusTestFields"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StatusTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]} as unknown as DocumentNode; -export const StoryTestFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StoryTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureError"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorInteractionFailure"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorJSError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorFailedJS"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"baseCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"parameters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"component"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]} as unknown as DocumentNode; -export const SelectedBuildFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SelectedBuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"commit"}},{"kind":"Field","name":{"kind":"Name","value":"committedAt"}},{"kind":"Field","name":{"kind":"Name","value":"uncommittedHash"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StoryTestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StoryTestFields"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StoryTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureError"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorInteractionFailure"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorJSError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorFailedJS"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"baseCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"parameters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"component"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]} as unknown as DocumentNode; +export const StoryTestFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StoryTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureError"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorInteractionFailure"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorJSError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorFailedJS"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"baseCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"mode"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"component"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]} as unknown as DocumentNode; +export const SelectedBuildFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SelectedBuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"commit"}},{"kind":"Field","name":{"kind":"Name","value":"committedAt"}},{"kind":"Field","name":{"kind":"Name","value":"uncommittedHash"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StoryTestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StoryTestFields"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StoryTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureError"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorInteractionFailure"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorJSError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorFailedJS"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"baseCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"mode"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"component"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]} as unknown as DocumentNode; export const SelectProjectsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SelectProjectsQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"accounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}},{"kind":"Field","name":{"kind":"Name","value":"newProjectUrl"}},{"kind":"Field","name":{"kind":"Name","value":"projects"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"projectToken"}},{"kind":"Field","name":{"kind":"Name","value":"lastBuild"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"number"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const ProjectQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"lastBuild"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"number"}}]}}]}}]}}]} as unknown as DocumentNode; -export const AddonVisualTestsBuildDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AddonVisualTestsBuild"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"branch"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"gitUserEmailHash"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"testStatuses"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"TestStatus"}}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"selectedBuildId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"hasSelectedBuildId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","alias":{"kind":"Name","value":"lastBuildOnBranch"},"name":{"kind":"Name","value":"lastBuild"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"branches"},"value":{"kind":"ListValue","values":[{"kind":"Variable","name":{"kind":"Name","value":"branch"}}]}},{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}},{"kind":"Argument","name":{"kind":"Name","value":"localBuilds"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"localBuildEmailHash"},"value":{"kind":"Variable","name":{"kind":"Name","value":"gitUserEmailHash"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LastBuildOnBranchBuildFields"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SelectedBuildFields"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"skip"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"hasSelectedBuildId"}}}]}]}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"selectedBuild"},"name":{"kind":"Name","value":"build"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"selectedBuildId"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"include"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"hasSelectedBuildId"}}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SelectedBuildFields"}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectMembership"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"userCanReview"},"name":{"kind":"Name","value":"meetsAccessLevel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"minimumAccessLevel"},"value":{"kind":"EnumValue","value":"REVIEWER"}}]}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StatusTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StoryTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureError"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorInteractionFailure"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorJSError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorFailedJS"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"baseCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"parameters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"component"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LastBuildOnBranchBuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"committedAt"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"testsForStatus"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1000"}},{"kind":"Argument","name":{"kind":"Name","value":"statuses"},"value":{"kind":"Variable","name":{"kind":"Name","value":"testStatuses"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StatusTestFields"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStatus"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"statuses"},"value":{"kind":"Variable","name":{"kind":"Name","value":"testStatuses"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StatusTestFields"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SelectedBuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"commit"}},{"kind":"Field","name":{"kind":"Name","value":"committedAt"}},{"kind":"Field","name":{"kind":"Name","value":"uncommittedHash"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StoryTestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StoryTestFields"}}]}}]}}]}}]}}]} as unknown as DocumentNode; +export const AddonVisualTestsBuildDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AddonVisualTestsBuild"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"branch"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"gitUserEmailHash"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"testStatuses"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"TestStatus"}}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"selectedBuildId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"hasSelectedBuildId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","alias":{"kind":"Name","value":"lastBuildOnBranch"},"name":{"kind":"Name","value":"lastBuild"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"branches"},"value":{"kind":"ListValue","values":[{"kind":"Variable","name":{"kind":"Name","value":"branch"}}]}},{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}},{"kind":"Argument","name":{"kind":"Name","value":"localBuilds"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"localBuildEmailHash"},"value":{"kind":"Variable","name":{"kind":"Name","value":"gitUserEmailHash"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LastBuildOnBranchBuildFields"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SelectedBuildFields"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"skip"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"hasSelectedBuildId"}}}]}]}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"selectedBuild"},"name":{"kind":"Name","value":"build"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"selectedBuildId"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"include"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"hasSelectedBuildId"}}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SelectedBuildFields"}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectMembership"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"userCanReview"},"name":{"kind":"Name","value":"meetsAccessLevel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"minimumAccessLevel"},"value":{"kind":"EnumValue","value":"REVIEWER"}}]}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StatusTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"StoryTestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureError"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorInteractionFailure"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorJSError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CaptureErrorFailedJS"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"baseCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"signed"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"imageWidth"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"mode"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"component"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LastBuildOnBranchBuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"committedAt"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"testsForStatus"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1000"}},{"kind":"Argument","name":{"kind":"Name","value":"statuses"},"value":{"kind":"Variable","name":{"kind":"Name","value":"testStatuses"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StatusTestFields"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStatus"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"statuses"},"value":{"kind":"Variable","name":{"kind":"Name","value":"testStatuses"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StatusTestFields"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LastBuildOnBranchTestFields"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SelectedBuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"commit"}},{"kind":"Field","name":{"kind":"Name","value":"committedAt"}},{"kind":"Field","name":{"kind":"Name","value":"uncommittedHash"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StoryTestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","alias":{"kind":"Name","value":"testsForStory"},"name":{"kind":"Name","value":"tests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"StoryTestFields"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const ReviewTestDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ReviewTest"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ReviewTestInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"reviewTest"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updatedTests"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"userErrors"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"UserError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BuildSupersededError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"build"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TestUnreviewableError"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"test"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/src/screens/VisualTests/SnapshotComparison.stories.tsx b/src/screens/VisualTests/SnapshotComparison.stories.tsx index 4822f83c..1c203476 100644 --- a/src/screens/VisualTests/SnapshotComparison.stories.tsx +++ b/src/screens/VisualTests/SnapshotComparison.stories.tsx @@ -108,8 +108,8 @@ export const SwitchingViewport = { headCapture: { ...comparison.headCapture, captureImage: { - imageUrl: `/ProjectItem-${comparison.browser.name}-${comparison.viewport.width}.png`, - imageWidth: comparison.viewport.width, + imageUrl: `/ProjectItem-${comparison.browser.name}-${parseInt(test.mode.name, 10)}.png`, + imageWidth: parseInt(test.mode.name, 10), }, }, })), diff --git a/src/screens/VisualTests/SnapshotControls.tsx b/src/screens/VisualTests/SnapshotControls.tsx index cf70f6bd..be0e58f2 100644 --- a/src/screens/VisualTests/SnapshotControls.tsx +++ b/src/screens/VisualTests/SnapshotControls.tsx @@ -17,29 +17,7 @@ import { import { summarizeTests } from "../../utils/summarizeTests"; import { useTests } from "../../utils/useTests"; -type TestSummary = ReturnType; -type TestControls = ReturnType; - -interface SnapshotSectionProps { - selectedTest: StoryTestFieldsFragment; - selectedComparison: StoryTestFieldsFragment["comparisons"][0]; - status: TestSummary["status"]; - changeCount: TestSummary["changeCount"]; - isInProgress: TestSummary["isInProgress"]; - modeResults: TestSummary["modeResults"]; - browserResults: TestSummary["browserResults"]; - onSelectMode: TestControls["onSelectMode"]; - onSelectBrowser: TestControls["onSelectBrowser"]; - userCanReview: boolean; - isReviewable: boolean; - isReviewing: boolean; - onAccept: (testId: StoryTestFieldsFragment["id"], batch?: ReviewTestBatch) => void; - onUnaccept: (testId: StoryTestFieldsFragment["id"]) => void; - diffVisible: boolean; - setDiffVisible: (visible: boolean) => void; -} - -const Controls = styled.div(({ theme }) => ({ +const Controls = styled.div({ gridArea: "controls", display: "flex", alignItems: "center", @@ -49,7 +27,7 @@ const Controls = styled.div(({ theme }) => ({ "@container (min-width: 800px)": { flexDirection: "row-reverse", }, -})); +}); const Actions = styled.div(({ theme }) => ({ gridArea: "actions", @@ -65,6 +43,28 @@ const Actions = styled.div(({ theme }) => ({ }, })); +type TestSummary = ReturnType; +type TestControls = ReturnType; + +interface SnapshotSectionProps { + selectedTest: StoryTestFieldsFragment; + selectedComparison: StoryTestFieldsFragment["comparisons"][0]; + status: TestSummary["status"]; + changeCount: TestSummary["changeCount"]; + isInProgress: TestSummary["isInProgress"]; + modeResults: TestSummary["modeResults"]; + browserResults: TestSummary["browserResults"]; + onSelectMode: TestControls["onSelectMode"]; + onSelectBrowser: TestControls["onSelectBrowser"]; + userCanReview: boolean; + isReviewable: boolean; + isReviewing: boolean; + onAccept: (testId: StoryTestFieldsFragment["id"], batch?: ReviewTestBatch) => void; + onUnaccept: (testId: StoryTestFieldsFragment["id"]) => void; + diffVisible: boolean; + setDiffVisible: (visible: boolean) => void; +} + export const SnapshotControls = ({ status, changeCount, @@ -102,7 +102,7 @@ export const SnapshotControls = ({ {modeResults.length > 0 && ( diff --git a/src/screens/VisualTests/graphql.ts b/src/screens/VisualTests/graphql.ts index 3134184c..1fdc7ee5 100644 --- a/src/screens/VisualTests/graphql.ts +++ b/src/screens/VisualTests/graphql.ts @@ -157,20 +157,9 @@ export const FragmentStoryTestFields = graphql(/* GraphQL */ ` imageWidth } } - viewport { - id - name - width - isDefault - } } - parameters { - viewport { - id - name - width - isDefault - } + mode { + name } story { storyId diff --git a/src/utils/storyData.ts b/src/utils/storyData.ts index 4a7600f5..43f46292 100644 --- a/src/utils/storyData.ts +++ b/src/utils/storyData.ts @@ -5,7 +5,6 @@ import { StoryTestFieldsFragment, TestResult, TestStatus, - ViewportInfo, } from "../gql/graphql"; export const makeBrowserInfo = (key: Browser): BrowserInfo => ({ @@ -15,13 +14,6 @@ export const makeBrowserInfo = (key: Browser): BrowserInfo => ({ version: "", }); -export const makeViewportInfo = (width: number): ViewportInfo => ({ - id: `_${width}`, - name: `${width}px`, - width, - isDefault: width === 1200, -}); - export const baseCapture: StoryTestFieldsFragment["comparisons"][number]["baseCapture"] = { captureImage: { imageUrl: "/A.png", @@ -46,7 +38,6 @@ export const captureDiff: StoryTestFieldsFragment["comparisons"][number]["captur export function makeComparison(options: { id?: string; browser?: Browser; - viewport?: number; result?: ComparisonResult; captureError?: NonNullable< StoryTestFieldsFragment["comparisons"][number]["headCapture"] @@ -56,7 +47,6 @@ export function makeComparison(options: { return { id: options.id || "111", browser: makeBrowserInfo(options.browser || Browser.Chrome), - viewport: makeViewportInfo(options.viewport || 1200), result, baseCapture, headCapture: captureError ? { ...headCapture, captureError } : headCapture, @@ -123,7 +113,6 @@ export function makeTest(options: { makeComparison({ id: `id${index}`, browser: browserKey, - viewport: viewportWidth, result: options.comparisonResults?.[index] ?? (result && testResultToComparisonResult[result]), captureError: options.captureError, @@ -150,7 +139,7 @@ export function makeTest(options: { result, webUrl: `https://www.chromatic.com/test?appId=123&id=${id}`, comparisons, - parameters: { viewport: makeViewportInfo(viewportWidth) }, + mode: { name: `${viewportWidth}px` }, story: generateStory(options.storyId || "button--primary"), }; } diff --git a/src/utils/summarizeTests.test.ts b/src/utils/summarizeTests.test.ts index 49bbd60b..af3365ce 100644 --- a/src/utils/summarizeTests.test.ts +++ b/src/utils/summarizeTests.test.ts @@ -37,13 +37,11 @@ const tests = [ makeComparison({ id: "141", browser: Browser.Chrome, - viewport: 1600, result: undefined, }), makeComparison({ id: "142", browser: Browser.Safari, - viewport: 1600, result: ComparisonResult.Added, }), ], @@ -88,40 +86,28 @@ it("Calculates static information correctly", () => { "isInProgress": true, "modeResults": [ { - "result": "EQUAL", - "viewport": { - "id": "_1200", - "isDefault": true, + "mode": { "name": "1200px", - "width": 1200, }, + "result": "EQUAL", }, { - "result": "CAPTURE_ERROR", - "viewport": { - "id": "_800", - "isDefault": false, + "mode": { "name": "800px", - "width": 800, }, + "result": "CAPTURE_ERROR", }, { - "result": "CHANGED", - "viewport": { - "id": "_480", - "isDefault": false, + "mode": { "name": "480px", - "width": 480, }, + "result": "CHANGED", }, { - "result": "ADDED", - "viewport": { - "id": "_1600", - "isDefault": false, + "mode": { "name": "1600px", - "width": 1600, }, + "result": "ADDED", }, ], "status": "IN_PROGRESS", diff --git a/src/utils/summarizeTests.ts b/src/utils/summarizeTests.ts index b6077708..862737bc 100644 --- a/src/utils/summarizeTests.ts +++ b/src/utils/summarizeTests.ts @@ -22,16 +22,16 @@ export function summarizeTests(tests: StoryTestFieldsFragment[]) { changeCount, brokenCount, resultsByBrowser, - resultsByViewport, - viewportInfoById, + resultsByMode, + modesByName, } = tests.reduce<{ statusCounts: { [K in TestStatus]?: number }; isInProgress: boolean; changeCount: number; brokenCount: number; resultsByBrowser: Record; - resultsByViewport: Record; - viewportInfoById: Record; + resultsByMode: Record; + modesByName: Record; }>( (acc, test) => { acc.statusCounts[test.status] = (acc.statusCounts[test.status] || 0) + 1; @@ -51,13 +51,13 @@ export function summarizeTests(tests: StoryTestFieldsFragment[]) { acc.resultsByBrowser[browser.id], ]); }); - test.comparisons?.forEach(({ viewport, result }) => { - acc.resultsByViewport[viewport.id] = aggregateResult([ + test.comparisons?.forEach(({ result }) => { + acc.resultsByMode[test.mode.name] = aggregateResult([ result ?? undefined, - acc.resultsByViewport[viewport.id], + acc.resultsByMode[test.mode.name], ]); }); - acc.viewportInfoById[test.parameters.viewport.id] = test.parameters.viewport; + acc.modesByName[test.mode.name] = test.mode; return acc; }, { @@ -66,8 +66,8 @@ export function summarizeTests(tests: StoryTestFieldsFragment[]) { changeCount: 0, brokenCount: 0, resultsByBrowser: {}, - resultsByViewport: {}, - viewportInfoById: {}, + resultsByMode: {}, + modesByName: {}, } ); @@ -82,8 +82,8 @@ export function summarizeTests(tests: StoryTestFieldsFragment[]) { browser: browserInfoById[id], result, })); - const modeResults = Object.entries(resultsByViewport).map(([id, result]) => ({ - viewport: viewportInfoById[id], + const modeResults = Object.entries(resultsByMode).map(([name, result]) => ({ + mode: modesByName[name], result, })); diff --git a/src/utils/useTests.ts b/src/utils/useTests.ts index 08289088..81bcdb10 100644 --- a/src/utils/useTests.ts +++ b/src/utils/useTests.ts @@ -1,9 +1,9 @@ import { useCallback, useState } from "react"; -import { BrowserInfo, StoryTestFieldsFragment, ViewportInfo } from "../gql/graphql"; +import { BrowserInfo, StoryTestFieldsFragment, TestMode } from "../gql/graphql"; type BrowserData = Pick; -type ModeData = Pick; +type ModeData = Pick; /** * Pick a single test+comparison (by viewport+browser) from a set of tests @@ -13,16 +13,12 @@ export function useTests(tests: StoryTestFieldsFragment[]) { const [selectedBrowserId, onSelectBrowserId] = useState( tests[0]?.comparisons[0].browser.id ); - const [selectedModeId, onSelectModeId] = useState( - tests[0]?.comparisons[0].viewport.id - ); + const [selectedModeName, onSelectModeName] = useState(tests[0]?.mode.name); const onSelectBrowser = useCallback(({ id }: BrowserData) => onSelectBrowserId(id), []); - const onSelectMode = useCallback(({ id }: ModeData) => onSelectModeId(id), []); - - const selectedTest = - tests.find(({ parameters }) => parameters.viewport.id === selectedModeId) || tests[0]; + const onSelectMode = useCallback(({ name }: ModeData) => onSelectModeName(name), []); + const selectedTest = tests.find(({ mode }) => mode.name === selectedModeName) || tests[0]; const selectedComparison = selectedTest?.comparisons.find(({ browser }) => browser.id === selectedBrowserId) || selectedTest?.comparisons[0]; From 28174cd86e95fd2ba1a3e1cc9e9c00a1357a6c7d Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 20 Sep 2023 14:36:43 +0200 Subject: [PATCH 2/4] Simplify stories --- src/screens/VisualTests/SnapshotComparison.stories.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/screens/VisualTests/SnapshotComparison.stories.tsx b/src/screens/VisualTests/SnapshotComparison.stories.tsx index 1c203476..70007ce5 100644 --- a/src/screens/VisualTests/SnapshotComparison.stories.tsx +++ b/src/screens/VisualTests/SnapshotComparison.stories.tsx @@ -1,6 +1,6 @@ import { action } from "@storybook/addon-actions"; import type { Meta, StoryObj } from "@storybook/react"; -import { screen, userEvent, within } from "@storybook/testing-library"; +import { userEvent, within } from "@storybook/testing-library"; import React, { ComponentProps } from "react"; import { Browser, ComparisonResult, StoryTestFieldsFragment, TestStatus } from "../../gql/graphql"; @@ -119,8 +119,6 @@ export const SwitchingViewport = { const canvas = within(canvasElement); const menu = await canvas.findByRole("button", { name: "320px" }); await userEvent.click(menu); - const items = await screen.findAllByText("1200px"); - await userEvent.click(items[canvasIndex]); }), } satisfies Story; @@ -130,8 +128,6 @@ export const SwitchingBrowser = { const canvas = within(canvasElement); const menu = await canvas.findByRole("button", { name: "Chrome" }); await userEvent.click(menu); - const items = await screen.findAllByText("Safari"); - await userEvent.click(items[canvasIndex]); }), } satisfies Story; From 6710dc66b18e889fdb9f3827f9cd5e008c92e8ca Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 20 Sep 2023 14:51:04 +0200 Subject: [PATCH 3/4] Rename story and fix hover tooltip not closing --- src/components/BrowserSelector.tsx | 1 + src/components/ModeSelector.tsx | 1 + src/screens/VisualTests/SnapshotComparison.stories.tsx | 6 +++--- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/BrowserSelector.tsx b/src/components/BrowserSelector.tsx index 2185ba70..00a3da2f 100644 --- a/src/components/BrowserSelector.tsx +++ b/src/components/BrowserSelector.tsx @@ -66,6 +66,7 @@ export const BrowserSelector = ({ ); return ( { const canvas = within(canvasElement); const menu = await canvas.findByRole("button", { name: "Chrome" }); @@ -132,7 +132,7 @@ export const SwitchingBrowser = { } satisfies Story; export const SwitchingTests = { - args: SwitchingViewport.args, + args: SwitchingMode.args, render: function RenderSwitchingTests({ ...props }: ComponentProps) { const [tests, setTests] = React.useState(); if (!tests) setTimeout(() => setTests([makeTest({})]), 0); From 0afb43301a5bb54315f7dc4857277ad0a02c9410 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 20 Sep 2023 14:52:45 +0200 Subject: [PATCH 4/4] Revert "Simplify stories" This reverts commit 28174cd86e95fd2ba1a3e1cc9e9c00a1357a6c7d. --- src/screens/VisualTests/SnapshotComparison.stories.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/screens/VisualTests/SnapshotComparison.stories.tsx b/src/screens/VisualTests/SnapshotComparison.stories.tsx index a21bffdd..feca29ab 100644 --- a/src/screens/VisualTests/SnapshotComparison.stories.tsx +++ b/src/screens/VisualTests/SnapshotComparison.stories.tsx @@ -1,6 +1,6 @@ import { action } from "@storybook/addon-actions"; import type { Meta, StoryObj } from "@storybook/react"; -import { userEvent, within } from "@storybook/testing-library"; +import { screen, userEvent, within } from "@storybook/testing-library"; import React, { ComponentProps } from "react"; import { Browser, ComparisonResult, StoryTestFieldsFragment, TestStatus } from "../../gql/graphql"; @@ -119,6 +119,8 @@ export const SwitchingMode = { const canvas = within(canvasElement); const menu = await canvas.findByRole("button", { name: "320px" }); await userEvent.click(menu); + const items = await screen.findAllByText("1200px"); + await userEvent.click(items[canvasIndex]); }), } satisfies Story; @@ -128,6 +130,8 @@ export const SwitchingBrowser = { const canvas = within(canvasElement); const menu = await canvas.findByRole("button", { name: "Chrome" }); await userEvent.click(menu); + const items = await screen.findAllByText("Safari"); + await userEvent.click(items[canvasIndex]); }), } satisfies Story;