63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest';
|
|
import { render, screen } from '@testing-library/svelte';
|
|
import { userEvent } from '@testing-library/user-event';
|
|
import RecipeCard from './RecipeCard.svelte';
|
|
|
|
const mockRecipe = {
|
|
id: 'recipe-1',
|
|
name: 'Spaghetti Bolognese',
|
|
cookTimeMin: 30,
|
|
effort: 'Easy',
|
|
heroImageUrl: undefined
|
|
};
|
|
|
|
describe('RecipeCard', () => {
|
|
it('renders the recipe name', () => {
|
|
render(RecipeCard, { props: { recipe: mockRecipe } });
|
|
expect(screen.getByText('Spaghetti Bolognese')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders cook time when present', () => {
|
|
render(RecipeCard, { props: { recipe: mockRecipe } });
|
|
expect(screen.getByText(/30/)).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders effort when present', () => {
|
|
render(RecipeCard, { props: { recipe: mockRecipe } });
|
|
expect(screen.getByText(/easy/i)).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows placeholder when no heroImageUrl', () => {
|
|
render(RecipeCard, { props: { recipe: { ...mockRecipe, heroImageUrl: undefined } } });
|
|
expect(screen.queryByRole('img')).not.toBeInTheDocument();
|
|
expect(document.querySelector('[data-testid="image-placeholder"]')).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows image when heroImageUrl is provided', () => {
|
|
render(RecipeCard, {
|
|
props: { recipe: { ...mockRecipe, heroImageUrl: '/uploads/test.jpg' } }
|
|
});
|
|
const img = screen.getByRole('img');
|
|
expect(img).toHaveAttribute('src', '/uploads/test.jpg');
|
|
expect(img).toHaveAttribute('alt', 'Spaghetti Bolognese');
|
|
});
|
|
|
|
it('wraps in a link to the recipe detail page', () => {
|
|
render(RecipeCard, { props: { recipe: mockRecipe } });
|
|
const link = screen.getByRole('link');
|
|
expect(link).toHaveAttribute('href', '/recipes/recipe-1');
|
|
});
|
|
|
|
it('applies compact image height when compact prop is true', () => {
|
|
render(RecipeCard, { props: { recipe: mockRecipe, compact: true } });
|
|
const imageArea = document.querySelector('[data-testid="image-area"]');
|
|
expect(imageArea?.className).toContain('h-[64px]');
|
|
});
|
|
|
|
it('applies full image height when compact prop is false', () => {
|
|
render(RecipeCard, { props: { recipe: mockRecipe, compact: false } });
|
|
const imageArea = document.querySelector('[data-testid="image-area"]');
|
|
expect(imageArea?.className).toContain('h-[100px]');
|
|
});
|
|
});
|