57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { render, screen } from "@testing-library/react";
|
|
|
|
import DataSet from "./DataSet";
|
|
|
|
describe("DataSet", () => {
|
|
it("renders title and value", () => {
|
|
render(<DataSet title="Author" value="Alice" />);
|
|
expect(screen.getByText("Author")).toBeInTheDocument();
|
|
expect(screen.getByText("Alice")).toBeInTheDocument();
|
|
});
|
|
|
|
it("uses vertical orientation by default (no horizontal class, no colon)", () => {
|
|
const { container } = render(<DataSet title="Author" value="Alice" />);
|
|
expect(container.querySelector(".data-set__horizontal")).toBeNull();
|
|
expect(container.querySelector("dt")?.textContent).toBe("Author");
|
|
});
|
|
|
|
it("applies horizontal orientation class and appends a colon to the title", () => {
|
|
const { container } = render(
|
|
<DataSet title="Author" value="Alice" orientation="horizontal" />
|
|
);
|
|
expect(
|
|
container.querySelector(".data-set__horizontal")
|
|
).toBeInTheDocument();
|
|
expect(container.querySelector("dt")?.textContent).toBe("Author:");
|
|
});
|
|
|
|
it("applies the text-only modifier when textOnly is set", () => {
|
|
const { container } = render(
|
|
<DataSet title="Author" value="Alice" textOnly />
|
|
);
|
|
expect(container.querySelector(".data-set--text-only")).toBeInTheDocument();
|
|
});
|
|
|
|
it("applies the multiline modifier when multiline is set", () => {
|
|
const { container } = render(
|
|
<DataSet title="Resolve" value="Long remediation text." multiline />
|
|
);
|
|
expect(container.querySelector(".data-set--multiline")).toBeInTheDocument();
|
|
});
|
|
|
|
it("does not apply the multiline modifier by default", () => {
|
|
const { container } = render(<DataSet title="Author" value="Alice" />);
|
|
expect(container.querySelector(".data-set--multiline")).toBeNull();
|
|
});
|
|
|
|
it("merges a custom className alongside the base class", () => {
|
|
const { container } = render(
|
|
<DataSet title="Author" value="Alice" className="custom-class" />
|
|
);
|
|
const root = container.firstChild as HTMLElement;
|
|
expect(root).toHaveClass("data-set");
|
|
expect(root).toHaveClass("custom-class");
|
|
});
|
|
});
|