import { render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { ImgElement } from './ImgElement';

describe('ImgElement', () => {
  it('renders meaningful image with alt text', () => {
    const alt = 'Test image';
    const src = '/test.jpg';
    const { container } = render(<ImgElement src={src} alt={alt} />);
    const img = container.querySelector('img')!;

    expect(img).toHaveAttribute('src', src);
    expect(img).toHaveAttribute('alt', alt);
    expect(img).not.toHaveAttribute('aria-hidden');
    expect(img).not.toHaveAttribute('role');
  });

  it('renders decorative image with accessibility attributes', () => {
    const src = '/decorative.jpg';
    const { container } = render(<ImgElement src={src} decorative={true} />);
    const img = container.querySelector('img')!;

    expect(img).toHaveAttribute('src', src);
    expect(img).toHaveAttribute('alt', '');
    expect(img).toHaveAttribute('aria-hidden', 'true');
    expect(img).toHaveAttribute('role', 'presentation');
  });

  it('forwards additional HTML img attributes for meaningful images', () => {
    const width = 100;
    const height = 200;
    const className = 'test-class';
    const { container } = render(
      <ImgElement
        src="/test.jpg"
        alt="Test image"
        width={width}
        height={height}
        className={className}
      />,
    );
    const img = container.querySelector('img')!;

    expect(img).toHaveAttribute('width', String(width));
    expect(img).toHaveAttribute('height', String(height));
    expect(img).toHaveClass(className);
  });

  it('forwards additional HTML img attributes for decorative images', () => {
    const width = 50;
    const height = 60;
    const className = 'icon';
    const { container } = render(
      <ImgElement
        src="/decorative.jpg"
        decorative={true}
        width={width}
        height={height}
        className={className}
      />,
    );
    const img = container.querySelector('img')!;

    expect(img).toHaveAttribute('width', String(width));
    expect(img).toHaveAttribute('height', String(height));
    expect(img).toHaveClass(className);
  });

  it('uses meaningful image behavior by default', () => {
    const alt = 'Default behavior';
    const { container } = render(<ImgElement src="/default.jpg" alt={alt} />);
    const img = container.querySelector('img')!;

    expect(img).toHaveAttribute('alt', alt);
    expect(img).not.toHaveAttribute('aria-hidden');
    expect(img).not.toHaveAttribute('role');
  });

  it('renders with decorative=false explicitly', () => {
    const alt = 'Explicit meaningful';
    const { container } = render(
      <ImgElement src="/explicit.jpg" alt={alt} decorative={false} />,
    );
    const img = container.querySelector('img')!;

    expect(img).toHaveAttribute('alt', alt);
    expect(img).not.toHaveAttribute('aria-hidden');
    expect(img).not.toHaveAttribute('role');
  });
});
