99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { Avatar } from './avatar';
|
|
|
|
describe('Avatar', () => {
|
|
it('should render with image when src is provided', () => {
|
|
render(<Avatar src="https://example.com/avatar.jpg" alt="Test User" />);
|
|
|
|
const img = screen.getByAltText('Test User');
|
|
expect(img).toBeInTheDocument();
|
|
expect(img).toHaveAttribute('src', 'https://example.com/avatar.jpg');
|
|
});
|
|
|
|
it('should render initials when no src is provided', () => {
|
|
render(<Avatar name="John Doe" />);
|
|
|
|
expect(screen.getByText('JD')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render initials from first and last name', () => {
|
|
render(<Avatar name="John Doe" />);
|
|
|
|
expect(screen.getByText('JD')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render first two characters when only one word', () => {
|
|
render(<Avatar name="John" />);
|
|
|
|
expect(screen.getByText('JO')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render initials from alt when name is not provided', () => {
|
|
render(<Avatar alt="Jane Smith" />);
|
|
|
|
expect(screen.getByText('JS')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render fallback "?" when no name or alt provided', () => {
|
|
render(<Avatar />);
|
|
|
|
expect(screen.getByText('?')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should fallback to initials when image fails to load', () => {
|
|
render(<Avatar src="https://invalid-url.com/image.jpg" name="John Doe" />);
|
|
|
|
const img = screen.getByAltText('John Doe');
|
|
expect(img).toBeInTheDocument();
|
|
|
|
// Simulate image error
|
|
img.dispatchEvent(new Event('error'));
|
|
|
|
// Should show fallback
|
|
expect(screen.getByText('JD')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should apply size classes correctly', () => {
|
|
const { rerender } = render(<Avatar name="Test" size="sm" />);
|
|
let container = screen.getByText('TE').closest('div');
|
|
expect(container).toHaveClass('w-8', 'h-8', 'text-xs');
|
|
|
|
rerender(<Avatar name="Test" size="md" />);
|
|
container = screen.getByText('TE').closest('div');
|
|
expect(container).toHaveClass('w-12', 'h-12', 'text-sm');
|
|
|
|
rerender(<Avatar name="Test" size="lg" />);
|
|
container = screen.getByText('TE').closest('div');
|
|
expect(container).toHaveClass('w-16', 'h-16', 'text-base');
|
|
|
|
rerender(<Avatar name="Test" size="xl" />);
|
|
container = screen.getByText('TE').closest('div');
|
|
expect(container).toHaveClass('w-32', 'h-32', 'text-xl');
|
|
});
|
|
|
|
it('should apply custom className', () => {
|
|
render(<Avatar name="Test" className="custom-class" />);
|
|
|
|
const container = screen.getByText('TE').closest('div');
|
|
expect(container).toHaveClass('custom-class');
|
|
});
|
|
|
|
it('should handle multiple words correctly', () => {
|
|
render(<Avatar name="John Michael Doe" />);
|
|
|
|
expect(screen.getByText('JD')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle empty string name', () => {
|
|
render(<Avatar name="" />);
|
|
|
|
expect(screen.getByText('?')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle null src', () => {
|
|
render(<Avatar src={null} name="John Doe" />);
|
|
|
|
expect(screen.getByText('JD')).toBeInTheDocument();
|
|
});
|
|
});
|