You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
memos/web/tests/about-page.test.tsx

68 lines
2.8 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 sponsors = screen.getByRole("region", { name: "Sponsors" });
expect(within(sponsors).getByRole("link", { name: /CodeRabbit/i })).toHaveAttribute("href", "https://coderabbit.link/usememos");
expect(within(sponsors).getByRole("link", { name: /Warp/i })).toHaveAttribute("href", "https://go.warp.dev/memos");
expect(within(sponsors).getByText(/Cut code review time/i)).toBeInTheDocument();
expect(within(sponsors).getByText(/agentic development environment/i)).toBeInTheDocument();
expect(within(sponsors).getByAltText("CodeRabbit").closest("a")).toHaveAttribute("href", "https://coderabbit.link/usememos");
expect(
within(sponsors)
.getByText(/Cut code review time/i)
.closest("a"),
).toHaveAttribute("href", "https://coderabbit.link/usememos");
expect(within(sponsors).getByAltText("Warp").closest("a")).toHaveAttribute("href", "https://go.warp.dev/memos");
expect(
within(sponsors)
.getByText(/agentic development environment/i)
.closest("a"),
).toHaveAttribute("href", "https://go.warp.dev/memos");
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");
});
it("uses dark sponsor logos when the app theme is dark", () => {
document.documentElement.setAttribute("data-theme", "default-dark");
render(<About />);
expect(screen.getByAltText("CodeRabbit")).toHaveAttribute(
"src",
"https://victorious-bubble-f69a016683.media.strapiapp.com/White_Typemark_79b9189d19.svg",
);
expect(screen.getByAltText("Warp")).toHaveAttribute(
"src",
"https://raw.githubusercontent.com/warpdotdev/brand-assets/refs/heads/main/Logos/Warp-Wordmark-White.png",
);
});
});