soufiane
4962ef6848
- Add tests for PrizeCard component (8 tests, 85-100% coverage) - Add tests for StatCard component (12 tests, 88-100% coverage) - Add tests for StatusBadge component (19 tests, 94-97% coverage) - Add tests for TeaIconsBackground component (7 tests, 87-100% coverage) - Total: 50 new tests for improved code coverage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
/**
|
||
* Tests for the TeaIconsBackground component
|
||
* @jest-environment jsdom
|
||
*/
|
||
|
||
import React from 'react';
|
||
import { render } from '@testing-library/react';
|
||
import TeaIconsBackground from '@/components/TeaIconsBackground';
|
||
|
||
// 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} data-testid="tea-icon" />;
|
||
},
|
||
}));
|
||
|
||
describe('TeaIconsBackground', () => {
|
||
it('should render the background container', () => {
|
||
const { container } = render(<TeaIconsBackground />);
|
||
|
||
// Check for fixed positioning
|
||
const fixedDiv = container.querySelector('.fixed');
|
||
expect(fixedDiv).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render all 35 tea icons', () => {
|
||
const { getAllByTestId } = render(<TeaIconsBackground />);
|
||
|
||
const icons = getAllByTestId('tea-icon');
|
||
expect(icons).toHaveLength(35);
|
||
});
|
||
|
||
it('should render gradient background', () => {
|
||
const { container } = render(<TeaIconsBackground />);
|
||
|
||
const gradientDiv = container.querySelector('.bg-gradient-to-br');
|
||
expect(gradientDiv).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render overlay', () => {
|
||
const { container } = render(<TeaIconsBackground />);
|
||
|
||
const overlayDiv = container.querySelector('.bg-gradient-radial');
|
||
expect(overlayDiv).toBeInTheDocument();
|
||
});
|
||
|
||
it('should apply animationKey to icon container when provided', () => {
|
||
const animationKey = 12345;
|
||
const { container } = render(<TeaIconsBackground animationKey={animationKey} />);
|
||
|
||
// The icons container should be keyed
|
||
const iconsContainer = container.querySelector('.opacity-\\[0\\.5\\]');
|
||
expect(iconsContainer).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render icons with correct alt texts', () => {
|
||
const { getAllByAltText } = render(<TeaIconsBackground />);
|
||
|
||
// Check for some expected alt texts
|
||
const teapotGreen = getAllByAltText('Théière verte');
|
||
const teaCup = getAllByAltText('Tasse de thé');
|
||
const giftBox = getAllByAltText('Boîte cadeau');
|
||
const teaLeaves = getAllByAltText('Feuilles de thé');
|
||
const teapotPink = getAllByAltText('Théière rose');
|
||
|
||
// Each icon type appears 7 times (7 rows × 1 per row approximately)
|
||
expect(teapotGreen.length).toBeGreaterThan(0);
|
||
expect(teaCup.length).toBeGreaterThan(0);
|
||
expect(giftBox.length).toBeGreaterThan(0);
|
||
expect(teaLeaves.length).toBeGreaterThan(0);
|
||
expect(teapotPink.length).toBeGreaterThan(0);
|
||
});
|
||
|
||
it('should apply animate-float-gentle class to icons', () => {
|
||
const { container } = render(<TeaIconsBackground />);
|
||
|
||
const animatedIcons = container.querySelectorAll('.animate-float-gentle');
|
||
expect(animatedIcons.length).toBe(35);
|
||
});
|
||
});
|