adilallo
110 lines
3.5 KiB
React
110 lines
3.5 KiB
React
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import ContentThumbnailTemplate from "../../app/components/content/ContentThumbnailTemplate";
|
|
|
|
vi.mock("next/link", () => {
|
|
return {
|
|
default: ({ children, href, ...props }) => (
|
|
<a href={href} {...props}>
|
|
{children}
|
|
</a>
|
|
),
|
|
};
|
|
});
|
|
|
|
const mockPost = {
|
|
slug: "test-post",
|
|
frontmatter: {
|
|
title: "Test Blog Post Title",
|
|
description:
|
|
"This is a test description for the blog post that should be long enough to test truncation.",
|
|
author: "Test Author",
|
|
date: "2025-04-15",
|
|
thumbnail: {
|
|
vertical: "test-post-vertical.svg",
|
|
horizontal: "test-post-horizontal.svg",
|
|
},
|
|
},
|
|
};
|
|
|
|
describe("ContentThumbnailTemplate", () => {
|
|
describe("Vertical Variant", () => {
|
|
it("should render vertical variant with fluid Figma aspect ratio", () => {
|
|
render(<ContentThumbnailTemplate post={mockPost} />);
|
|
|
|
const container = screen.getByRole("link");
|
|
const thumbnailDiv = container.querySelector("div.relative");
|
|
expect(thumbnailDiv).toHaveClass("aspect-[260/390]", "w-full");
|
|
});
|
|
|
|
it("should display post title and description", () => {
|
|
render(<ContentThumbnailTemplate post={mockPost} />);
|
|
|
|
expect(screen.getByText("Test Blog Post Title")).toBeInTheDocument();
|
|
expect(
|
|
screen.getByText(/This is a test description/),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it("should display author and date metadata", () => {
|
|
render(<ContentThumbnailTemplate post={mockPost} />);
|
|
|
|
expect(screen.getByText("Test Author")).toBeInTheDocument();
|
|
expect(screen.getByText("April 2025")).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe("Horizontal Variant", () => {
|
|
it("should render horizontal variant with fluid Figma aspect ratio", () => {
|
|
render(<ContentThumbnailTemplate post={mockPost} variant="horizontal" />);
|
|
|
|
const container = screen.getByRole("link");
|
|
const thumbnailDiv = container.querySelector("div.relative");
|
|
expect(thumbnailDiv).toHaveClass("aspect-[320/225.5]", "w-full");
|
|
});
|
|
|
|
it("should render fixed vertical dimensions when sizing is fixed", () => {
|
|
render(<ContentThumbnailTemplate post={mockPost} sizing="fixed" />);
|
|
|
|
const container = screen.getByRole("link");
|
|
const thumbnailDiv = container.querySelector("div.relative");
|
|
expect(thumbnailDiv).toHaveClass("h-[390px]", "w-[260px]");
|
|
});
|
|
});
|
|
|
|
describe("Props and Customization", () => {
|
|
it("should apply custom className", () => {
|
|
render(
|
|
<ContentThumbnailTemplate post={mockPost} className="custom-class" />,
|
|
);
|
|
|
|
expect(screen.getByRole("link")).toHaveClass("custom-class");
|
|
});
|
|
|
|
it("should generate correct link href", () => {
|
|
render(<ContentThumbnailTemplate post={mockPost} />);
|
|
|
|
expect(screen.getByRole("link")).toHaveAttribute(
|
|
"href",
|
|
"/blog/test-post",
|
|
);
|
|
});
|
|
|
|
it("should use article-specific thumbnail images when provided", () => {
|
|
render(<ContentThumbnailTemplate post={mockPost} />);
|
|
|
|
const backgroundImg = document.querySelector('img[src*="test-post-vertical"]');
|
|
expect(backgroundImg).toBeInTheDocument();
|
|
});
|
|
|
|
it("should use horizontal thumbnail for horizontal variant", () => {
|
|
render(<ContentThumbnailTemplate post={mockPost} variant="horizontal" />);
|
|
|
|
const backgroundImg = document.querySelector(
|
|
'img[src*="test-post-horizontal"]',
|
|
);
|
|
expect(backgroundImg).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|