Add Lost pixel for visual testing

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build NextJS
+        run: yarn build
+
+      - name: Serve NextJS
+        run: yarn start &
+
+      - name: Lost Pixel
+        uses: lost-pixel/[email protected]

.github/workflows/update-baselines.yml

@@ -0,0 +1,39 @@
+on: workflow_dispatch
+
+jobs:
+  lost-pixel-update:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build NextJS
+        run: yarn build
+
+      - name: Serve NextJS
+        run: yarn start &
+
+      - name: Lost Pixel
+        id: lp
+        uses: lost-pixel/[email protected]
+        env:
+          LOST_PIXEL_MODE: update
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v4
+        if: ${{ failure() && steps.lp.conclusion == 'failure' }}
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+          commit-message: update lost-pixel baselines
+          delete-branch: true
+          branch: "lost-pixel-update/${{ github.ref_name }}"
+          title: "Lost Pixel update - ${{ github.ref_name }}"
+          body: Automated baseline update PR created by Lost Pixel

lostpixel.config.ts

@@ -0,0 +1,13 @@
+import { CustomProjectConfig } from "lost-pixel";
+
+export const config: CustomProjectConfig = {
+  pageShots: {
+    pages: [
+      { path: "/", name: "app" },
+      { path: "/calibrate", name: "calibrate" },
+    ],
+    baseUrl: "http://172.17.0.1:3000",
+  },
+  generateOnly: true,
+  failOnDifference: true,
+};

package.json

@@ -50,6 +50,7 @@
     "eslint-config-prettier": "^9.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lost-pixel": "^3.21.0",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "3.2.5",

tsconfig.json

@@ -30,7 +30,8 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "types/**/*.ts",
-    "global.d.ts"
+    "global.d.ts",
+    "lostpixel.config.ts"
   ],
   "exclude": ["node_modules"]
 }