Profile page UI and functionality implemented

2026-04-25 17:57:58 -06:00
parent 7dd2562bae
commit 68517796a9
103 changed files with 4439 additions and 1476 deletions
@@ -0,0 +1,75 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import Link from "../../../app/components/navigation/Link";
+
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: {
+    children?: React.ReactNode;
+    href?: string;
+    [key: string]: unknown;
+  }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+const FIGMA = "21861:21428";
+
+describe("Link (Navigation)", () => {
+  it("renders an anchor with href and data-figma-node", () => {
+    const { container } = render(
+      <Link
+        href="/rules/1"
+        variant="paragraph"
+        type="primary"
+        theme="light"
+      >
+        View
+      </Link>,
+    );
+    const a = screen.getByRole("link", { name: /view/i });
+    expect(a).toHaveAttribute("href", "/rules/1");
+    expect(a).toHaveAttribute("data-figma-node", FIGMA);
+    expect(container.querySelector("a")?.className).toMatch(
+      /text-\[var\(--color-link-primary\)\]/,
+    );
+  });
+
+  it("renders a button when href is omitted", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <Link
+        variant="paragraph"
+        type="primary"
+        theme="light"
+        onClick={onClick}
+      >
+        Delete
+      </Link>,
+    );
+    const btn = screen.getByRole("button", { name: /delete/i });
+    expect(btn).toHaveAttribute("data-figma-node", FIGMA);
+    expect(btn).toHaveAttribute("type", "button");
+    await user.click(btn);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies secondary + dark classes for that combination", () => {
+    const { container } = render(
+      <Link href="#" variant="paragraph" type="secondary" theme="dark">
+        More
+      </Link>,
+    );
+    const el = container.querySelector("a");
+    expect(el?.className).toMatch(/text-\[var\(--color-link-invert-secondary\)\]/);
+  });
+});