memos/web/tests/about-page.test.tsx
boojack daa71d0456 feat(editor): recognize and style @mentions in the rich editor
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.
2026-06-26 09:28:41 +08:00

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");
});
});