Adding Visual Test Report in Github Actions

.github/workflows/ci-test.yml

@@ -24,10 +24,28 @@ jobs:
         env:
           CI: true
       - name: build and test
+        id: test
         run: npm test
+        continue-on-error: true
         env:
           CI: true
+      - name: Generate Visual Test Report
+        if: always()
+        run: node visual-report.js
+        env:
+          CI: true
+      - name: Upload Visual Test Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: visual-test-report
+          path: test/unit/visual/visual-report.html
+          retention-days: 14
       - name: report test coverage
+        if: steps.test.outcome == 'success'
         run: bash <(curl -s https://codecov.io/bash) -f coverage/coverage-final.json
         env:
           CI: true
+      - name: fail job if tests failed
+        if: steps.test.outcome != 'success'
+        run: exit 1

.gitignore

@@ -23,4 +23,6 @@ yarn.lock
 docs/data.json
 analyzer/
 preview/
-__screenshots__/
+__screenshots__/
+actual-screenshots/
+visual-report.html

test/unit/visual/cases/typography.js

@@ -385,6 +385,18 @@ visualSuite("Typography", function () {
             });
           }
         );
+        visualTest("intentionally failing test", function (p5, screenshot) {
+          p5.createCanvas(100, 100);
+          p5.background(255);
+          // initially put a red circle for storing in screenshots
+          p5.fill(255, 0, 0); // Red fill
+          p5.noStroke();
+
+          // Then change circle to rect to make it fail
+          p5.rect(30, 30, 40, 40);
+
+          screenshot();
+        });
       });
     }
   });

test/unit/visual/screenshots/Typography/textAlign/2d mode/intentionally failing test/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Typography/textAlign/webgl mode/intentionally failing test/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/visualTest.js

@@ -441,10 +441,16 @@
         : [];
 
       for (let i = 0; i < actual.length; i++) {
+        const flatName = name.replace(/\//g, '-');
+        const actualFilename = `../actual-screenshots/${flatName}-${i.toString().padStart(3, '0')}.png`;
         if (expected[i]) {
           const result = await checkMatch(actual[i], expected[i], myp5);
+          // Always save the actual image before potentially throwing an error
+          writeImageFile(actualFilename, toBase64(actual[i]));
           if (!result.ok) {
+            const diffFilename = `../actual-screenshots/${flatName}-${i.toString().padStart(3, '0')}-diff.png`;
+            writeImageFile(diffFilename, toBase64(result.diff));
             throw new Error(
               `Screenshots do not match! Expected:\n${toBase64(expected[i])}\n\nReceived:\n${toBase64(actual[i])}\n\nDiff:\n${toBase64(result.diff)}\n\n` +
               'If this is unexpected, paste these URLs into your browser to inspect them.\n\n' +
               `If this change is expected, please delete the screenshots/${name} folder and run tests again to generate a new screenshot.`,
@@ -452,6 +458,7 @@
           }
         } else {
           writeImageFile(expectedFilenames[i], toBase64(actual[i]));
+          writeImageFile(actualFilename, toBase64(actual[i]));
         }
       }
     });