3syisgbyq: Add a reusable bottom sheet with the comments and composer sheets on the phone feed

2026-10-20 08:42:32 -06:00
parent c94da3accd
commit f4f3ae28fc
5 changed files with 255 additions and 3 deletions
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { createElement, type FC } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { readFileSync } from "node:fs";
+import { BottomSheet } from "@/components/BottomSheet";
+
+const css = readFileSync("src/styles/sheet.css", "utf8");
+const feed = readFileSync("src/components/MobileFeed.tsx", "utf8");
+
+describe("BottomSheet", () => {
+  const html = renderToStaticMarkup(createElement(BottomSheet as FC<{ title: string; onClose: () => void }>, { title: "New post", onClose: () => {} }, createElement("p", null, "body")));
+  it("is a modal dialog named by its serif title, with a grab handle, close buttons and a backdrop", () => {
+    expect(html).toContain('role="dialog"');
+    expect(html).toContain('aria-modal="true"');
+    expect(html).toMatch(/aria-labelledby="([^"]+)"[\s\S]*<h2 id="\1"[^>]*type-title[^>]*>New post<\/h2>/);
+    expect(html).toContain("sheet-grab");
+    expect(html).toContain('class="sheet-bg"');
+    expect(html.match(/aria-label="Close"/g)?.length).toBe(2);
+    expect(html).toContain("<p>body</p>");
+  });
+  it("slides up over 450ms and turns the motion off under reduced motion", () => {
+    expect(css).toMatch(/animation: sheet-up \.45s/);
+    expect(css).toMatch(/prefers-reduced-motion: reduce[\s\S]*animation: none/);
+    expect(css).toMatch(/backdrop-filter: blur\(3px\)/);
+  });
+  it("gives the composer sheet a 150px text area", () => {
+    expect(css).toMatch(/\.sheet-composer \.composer textarea[\s\S]*height: 150px/);
+  });
+});
+
+describe("phone feed sheets", () => {
+  it("opens the shared comments section and composer from the dock", () => {
+    expect(feed).toContain('<BottomSheet title="Comments"');
+    expect(feed).toContain("<CommentsSection postId={sheet.postId}");
+    expect(feed).toContain('<BottomSheet title="New post"');
+    expect(feed).toContain("<Composer {...p.composer} />");
+  });
+});