Profile page UI and functionality implemented

tests/components/layout/List.test.tsx

@@ -0,0 +1,90 @@
+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 List from "../../../app/components/layout/List";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../../utils/componentTestSuite";
+
+const items = [
+  {
+    id: "a",
+    title: "First",
+    description: "First description",
+    href: "/first",
+  },
+  {
+    id: "b",
+    title: "Second",
+    description: "Second description",
+    onClick: () => {},
+  },
+];
+
+type Props = React.ComponentProps<typeof List>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: List,
+  name: "List",
+  props: { items } as Props,
+  primaryRole: "list",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+};
+
+describe("List", () => {
+  componentTestSuite<Props>(config);
+
+  it("renders a link row when item has href", () => {
+    render(
+      <List
+        items={[
+          {
+            id: "1",
+            title: "T",
+            description: "D",
+            href: "/x",
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByRole("link", { name: /T/ })).toHaveAttribute("href", "/x");
+  });
+
+  it("calls onClick for button rows", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <List
+        items={[
+          {
+            id: "1",
+            title: "Action",
+            description: "Desc",
+            onClick,
+          },
+        ]}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: /Action/ }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies size s and l Figma data attributes on the list root", () => {
+    const { container: a, rerender } = render(<List items={items} size="s" />);
+    expect(
+      a.querySelector('[data-figma-node="21863:45631"]'),
+    ).toBeInTheDocument();
+    rerender(<List items={items} size="l" />);
+    expect(
+      a.querySelector('[data-figma-node="21844:4405"]'),
+    ).toBeInTheDocument();
+  });
+});

tests/components/layout/ListEntry.test.tsx

@@ -0,0 +1,84 @@
+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 ListEntry from "../../../app/components/layout/ListEntry";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../../utils/componentTestSuite";
+
+type Props = React.ComponentProps<typeof ListEntry>;
+
+const base: Props = {
+  title: "Item",
+  description: "Description",
+  href: "#",
+  topDivider: false,
+  bottomDivider: true,
+};
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: ListEntry,
+  name: "ListEntry",
+  props: base,
+  primaryRole: "link",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: true,
+    disabledState: false,
+    errorState: false,
+  },
+};
+
+describe("ListEntry", () => {
+  componentTestSuite<Props>(config);
+
+  it("uses Base / Interactive Figma id for size m", () => {
+    const { container } = render(
+      <ListEntry
+        title="A"
+        description="B"
+        size="m"
+        href="#"
+        topDivider={false}
+        bottomDivider={false}
+      />,
+    );
+    expect(
+      container.querySelector('[data-figma-node="21863:45422"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("omits description when showDescription is false", () => {
+    render(
+      <ListEntry
+        title="Only"
+        description="Hidden"
+        showDescription={false}
+        href="#"
+        topDivider={false}
+        bottomDivider={false}
+      />,
+    );
+    expect(screen.getByRole("link", { name: "Only" })).toBeInTheDocument();
+    expect(screen.queryByText("Hidden")).not.toBeInTheDocument();
+  });
+
+  it("button fires onClick", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <ListEntry
+        title="Tap"
+        description="D"
+        onClick={onClick}
+        topDivider={false}
+        bottomDivider={false}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: /Tap/ }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});