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

describe('ScrollArea', () => {
  it('renders correctly with children', () => {
    render(
      <ScrollArea className="h-[200px]">
        <div data-testid="content">Long content</div>
      </ScrollArea>
    );

    expect(screen.getByTestId('content')).toBeInTheDocument();
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <ScrollArea>
        <div>Content</div>
      </ScrollArea>
    );

    expect(container.querySelector('[data-slot="scroll-area"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="scroll-area-viewport"]')).toBeInTheDocument();
  });
});