added first component tests

Author: forman

chartlets.js/packages/lib/src/plugins/mui/Box.test.tsx

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Box } from "./Box";
+import type { ComponentChangeHandler } from "@/types/state/event";
+
+describe("Box", () => {
+  it("should render the Box component", () => {
+    const onChange: ComponentChangeHandler = () => {};
+    render(
+      <Box id="bx" type={"Box"} children={["Hallo!"]} onChange={onChange} />,
+    );
+    expect(screen.getByText("Hallo!")).not.toBeUndefined();
+  });
+});

chartlets.js/packages/lib/src/plugins/mui/Button.test.tsx

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import type {
+  ComponentChangeEvent,
+  ComponentChangeHandler,
+} from "@/types/state/event";
+import { Button } from "./Button";
+
+describe("Button", () => {
+  it("should render the Button component", () => {
+    const onChange: ComponentChangeHandler = () => {};
+    render(
+      <Button id="bt" type={"Button"} text={"Click!"} onChange={onChange} />,
+    );
+    expect(screen.getByText("Click!")).not.toBeUndefined();
+  });
+
+  it("should fire the 'clicked'", () => {
+    let recordedEvent: ComponentChangeEvent | undefined = undefined;
+    const onChange: ComponentChangeHandler = (event) => {
+      recordedEvent = event;
+    };
+    render(
+      <Button
+        data-testid="bt"
+        id="bt"
+        type={"Button"}
+        text={"Click!"}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByText("Click!"));
+    expect(recordedEvent).not.toBeUndefined();
+  });
+});

chartlets.js/packages/lib/src/plugins/vega/VegaChart.test.tsx

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { VegaChart } from "./VegaChart";
+import type { ComponentChangeHandler } from "@/types/state/event";
+
+describe("VegaChart", () => {
+  it("should render the VegaChart component if chart is not given", () => {
+    const onChange: ComponentChangeHandler = () => {};
+    render(
+      <VegaChart id="vc" type={"VegaChart"} chart={null} onChange={onChange} />,
+    );
+    expect(document.querySelector("#vc")).not.toBeUndefined();
+  });
+});