infra: Add screenshot testing on PRs (#14)

* infra: Add screenshot testing on PRs

Uses Vitest, Browser Test Tools and jest-image-snapshot to create
snapshots of dev pages and comparing results with previous captured
results from main branch.

* infra: Label workflow results

* chore: Remove unused file + set base wdio url

Author: FlorianDr

.eslintrc

@@ -15,24 +15,52 @@
       "jsx": true
     }
   },
-  "plugins": ["unicorn", "react-hooks", "no-unsanitized", "header"],
+  "plugins": [
+    "unicorn",
+    "react-hooks",
+    "no-unsanitized",
+    "header"
+  ],
   "rules": {
     "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
+    "@typescript-eslint/consistent-type-definitions": [
+      "error",
+      "interface"
+    ],
     "react/react-in-jsx-scope": "off",
     "react/no-danger": "error",
-    "react/no-unstable-nested-components": ["error", { "allowAsProps": true }],
-    "react/forbid-component-props": ["warn", { "forbid": ["className", "id"] }],
-    "react/jsx-boolean-value": ["error", "always"],
+    "react/no-unstable-nested-components": [
+      "error",
+      {
+        "allowAsProps": true
+      }
+    ],
+    "react/forbid-component-props": [
+      "warn",
+      {
+        "forbid": [
+          "className",
+          "id"
+        ]
+      }
+    ],
+    "react/jsx-boolean-value": [
+      "error",
+      "always"
+    ],
     "@typescript-eslint/naming-convention": [
       "error",
       {
         "selector": "typeLike",
-        "format": ["PascalCase"]
+        "format": [
+          "PascalCase"
+        ]
       }
     ],
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": ["error"],
+    "react-hooks/exhaustive-deps": [
+      "error"
+    ],
     "unicorn/filename-case": "error",
     "curly": "error",
     "dot-notation": "error",
@@ -42,7 +70,10 @@
     "header/header": [
       "error",
       "line",
-      [" Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.", " SPDX-License-Identifier: Apache-2.0"]
+      [
+        " Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.",
+        " SPDX-License-Identifier: Apache-2.0"
+      ]
     ]
   },
   "settings": {
@@ -56,7 +87,10 @@
   },
   "overrides": [
     {
-      "files": ["**/__integ__/**"],
+      "files": [
+        "**/__integ__/**",
+        "./test/**"
+      ],
       "rules": {
         // useBrowser is not a React hook
         "react-hooks/rules-of-hooks": "off",
@@ -65,6 +99,15 @@
       "env": {
         "jest": true
       }
+    },
+    {
+      "files": [
+        "./pages/**"
+      ],
+      "rules": {
+        "react/react-in-jsx-scope": 2,
+        "react/jsx-uses-react": 2
+      }
     }
   ]
-}
+}

.github/workflows/visual-regression.yml

@@ -0,0 +1,59 @@
+name: Visual Regressions
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+env:
+  VISUAL_REGRESSION_SNAPSHOT_DIRECTORY: '__image_snapshots__'
+
+jobs:
+  test:
+    name: Run Tests
+    runs-on: ubuntu-latest
+    if: github.event.ref != 'refs/head/main'
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 14
+          cache: 'npm'
+      - name: "Download artifacts"
+        # Turns out you can not use artifacts from a previous workflow run.
+        # I'm reluctant to check in the resulting screenshots into the repository, 
+        # which is why we use the following hack, until it's solved on Github side: 
+        # https://github.com/actions/download-artifact/issues/3
+        run: |
+          RUN_ID=`gh run --repo $GITHUB_REPOSITORY --branch main list --workflow "Visual Regressions" --json databaseId --jq .[0].databaseId`
+          echo "Downloading snapshots created in run ${RUN_ID}"
+          gh run --repo $GITHUB_REPOSITORY download ${RUN_ID} -n "visual-regression-snapshots" -D ${{ env.VISUAL_REGRESSION_SNAPSHOT_DIRECTORY }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}          
+      - run: npm install
+      - run: npm run build
+      - run: npm run test:e2e
+      - uses: actions/upload-artifact@v3
+        with:
+          name: visual-regression-snapshots-results
+          path: ${{ env.VISUAL_REGRESSION_SNAPSHOT_DIRECTORY }}
+  update:
+    name: Update Snapshots
+    runs-on: ubuntu-latest
+    if: github.event.ref == 'refs/head/main'
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 14
+          cache: 'npm'
+      - run: npm install
+      - run: npm run build
+      - run: npm run test:e2e:update
+      - uses: actions/upload-artifact@v3
+        with:
+          name: visual-regression-snapshots
+          path: ${{ env.VISUAL_REGRESSION_SNAPSHOT_DIRECTORY }}

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 coverage
 lib
+/__image_snapshots__
+/pages/dist