add browser tests

TODO.md

@@ -1,6 +1,5 @@
 # TODO
 
-- [ ] Browser tests
 - [ ] Object APIs
 
 ## Guides

package.json

@@ -11,6 +11,7 @@
     "dev": "turbo run dev",
     "lint": "turbo run lint",
     "test": "turbo run test -- --watch=false",
+    "test:browser": "turbo run test:browser -- --watch=false",
     "clean": "turbo run clean && rm -rf node_modules .turbo",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "release": "turbo run build --filter=docs^... && changeset publish",

packages/config-vitest/browser.mjs

@@ -1,7 +1,7 @@
 import { defineConfig } from "vitest/config";
-import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
 import { createRequire } from "module";
 import path from "path";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 const require = createRequire(import.meta.url);
 const imagesFolder = path.join(
@@ -10,8 +10,15 @@ const imagesFolder = path.join(
 );
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      pngjs: "pngjs/browser.js",
+    },
+  },
   test: {
     exclude: [
+      "**/.tshy-build",
+      "**/.tshy",
       "**/*.node.test.ts",
       "**/node_modules/**",
       "**/dist/**",
@@ -27,13 +34,11 @@ export default defineConfig({
     },
   },
   publicDir: imagesFolder,
-  optimizeDeps: {
-    include: ["@jimp/core"],
-    esbuildOptions: {
-      define: {
-        global: "globalThis",
+  plugins: [
+    nodePolyfills({
+      globals: {
+        Buffer: true,
       },
-      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
-    },
-  },
+    }),
+  ],
 });

packages/config-vitest/package.json

@@ -4,7 +4,6 @@
   "repository": "jimp-dev/jimp",
   "scripts": {
     "lint": "eslint .",
-    "test": "vitest",
     "dev": "tshy --watch"
   },
   "author": "Andrew Lisowski <[email protected]>",
@@ -19,7 +18,8 @@
   },
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "playwright": "^1.42.1"
+    "playwright": "^1.42.1",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "type": "module"
 }

packages/jimp/package.json

