import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Avatar, AvatarImage, AvatarFallback } from './avatar';
import React from 'react';

describe('Avatar', () => {
  it('renders correctly', () => {
    render(
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    );

    // In jsdom, image won't load, so fallback should be visible
    expect(screen.getByText('CN')).toBeInTheDocument();
  });

  it('renders fallback when image is not provided', () => {
    render(
      <Avatar>
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
    );

    expect(screen.getByText('JD')).toBeInTheDocument();
  });

  it('renders with different sizes', () => {
    const { rerender, container } = render(
      <Avatar size="xs">
        <AvatarFallback>XS</AvatarFallback>
      </Avatar>
    );
    expect(container.firstChild).toHaveClass('size-6');

    rerender(
      <Avatar size="xl">
        <AvatarFallback>XL</AvatarFallback>
      </Avatar>
    );
    expect(container.firstChild).toHaveClass('size-16');
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Avatar>
        <AvatarFallback>FB</AvatarFallback>
      </Avatar>
    );

    expect(container.querySelector('[data-slot="avatar"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="avatar-fallback"]')).toBeInTheDocument();
  });
});