@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/lib/MotionStreamConnection.ts

@@ -0,0 +1,186 @@
+import {
+  type AutoReconnectingWebsocket,
+  tryParseJson,
+} from "@wandelbots/nova-js"
+import type {
+  MotionGroupDescription,
+  MotionGroupState,
+  NovaClient,
+  RobotControllerState,
+} from "@wandelbots/nova-js/v2"
+import { makeAutoObservable, runInAction } from "mobx"
+import type { Vector3Simple } from "./JoggerConnection"
+import {
+  jointValuesEqual,
+  tcpMotionEqual,
+  unwrapRotationVector,
+} from "./motionStateUpdate"
+
+const MOTION_DELTA_THRESHOLD = 0.0001
+
+/**
+ * Store representing the current state of a connected motion group.
+ */
+export class MotionStreamConnection {
+  static async open(nova: NovaClient, motionGroupId: string) {
+    const [_motionGroupIndex, controllerId] = motionGroupId.split("@") as [
+      string,
+      string,
+    ]
+
+    const controller =
+      await nova.api.controller.getCurrentRobotControllerState(controllerId)
+    const motionGroup = controller?.motion_groups.find(
+      (mg: MotionGroupState) => mg.motion_group === motionGroupId,
+    )
+    if (!controller || !motionGroup) {
+      throw new Error(
+        `Controller ${controllerId} or motion group ${motionGroupId} not found`,
+      )
+    }
+
+    const motionStateSocket = nova.openReconnectingWebsocket(
+      `/controllers/${controllerId}/motion-groups/${motionGroupId}/state-stream`,
+    )
+
+    // Wait for the first message to get the initial state
+    const firstMessage = await motionStateSocket.firstMessage()
+    const initialMotionState = tryParseJson(firstMessage.data)
+      ?.result as MotionGroupState
+
+    if (!initialMotionState) {
+      throw new Error(
+        `Unable to parse initial motion state message ${firstMessage.data}`,
+      )
+    }
+
+    console.log(
+      `Connected motion state websocket to motion group ${motionGroup.motion_group}. Initial state:\n  `,
+      initialMotionState,
+    )
+
+    // Get the motion group description for later usage in jogging
+    const description = await nova.api.motionGroup.getMotionGroupDescription(
+      controllerId,
+      motionGroup.motion_group,
+    )
+
+    return new MotionStreamConnection(
+      nova,
+      controller,
+      motionGroup,
+      description,
+      initialMotionState,
+      motionStateSocket,
+    )
+  }
+
+  // Not mobx-observable as this changes very fast; should be observed
+  // using animation frames
+  rapidlyChangingMotionState: MotionGroupState
+
+  constructor(
+    readonly nova: NovaClient,
+    readonly controller: RobotControllerState,
+    readonly motionGroup: MotionGroupState,
+    readonly description: MotionGroupDescription,
+    readonly initialMotionState: MotionGroupState,
+    readonly motionStateSocket: AutoReconnectingWebsocket,
+  ) {
+    this.rapidlyChangingMotionState = initialMotionState
+
+    motionStateSocket.addEventListener("message", (event) => {
+      const latestMotionState = tryParseJson(event.data)?.result as
+        | MotionGroupState
+        | undefined
+
+      if (!latestMotionState) {
+        throw new Error(
+          `Failed to get motion state for ${this.motionGroupId}: ${event.data}`,
+        )
+      }
+
+      // handle joint position changes
+      if (
+        !jointValuesEqual(
+          this.rapidlyChangingMotionState.joint_position,
+          latestMotionState.joint_position,
+          MOTION_DELTA_THRESHOLD,
+        )
+      ) {
+        runInAction(() => {
+          this.rapidlyChangingMotionState.joint_position =
+            latestMotionState.joint_position
+        })
+      }
+
+      // handle tcp pose changes
+      if (
+        !tcpMotionEqual(
+          this.rapidlyChangingMotionState,
+          latestMotionState,
+          MOTION_DELTA_THRESHOLD,
+        )
+      ) {
+        runInAction(() => {
+          if (this.rapidlyChangingMotionState.tcp_pose == null) {
+            this.rapidlyChangingMotionState.tcp_pose =
+              latestMotionState.tcp_pose
+          } else if (
+            latestMotionState.tcp_pose?.orientation &&
+            latestMotionState.tcp_pose?.position &&
+            this.rapidlyChangingMotionState.tcp_pose?.orientation
+          ) {
+            this.rapidlyChangingMotionState.tcp_pose = {
+              position: latestMotionState.tcp_pose.position,
+              orientation: unwrapRotationVector(
+                latestMotionState.tcp_pose.orientation as Vector3Simple,
+                this.rapidlyChangingMotionState.tcp_pose
+                  .orientation as Vector3Simple,
+              ),
+            }
+          } else {
+            console.warn(
+              "Received incomplete tcp_pose, ignoring",
+              latestMotionState.tcp_pose,
+            )
+          }
+        })
+      }
+
+      // handle standstill changes
+      if (
+        this.rapidlyChangingMotionState.standstill !==
+        latestMotionState.standstill
+      ) {
+        runInAction(() => {
+          this.rapidlyChangingMotionState.standstill =
+            latestMotionState.standstill
+        })
+      }
+    })
+    makeAutoObservable(this)
+  }
+
+  get motionGroupId() {
+    return this.motionGroup.motion_group
+  }
+
+  get controllerId() {
+    return this.controller.controller
+  }
+
+  get joints() {
+    return this.initialMotionState.joint_position.map((_, i) => {
+      return {
+        index: i,
+      }
+    })
+  }
+
+  dispose() {
+    this.motionStateSocket.close()
+  }
+}
+
+export default MotionStreamConnection

