test(ui): replace vitest-canvas-mock due to ReferenceError bug

webapp/package.json

@@ -115,8 +115,7 @@
     "prettier": "3.0.3",
     "typescript": "5.2.2",
     "vite": "5.0.8",
-    "vitest": "1.6.0",
-    "vitest-canvas-mock": "0.3.3"
+    "vitest": "1.6.0"
   },
   "engines": {
     "node": "18.16.1"

webapp/src/components/common/MatrixGrid/index.test.tsx

@@ -4,9 +4,12 @@ import Box from "@mui/material/Box";
 import { mockGetBoundingClientRect } from "../../../tests/mocks/mockGetBoundingClientRect";
 import { type EnhancedGridColumn } from "./types";
 import { ColumnDataType } from "./utils";
+import { mockHTMLCanvasElement } from "../../../tests/mocks/mockHTMLCanvasElement";
 
 beforeEach(() => {
+  mockHTMLCanvasElement();
   mockGetBoundingClientRect();
+  vi.clearAllMocks();
 });
 
 function renderMatrixGrid(

webapp/src/tests/mocks/mockHTMLCanvasElement.ts

@@ -0,0 +1,56 @@
+/**
+ * Creates a mock for the HTML Canvas API in a testing environment.
+ *
+ * This function addresses the problem of testing components that rely on the
+ * Canvas API in a Node.js environment, where the DOM and Canvas are not natively
+ * available. Specifically, it solves issues related to testing components that
+ * use libraries like @glideapps/glide-data-grid, which depend on canvas functionality.
+ *
+ * The mock provides stub implementations for commonly used CanvasRenderingContext2D
+ * methods, allowing tests to run without throwing "not implemented" errors that
+ * would typically occur when canvas methods are called in a non-browser environment.
+ *
+ * @returns An object containing the mocked context and getContext function.
+ */
+export const mockHTMLCanvasElement = () => {
+  /**
+   * A partial mock of CanvasRenderingContext2D.
+   * Only the most commonly used methods are mocked to keep the implementation lean.
+   * Additional methods can be added here as needed.
+   */
+  const contextMock: Partial<CanvasRenderingContext2D> = {
+    measureText: vi.fn().mockReturnValue({
+      width: 0,
+      actualBoundingBoxAscent: 0,
+      actualBoundingBoxDescent: 0,
+      actualBoundingBoxLeft: 0,
+      actualBoundingBoxRight: 0,
+      fontBoundingBoxAscent: 0,
+      fontBoundingBoxDescent: 0,
+    }),
+    fillRect: vi.fn(),
+    clearRect: vi.fn(),
+    getImageData: vi
+      .fn()
+      .mockReturnValue({ data: new Uint8ClampedArray(), width: 0, height: 0 }),
+    save: vi.fn(),
+    fillText: vi.fn(),
+    restore: vi.fn(),
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    closePath: vi.fn(),
+    translate: vi.fn(),
+    scale: vi.fn(),
+    rotate: vi.fn(),
+    arc: vi.fn(),
+    rect: vi.fn(),
+  };
+
+  const getContextMock = vi.fn().mockReturnValue(contextMock);
+
+  // Override the getContext method on the HTMLCanvasElement prototype
+  window.HTMLCanvasElement.prototype.getContext = getContextMock;
+
+  return { contextMock, getContextMock };
+};

webapp/src/tests/setup.ts

@@ -2,7 +2,6 @@ import "@testing-library/jest-dom/vitest";
 import { expect, afterEach } from "vitest";
 import { cleanup } from "@testing-library/react";
 import * as matchers from "@testing-library/jest-dom/matchers";
-import "vitest-canvas-mock";
 import "./mocks/mockResizeObserver";
 
 // Extend Vitest's expect function with jest-dom matchers for enhanced DOM assertions.

webapp/vite.config.ts

@@ -31,11 +31,6 @@ export default defineConfig(({ mode }) => {
     },
     test: {
       globals: true, // Use the APIs globally,
-      poolOptions: {
-        threads: {
-          singleThread: true, // @see https://github.com/vitest-dev/vitest/issues/740
-        },
-      },
       environment: "jsdom",
       css: true,
       setupFiles: "./src/tests/setup.ts",