Enhance testing framework and add UI component tests. Integrated Vitest for testing with AstroContainer API. Updated package.json and bun.lock to include testing dependencies. Added comprehensive test cases for various UI components including Button, Alert, Badge, and more, ensuring proper rendering and functionality.

src/components/ui/__tests__/MovieCard.test.ts

@@ -0,0 +1,113 @@
+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"');
+	});
+});