Open History to see the last commit
1import { FileIcon } from "lucide-react";
2import { describe, expect, it } from "vite-plus/test";
3
4import "~/index.css";
5import { render } from "../../test/render";
6import { ContextChip, ContextChipLabel } from "./ContextChip";
7
8// An empty inline-block's bottom edge sits on the baseline of the line it is in.
9function BaselineMarker(props: { id: string }) {
10 return <span data-baseline={props.id} className="inline-block size-0" />;
11}
12
13describe("ContextChip", () => {
14 it("sets its label on the sentence baseline at the sentence size without growing the line", async () => {
15 await using screen = await render(
16 <p className="w-[60ch] text-sm leading-relaxed">
17 Open
18 <BaselineMarker id="text" /> the{" "}
19 <ContextChip kind="mention" render={<button type="button" />}>
20 <FileIcon />
21 <ContextChipLabel>
22 src/
23 <BaselineMarker id="chip" />
24 Typography.tsx
25 </ContextChipLabel>
26 </ContextChip>{" "}
27 file
28 </p>,
29 );
30 const paragraph = screen.container.querySelector("p")!;
31 const label = screen.container.querySelector<HTMLElement>('[data-slot="context-chip-label"]')!;
32 const baseline = (id: string) =>
33 screen.container.querySelector(`[data-baseline="${id}"]`)!.getBoundingClientRect().bottom;
34
35 expect(getComputedStyle(label).fontSize).toBe(getComputedStyle(paragraph).fontSize);
36 expect(Math.abs(baseline("chip") - baseline("text"))).toBeLessThanOrEqual(0.5);
37 expect(paragraph.getBoundingClientRect().height).toBeCloseTo(
38 Number.parseFloat(getComputedStyle(paragraph).lineHeight),
39 0,
40 );
41 });
42});