ai1ywm5xi: Add the Discover sheet with featured, trending, find experts panels and the appearance switch

2026-10-20 08:49:11 -06:00
parent 695ebe1095
commit cfdca1f270
10 changed files with 307 additions and 10 deletions
@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { readFileSync } from "node:fs";
+import { DiscoverPanelSheet, DiscoverSheet, featuredSubtitle, PANEL_CAROUSEL_SIZE } from "@/components/DiscoverSheet";
+import { FIXTURE_DISCOVER } from "@/dev/fixtures";
+
+const experts = FIXTURE_DISCOVER.featuredExperts;
+const html = (el: ReturnType<typeof createElement>) => renderToStaticMarkup(el);
+
+describe("featuredSubtitle", () => {
+  it("names two experts and counts the rest", () => {
+    const list = [{ displayName: "A" }, { displayName: "B" }, { displayName: "C" }, { displayName: "D" }];
+    expect(featuredSubtitle(list)).toBe("A, B and 2 more");
+    expect(featuredSubtitle(list.slice(0, 3))).toBe("A, B and 1 more");
+  });
+  it("reads plainly for short lists", () => {
+    expect(featuredSubtitle([])).toBe("");
+    expect(featuredSubtitle([{ displayName: "A" }])).toBe("A");
+    expect(featuredSubtitle([{ displayName: "A" }, { displayName: "B" }])).toBe("A and B");
+  });
+});
+
+describe("Discover sheet", () => {
+  const out = html(createElement(DiscoverSheet, { experts, onOpen: () => {}, onClose: () => {} }));
+  it("has three depth rows and the appearance switch", () => {
+    expect(out).toContain("Discover");
+    expect((out.match(/btn-depth"/g) ?? []).length).toBe(3);
+    expect(out).toContain("Featured experts");
+    expect(out).toContain("Trending minnects");
+    expect(out).toContain("Find experts");
+    expect(out).toContain('aria-label="Appearance"');
+    expect(out).toContain("Dark");
+    expect(out).toContain("Light");
+    expect(out).toContain(featuredSubtitle(experts));
+  });
+});
+
+describe("Discover panel sheets", () => {
+  it("shows the featured carousel at 150px", () => {
+    expect(PANEL_CAROUSEL_SIZE).toBe(150);
+    const out = html(createElement(DiscoverPanelSheet, { panel: "featured", experts, trending: [], onClose: () => {} }));
+    expect(out).toContain("--cfw:150px");
+    expect(out).toContain('aria-label="Close"');
+  });
+  it("is 80% high", () => {
+    const css = readFileSync("src/styles/sheet.css", "utf8");
+    expect(css).toMatch(/\.sheet-panel\s*\{[^}]*height:\s*80%/);
+  });
+});