add visual regression testing (#132)

* add basic visual regression testing

* store test cases in json array

this will make it easier to test URLs with ?query=params

* Run the tests in CI

* add a test case for FTB style with long text

* purposely break the build

* Revert "purposely break the build"

This reverts commit 6b0d8d7.

.gitattributes

@@ -1 +1,2 @@
-* text eol=lf
+* text eol=lf
+*.png binary

.github/workflows/pr.yml

@@ -94,3 +94,46 @@ jobs:
         uses: actions-rs/cargo@v1
         with:
           command: build
+
+  visual-regression-tests:
+    name: visual-regression-tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node JS 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install jq
+        run: |
+          sudo apt-get -qq update
+          sudo apt-get install -y jq
+
+      - name: Build Docker Image
+        run: docker build . -t squint-local
+
+      - name: Start Squint Container
+        run: docker run -d -p 3001:3001 --name local-squint-container squint-local
+
+      - name: Install testing packages
+        run: |
+          cd visual_regression_testing
+          npm ci
+
+      - name: Run Visual Regression Tests
+        run: |
+          cd visual_regression_testing
+          ./compare.sh
+
+      - name: Archive diffs
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: diffs
+          path: visual_regression_testing/diffs
+
+      - name: Stop Squint Container
+        run: docker stop local-squint-container

.gitignore

@@ -1,3 +1,6 @@
 /target
 ra-*.log
 rls*.log
+visual_regression_testing/diffs
+visual_regression_testing/node_modules
+visual_regression_testing/test_images

visual_regression_testing/compare.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+set -euo pipefail
+
+rm -rf test_images
+mkdir -p test_images
+
+rm -rf diffs
+mkdir -p diffs
+
+readarray -t test_cases < <(jq -c '.[]' test_cases.json)
+
+# from this point on, continue even if something fails
+# we want to continue testing further reference_images, even if one fails
+set +e
+
+exitcode=0
+for test_case in "${test_cases[@]}"; do
+    url=$(jq -r '.url' <<< "$test_case")
+    filename=$(jq -r '.filename' <<< "$test_case")
+    echo "Testing: $filename";
+    curl "$url" --silent -o "test_images/$filename"
+    if ./node_modules/.bin/pixelmatch "test_images/$filename" "reference_images/$filename" "diffs/$filename"; then
+        # if the images were exactly the same, discard the diff
+        rm "diffs/$filename"
+    else
+        # one or more images has failed
+        exitcode=1
+    fi
+    echo ""
+done
+
+exit $exitcode

visual_regression_testing/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "pixelmatch": "^5.3.0"
+  }
+}

visual_regression_testing/test_cases.json

@@ -0,0 +1,30 @@
+[
+  {
+    "url": "http://localhost:3001/badge/build-passing-brightgreen.png",
+    "filename": "build-passing-brightgreen.png"
+  },
+  {
+    "url": "http://localhost:3001/badge/emoji-%E2%9D%A4%EF%B8%8F-blue.png",
+    "filename": "emoji-❤️-blue.png"
+  },
+  {
+    "url": "http://localhost:3001/badge/emoji-%F0%9F%87%B3%F0%9F%87%B4-blue.png",
+    "filename": "emoji-🇳🇴-blue.png"
+  },
+  {
+    "url": "http://localhost:3001/badge/emoji-%F0%9F%91%8D-blue.png",
+    "filename": "emoji-👍-blue.png"
+  },
+  {
+    "url": "http://localhost:3001/badge/emoji-%F0%9F%99%82-blue.png",
+    "filename": "emoji-🙂-blue.png"
+  },
+  {
+    "url": "http://localhost:3001/badge/%E3%83%A9%E3%83%99%E3%83%AB-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8-lightgrey.png",
+    "filename": "ラベル-メッセージ-lightgrey.png"
+  },
+  {
+    "url": "http://localhost:3001/badge/foo-barfffffffffffffffffffffffffffffffffffffjfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff-orange.png?style=for-the-badge",
+    "filename": "FTB-foo-barfffffffffffffffffffffffffffffffffffffjfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff-orange.png"
+  }
+]