test(ui): cover masked/mono/dl on AddressDisplay, add Separator suite, SkeletonCard custom header & SkeletonRow count (#338)

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(<AddressDisplay address={address} masked />);
+    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(<AddressDisplay address={address} mono />);
+    const el = screen.getByText(/GBAMQXTQ/);
+    expect(el.className).toContain("font-mono");
+  });
+
+  it("does not apply font-mono class by default", () => {
+    render(<AddressDisplay address={address} />);
+    const el = screen.getByText(/GBAMQXTQ/);
+    expect(el.className).not.toContain("font-mono");
+  });
+
+  it("renders <dl>/<dt>/<dd> structure when label is provided", () => {
+    const { container } = render(<AddressDisplay address={address} label="Source" />);
+    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 <dd> wraps the address span, so the addressSpan ends up under it.
+    expect(dd?.querySelector("[data-address]")).not.toBeNull();
+  });
+
+  it("does not render <dl> when label is omitted", () => {
+    const { container } = render(<AddressDisplay address={address} />);
+    expect(container.querySelector("dl")).toBeNull();
+    expect(container.querySelector("dt")).toBeNull();
+    expect(container.querySelector("dd")).toBeNull();
+  });
 });

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(<Separator />);
+    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(<Separator orientation="vertical" />);
+    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(<Separator label="OR" />);
+    expect(screen.getByText("OR")).toBeInTheDocument();
+  });
+
+  it("does not render the label container when label is omitted", () => {
+    const { container } = render(<Separator />);
+    // 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(<Separator spacing="sm" />);
+    expect((sm.firstElementChild as HTMLElement).className).toContain("my-2");
+
+    const { container: md } = render(<Separator spacing="md" />);
+    expect((md.firstElementChild as HTMLElement).className).toContain("my-4");
+
+    const { container: lg } = render(<Separator spacing="lg" />);
+    expect((lg.firstElementChild as HTMLElement).className).toContain("my-6");
+  });
+
+  it("forwarded className lands on the rendered element", () => {
+    const { container } = render(<Separator className="extra-class" />);
+    expect(container.firstElementChild).toHaveClass("extra-class");
+  });
+});

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(
+      <SkeletonCard
+        structure={
+          <div data-testid="custom-header">Header content</div>
+        }
+      />,
+    );
+    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(
+      <SkeletonCard>
+        <div data-testid="custom-child">Child slot content</div>
+      </SkeletonCard>,
+    );
+    expect(screen.getByTestId("custom-child")).toHaveTextContent("Child slot content");
+  });
 });
 
 describe("AssetRowSkeleton", () => {