desertthunder.dev
learn and share notes on atproto (wip) 馃
malfestio.stormlightlabs.org/
readability
solid
axum
atproto
srs
1import type { Note } from "$lib/model";
2import { MemoryRouter, Route } from "@solidjs/router";
3import { cleanup, render, screen } from "@solidjs/testing-library";
4import { afterEach, describe, expect, it, vi } from "vitest";
5import { NoteCard } from "../NoteCard";
6
7vi.mock("$lib/density-context", () => ({ useDensity: vi.fn(() => "comfortable") }));
8
9const mockNote: Note = {
10 id: "note-1",
11 owner_did: "did:plc:test123",
12 title: "Test Note",
13 body: "This is the body of the test note with some **markdown** content.",
14 tags: ["rust", "learning"],
15 visibility: { type: "Private" },
16 created_at: "2026-01-01T10:00:00Z",
17 updated_at: "2026-01-01T12:00:00Z",
18};
19
20describe("NoteCard", () => {
21 afterEach(cleanup);
22
23 it("renders note title", () => {
24 render(() => (
25 <MemoryRouter>
26 <Route path="/" component={() => <NoteCard note={mockNote} />} />
27 </MemoryRouter>
28 ));
29 expect(screen.getByText("Test Note")).toBeInTheDocument();
30 });
31
32 it("renders truncated body preview", () => {
33 render(() => (
34 <MemoryRouter>
35 <Route path="/" component={() => <NoteCard note={mockNote} />} />
36 </MemoryRouter>
37 ));
38 expect(screen.getByText(/This is the body/)).toBeInTheDocument();
39 });
40
41 it("renders tags", () => {
42 render(() => (
43 <MemoryRouter>
44 <Route path="/" component={() => <NoteCard note={mockNote} />} />
45 </MemoryRouter>
46 ));
47 expect(screen.getByText("rust")).toBeInTheDocument();
48 expect(screen.getByText("learning")).toBeInTheDocument();
49 });
50
51 it("links to note view page", () => {
52 render(() => (
53 <MemoryRouter>
54 <Route path="/" component={() => <NoteCard note={mockNote} />} />
55 </MemoryRouter>
56 ));
57 const link = screen.getByRole("link");
58 expect(link).toHaveAttribute("href", "/notes/note-1");
59 });
60
61 it("shows +N for excess tags", () => {
62 const noteWithManyTags: Note = { ...mockNote, tags: ["tag1", "tag2", "tag3", "tag4", "tag5"] };
63 render(() => (
64 <MemoryRouter>
65 <Route path="/" component={() => <NoteCard note={noteWithManyTags} />} />
66 </MemoryRouter>
67 ));
68 expect(screen.getByText("+2")).toBeInTheDocument();
69 });
70});