Merge pull request #33 from chromaui/tom/ap-3491-skipped-stories-erro…

…r-in-the-addon Don't show the `SnapshotComparison` for skipped stories
chromaui · Aug 22, 2023 · f8c5cdb · f8c5cdb
2 parents 72ac564 + fae4ce8
commit f8c5cdb
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 2 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,7 +1,11 @@
 import { Button as BaseButton } from "@storybook/components";
 import { css, styled } from "@storybook/theming";
 
-export const Button = styled(BaseButton)<{ link?: boolean; tertiary?: boolean }>(
+export const Button = styled(BaseButton)<{
+  link?: boolean;
+  tertiary?: boolean;
+  belowText?: boolean;
+}>(
   {
     "&&": {
       display: "inline-flex",
@@ -35,5 +39,9 @@ export const Button = styled(BaseButton)<{ link?: boolean; tertiary?: boolean }>
     tertiary &&
     css({
       "&&:hover": { boxShadow: "none" },
-    })
+    }),
+  ({ belowText }) =>
+    belowText && {
+      "margin-top": "7px",
+    }
 );
diff --git a/src/screens/VisualTests/VisualTests.stories.tsx b/src/screens/VisualTests/VisualTests.stories.tsx
@@ -25,6 +25,14 @@ const tests = [
     viewport: 1200,
     storyId: "button--secondary",
   }),
+  makeTest({
+    id: "31",
+    status: TestStatus.Passed,
+    result: TestResult.Skipped,
+    browsers,
+    viewport: 1200,
+    storyId: "button--tertiary",
+  }),
 ];
 
 const paginated = (nodes: TestFieldsFragment[]) => ({
@@ -290,6 +298,18 @@ export const Accepted: Story = {
   },
 };
 
+export const Skipped: Story = {
+  args: {
+    storyId: "button--tertiary",
+  },
+  parameters: {
+    ...withBuild(pendingBuild),
+    ...withFigmaDesign(
+      "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2255-42087&t=a8NRPgQk3kXMyxqZ-0"
+    ),
+  },
+};
+
 export const CaptureError: Story = {
   parameters: {
     ...withBuild(brokenBuild),

diff --git a/src/screens/VisualTests/VisualTests.tsx b/src/screens/VisualTests/VisualTests.tsx
@@ -21,6 +21,7 @@ import {
   ReviewTestBatch,
   ReviewTestInputStatus,
   TestFieldsFragment,
+  TestResult,
 } from "../../gql/graphql";
 import { StatusUpdate, testsToStatusUpdate } from "../../utils/testsToStatusUpdate";
 import { RenderSettings } from "./RenderSettings";
@@ -303,6 +304,37 @@ export const VisualTests = ({
   const startedAt = "startedAt" in build && build.startedAt;
   const isBuildFailed = build.status === BuildStatus.Failed;
 
+  // It shouldn't be possible for one test to be skipped but not all of them
+  const isSkipped = !!tests?.find((t) => t.result === TestResult.Skipped);
+  if (isSkipped) {
+    return (
+      <Sections>
+        <Section grow>
+          <Container>
+            <Heading>This story was skipped</Heading>
+            <CenterText>
+              If you would like to resume testing it, comment out or remove
+              `parameters.chromatic.disableSnapshot = true` from the CSF file.
+            </CenterText>
+            <Button
+              belowText
+              small
+              tertiary
+              containsIcon
+              // @ts-expect-error Button component is not quite typed properly
+              target="_new"
+              isLink
+              href="https://www.chromatic.com/docs/ignoring-elements#ignore-stories"
+            >
+              <Icons icon="document" />
+              View Docs
+            </Button>
+          </Container>
+        </Section>
+      </Sections>
+    );
+  }
+
   return (
     <Sections>
       <Section grow hidden={settingsVisible || warningsVisible}>

diff --git a/src/utils/storyData.ts b/src/utils/storyData.ts
@@ -92,6 +92,10 @@ export function makeTest(options: {
   const viewportWidth = options.viewport || 1200;
 
   function generateComparisons() {
+    if (result === TestResult.Skipped) {
+      return [];
+    }
+
     const browsers = options.browsers || [Browser.Chrome];
 
     if (options.comparisonResults && options.comparisonResults.length !== browsers.length) {