96 lines
3.1 KiB
React
96 lines
3.1 KiB
React
import { describe, test, expect, vi } from "vitest";
|
|
import { screen, waitFor } from "@testing-library/react";
|
|
import { renderWithProviders as render } from "../utils/test-utils";
|
|
import HowItWorksPage from "../../app/(marketing)/how-it-works/page";
|
|
import messages from "../../messages/en/index";
|
|
|
|
vi.mock("next/dynamic", () => ({
|
|
default: (importFn) => {
|
|
const Component = vi.fn(() => (
|
|
<section data-testid="related-articles">Related articles</section>
|
|
));
|
|
return Component;
|
|
},
|
|
}));
|
|
|
|
vi.mock("../../app/components/sections/ContentBanner", () => ({
|
|
default: ({ post, variant }) => (
|
|
<section data-testid="content-banner" data-variant={variant}>
|
|
<h1>{post.frontmatter.title}</h1>
|
|
<p>{post.frontmatter.description}</p>
|
|
</section>
|
|
),
|
|
}));
|
|
|
|
vi.mock("../../app/components/sections/AskOrganizer", () => ({
|
|
default: ({ title, subtitle, buttonText }) => (
|
|
<section data-testid="ask-organizer">
|
|
<h2>{title}</h2>
|
|
<p>{subtitle}</p>
|
|
<button type="button">{buttonText}</button>
|
|
</section>
|
|
),
|
|
}));
|
|
|
|
describe("HowItWorksPage", () => {
|
|
const page = messages.pages.howItWorks;
|
|
|
|
test("renders banner, body sections, related articles, and ask organizer", async () => {
|
|
render(<HowItWorksPage />);
|
|
|
|
expect(screen.getByTestId("content-banner")).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole("heading", { name: page.banner.title }),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByTestId("content-banner")).toHaveAttribute(
|
|
"data-variant",
|
|
"guide",
|
|
);
|
|
expect(screen.getByText(page.banner.description)).toBeInTheDocument();
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByTestId("related-articles")).toBeInTheDocument();
|
|
});
|
|
|
|
expect(screen.getByTestId("ask-organizer")).toBeInTheDocument();
|
|
expect(
|
|
screen.getByText(messages.pages.home.askOrganizer.title),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByText(/How the Platform Works: From Chaos to Clarity/),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByText(/mutual aid network, manage an open-source project/),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
test("clips body ornaments at the page frame and keeps them behind copy", () => {
|
|
const { container } = render(<HowItWorksPage />);
|
|
|
|
const page = container.querySelector("div.min-h-screen");
|
|
expect(page).toHaveClass("overflow-x-clip");
|
|
|
|
const right = container.querySelector('[data-node-id="19003:23575"]');
|
|
const left = container.querySelector('[data-node-id="19003:23576"]');
|
|
expect(right).toHaveClass(
|
|
"z-0",
|
|
"left-[87.19%]",
|
|
"right-0",
|
|
"top-[266px]",
|
|
"lg:left-[84.86%]",
|
|
"lg:top-[255px]",
|
|
);
|
|
expect(left).toHaveClass("z-0", "left-0", "right-[88.38%]", "top-[811px]");
|
|
|
|
const rightImg = right?.querySelector("img");
|
|
const leftImg = left?.querySelector("img");
|
|
expect(rightImg).toHaveAttribute(
|
|
"src",
|
|
"/assets/shapes/how-shape-2.svg",
|
|
);
|
|
expect(leftImg).toHaveAttribute("src", "/assets/shapes/how-shape-1.svg");
|
|
expect(rightImg).toHaveClass("object-contain");
|
|
expect(leftImg).toHaveClass("object-contain");
|
|
});
|
|
});
|