chore: create a github workflow that runs percy on the latest website deploy for VRT baseline (twilio-labs#2677)

Author: SiTaggart

.github/workflows/on_merge_to_main.yml

@@ -183,3 +183,91 @@ jobs:
           exitOnceUploaded: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
+
+  # run this job first to create a single timestamped id for all percy batches on parallel machines
+  percy-batch-id:
+    runs-on: ubuntu-latest
+    # persist job results to other jobs in the workflow
+    outputs:
+      result: ${{ steps.percy-batch-id.outputs.result }}
+    steps:
+      # persist step results to other steps in the job
+      - name: Create Percy Batch ID
+        id: percy-batch-id
+        # adding a timestamp makes the batch id more unique for re-runs
+        run: echo "::set-output name=result::${{ github.run_id }}-$(date +%s)"
+
+  # run cypress against main so we can create Percy baselines with the latest code
+  cypress:
+    name: Website tests
+    runs-on: ubuntu-latest
+    needs: percy-batch-id
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2, 3]
+    env:
+      CYPRESS_CACHE_FOLDER: ./node_modules/cypress
+      CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      USE_CYPRESS_VRT: true
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 16.13
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.13.x
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - name: Percy Batch ID
+        run: echo "${{ needs.percy-batch-id.outputs.result }}"
+
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        id: yarn_cache_id
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn
+
+      - name: Node modules cache
+        uses: actions/cache@v2
+        id: node_modules_cache_id
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install Dependencies
+        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
+        run: yarn install --immutable
+
+      - name: Wait for Netlify
+        uses: hharnisc/[email protected]
+        id: waitForDeployment
+        with:
+          site_id: ${{ secrets.NETLIFY_SITE_ID }}
+        env:
+          NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
+
+      - name: Cypress run with site VRT
+        uses: cypress-io/[email protected]
+        with:
+          record: true
+          parallel: true
+          group: "Paste Actions with VRT Parallel"
+          config: baseUrl=${{ steps.waitForDeployment.outputs.url }}
+          # enabled percy to run cypress for VRT
+          command-prefix: "percy exec --parallel -- npx"
+        env:
+          PERCY_PARALLEL_NONCE: ${{ needs.percy-batch-id.outputs.result }}
+          PERCY_PARALLEL_TOTAL: 3

.github/workflows/on_pull_request_cypress.yml

@@ -80,7 +80,7 @@ jobs:
           NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
 
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4.2.0
         if: ${{ !contains(github.event.pull_request.labels.*.name, '🕵🏻‍♀️ Run website visual regression') }}
         with:
           record: true
@@ -89,7 +89,7 @@ jobs:
           config: baseUrl=${{ steps.waitForDeployment.outputs.url }}
 
       - name: Cypress run with site VRT
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4.2.0
         if: ${{ contains(github.event.pull_request.labels.*.name, '🕵🏻‍♀️ Run website visual regression') }}
         with:
           record: true

cypress.config.ts

@@ -0,0 +1,29 @@
+import {defineConfig} from 'cypress';
+
+// eslint-disable-next-line import/no-default-export
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8000',
+    env: {
+      USE_CYPRESS_VRT: process.env.USE_CYPRESS_VRT,
+    },
+    viewportWidth: 1440,
+    viewportHeight: 1020,
+    projectId: 'pe4h41',
+    retries: {
+      runMode: 2,
+      openMode: 2,
+    },
+    video: false,
+    blockHosts: [
+      '*.google-analytics.com',
+      '*.codesandbox.io',
+      'codesandbox.io',
+      '*.loom.com',
+      '*.youtube.com',
+      '*.github.com',
+      '*.googletagmanager.com',
+    ],
+    specPattern: ['cypress/**/*.spec.ts'],
+  },
+});

cypress.json

@@ -1,2 +1 @@
-import './child-commands';
 import './parent-commands';

cypress/plugins/index.js

