VegaChart.test.tsx

/*
 * Copyright (c) 2019-2026 by Brockmann Consult Development team
 * Permissions are hereby granted under the terms of the MIT License:
 * https://opensource.org/licenses/MIT.
 */

import { describe, expect, it } from "vitest";
import { render } from "@testing-library/react";
// import { render, screen, fireEvent } from "@testing-library/react";
import type { TopLevelSpec } from "vega-lite";
import { createChangeHandler } from "@/plugins/mui/common.test";
import { VegaChart } from "./VegaChart";

global.ResizeObserver = class {
  observe() {}
  unobserve() {}
  disconnect() {}
};

describe("VegaChart", () => {
  it("should render if chart is not given", () => {
    render(
      <VegaChart id="vc" type={"VegaChart"} chart={null} onChange={() => {}} />,
    );
    // to inspect rendered component, do:
    // expect(document.body).toEqual({});
    expect(document.querySelector("#vc")).not.toBeUndefined();
  });

  it("should render if chart is given", () => {
    const { recordedEvents, onChange } = createChangeHandler();
    render(
      <VegaChart
        id="vc"
        type={"VegaChart"}
        chart={chart}
        onChange={onChange}
      />,
    );
    // to inspect rendered component, do:
    // expect(document.body).toEqual({});
    expect(recordedEvents.length).toBe(0);

    // TODO: all of the following doesn't work!
    // expect(document.querySelector("canvas")).toEqual({});
    // expect(screen.getByRole("canvas")).not.toBeUndefined();
    // fireEvent.click(screen.getByRole("canvas"));
    // expect(recordedEvents.length).toBe(1);
  });
});

const chart: TopLevelSpec = {
  $schema: "https://vega.github.io/schema/vega-lite/v6.json",
  config: { view: { continuousWidth: 300, continuousHeight: 300 } },
  data: { name: "data-0" },
  mark: { type: "bar" },
  datasets: {
    "data-0": [
      { x: "A", a: 28, b: 50, c: 50 },
      { x: "B", a: 55, b: 32, c: 40 },
      { x: "C", a: 43, b: 56, c: 30 },
      { x: "D", a: 91, b: 44, c: 20 },
      { x: "E", a: 81, b: 8, c: 10 },
    ],
  },
};