@shopify/react-native-skia 1.3.11 → 1.3.13

package/src/__tests__/globalSetup.ts

@@ -0,0 +1,51 @@
+import type { Server, WebSocket } from "ws";
+import { WebSocketServer } from "ws";
+
+declare global {
+  var testServer: Server;
+  var testClient: WebSocket;
+  var testOS: "ios" | "android" | "web" | "node";
+  var testArch: "paper" | "fabric";
+}
+
+const isOS = (os: string): os is "android" | "ios" | "web" => {
+  return ["ios", "android", "web"].indexOf(os) !== -1;
+};
+
+const isArch = (arc: string): arc is "paper" | "fabric" => {
+  return ["paper", "fabric"].indexOf(arc) !== -1;
+};
+
+const globalSetup = () => {
+  return new Promise<void>((resolve) => {
+    if (process.env.E2E !== "true") {
+      resolve();
+    } else {
+      const port = 4242;
+      global.testServer = new WebSocketServer({ port });
+      console.log(
+        `\n\nTest server listening on port ${port} (waiting for the example app to open on E2E tests screen)`
+      );
+      global.testServer.on("connection", (client) => {
+        global.testClient = client;
+        client.once("message", (msg) => {
+          const obj = JSON.parse(msg.toString("utf8"));
+          const { OS, arch } = obj;
+          if (!isOS(OS)) {
+            throw new Error("Unknown testing platform: " + OS);
+          }
+          if (!isArch(arch)) {
+            throw new Error("Unknown testing architecture: " + arch);
+          }
+          global.testOS = OS;
+          global.testArch = arch;
+          console.log(`${OS} device connected (${arch})`);
+          resolve();
+        });
+      });
+    }
+  });
+};
+
+// eslint-disable-next-line import/no-default-export
+export default globalSetup;

package/src/__tests__/globalTeardown.ts

@@ -0,0 +1,11 @@
+const globalTeardown = () => {
+  if (global.testClient) {
+    global.testClient.close();
+  }
+  if (global.testServer) {
+    global.testServer.close();
+  }
+};
+
+// eslint-disable-next-line import/no-default-export
+export default globalTeardown;

package/src/__tests__/setup.ts

@@ -0,0 +1,129 @@
+import path from "path";
+import fs from "fs";
+
+import { PNG } from "pngjs";
+import pixelmatch from "pixelmatch";
+import { diff } from "jest-diff";
+
+import type { SkSurface, SkImage } from "../skia/types";
+
+export const E2E = process.env.E2E === "true";
+export const CI = process.env.CI === "true";
+export const itFailsE2e = E2E ? it.failing : it;
+export const itRunsE2eOnly = E2E ? it : it.skip;
+export const itRunsNodeOnly = E2E ? it.skip : it;
+export const itRunsCIAndNodeOnly = CI || !E2E ? it : it.skip;
+
+export const docPath = (relPath: string) =>
+  path.resolve(process.cwd(), `../../apps/docs/static/img/${relPath}`);
+
+export const processResult = (
+  surface: SkSurface,
+  relPath: string,
+  overwrite = false
+) => {
+  surface.flush();
+  const image = surface.makeImageSnapshot();
+  surface.getCanvas().clear(Float32Array.of(0, 0, 0, 0));
+  const result = checkImage(image, relPath, { overwrite });
+  image.dispose();
+  return result;
+};
+
+interface CheckImageOptions {
+  maxPixelDiff?: number;
+  threshold?: number;
+  overwrite?: boolean;
+  mute?: boolean;
+  shouldFail?: boolean;
+}
+
+// On Github Action, the image decoding is slightly different
+// all tests that show the oslo.jpg have small differences but look ok
+const defaultCheckImageOptions = {
+  maxPixelDiff: 200,
+  threshold: 0.1,
+  overwrite: false,
+  mute: false,
+  shouldFail: false,
+};
+
+export const checkImage = (
+  image: SkImage,
+  relPath: string,
+  opts?: CheckImageOptions
+) => {
+  const options = { ...defaultCheckImageOptions, ...opts };
+  const { overwrite, threshold, mute, maxPixelDiff, shouldFail } = options;
+  const png = image.encodeToBytes();
+  const p = path.resolve(__dirname, relPath);
+  if (fs.existsSync(p) && !overwrite) {
+    const ref = fs.readFileSync(p);
+    const baseline = PNG.sync.read(ref);
+    const toTest = PNG.sync.read(Buffer.from(image.encodeToBytes()));
+    const diffImage = new PNG({
+      width: baseline.width,
+      height: baseline.height,
+    });
+    if (baseline.width !== toTest.width || baseline.height !== toTest.height) {
+      throw new Error(
+        `Image sizes don't match: ${baseline.width}x${baseline.height} vs ${toTest.width}x${toTest.height}`
+      );
+    }
+    const diffPixelsCount = pixelmatch(
+      baseline.data,
+      toTest.data,
+      diffImage.data,
+      baseline.width,
+      baseline.height,
+      { threshold }
+    );
+    if (!mute) {
+      if (diffPixelsCount > maxPixelDiff && !shouldFail) {
+        console.log(`${p} didn't match`);
+        fs.writeFileSync(`${p}.test.png`, PNG.sync.write(toTest));
+        fs.writeFileSync(`${p}-diff-test.png`, PNG.sync.write(diffImage));
+      }
+      if (shouldFail) {
+        expect(diffPixelsCount).not.toBeLessThanOrEqual(maxPixelDiff);
+      } else {
+        expect(diffPixelsCount).toBeLessThanOrEqual(maxPixelDiff);
+      }
+    }
+    return diffPixelsCount;
+  } else {
+    fs.writeFileSync(p, png);
+  }
+  return 0;
+};
+
+expect.extend({
+  toBeApproximatelyEqual(_received, _argument, tolerance = 0.1) {
+    const received =
+      Array.isArray(_received) || _received instanceof Float32Array
+        ? _received
+        : [_received];
+    const argument =
+      Array.isArray(_argument) || _received instanceof Float32Array
+        ? _argument
+        : [_argument];
+    if (received.length !== argument.length) {
+      return { pass: false, message: () => "Arrays have different lengths" };
+    }
+    for (let i = 0; i < received.length; i++) {
+      if (
+        isNaN(argument[i]) ||
+        isNaN(received[i]) ||
+        Math.abs(received[i] - argument[i]) > tolerance
+      ) {
+        const diffString = diff(received, argument);
+        return {
+          pass: false,
+          message: () => `Element at index ${i} differ more than ${tolerance}:
+${diffString}`,
+        };
+      }
+    }
+    return { pass: true, message: () => "Arrays are approximately equal" };
+  },
+});