114 lines
3.4 KiB
TypeScript
114 lines
3.4 KiB
TypeScript
import { experimental_AstroContainer as AstroContainer } from "astro/container";
|
|
import { describe, it, expect } from "vitest";
|
|
import MovieCard from "../MovieCard.astro";
|
|
|
|
describe("MovieCard", () => {
|
|
const mockMovie = {
|
|
title: "Test Movie",
|
|
poster: "/test-poster.jpg",
|
|
};
|
|
|
|
it("renders with required props", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: mockMovie,
|
|
});
|
|
|
|
expect(result).toContain('class="movie-card"');
|
|
expect(result).toContain("Test Movie");
|
|
expect(result).toContain('src="/test-poster.jpg"');
|
|
expect(result).toContain('alt="Test Movie"');
|
|
expect(result).toContain('class="movie-title"');
|
|
expect(result).toContain('class="movie-poster"');
|
|
});
|
|
|
|
it("renders as div by default", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: mockMovie,
|
|
});
|
|
|
|
expect(result).toContain('<div class="movie-card"');
|
|
});
|
|
|
|
it("renders as anchor when href provided", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: { ...mockMovie, href: "/movie/123" },
|
|
});
|
|
|
|
expect(result).toContain('<a class="movie-card"');
|
|
expect(result).toContain('href="/movie/123"');
|
|
});
|
|
|
|
it("displays movie year and genre", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: { ...mockMovie, year: 2023, genre: "Action" },
|
|
});
|
|
|
|
expect(result).toContain('class="movie-meta"');
|
|
expect(result).toContain("2023");
|
|
expect(result).toContain("Action");
|
|
expect(result).toContain("•");
|
|
});
|
|
|
|
it("displays only year when genre not provided", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: { ...mockMovie, year: 2023 },
|
|
});
|
|
|
|
expect(result).toContain("2023");
|
|
expect(result).not.toContain("•");
|
|
});
|
|
|
|
it("displays only genre when year not provided", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: { ...mockMovie, genre: "Drama" },
|
|
});
|
|
|
|
expect(result).toContain("Drama");
|
|
expect(result).not.toContain("•");
|
|
});
|
|
|
|
it("displays rating when provided", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: { ...mockMovie, rating: 8.5 },
|
|
});
|
|
|
|
expect(result).toContain('class="movie-rating"');
|
|
expect(result).toContain("⭐");
|
|
expect(result).toContain("8.5/10");
|
|
});
|
|
|
|
it("does not display rating when not provided", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: mockMovie,
|
|
});
|
|
|
|
expect(result).not.toContain('class="movie-rating"');
|
|
});
|
|
|
|
it("applies custom classes", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: { ...mockMovie, class: "featured-movie" },
|
|
});
|
|
|
|
expect(result).toContain("movie-card featured-movie");
|
|
});
|
|
|
|
it("applies lazy loading to poster", async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MovieCard, {
|
|
props: mockMovie,
|
|
});
|
|
|
|
expect(result).toContain('loading="lazy"');
|
|
});
|
|
});
|