import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import { afterEach, vi } from "vitest";

afterEach(cleanup);

// React Flow keeps a node at visibility:hidden until ResizeObserver has
// reported its size, and Testing Library excludes hidden elements from the
// accessibility tree — so an inert stub makes every node unqueryable by
// role. This one reports a size, which is what actually makes the nodes
// visible and the chart behave as it does in a browser.
const NODE_WIDTH = 268;
const NODE_HEIGHT = 80;

class ResizeObserverStub {
  constructor(private readonly callback: ResizeObserverCallback) {}
  observe(target: Element) {
    const entry = {
      target,
      contentRect: { width: NODE_WIDTH, height: NODE_HEIGHT, top: 0, left: 0, bottom: NODE_HEIGHT, right: NODE_WIDTH, x: 0, y: 0 },
    } as unknown as ResizeObserverEntry;
    queueMicrotask(() => this.callback([entry], this as unknown as ResizeObserver));
  }
  unobserve() {}
  disconnect() {}
}
vi.stubGlobal("ResizeObserver", ResizeObserverStub);

if (!("DOMMatrixReadOnly" in globalThis)) {
  class DOMMatrixReadOnlyStub {
    m22 = 1;
  }
  vi.stubGlobal("DOMMatrixReadOnly", DOMMatrixReadOnlyStub);
}

// jsdom reports 0 for every layout box; React Flow reads these to size nodes.
Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: NODE_WIDTH });
Object.defineProperty(HTMLElement.prototype, "offsetHeight", { configurable: true, value: NODE_HEIGHT });
Object.defineProperty(SVGElement.prototype, "getBBox", { configurable: true, value: () => ({ x: 0, y: 0, width: 0, height: 0 }) });