@@ -1,4 +1,4 @@
-import {DEFAULT_VRT_OPTIONS, vrtIsEnabled} from 'support/utils/vrt';
+import {DEFAULT_VRT_OPTIONS, vrtIsEnabled} from '../utils/vrt';
 
 /**
  * @file Custom parent commands
@@ -108,6 +108,13 @@ Cypress.Commands.add('visualRegressionTestUrl', ({url, testName}) => {
       ...DEFAULT_VRT_OPTIONS,
     };
 
+    // Date and time pickers, and anywhere that displays the current date and time
+    // Will cause a VRT diff every time it is run as the time is always changing
+    // By freezing the date we can guarantee that displayed current date and time never
+    // changes across snapshots
+    const now = new Date(2018, 1, 1);
+    cy.clock(now);
+
     // Take a snapshot for visual diffing
     cy.log(`[VRT]: Taking snapshot with these params: ${vrtOptions}`);
     cy.percySnapshot(testName, vrtOptions);

cypress/support/commands/child-commands.ts

@@ -1,11 +1,13 @@
 {
   "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
     "strict": true,
     "target": "es5",
     "lib": ["es2017", "DOM"],
     "types": ["cypress", "@percy/cypress"],
     "baseUrl": ".",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "isolatedModules": false
   },
   "include": ["./**/*.ts"],
   "exclude": ["node_modules/**/*"]

cypress/support/commands/dual-commands.ts

@@ -174,7 +174,7 @@
     "concurrently": "^4.1.1",
     "cross-env": "^5.2.0",
     "csstype": "3.0.11",
-    "cypress": "9.3.1",
+    "cypress": "10.8.0",
     "danger": "^10.6.6",
     "del": "^5.1.0",
     "directory-named-webpack-plugin": "^4.0.1",

cypress/support/commands/index.ts

@@ -137,6 +137,7 @@
     "react-scrollspy": "^3.4.0",
     "react-visibility-sensor": "5.1.1",
     "rollbar": "^2.25.0",
+    "typescript": "^4.6.4",
     "use-resize-observer": "^7.0.0",
     "winston": "^3.8.1"
   },

cypress/support/commands/override-commands.ts

@@ -5,6 +5,7 @@ import type {ThemeShape} from '@twilio-paste/theme';
 import {ColorSwatchText} from '../components/color-swatch/ColorSwatch';
 import {ImageCaption} from '../components/ImageCaption';
 import {StyledSwatchGrid} from './ColorsFoundationExamples';
