@spatika/react 1.1.0 → 1.2.0

package/src/composites/chart-composition.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { ChartContainer } from "./chart-composition";
+
+describe("chart-composition", () => {
+  it("composes bar and line plots from a dataset with a toolbar", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <ChartContainer
+        width={360}
+        height={220}
+        zoom
+        showToolbar
+        dataset={[
+          { month: "Jan", views: 4, conv: 1 },
+          { month: "Feb", views: 6, conv: 2 },
+        ]}
+        xAxis={[{ dataKey: "month" }]}
+        series={[
+          { type: "bar", dataKey: "views", label: "Views" },
+          { type: "line", dataKey: "conv", label: "Conv" },
+        ]}
+      />,
+    );
+    expect(container.querySelector('[data-slot="bar-plot"]')).toBeTruthy();
+    expect(container.querySelector('[data-slot="line-plot"]')).toBeTruthy();
+    expect(screen.getByRole("toolbar", { name: "Chart tools" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Zoom in" }));
+    expect(container.querySelector("svg")).toBeTruthy();
+  });
+
+  it("stacks area series from a dataset", () => {
+    const { container } = render(
+      <ChartContainer
+        width={360}
+        height={220}
+        stacked
+        dataset={[
+          { month: "Jan", a: 2, b: 1 },
+          { month: "Feb", a: 3, b: 2 },
+        ]}
+        xAxis={[{ dataKey: "month" }]}
+        series={[
+          { type: "area", dataKey: "a", label: "A" },
+          { type: "area", dataKey: "b", label: "B" },
+        ]}
+      />,
+    );
+    expect(container.querySelector('[data-slot="area-plot"]')).toBeTruthy();
+    expect(container.querySelectorAll('[data-slot="area-plot"] path').length).toBeGreaterThanOrEqual(2);
+  });
+});