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

describe('AspectRatio', () => {
  it('renders correctly', () => {
    render(
      <div style={{ width: '300px' }}>
        <AspectRatio ratio={16 / 9}>
          <img src="https://images.unsplash.com/photo-1776451591680-d8ceafca123e" alt="Landscape" />
        </AspectRatio>
      </div>
    );

    const image = screen.getByAltText('Landscape');
    expect(image).toBeInTheDocument();
  });

  it('has correct data-slot attribute', () => {
    const { container } = render(
      <AspectRatio ratio={1}>
        <div>Content</div>
      </AspectRatio>
    );
    expect(container.querySelector('[data-slot="aspect-ratio"]')).toBeInTheDocument();
  });
});