39 lines
1.9 KiB
TypeScript
39 lines
1.9 KiB
TypeScript
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} />");
|
|
});
|
|
});
|