Mirror the #tag mark so the TipTap editor styles @username while typing and on load, matching the read-only view. A shared mention grammar (utils/mention-grammar.ts) feeds both the editor tokenizer and the read-only remark renderer so they can't drift. Styling only -- no autocomplete dropdown (ListUsers is admin-only and there is no user-search RPC). Bare emails still autolink to mailto: and are never treated as mentions: the tokenizer's start() skips email-glued @s so marked's GFM autolinker keeps seeing the whole address.
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { render, screen, within } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it } from "vitest";
|
|
import { TILE_SPRITES } from "@/components/Placeholder/tileSprites";
|
|
import About from "@/pages/About";
|
|
|
|
describe("<About>", () => {
|
|
afterEach(() => {
|
|
document.documentElement.removeAttribute("data-theme");
|
|
});
|
|
|
|
it("renders the product story and current bird sprites", () => {
|
|
render(<About />);
|
|
|
|
expect(screen.getByRole("heading", { name: "Memos" })).toBeInTheDocument();
|
|
expect(screen.getByText(/Capture first/i)).toBeInTheDocument();
|
|
expect(screen.getByText(/quick capture/i)).toBeInTheDocument();
|
|
|
|
const birds = screen.getByRole("region", { name: "Birds" });
|
|
expect(within(birds).getAllByTestId("about-bird-sprite")).toHaveLength(TILE_SPRITES.length);
|
|
|
|
for (const sprite of TILE_SPRITES) {
|
|
expect(within(birds).getByText(sprite.name)).toBeInTheDocument();
|
|
}
|
|
});
|
|
|
|
it("does not add nested horizontal page padding on mobile", () => {
|
|
const { container } = render(<About />);
|
|
|
|
const contentWrapper = container.querySelector("section > div");
|
|
|
|
expect(contentWrapper).toHaveClass("w-full");
|
|
expect(contentWrapper).not.toHaveClass("px-4");
|
|
});
|
|
});
|