package/src/lib/motionStateUpdate.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "vitest"
+import { poseEqual } from "./motionStateUpdate"
+
+describe("poseEqual", async () => {
+  test("returns true for identical poses", () => {
+    const pose1 = {
+      position: [0, 0, 0],
+      orientation: [0, 0, 0],
+    }
+    const pose2 = {
+      position: [0, 0, 0],
+      orientation: [0, 0, 0],
+    }
+    expect(poseEqual(pose1, pose2, 0.001)).toBe(true)
+  })
+
+  test("returns false for different poses", () => {
+    const pose1 = {
+      position: [0, 0, 0],
+      orientation: [0, 0, 0],
+    }
+    const pose2 = {
+      position: [1, 1, 1],
+      orientation: [1, 1, 1],
+    }
+    expect(poseEqual(pose1, pose2, 0.001)).toBe(false)
+  })
+})

package/src/lib/motionStateUpdate.ts

@@ -0,0 +1,117 @@
+import type { MotionGroupState, Pose } from "@wandelbots/nova-js/v2"
+import type { Vector3Simple } from "./JoggerConnection"
+import { Vector3 } from "three"
+
+export function jointValuesEqual(
+  oldJointValues: number[],
+  newJointValues: number[],
+  changeDeltaThreshold: number,
+): boolean {
+  if (newJointValues.length !== oldJointValues.length) {
+    return true
+  }
+
+  for (let jointIndex = 0; jointIndex < newJointValues.length; jointIndex++) {
+    if (
+      // biome-ignore lint/style/noNonNullAssertion: legacy code
+      Math.abs(newJointValues[jointIndex]! - oldJointValues[jointIndex]!) >
+      changeDeltaThreshold
+    ) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export function poseEqual(
+  oldTcp: Pose | undefined,
+  newTcp: Pose | undefined,
+  changeDeltaThreshold: number,
+): boolean {
+  // undefined -> defined (+reverse) transition
+  if ((oldTcp === undefined && newTcp) || (oldTcp && newTcp === undefined)) {
+    return false
+  }
+
+  // Poses might be incomplete (missing orientation or position)
+  if (
+    oldTcp?.orientation === undefined ||
+    newTcp?.orientation === undefined ||
+    oldTcp?.position === undefined ||
+    newTcp?.position === undefined
+  ) {
+    return false
+  }
+
+  // the typechecker cannot resolve states to "!= undefined" if "&&" is used
+  if (oldTcp === undefined || newTcp === undefined) {
+    return true
+  }
+
+  let changedDelta = 0
+  changedDelta += Math.abs(oldTcp.orientation[0] - newTcp.orientation[0])
+  changedDelta += Math.abs(oldTcp.orientation[1] - newTcp.orientation[1])
+  changedDelta += Math.abs(oldTcp.orientation[2] - newTcp.orientation[2])
+  changedDelta += Math.abs(oldTcp.position[0] - newTcp.position[0])
+  changedDelta += Math.abs(oldTcp.position[1] - newTcp.position[1])
+  changedDelta += Math.abs(oldTcp.position[2] - newTcp.position[2])
+
+  return changedDelta <= changeDeltaThreshold
+}
+
+// Runs poseEqual check + coordinate system/tcp name equality
+export function tcpMotionEqual(
+  oldMotionState: MotionGroupState,
+  newMotionState: MotionGroupState,
+  changeDeltaThreshold: number,
+): boolean {
+  return (
+    oldMotionState.coordinate_system === newMotionState.coordinate_system &&
+    oldMotionState.tcp === newMotionState.tcp &&
+    poseEqual(
+      oldMotionState.tcp_pose,
+      newMotionState.tcp_pose,
+      changeDeltaThreshold,
+    )
+  )
+}
+
+export function unwrapRotationVector(
+  newRotationVectorApi: Vector3Simple,
+  currentRotationVectorApi: Vector3Simple,
+): Vector3Simple {
+  const currentRotationVector = new Vector3(
+    currentRotationVectorApi[0],
+    currentRotationVectorApi[1],
+    currentRotationVectorApi[2],
+  )
+
+  const newRotationVector = new Vector3(
+    newRotationVectorApi[0],
+    newRotationVectorApi[1],
+    newRotationVectorApi[2],
+  )
+
+  const currentAngle = currentRotationVector.length()
+  const currentAxis = currentRotationVector.normalize()
+
+  let newAngle = newRotationVector.length()
+  let newAxis = newRotationVector.normalize()
+
+  // Align rotation axes
+  if (newAxis.dot(currentAxis) < 0) {
+    newAngle = -newAngle
+    newAxis = newAxis.multiplyScalar(-1.0)
+  }
+
+  // Shift rotation angle close to previous one to extend domain of rotation angles beyond [0, pi]
+  // - this simplifies interpolation and prevents abruptly changing signs of the rotation angles
+  let angleDifference = newAngle - currentAngle
+  angleDifference -=
+    2.0 * Math.PI * Math.floor((angleDifference + Math.PI) / (2.0 * Math.PI))
+
+  newAngle = currentAngle + angleDifference
+
+  return [...newAxis.multiplyScalar(newAngle)] as Vector3Simple
+}

package/src/test/consumer.test.ts

@@ -0,0 +1,257 @@
+/**
+ * Consumer import tests.
+ *
+ * These tests run against the built dist/ output, exercising the package's
+ * `exports` map the same way a real downstream consumer would. They check:
+ *
+ *   1. Every public subpath resolves via Node's `exports` resolver to a file
+ *      that actually exists on disk (ESM, CJS, and .d.ts).
+ *   2. The wildcard subpath export lets consumers deep-import any module
+ *      under src/ (including folder-based ones like Timer/CycleTimer that
+ *      have a sibling barrel).
+ *   3. Named exports remain importable AND the MUI-style default export is
+ *      also available and identical to the named one for primary components.
+ *
+ * Run via `pnpm test:consumer` (which builds first) or as part of
+ * `pnpm test:unit:run` once dist/ exists.
+ */
+import { execFileSync } from "node:child_process"
+import {
+  existsSync,
+  mkdirSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync,
+} from "node:fs"
+import { createRequire } from "node:module"
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { afterAll, beforeAll, describe, expect, it } from "vitest"
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../..")
+const distDir = resolve(repoRoot, "dist")
+const pkgName = "@wandelbots/wandelbots-js-react-components"
+
+// Create a scratch directory outside the repo with a node_modules symlink
+// pointing at the repo, so the Node resolver treats us as if we were
+// installed as a dependency.
+const sandbox = resolve(repoRoot, ".tmp-consumer-test")
+const sandboxReq = createRequire(resolve(sandbox, "consumer.cjs"))
+// A tiny .mjs helper that prints the ESM resolution of `process.argv[2]`.
+// We invoke it as a child Node process because Vite's SSR runtime (used by
+// vitest) strips `import.meta.resolve`, and we specifically want to verify
+// Node's own resolver honours our `exports` map.
+const esmResolverScript = resolve(sandbox, "resolve-esm.mjs")
+
+beforeAll(() => {
+  if (!existsSync(distDir)) {
+    throw new Error(
+      "dist/ not found. Run `pnpm build` before running the consumer tests.",
+    )
+  }
+  rmSync(sandbox, { recursive: true, force: true })
+  mkdirSync(resolve(sandbox, "node_modules/@wandelbots"), { recursive: true })
+  symlinkSync(repoRoot, resolve(sandbox, "node_modules", pkgName), "dir")
+  writeFileSync(
+    esmResolverScript,
+    'import { fileURLToPath } from "node:url"\n' +
+      "process.stdout.write(fileURLToPath(import.meta.resolve(process.argv[2])))\n",
+  )
+})
+
+afterAll(() => {
+  rmSync(sandbox, { recursive: true, force: true })
+})
+
+function resolveEsm(spec: string): string {
+  return execFileSync(process.execPath, [esmResolverScript, spec], {
+    encoding: "utf8",
+    cwd: sandbox,
+  })
+}
+
+function resolveCjs(spec: string): string {
+  return sandboxReq.resolve(spec)
+}
+
+// The exports map doesn't advertise a `types` condition, but TypeScript's
+// resolver uses the same path with a `.d.ts` extension. Probe the ESM path
+// and swap the extension.
+function typesFor(esmPath: string): string {
+  return esmPath.replace(/\.js$/, ".d.ts")
+}
+
+describe("package exports — aggregate entries", () => {
+  const entries = [
+    { spec: pkgName, esm: "dist/index.js", cjs: "dist/index.cjs" },
+    { spec: `${pkgName}/core`, esm: "dist/core.js", cjs: "dist/core.cjs" },
+    { spec: `${pkgName}/3d`, esm: "dist/3d.js", cjs: "dist/3d.cjs" },
+    {
+      spec: `${pkgName}/wb-icons`,
+      esm: "dist/wb-icons.js",
+      cjs: "dist/wb-icons.cjs",
+    },
+  ]
+
+  it.each(entries)("$spec resolves ESM, CJS, and types", ({
+    spec,
+    esm,
+    cjs,
+  }) => {
+    const esmPath = resolveEsm(spec)
+    const cjsPath = resolveCjs(spec)
+    expect(esmPath).toBe(resolve(repoRoot, esm))
+    expect(cjsPath).toBe(resolve(repoRoot, cjs))
+    expect(existsSync(esmPath)).toBe(true)
+    expect(existsSync(cjsPath)).toBe(true)
+    expect(existsSync(typesFor(esmPath))).toBe(true)
+  })
+})
+
+describe("package exports — deep component imports", () => {
+  const specs = [
+    // File-backed modules resolved via the "./*" wildcard.
+    "components/DataGrid",
+    "components/AppHeader",
+    "components/LogPanel",
+    "components/ProgramControl",
+    "components/RobotCard",
+    "components/TabBar",
+    "components/VelocitySlider",
+    "components/jogging/JoggingPanel",
+    "components/jogging/JoggingStore",
+    "components/jogging/JoggingCartesianAxisControl",
+    "components/safetyBar/SafetyBar",
+    "components/3d-viewport/SafetyZonesRenderer",
+    "components/3d-viewport/TrajectoryRenderer",
+    "components/robots/Robot",
+    "components/robots/MotionGroupVisualizer",
+    "components/modal/NoMotionGroupModal",
+    "lib/ConnectedMotionGroup",
+    "lib/JoggerConnection",
+    "lib/MotionStreamConnection",
+    "themes/createDarkTheme",
+    // Directory-backed modules that have a sibling barrel so the wildcard
+    // subpath still resolves. Regression test for copilot review comment.
+    "components/Timer",
+    "components/CycleTimer",
+  ]
+
+  it.each(specs)("%s resolves ESM, CJS, and types", (sub) => {
+    const spec = `${pkgName}/${sub}`
+    const esmPath = resolveEsm(spec)
+    const cjsPath = resolveCjs(spec)
+    expect(esmPath).toMatch(/\.js$/)
+    expect(cjsPath).toMatch(/\.cjs$/)
+    expect(existsSync(esmPath)).toBe(true)
+    expect(existsSync(cjsPath)).toBe(true)
+    expect(existsSync(typesFor(esmPath))).toBe(true)
+  })
+})
+
+describe("MUI-style default + named exports", () => {
+  // These modules are the primary public "one-component-per-file" entries
+  // that downstream apps will import directly. Each must expose both a
+  // named export (preserving the existing API) and a matching `default`
+  // export (the MUI-style convention introduced by this PR).
+  const cases = [
+    { sub: "components/DataGrid", name: "WandelbotsDataGrid" },
+    { sub: "components/AppHeader", name: "AppHeader" },
+    { sub: "components/TabBar", name: "TabBar" },
+    { sub: "components/ProgramControl", name: "ProgramControl" },
+    { sub: "components/RobotCard", name: "RobotCard" },
+    { sub: "components/VelocitySlider", name: "VelocitySlider" },
+    { sub: "components/jogging/JoggingPanel", name: "JoggingPanel" },
+    { sub: "components/jogging/JoggingStore", name: "JoggingStore" },
+    { sub: "components/safetyBar/SafetyBar", name: "SafetyBar" },
+    { sub: "components/Timer", name: "Timer" },
+    { sub: "components/CycleTimer", name: "CycleTimer" },
+    { sub: "lib/ConnectedMotionGroup", name: "ConnectedMotionGroup" },
+    { sub: "lib/JoggerConnection", name: "JoggerConnection" },
+    { sub: "lib/MotionStreamConnection", name: "MotionStreamConnection" },
+  ]
+
+  it.each(cases)("$sub exposes $name as both named and default", async ({
+    sub,
+    name,
+  }) => {
+    const mod = (await import(`${pkgName}/${sub}`)) as Record<string, unknown>
+    expect(mod[name], `missing named export ${name}`).toBeDefined()
+    expect(mod.default, "missing default export").toBeDefined()
+    expect(mod.default).toBe(mod[name])
+  })
+})
+
+describe("aggregate barrel preserves named exports", () => {
+  it("@wandelbots/.../core re-exports the same symbols as deep imports", async () => {
+    const core = await import(`${pkgName}/core`)
+    const deep = await import(`${pkgName}/components/DataGrid`)
+    expect(core.WandelbotsDataGrid).toBe(deep.WandelbotsDataGrid)
+  })
+
+  it("@wandelbots/.../3d re-exports the same symbols as deep imports", async () => {
+    const agg = await import(`${pkgName}/3d`)
+    const deep = await import(`${pkgName}/components/robots/Robot`)
+    expect(agg.Robot).toBe(deep.Robot)
+  })
+})
+
+describe("CJS interop", () => {
+  it("require() returns the same symbols as import", async () => {
+    const esm = (await import(`${pkgName}/components/DataGrid`)) as Record<
+      string,
+      unknown
+    >
+    const cjs = sandboxReq(`${pkgName}/components/DataGrid`) as Record<
+      string,
+      unknown
+    >
+    expect(cjs.default).toBe(cjs.WandelbotsDataGrid)
+    // Both resolvers must reach a real, loadable module (the identities
+    // naturally differ between ESM/CJS, so we compare by exported keys).
+    expect(Object.keys(cjs).sort()).toEqual(Object.keys(esm).sort())
+  })
+
+  // Regression test: Vitest's `await import()` goes through Vite's lenient
+  // resolver, which happily accepts extensionless ESM specifiers like
+  // `lodash-es/throttle`. Real downstream consumers hit Node's strict ESM
+  // resolver, which requires `.js`. Spawn a real Node process so the whole
+  // dependency graph (including transitive imports from dist/) is exercised
+  // under strict resolution.
+  it.each([
+    "components/DataGrid",
+    "components/VelocitySlider",
+    "components/jogging/JoggingPanel",
+    "components/jogging/JoggingJointValueControl",
+    "components/jogging/JoggingJointLimitDetector",
+    "components/jogging/JoggingStore",
+  ])("Node strict ESM can import %s and its transitive deps", (sub) => {
+    // Redirect stderr to stdout so the assertion message surfaces any
+    // "Cannot find module" errors from the child process.
+    execFileSync(
+      process.execPath,
+      [
+        "--input-type=module",
+        "-e",
+        `await import(${JSON.stringify(`${pkgName}/${sub}`)})`,
+      ],
+      { cwd: sandbox, stdio: "pipe", encoding: "utf8" },
+    )
+  })
+
+  it('Node can load the CJS output under `"type": "module"`', () => {
+    // Sanity check that `.cjs` extension was emitted (not `.cjs.js`) so
+    // that Node's CJS loader accepts it despite the package being ESM.
+    const output = execFileSync(
+      process.execPath,
+      [
+        "-e",
+        "const m = require(process.argv[1]); " +
+          "console.log(typeof m.WandelbotsDataGrid);",
+        resolve(repoRoot, "dist/components/DataGrid.cjs"),
+      ],
+      { encoding: "utf8" },
+    ).trim()
+    expect(output).toBe("function")
+  })
+})

package/src/test/setup.ts

@@ -0,0 +1,111 @@
+import "@testing-library/jest-dom"
+import { beforeAll, vi } from "vitest"
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock matchMedia
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Mock WebGL context for Three.js
+const mockWebGLContext = {
+  getExtension: vi.fn(),
+  getParameter: vi.fn(),
+  createShader: vi.fn(),
+  shaderSource: vi.fn(),
+  compileShader: vi.fn(),
+  createProgram: vi.fn(),
+  attachShader: vi.fn(),
+  linkProgram: vi.fn(),
+  useProgram: vi.fn(),
+  createBuffer: vi.fn(),
+  bindBuffer: vi.fn(),
+  bufferData: vi.fn(),
+  createTexture: vi.fn(),
+  bindTexture: vi.fn(),
+  texImage2D: vi.fn(),
+  texParameteri: vi.fn(),
+  generateMipmap: vi.fn(),
+  viewport: vi.fn(),
+  clearColor: vi.fn(),
+  clear: vi.fn(),
+  drawArrays: vi.fn(),
+  drawElements: vi.fn(),
+  enableVertexAttribArray: vi.fn(),
+  vertexAttribPointer: vi.fn(),
+  uniform1f: vi.fn(),
+  uniform2f: vi.fn(),
+  uniform3f: vi.fn(),
+  uniform4f: vi.fn(),
+  uniformMatrix4fv: vi.fn(),
+  getUniformLocation: vi.fn(),
+  getAttribLocation: vi.fn(),
+  enable: vi.fn(),
+  disable: vi.fn(),
+  depthFunc: vi.fn(),
+  blendFunc: vi.fn(),
+  cullFace: vi.fn(),
+  frontFace: vi.fn(),
+  VERTEX_SHADER: 35633,
+  FRAGMENT_SHADER: 35632,
+  ARRAY_BUFFER: 34962,
+  ELEMENT_ARRAY_BUFFER: 34963,
+  STATIC_DRAW: 35044,
+  DYNAMIC_DRAW: 35048,
+  TEXTURE_2D: 3553,
+  RGBA: 6408,
+  UNSIGNED_BYTE: 5121,
+  TEXTURE_MAG_FILTER: 10240,
+  TEXTURE_MIN_FILTER: 10241,
+  LINEAR: 9729,
+  COLOR_BUFFER_BIT: 16384,
+  DEPTH_BUFFER_BIT: 256,
+  DEPTH_TEST: 2929,
+  BLEND: 3042,
+  SRC_ALPHA: 770,
+  ONE_MINUS_SRC_ALPHA: 771,
+  CULL_FACE: 2884,
+  BACK: 1029,
+  CCW: 2305,
+  FLOAT: 5126,
+  FALSE: 0,
+  TRUE: 1,
+}
+
+HTMLCanvasElement.prototype.getContext = vi
+  .fn()
+  .mockImplementation((contextType) => {
+    if (contextType === "webgl" || contextType === "experimental-webgl") {
+      return mockWebGLContext
+    }
+    return null
+  })
+
+beforeAll(() => {
+  // Suppress console errors in tests
+  vi.spyOn(console, "error").mockImplementation(() => {})
+  vi.spyOn(console, "warn").mockImplementation(() => {})
+})