soufiane
6b03ad8053
- Corriger les erreurs de contraste (text-primary-300 → text-primary-600) - Corriger la hiérarchie des titres (h3 → h2 pour GamePeriod et GrandPrize) - Supprimer les alt redondants sur les images décoratives (PrizeCard) - Ajouter aria-hidden sur les images décoratives - Ajouter aria-label descriptif sur le lien logo du Header - Utiliser les balises <time> pour les dates sémantiques - Convertir les textes importants en titres appropriés (h3, h4) - Mettre à jour les tests PrizeCard 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
/**
|
|
* Tests for the PrizeCard component
|
|
* @jest-environment jsdom
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { PrizeCard } from '@/components/ui/PrizeCard';
|
|
|
|
// Mock next/image
|
|
jest.mock('next/image', () => ({
|
|
__esModule: true,
|
|
default: (props: any) => {
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
return <img {...props} alt={props.alt} />;
|
|
},
|
|
}));
|
|
|
|
describe('PrizeCard', () => {
|
|
const defaultProps = {
|
|
imageSrc: '/images/lots/infuseur.png',
|
|
badge: '60%',
|
|
title: 'Infuseur à thé premium',
|
|
description: 'Un infuseur en acier inoxydable de haute qualité',
|
|
};
|
|
|
|
it('should render prize card with all props', () => {
|
|
render(<PrizeCard {...defaultProps} />);
|
|
|
|
expect(screen.getByText('Infuseur à thé premium')).toBeInTheDocument();
|
|
expect(screen.getByText('Un infuseur en acier inoxydable de haute qualité')).toBeInTheDocument();
|
|
expect(screen.getByText('60%')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render image with correct src and empty alt for decorative image', () => {
|
|
const { container } = render(<PrizeCard {...defaultProps} />);
|
|
|
|
const image = container.querySelector('img');
|
|
expect(image).toHaveAttribute('src', '/images/lots/infuseur.png');
|
|
expect(image).toHaveAttribute('alt', '');
|
|
});
|
|
|
|
it('should render with default styling for non-grand prix', () => {
|
|
const { container } = render(<PrizeCard {...defaultProps} />);
|
|
|
|
const card = container.firstChild;
|
|
expect(card).toHaveClass('border-beige-300');
|
|
expect(card).not.toHaveClass('border-primary-500');
|
|
});
|
|
|
|
it('should render with grand prix styling when isGrandPrix is true', () => {
|
|
const { container } = render(<PrizeCard {...defaultProps} isGrandPrix />);
|
|
|
|
const card = container.firstChild;
|
|
expect(card).toHaveClass('border-primary-500');
|
|
});
|
|
|
|
it('should apply custom className', () => {
|
|
const { container } = render(<PrizeCard {...defaultProps} className="custom-class" />);
|
|
|
|
const card = container.firstChild;
|
|
expect(card).toHaveClass('custom-class');
|
|
});
|
|
|
|
it('should render badge with different text', () => {
|
|
render(<PrizeCard {...defaultProps} badge="1 an de THÉ" />);
|
|
|
|
expect(screen.getByText('1 an de THÉ')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have correct structure with image container and content', () => {
|
|
const { container } = render(<PrizeCard {...defaultProps} />);
|
|
|
|
// Check image container exists with aria-hidden for decorative image
|
|
const imageContainer = container.querySelector('.aspect-square');
|
|
expect(imageContainer).toBeInTheDocument();
|
|
expect(imageContainer).toHaveAttribute('aria-hidden', 'true');
|
|
|
|
// Check title is h3
|
|
const title = screen.getByRole('heading', { level: 3 });
|
|
expect(title).toHaveTextContent('Infuseur à thé premium');
|
|
});
|
|
});
|