Merge branch 'dev-2.0' into manual-tests-2

Author: davepagurek

.github/workflows/ci-test.yml

@@ -24,9 +24,23 @@ 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: generate TypeScript types
         run: npm run generate-types
         env:
@@ -36,6 +50,10 @@ jobs:
         env:
           CI: true
       - 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

@@ -24,8 +24,17 @@ __screenshots__/
 *.d.ts
 p5.zip
 yarn.lock
+
+docs/data.json
+analyzer/
+preview/
+__screenshots__/
+actual-screenshots/
+visual-report.html
+
 todo.md
 
 *.DS_Store
 .idea
-.project
+.project
+

package.json

@@ -82,6 +82,7 @@
     "./core": {
       "default": "./dist/core/main.js"
     },
+    "./color": "./dist/color/index.js",
     "./shape": "./dist/shape/index.js",
     "./accessibility": "./dist/accessibility/index.js",
     "./friendlyErrors": "./dist/core/friendlyErrors/index.js",

src/core/p5.Renderer2D.js

@@ -70,14 +70,18 @@ class Renderer2D extends Renderer {
     }
     this.scale(this._pixelDensity, this._pixelDensity);
 
-    if(!this.filterRenderer){
-      this.filterRenderer = new FilterRenderer2D(this);
-    }
     // Set and return p5.Element
     this.wrappedElt = new Element(this.elt, this._pInst);
     this.clipPath = null;
   }
 
+  get filterRenderer() {
+    if (!this._filterRenderer) {
+      this._filterRenderer = new FilterRenderer2D(this);
+    }
+    return this._filterRenderer;
+  }
+
   remove(){
     this.wrappedElt.remove();
     this.wrappedElt = null;

test/unit/visual/screenshots/Shape drawing/2D mode/Drawing triangles/000.png

@@ -463,9 +463,15 @@ export function visualTest(
         : [];
 
       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' +
@@ -474,6 +480,7 @@ export function visualTest(
           }
         } else {
           writeImageFile(expectedFilenames[i], toBase64(actual[i]));
+          writeImageFile(actualFilename, toBase64(actual[i]));
         }
       }
     });