Merge pull request #7266 from processing/fix/tests

More test fixes

Author: davepagurek

package-lock.json

@@ -47,7 +47,6 @@
     "i18next": "^19.0.2",
     "i18next-browser-languagedetector": "^4.0.1",
     "lint-staged": "^15.1.0",
-    "resemblejs": "^5.0.0",
     "rollup": "^4.9.6",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-visualizer": "^5.12.0",

package.json

@@ -5,7 +5,7 @@ import { testUnMinified } from '../../js/p5_helpers';
 import '../../js/chai_helpers';
 import { ValidationError } from 'zod-validation-error';
 
-suite('Friendly Errors', function () {
+suite.skip('Friendly Errors', function () {
   suite('validateParams: multiple types allowed for single parameter', function () {
     test('saturation(): valid inputs', () => {
       const validInputs = [
@@ -109,4 +109,4 @@ suite('Friendly Errors', function () {
       });
     });
   });
-});
+});

test/unit/core/param_errors.js

@@ -101,22 +101,23 @@ suite('Rendering', function() {
       assert.equal(fbo.height, 15);
     });
 
-    // NOTE: below two are nearly identical, should be checked
-    test('should resize the dimensions of canvas based on max texture size', function() {
+    test('should limit dimensions of canvas based on max texture size on create', function() {
       glStub = vi.spyOn(p5.RendererGL.prototype, '_getMaxTextureSize');
       const fakeMaxTextureSize = 100;
       glStub.mockReturnValue(fakeMaxTextureSize);
       myp5.createCanvas(10, 10, myp5.WEBGL);
+      myp5.pixelDensity(1);
       myp5.resizeCanvas(200, 200);
       assert.equal(myp5.width, 100);
       assert.equal(myp5.height, 100);
     });
 
-    test.todo('should resize the dimensions of canvas based on max texture size', function() {
+    test('should limit dimensions of canvas based on max texture size on resize', function() {
       glStub = vi.spyOn(p5.RendererGL.prototype, '_getMaxTextureSize');
       const fakeMaxTextureSize = 100;
       glStub.mockReturnValue(fakeMaxTextureSize);
       myp5.createCanvas(200, 200, myp5.WEBGL);
+      myp5.pixelDensity(1);
       assert.equal(myp5.width, 100);
       assert.equal(myp5.height, 100);
     });

test/unit/core/rendering.js

@@ -1,8 +1,28 @@
 import p5 from '../../../src/app.js';
 import { server } from '@vitest/browser/context'
-import resemble from 'resemblejs'
+import { THRESHOLD } from '../../../src/core/constants.js';
 const { readFile, writeFile } = server.commands
 
+// By how much can each color channel value (0-255) differ before
+// we call it a mismatch? This should be large enough to not trigger
+// based on antialiasing.
+const COLOR_THRESHOLD = 15;
+
+// By how many pixels can the snapshot shift? This is
+// often useful to accommodate different text rendering
+// across environments.
+const SHIFT_THRESHOLD = 1;
+
+// The max side length to shrink test images down to before
+// comparing, for performance.
+const MAX_SIDE = 50;
+
+// The background color to composite test cases onto before
+// diffing. This is used because canvas DIFFERENCE blend mode
+// does not handle alpha well. This should be a color that is
+// unlikely to be in the images originally.
+const BG = '#F0F';
+
 function writeImageFile(filename, base64Data) {
   const prefix = /^data:image\/\w+;base64,/;
   writeFile(filename, base64Data.replace(prefix, ''), 'base64');
@@ -56,8 +76,7 @@ export function visualSuite(
 }
 
 export async function checkMatch(actual, expected, p5) {
-  const maxSide = 50;
-  const scale = Math.min(maxSide/expected.width, maxSide/expected.height);
+  const scale = Math.min(MAX_SIDE/expected.width, MAX_SIDE/expected.height);
 
   for (const img of [actual, expected]) {
     img.resize(
@@ -66,15 +85,36 @@ export async function checkMatch(actual, expected, p5) {
     );
   }
 
-  resemble.outputSettings({ useCrossOrigin: false });
-  const diff = await new Promise(resolve => resemble(toBase64(actual))
-    .compareTo(toBase64(expected))
-    .ignoreAntialiasing()
-    .onComplete((data) => {
-      resolve(data)
-    })
-  )
-  const ok = diff.rawMisMatchPercentage === 0;
+  const expectedWithBg = p5.createGraphics(expected.width, expected.height);
+  expectedWithBg.pixelDensity(1);
+  expectedWithBg.background(BG);
+  expectedWithBg.image(expected, 0, 0);
+
+  const cnv = p5.createGraphics(actual.width, actual.height);
+  cnv.pixelDensity(1);
+  cnv.background(BG);
+  cnv.image(actual, 0, 0);
+  cnv.blendMode(cnv.DIFFERENCE);
+  cnv.image(expectedWithBg, 0, 0);
+  for (let i = 0; i < SHIFT_THRESHOLD; i++) {
+    cnv.filter(cnv.ERODE, false);
+    cnv.filter(cnv.ERODE, false);
+  }
+  const diff = cnv.get();
+  cnv.remove();
+  diff.loadPixels();
+  expectedWithBg.remove();
+
+  let ok = true;
+  for (let i = 0; i < diff.pixels.length; i += 4) {
+    for (let off = 0; off < 3; off++) {
+      if (diff.pixels[i+off] > COLOR_THRESHOLD) {
+        ok = false;
+        break;
+      }
+    }
+    if (!ok) break;
+  }
 
   return { ok, diff };
 }
@@ -181,7 +221,7 @@ export function visualTest(
           const result = await checkMatch(actual[i], expected[i], myp5);
           if (!result.ok) {
             throw new Error(
-              `Screenshots do not match! Expected:\n${toBase64(expected[i])}\n\nReceived:\n${toBase64(actual[i])}\n\nDiff:\n${result.diff.getImageDataUrl()}\n\n` +
+              `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.`,
             );

test/unit/visual/visualTest.js

@@ -111,7 +111,16 @@ suite('p5.RendererGL', function() {
         return [...myp5.pixels];
       };
 
-      assert.deepEqual(getColors(myp5.P2D), getColors(myp5.WEBGL));
+      const getPixel = (colors, x, y) => {
+        const idx = (y * 20 + x) * 4
+        return colors.slice(idx, idx + 4)
+      };
+
+      const colors2D = getColors(myp5.P2D);
+      const colorsGL = getColors(myp5.WEBGL);
+
+      assert.deepEqual(getPixel(colorsGL, 10, 10), getPixel(colors2D, 10, 10));
+      assert.deepEqual(getPixel(colorsGL, 15, 15), getPixel(colors2D, 15, 15));
     });
   });
 
@@ -1892,7 +1901,7 @@ suite('p5.RendererGL', function() {
       renderer.bezierVertex(128, -128, 128, 128, -128, 128);
       renderer.endShape();
 
-      assert.deepEqual(myp5.get(190, 127), [255, 128, 128, 255]);
+      assert.arrayApproximately(myp5.get(190, 127), [255, 128, 128, 255], 10);
     });
 
     test('quadraticVertex() should interpolate curFillColor', function() {
@@ -1909,7 +1918,7 @@ suite('p5.RendererGL', function() {
       renderer.quadraticVertex(256, 0, -128, 128);
       renderer.endShape();
 
-      assert.deepEqual(myp5.get(128, 127), [255, 128, 128, 255]);
+      assert.arrayApproximately(myp5.get(128, 127), [255, 128, 128, 255], 10);
     });
 
     test('quadraticVertex() should interpolate curStrokeColor', function() {

test/unit/webgl/p5.RendererGL.js

@@ -14,6 +14,7 @@ suite('p5.Texture', function() {
       myp5 = new p5(function(p) {
         p.setup = async function() {
           canvas = p.createCanvas(100, 100, p.WEBGL);
+          p.pixelDensity(1);
           texImg1 = p.createGraphics(2, 2, p.WEBGL);
           texImg2 = await p.loadImage('/unit/assets/target.gif');
           texImg3 = await p.loadImage('/unit/assets/nyan_cat.gif');