+import {inCypress} from '../utils/inCypress';
 
 interface TokenData {
   name: string;
@@ -36,7 +37,7 @@ export const DataVizColorSwatches: React.FC = () => {
     <Box as="ul" margin="space0" padding="space0" marginBottom="space70">
       <StyledSwatchGrid numberColumns={5}>
         {dataVizTokenValues.map(({name, value}) => (
-          <Box as="li" listStyleType="none">
+          <Box as="li" listStyleType="none" key={`${name}-${value}`}>
             <StyledSwatch backgroundColor={value} />
             <ColorSwatchText>{name}</ColorSwatchText>
           </Box>
@@ -63,24 +64,33 @@ export const LineChartCaption: React.FC = () => (
 export const LineChartOptions = {
   title: {text: 'Solar Employment Growth by Sector, 2010-2016'},
   subtitle: {text: 'Source: thesolarfoundation.com'},
+  chart: {
+    //this controls animation of updates, to disable animation on initial render you have to disable animation on the series
+    animation: !inCypress(),
+  },
   series: [
     {
+      animation: !inCypress(),
       name: 'Installation',
       data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
     },
     {
+      animation: !inCypress(),
       name: 'Manufacturing',
       data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
     },
     {
+      animation: !inCypress(),
       name: 'Sales & Distribution',
       data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
     },
     {
+      animation: !inCypress(),
       name: 'Project Development',
       data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
     },
     {
+      animation: !inCypress(),
       name: 'Other',
       data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
     },

cypress/support/commands/parent-commands.ts

@@ -5,6 +5,7 @@ import {useReducedMotion} from '@twilio-paste/animation-library';
 import lottie from 'lottie-web';
 import VisibilitySensor from 'react-visibility-sensor';
 import HomeHeroIllu from '../../assets/illustrations/home_hero.svg';
+import {inCypress} from '../../utils/inCypress';
 
 const IllustrationStates = {
   UNINITIALIZED: 0, // This is SSR too
@@ -32,7 +33,9 @@ const IllustrationChildren: React.FC<{state: IllustrationStatesType}> = ({state}
  * - If prefers reduced motion, render static.
  */
 const HomeHeroIllustration: React.FC = () => {
-  const prefersReducedMotion = useReducedMotion();
+  // lottie doesn't honour our disableAnimations global, so we have to
+  // manually detect running in cypress to stop the animation on the homepage
+  const prefersReducedMotion = useReducedMotion() || inCypress();
   const containerRef = React.useRef(null);
   const [illustrationState, setIllustrationState] = React.useState(IllustrationStates.UNINITIALIZED);
 

cypress/support/index.ts renamed to cypress/support/e2e.ts

@@ -10,6 +10,7 @@ import {SkipLinkContainer} from '../SkipLinkContainer';
 import {PASTE_DOCS_CONTENT_AREA, PASTE_DOCS_SEARCH_INPUT, SITE_BREAKPOINTS} from '../../constants';
 import type {NavigationQuery} from '../../context/NavigationContext';
 import {DarkModeContext} from '../../context/DarkModeContext';
+import {inCypress} from '../../utils/inCypress';
 
 const pageQuery = graphql`
   {
@@ -78,7 +79,7 @@ const SiteWrapper: React.FC<SiteWrapperProps> = ({pathname, children}) => {
   const [theme, toggleMode, componentMounted] = useDarkMode();
 
   return (
-    <Theme.Provider theme={theme} customBreakpoints={SITE_BREAKPOINTS}>
+    <Theme.Provider theme={theme} customBreakpoints={SITE_BREAKPOINTS} disableAnimations={inCypress()}>
       <NavigationContext.Provider value={{...navigationQueryData, pathname}}>
         <DarkModeContext.Provider value={{theme, toggleMode, componentMounted}}>
           <SkipLinkContainer>

cypress/tsconfig.json

@@ -5,7 +5,7 @@ import toLower from 'lodash/toLower';
 import {useLocation} from '@reach/router';
 import {PASTE_PACKAGE_PREFIX, SidebarCategoryRoutes} from '../constants';
 
-const hasWindowObject = (): boolean => typeof window !== `undefined` && window.location != null;
+export const hasWindowObject = (): boolean => typeof window !== `undefined` && window.location != null;
 
 // Gets the current browser pathname
 export function useLocationPathname(): string {

package.json

@@ -0,0 +1,8 @@
+import {hasWindowObject} from './RouteUtils';
+
+export const inCypress = (): boolean => {
+  if (hasWindowObject() && window.Cypress) {
+    return true;
+  }
+  return false;
+};

packages/paste-website/package.json

@@ -1,3 +1,7 @@
+interface Window {
+  Cypress: Record<string, string>;
+}
+
 declare module "*.svg" {
   const content: any;
   export default content;

packages/paste-website/src/component-examples/DataVisualizationExamples.tsx

@@ -26,7 +26,14 @@
     "resolveJsonModule": true,
     "esModuleInterop": true
   },
-  "include": ["packages/**/*", "dangerfile.ts", ".danger/**/*", "./.jest/@types/index.d.ts", "tools/**/*"],
+  "include": [
+    "packages/**/*",
+    "dangerfile.ts",
+    ".danger/**/*",
+    "./.jest/@types/index.d.ts",
+    "tools/**/*",
+    "cypress.config.ts"
+  ],
   "exclude": [
     "node_modules",
     "docs",