Merge pull request #379 from chromaui/update-graphql-schema

Update GraphQL schema and handle `ComparisonResult.SKIPPED` value

Author: ghengeveld

eslint.config.mjs

@@ -22,6 +22,7 @@ export default [
   ),
   {
     files: ['**/*.ts', '**/*.tsx'],
+    ignores: ['**/node_modules/**', '**/coverage/**', '**/dist/**', '**/src/gql/**'],
     plugins: {
       'simple-import-sort': simpleImportSort,
     },

src/components/BrowserSelector.stories.ts

@@ -63,6 +63,18 @@ export const WithSingleBrowserEqual: Story = {
   },
 };
 
+export const WithSingleBrowserSkipped: Story = {
+  args: {
+    selectedBrowser: browserChrome,
+    browserResults: [
+      {
+        browser: browserChrome,
+        result: ComparisonResult.Skipped,
+      },
+    ],
+  },
+};
+
 export const WithSingleBrowserError: Story = {
   args: {
     selectedBrowser: browserChrome,

src/components/BrowserSelector.tsx

@@ -71,7 +71,11 @@ export const BrowserSelector = ({
   if (!aggregate) return null;
 
   let icon = browserIcons[selectedBrowser.key];
-  if (!isAccepted && aggregate !== ComparisonResult.Equal && browserResults.length >= 2) {
+  if (
+    !isAccepted &&
+    ![ComparisonResult.Equal, ComparisonResult.Skipped].includes(aggregate) &&
+    browserResults.length >= 2
+  ) {
     icon = <StatusDotWrapper status={aggregate}>{icon}</StatusDotWrapper>;
   }
 
@@ -84,7 +88,10 @@ export const BrowserSelector = ({
         active: selectedBrowser === browser,
         id: browser.id,
         onClick: () => onSelectBrowser(browser),
-        right: !isAccepted && result !== ComparisonResult.Equal && <StatusDot status={result} />,
+        right: !isAccepted &&
+          ![ComparisonResult.Equal, ComparisonResult.Skipped].includes(aggregate) && (
+            <StatusDot status={result} />
+          ),
         icon: browserIcons[browser.key],
         title: browser.name,
       })

src/components/ModeSelector.stories.ts

@@ -59,6 +59,18 @@ export const WithSingleViewportEqual: Story = {
   },
 };
 
+export const WithSingleViewportSkipped: Story = {
+  args: {
+    selectedMode: viewport1200Px,
+    modeResults: [
+      {
+        mode: viewport1200Px,
+        result: ComparisonResult.Skipped,
+      },
+    ],
+  },
+};
+
 export const WithSingleViewportError: Story = {
   args: {
     selectedMode: viewport1200Px,

src/components/ModeSelector.tsx

@@ -82,7 +82,11 @@ export const ModeSelector = ({
   if (!aggregate) return null;
 
   let icon = <DiamondIcon />;
-  if (!isAccepted && aggregate !== ComparisonResult.Equal && modeResults.length >= 2) {
+  if (
+    !isAccepted &&
+    ![ComparisonResult.Equal, ComparisonResult.Skipped].includes(aggregate) &&
+    modeResults.length >= 2
+  ) {
     icon = <StatusDotWrapper status={aggregate}>{icon}</StatusDotWrapper>;
   }
 
@@ -92,7 +96,10 @@ export const ModeSelector = ({
       .map(({ mode, result }) => ({
         id: mode.name,
         title: mode.name,
-        right: !isAccepted && result !== ComparisonResult.Equal && <StatusDot status={result} />,
+        right: !isAccepted &&
+          ![ComparisonResult.Equal, ComparisonResult.Skipped].includes(aggregate) && (
+            <StatusDot status={result} />
+          ),
         onClick: () => onSelectMode(mode),
         active: selectedMode.name === mode.name,
       }))

src/components/StatusDot.tsx

@@ -23,6 +23,7 @@ const Dot = styled.div<StatusDotProps & { overlay?: boolean }>(
         [TestStatus.Denied]: theme.color.positive,
         [TestStatus.Broken]: theme.color.negative,
         [TestStatus.Failed]: theme.color.negative,
+        [ComparisonResult.Skipped]: 'transparent',
         [ComparisonResult.Equal]: theme.color.positive,
         [ComparisonResult.Fixed]: theme.color.positive,
         [ComparisonResult.Added]: theme.color.gold,

src/gql/graphql.ts

@@ -490,7 +490,7 @@ type Test implements Node & Temporal {
   parameters: TestParameters!
 
   """
-  The mode applied to this test. If this test was not using modes, the viewport is set as the mode name (e.g. "[viewport]px") 
+  The mode applied to this test. If this test was not using modes, the viewport is set as the mode name (e.g. "[viewport]px")
   """
   mode: TestMode!
 
@@ -559,6 +559,9 @@ enum ComparisonResult {
 
   """Either the head capture or the diff failed due to a system error."""
   SYSTEM_ERROR
+
+  """We didn't capture the story as it was skipped"""
+  SKIPPED
 }
 
 type ViewportInfo {
@@ -657,6 +660,12 @@ enum CaptureErrorKind {
   """The page took too long to load."""
   NAVIGATION_TIMEOUT
 
+  """The Storybook render took too long to complete."""
+  RENDER_TIMEOUT
+
+  """The interaction test took too long to complete."""
+  INTERACTION_TEST_TIMEOUT
+
   """The page does not contain (valid) JavaScript."""
   NO_JS
 
@@ -1461,6 +1470,38 @@ type CaptureErrorScreenshotTimeout implements CaptureError {
   screenshotTimeoutMs: Int!
 }
 
+type CaptureErrorTimeoutType implements CaptureError {
+  """The ID of the capture error."""
+  id: ID!
+
+  """The kind of capture error."""
+  kind: CaptureErrorKind!
+}
+
+type CaptureErrorRenderTimeout implements CaptureError {
+  """The ID of the capture error."""
+  id: ID!
+
+  """The kind of capture error."""
+  kind: CaptureErrorKind!
+
+  """The maximum number of milliseconds allowed for a story to render."""
+  timeoutMs: Int!
+}
+
+type CaptureErrorInteractionTestTimeout implements CaptureError {
+  """The ID of the capture error."""
+  id: ID!
+
+  """The kind of capture error."""
+  kind: CaptureErrorKind!
+
+  """
+  The maximum number of milliseconds allowed for interaction tests to run.
+  """
+  timeoutMs: Int!
+}
+
 type Query {
   account(id: ID!): Account
   build(id: ID!): Build

src/gql/public-schema.graphql

@@ -2,6 +2,7 @@ import { ComparisonResult } from '../gql/graphql';
 
 export const resultOrder = [
   undefined,
+  ComparisonResult.Skipped,
   ComparisonResult.Equal,
   ComparisonResult.Fixed,
   ComparisonResult.Added,

src/utils/aggregateResult.ts

@@ -18,7 +18,8 @@ const useGlobalValue = (key: string) => {
 };
 
 const hasChanges = ({ result }: StoryTestFieldsFragment['comparisons'][number]) =>
-  result !== ComparisonResult.Equal && result !== ComparisonResult.Fixed;
+  result &&
+  ![ComparisonResult.Equal, ComparisonResult.Fixed, ComparisonResult.Skipped].includes(result);
 
 /**
  * Select the initial test based on the following criteria (in order of priority):