report genration fixes and actual-screenshot fixes

Author: Vaivaswat2244

.github/workflows/ci-test.yml

@@ -24,20 +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

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/000.png

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

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/000.png

@@ -445,7 +445,11 @@ export function visualTest(
         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' +
@@ -454,8 +458,8 @@ export function visualTest(
           }
         } else {
           writeImageFile(expectedFilenames[i], toBase64(actual[i]));
+          writeImageFile(actualFilename, toBase64(actual[i]));
         }
-        writeImageFile(actualFilename, toBase64(actual[i]));
       }
     });
   });