diff --git a/src/components/AddressDisplay.test.tsx b/src/components/AddressDisplay.test.tsx
index 76899cc..695b2c5 100644
--- a/src/components/AddressDisplay.test.tsx
+++ b/src/components/AddressDisplay.test.tsx
@@ -143,4 +143,45 @@ describe("AddressDisplay", () => {
expect(el.className).toContain("font-mono");
});
});
+
+ it("renders the masked 4-prefix + middot + 4-suffix form when masked is true", () => {
+ const { container } = render();
+ const el = container.querySelector("[data-address]") as HTMLElement;
+ expect(el.textContent).toMatch(/^GBAM.+QQQQ$/);
+ expect(el.textContent?.length ?? 0).toBeLessThan(address.length);
+ // The truncated middle chunk should not appear when masked is on.
+ expect(el.textContent).not.toContain("QXTQ");
+ });
+
+ it("applies font-mono class when mono prop is true", () => {
+ render();
+ const el = screen.getByText(/GBAMQXTQ/);
+ expect(el.className).toContain("font-mono");
+ });
+
+ it("does not apply font-mono class by default", () => {
+ render();
+ const el = screen.getByText(/GBAMQXTQ/);
+ expect(el.className).not.toContain("font-mono");
+ });
+
+ it("renders
/- /
- structure when label is provided", () => {
+ const { container } = render();
+ expect(container.querySelector("dl")).toBeInTheDocument();
+ const dt = container.querySelector("dt");
+ expect(dt).toHaveTextContent("Source");
+ expect(dt?.tagName).toBe("DT");
+ const dd = container.querySelector("dd");
+ expect(dd).toBeInTheDocument();
+ expect(dd?.tagName).toBe("DD");
+ // The
- wraps the address span, so the addressSpan ends up under it.
+ expect(dd?.querySelector("[data-address]")).not.toBeNull();
+ });
+
+ it("does not render
when label is omitted", () => {
+ const { container } = render();
+ expect(container.querySelector("dl")).toBeNull();
+ expect(container.querySelector("dt")).toBeNull();
+ expect(container.querySelector("dd")).toBeNull();
+ });
});
diff --git a/src/components/ui/Separator.test.tsx b/src/components/ui/Separator.test.tsx
new file mode 100644
index 0000000..2195de1
--- /dev/null
+++ b/src/components/ui/Separator.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Separator } from "./Separator";
+
+describe("Separator", () => {
+ it("renders with role=separator by default", () => {
+ const { container } = render();
+ expect(container.firstElementChild).toHaveAttribute("role", "separator");
+ });
+
+ it("renders a vertical orientation as a 1px full-height column and exposes aria-orientation=vertical", () => {
+ const { container } = render();
+ const root = container.firstElementChild as HTMLElement;
+ expect(root).toHaveAttribute("role", "separator");
+ expect(root).toHaveAttribute("aria-orientation", "vertical");
+ expect(root).toHaveClass("w-px");
+ expect(root).toHaveClass("h-full");
+ });
+
+ it("renders the supplied label between the two horizontal lines", () => {
+ render();
+ expect(screen.getByText("OR")).toBeInTheDocument();
+ });
+
+ it("does not render the label container when label is omitted", () => {
+ const { container } = render();
+ // The unlabeled horizontal path renders only the line itself.
+ const root = container.firstElementChild as HTMLElement;
+ expect(root.querySelector("span")).toBeNull();
+ expect(root).toHaveClass("h-px");
+ expect(root).toHaveClass("bg-line");
+ });
+
+ it("applies the matching my-* spacing class for each spacing level", () => {
+ const { container: sm } = render();
+ expect((sm.firstElementChild as HTMLElement).className).toContain("my-2");
+
+ const { container: md } = render();
+ expect((md.firstElementChild as HTMLElement).className).toContain("my-4");
+
+ const { container: lg } = render();
+ expect((lg.firstElementChild as HTMLElement).className).toContain("my-6");
+ });
+
+ it("forwarded className lands on the rendered element", () => {
+ const { container } = render();
+ expect(container.firstElementChild).toHaveClass("extra-class");
+ });
+});
diff --git a/src/components/ui/Skeleton.test.tsx b/src/components/ui/Skeleton.test.tsx
index bb38b50..8f870b7 100644
--- a/src/components/ui/Skeleton.test.tsx
+++ b/src/components/ui/Skeleton.test.tsx
@@ -106,6 +106,28 @@ describe("SkeletonCard", () => {
expect(afterRows.length).toBe(2);
void before; // suppress unused-var lint
});
+
+ it("renders the provided structure prop instead of the default header + rows layout", () => {
+ const { container } = render(
+ Header content
+ }
+ />,
+ );
+ expect(screen.getByTestId("custom-header")).toHaveTextContent("Header content");
+ // The default header is replaced wholesale — no default h-4/w-32 marker present.
+ expect(container.querySelector(".h-4.w-32")).toBeNull();
+ });
+
+ it("renders provided children instead of the default header + rows layout", () => {
+ render(
+
+ Child slot content
+ ,
+ );
+ expect(screen.getByTestId("custom-child")).toHaveTextContent("Child slot content");
+ });
});
describe("AssetRowSkeleton", () => {