Docs: Try to add visual-test results to CI

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   test:
     name: Tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest-large
     strategy:
       matrix:
         node_version: [16, 18]

.github/workflows/visual-test.yml

@@ -0,0 +1,41 @@
+name: Visual Test Results
+permissions:
+  contents: write
+  pull-requests: write
+  issues: write
+on:
+  pull_request:
+    branches:
+      - master
+  push:
+    branches:
+      - master
+jobs:
+  playwright-run:
+    name: Visual Test
+    timeout-minutes: 60
+    runs-on: macos-latest-xlarge
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Install Playwright
+        run: npx playwright install --with-deps chromium
+      - name: Build
+        run: yarn build
+      - name: Run your tests
+        id: results
+        uses: mathiasvr/[email protected]
+        with:
+          run: npx playwright test playwright/visual-test --config=playwright/playwright.config.js --workers=2 --retries=2 --quiet --reporter='playwright/reporters/reporter.js' || true
+      - name: Comment PR with execution number
+        uses: mshick/add-pr-comment@v2
+        with:
+          message: |
+            ${{ steps.results.outputs.stdout }}
+          message-id: visual-test
+          proxy-url: https://ravi-gh-comment-proxy.deno.dev

docs/pages/visual-test/ChartGraph-dark.js

@@ -1,37 +1,48 @@
 // @flow strict
 import { type Node as ReactNode } from 'react';
+import dynamic from 'next/dynamic';
 import { Box, ColorSchemeProvider } from 'gestalt';
 import { ChartGraph } from 'gestalt-charts';
 
+function NoSsr(props: { children: ReactNode }) {
+  return <div> {props.children} </div>;
+}
+
+const NoSSR = dynamic(() => Promise.resolve(NoSsr), {
+  ssr: false,
+});
+
 export default function Snapshot(): ReactNode {
   return (
-    <ColorSchemeProvider colorScheme="dark">
-      <Box width={200}>
-        <ChartGraph
-          accessibilityLabel="Example of Bar chart"
-          visualPatternSelected="default"
-          onVisualPatternChange={() => {}}
-          type="bar"
-          title="Title"
-          description="Description"
-          legend="auto"
-          data={[
-            {
-              name: 'A',
-              'Series_01': 100,
-            },
-            {
-              name: 'B',
-              'Series_01': 200,
-            },
-            {
-              name: 'C',
-              'Series_01': 300,
-            },
-          ]}
-          elements={[{ type: 'bar', id: 'Series_01' }]}
-        />
-      </Box>
-    </ColorSchemeProvider>
+    <NoSSR>
+      <ColorSchemeProvider colorScheme="dark">
+        <Box width={200}>
+          <ChartGraph
+            accessibilityLabel="Example of Bar chart"
+            visualPatternSelected="default"
+            onVisualPatternChange={() => {}}
+            type="bar"
+            title="Title"
+            description="Description"
+            legend="auto"
+            data={[
+              {
+                name: 'A',
+                'Series_01': 100,
+              },
+              {
+                name: 'B',
+                'Series_01': 200,
+              },
+              {
+                name: 'C',
+                'Series_01': 300,
+              },
+            ]}
+            elements={[{ type: 'bar', id: 'Series_01' }]}
+          />
+        </Box>
+      </ColorSchemeProvider>
+    </NoSSR>
   );
 }

docs/pages/visual-test/ChartGraph-light.js

@@ -1,37 +1,48 @@
 // @flow strict
 import { type Node as ReactNode } from 'react';
+import dynamic from 'next/dynamic';
 import { Box, ColorSchemeProvider } from 'gestalt';
 import { ChartGraph } from 'gestalt-charts';
 
+function NoSsr(props: { children: ReactNode }) {
+  return <div> {props.children} </div>;
+}
+
+const NoSSR = dynamic(() => Promise.resolve(NoSsr), {
+  ssr: false,
+});
+
 export default function Snapshot(): ReactNode {
   return (
-    <ColorSchemeProvider colorScheme="light">
-      <Box width={200}>
-        <ChartGraph
-          accessibilityLabel="Example of Bar chart"
-          visualPatternSelected="default"
-          onVisualPatternChange={() => {}}
-          type="bar"
-          title="Title"
-          description="Description"
-          legend="auto"
-          data={[
-            {
-              name: 'A',
-              'Series_01': 100,
-            },
-            {
-              name: 'B',
-              'Series_01': 200,
-            },
-            {
-              name: 'C',
-              'Series_01': 300,
-            },
-          ]}
-          elements={[{ type: 'bar', id: 'Series_01' }]}
-        />
-      </Box>
-    </ColorSchemeProvider>
+    <NoSSR>
+      <ColorSchemeProvider colorScheme="light">
+        <Box width={200}>
+          <ChartGraph
+            accessibilityLabel="Example of Bar chart"
+            visualPatternSelected="default"
+            onVisualPatternChange={() => {}}
+            type="bar"
+            title="Title"
+            description="Description"
+            legend="auto"
+            data={[
+              {
+                name: 'A',
+                'Series_01': 100,
+              },
+              {
+                name: 'B',
+                'Series_01': 200,
+              },
+              {
+                name: 'C',
+                'Series_01': 300,
+              },
+            ]}
+            elements={[{ type: 'bar', id: 'Series_01' }]}
+          />
+        </Box>
+      </ColorSchemeProvider>
+    </NoSSR>
   );
 }

playwright/reporters/reporter.js

@@ -0,0 +1,65 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+const FailedRuns = {};
+let startTime = 0;
+class MyReporter {
+  onBegin(config, suite) {
+    console.log(`This is an automated test report`);
+    console.log(`Running ${suite.allTests().length} tests`);
+    startTime = new Date().getTime();
+  }
+
+  onTestBegin() {}
+
+  onTestEnd(test, result) {
+    if (result.status === 'failed') {
+      // get the first word of the test title
+      const title = test.title.split(' ')[0];
+      FailedRuns[title] = test;
+    }
+  }
+
+  onEnd() {
+    // duration
+    const endTime = new Date().getTime();
+    const duration = endTime - startTime;
+    // get duration in minutes and seconds
+    const minutes = Math.floor(duration / 60000);
+    const seconds = ((duration % 60000) / 1000).toFixed(0);
+
+    if (Object.keys(FailedRuns).length > 0) {
+      console.log(`### Failed Visual Snapshots ❌`);
+      console.log('-----------------------------------');
+      console.log(
+        'Note: These test failures may or may not be related to your changes. They are not blocking.',
+      );
+
+      console.log('');
+      console.log(Object.keys(FailedRuns).length, ' failed visual tests:');
+
+      Object.keys(FailedRuns).forEach((title) => {
+        console.log(`- ${title}`);
+      });
+
+      console.log(`To see the failed tests, run the following command locally:`);
+      console.log(`\`yarn run playwright:visual-test test --ui\``);
+
+      console.log('');
+      console.log('');
+
+      console.log(`To update failed tests, run`);
+      console.log(`\`yarn run playwright:visual-test --update-snapshots\``);
+
+      console.log('');
+
+      console.log(`Total Test Run Time: ${minutes}m ${seconds}s`);
+    } else {
+      console.log(`All visual tests passed ✅`);
+      console.log(`Total Test Run Time: ${minutes}m  ${seconds}s`);
+    }
+  }
+}
+
+export default MyReporter;