51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
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%/);
|
|
});
|
|
});
|