@@ -14,6 +14,7 @@
   "scripts": {
     "lint": "eslint .",
     "test": "vitest",
+    "test:browser": "vitest --config vitest.config.browser.ts",
     "build": "tshy",
     "dev": "tshy --watch",
     "clean": "rm -rf node_modules .tshy .tshy-build dist"
@@ -63,11 +64,14 @@
   "devDependencies": {
     "@jimp/config-eslint": "workspace:*",
     "@jimp/config-typescript": "workspace:*",
+    "@jimp/config-vitest": "workspace:*",
     "@jimp/test-utils": "workspace:*",
     "eslint": "^8.57.0",
     "tshy": "^1.12.0",
     "typescript": "^5.4.2",
-    "vitest": "^1.4.0"
+    "@vitest/browser": "^1.4.0",
+    "vitest": "^1.4.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "tshy": {
     "exclude": [

packages/jimp/src/composite.test.ts → packages/jimp/src/composite.node.test.ts

@@ -1,6 +1,6 @@
 import { expect, test, describe } from "vitest";
-import fs from "fs";
 
+import "@jimp/test-utils/image-snapshot";
 import { getTestImagePath } from "@jimp/test-utils";
 
 import { Jimp, BlendMode } from "./index.js";

packages/jimp/src/exif.test.ts → packages/jimp/src/exif.node.test.ts

@@ -1,5 +1,5 @@
 import { expect, test, describe } from "vitest";
-import "@jimp/test-utils";
+import "@jimp/test-utils/image-snapshot";
 
 import { getExifOrientation } from "@jimp/core";
 import { Jimp, distance } from "./index.js";

packages/jimp/vitest.config.browser.ts

@@ -0,0 +1,3 @@
+import config from "@jimp/config-vitest/browser";
+
+export default config;

packages/test-utils/src/index.ts

@@ -213,6 +213,9 @@ export function getTestImagePath(
     | "rgb.tiff"
     | "windows95.png"
     | "windows95.bmp"
+    | "fillbytes.jpg"
+    | "hands.jpg"
+    | "hands_mx200_rp255.jpg"
 ) {
   if (typeof window !== "undefined") {
     return `/${name}`;

plugins/js-bmp/package.json

@@ -21,7 +21,8 @@
     "tshy": "^1.12.0",
     "typescript": "^5.4.2",
     "@vitest/browser": "^1.4.0",
-    "vitest": "^1.4.0"
+    "vitest": "^1.4.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "tshy": {
     "exclude": [

plugins/js-bmp/src/index.node.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+import { createJimp } from "@jimp/core";
+import { getTestImagePath } from "@jimp/test-utils";
+
+import png from "@jimp/js-png";
+import bmp from "./index.js";
+
+const jimp = createJimp({ formats: [bmp, png] });
+
+describe("BMP", () => {
+  test("uses correct colors for BMP", async function () {
+    const expectedImg = await jimp.read(getTestImagePath("windows95.png"));
+    const image = await jimp.read(getTestImagePath("windows95.bmp"));
+
+    expect(image.bitmap.data).toEqual(expectedImg.bitmap.data);
+  });
+});

plugins/js-bmp/src/index.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "vitest";
 import { createJimp } from "@jimp/core";
+import { getTestImagePath } from "@jimp/test-utils";
 
 import png from "@jimp/js-png";
 import bmp from "./index.js";
@@ -8,7 +9,7 @@ const jimp = createJimp({ formats: [bmp, png] });
 
 describe("BMP", () => {
   test("load BMP", async () => {
-    const image = await jimp.read(__dirname + "/images/windows95.bmp");
+    const image = await jimp.read(getTestImagePath("windows95.bmp"));
 
     expect(image.getPixelColor(10, 10)).toBe(0xeff7f7ff);
     expect(image.getPixelColor(150, 80)).toBe(0x73add6ff);
@@ -28,11 +29,4 @@ describe("BMP", () => {
 
     expect(buffer.toString()).toMatch(/^BM/);
   });
-
-  test("uses correct colors for BMP", async function () {
-    const expectedImg = await jimp.read(__dirname + "/images/windows95.png");
-    const image = await jimp.read(__dirname + "/images/windows95.bmp");
-
-    expect(image.bitmap.data).toEqual(expectedImg.bitmap.data);
-  });
 });

plugins/js-gif/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "lint": "eslint .",
     "test": "vitest",
+    "test:browser": "vitest --config vitest.config.browser.ts",
     "build": "tshy",
     "dev": "tshy --watch"
   },
@@ -13,12 +14,15 @@
   "devDependencies": {
     "@jimp/config-eslint": "workspace:*",
     "@jimp/config-typescript": "workspace:*",
+    "@jimp/config-vitest": "workspace:*",
     "@jimp/test-utils": "workspace:*",
     "@types/omggif": "^1.0.5",
     "eslint": "^8.57.0",
     "tshy": "^1.12.0",
     "typescript": "^5.4.2",
-    "vitest": "^1.4.0"
+    "@vitest/browser": "^1.4.0",
+    "vitest": "^1.4.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "tshy": {
     "exclude": [

plugins/js-gif/vitest.config.browser.ts

@@ -0,0 +1,3 @@
+import config from "@jimp/config-vitest/browser";
+
+export default config;

plugins/js-jpeg/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "lint": "eslint .",
     "test": "vitest",
+    "test:browser": "vitest --config vitest.config.browser.ts",
     "build": "tshy",
     "dev": "tshy --watch"
   },
@@ -13,11 +14,14 @@
   "devDependencies": {
     "@jimp/config-eslint": "workspace:*",
     "@jimp/config-typescript": "workspace:*",
+    "@jimp/config-vitest": "workspace:*",
     "@jimp/test-utils": "workspace:*",
     "eslint": "^8.57.0",
     "tshy": "^1.12.0",
     "typescript": "^5.4.2",
-    "vitest": "^1.4.0"
+    "@vitest/browser": "^1.4.0",
+    "vitest": "^1.4.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "tshy": {
     "exclude": [

plugins/js-jpeg/src/index.test.ts

@@ -7,8 +7,6 @@ import jpeg from "./index.js";
 const jimp = createJimp({ formats: [jpeg] });
 
 describe("JPEG", () => {
-  const imagesDir = __dirname + "/images";
-
   test("load JPG", async () => {
     const image = await jimp.read(getTestImagePath("cops.jpg"));
 
@@ -18,7 +16,7 @@ describe("JPEG", () => {
   });
 
   test("load JPG with fill bytes", async () => {
-    const image = await jimp.read(imagesDir + "/fillbytes.jpg");
+    const image = await jimp.read(getTestImagePath("fillbytes.jpg"));
 
     expect(image.getPixelColor(10, 10)).toBe(0xaeb8c3ff);
     expect(image.getPixelColor(220, 190)).toBe(0x262b21ff);

plugins/js-jpeg/vitest.config.browser.ts

@@ -0,0 +1,3 @@
+import config from "@jimp/config-vitest/browser";
+
+export default config;

plugins/js-png/package.json

@@ -23,11 +23,12 @@
     "@jimp/config-vitest": "workspace:*",
     "@jimp/test-utils": "workspace:*",
     "@types/pngjs": "^6.0.4",
+    "@vitest/browser": "^1.4.0",
     "eslint": "^8.57.0",
     "tshy": "^1.12.0",
     "typescript": "^5.4.2",
-    "@vitest/browser": "^1.4.0",
-    "vitest": "^1.4.0"
+    "vitest": "^1.4.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "tshy": {
     "exclude": [

plugins/js-png/src/index.ts

@@ -1,5 +1,4 @@
-// @ts-ignore
-import { PNG, PNGOptions as PNGJSOptions } from "pngjs/browser.js";
+import { PNG, PNGOptions as PNGJSOptions } from "pngjs";
 import { Format } from "@jimp/types";
 import { PNGFilterType, PNGColorType } from "./constants.js";
 

plugins/js-tiff/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "lint": "eslint .",
     "test": "vitest",
+    "test:browser": "vitest --config vitest.config.browser.ts",
     "build": "tshy",
     "dev": "tshy --watch"
   },
@@ -13,11 +14,14 @@
   "devDependencies": {
     "@jimp/config-eslint": "workspace:*",
     "@jimp/config-typescript": "workspace:*",
+    "@jimp/config-vitest": "workspace:*",
     "@jimp/test-utils": "workspace:*",
     "eslint": "^8.57.0",
     "tshy": "^1.12.0",
     "typescript": "^5.4.2",
-    "vitest": "^1.4.0"
+    "@vitest/browser": "^1.4.0",
+    "vitest": "^1.4.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "tshy": {
     "exclude": [

plugins/js-tiff/vitest.config.browser.ts

@@ -0,0 +1,3 @@
+import config from "@jimp/config-vitest/browser";
+
+export default config;

plugins/plugin-blit/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "lint": "eslint .",
     "test": "vitest",
+    "test:browser": "vitest --config vitest.config.browser.ts",
     "build": "tshy",
     "dev": "tshy --watch",
     "clean": "rm -rf node_modules .tshy .tshy-build dist"
@@ -22,10 +23,13 @@
     "@jimp/test-utils": "workspace:*",
     "@jimp/config-eslint": "workspace:*",
     "@jimp/config-typescript": "workspace:*",
+    "@jimp/config-vitest": "workspace:*",
     "eslint": "^8.57.0",
     "tshy": "^1.12.0",
     "typescript": "^5.4.2",
-    "vitest": "^1.4.0"
+    "@vitest/browser": "^1.4.0",
+    "vitest": "^1.4.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "tshy": {
     "exports": {