diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 203bd3ff4d..340882e255 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -109,8 +109,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" @@ -5924,12 +5923,6 @@ "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==" }, - "node_modules/cssfontparser": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz", - "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==", - "dev": true - }, "node_modules/cssstyle": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz", @@ -9299,16 +9292,6 @@ "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==" }, - "node_modules/jest-canvas-mock": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz", - "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==", - "dev": true, - "dependencies": { - "cssfontparser": "^1.2.1", - "moo-color": "^1.0.2" - } - }, "node_modules/jmespath": { "version": "0.16.0", "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz", @@ -10052,15 +10035,6 @@ "node": "*" } }, - "node_modules/moo-color": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz", - "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==", - "dev": true, - "dependencies": { - "color-name": "^1.1.4" - } - }, "node_modules/mouse-change": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/mouse-change/-/mouse-change-1.4.0.tgz", @@ -13872,18 +13846,6 @@ } } }, - "node_modules/vitest-canvas-mock": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz", - "integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==", - "dev": true, - "dependencies": { - "jest-canvas-mock": "~2.5.2" - }, - "peerDependencies": { - "vitest": "*" - } - }, "node_modules/void-elements": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", diff --git a/webapp/package.json b/webapp/package.json index 0e59e4a33f..0cac1710ac 100644 --- a/webapp/package.json +++ b/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" diff --git a/webapp/src/components/common/MatrixGrid/index.test.tsx b/webapp/src/components/common/MatrixGrid/index.test.tsx index 123b9579ad..b1858c518f 100644 --- a/webapp/src/components/common/MatrixGrid/index.test.tsx +++ b/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( diff --git a/webapp/src/tests/mocks/mockHTMLCanvasElement.ts b/webapp/src/tests/mocks/mockHTMLCanvasElement.ts new file mode 100644 index 0000000000..a31b128d40 --- /dev/null +++ b/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 = { + 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 }; +}; diff --git a/webapp/src/tests/setup.ts b/webapp/src/tests/setup.ts index 206483a805..8f6da9b8c2 100644 --- a/webapp/src/tests/setup.ts +++ b/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. diff --git a/webapp/vite.config.ts b/webapp/vite.config.ts index 55ab1865a0..1dfeadfd8a 100644 --- a/webapp/vite.config.ts +++ b/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",