import { describe, expect, test } from 'vitest';
import { render } from '@testing-library/dom';
import { YoutubeDataGrid } from '../../src/components/YoutubeDataGrid';

describe('YoutubeDataGrid', () => {
  test('renders the search input field', async () => {
    const { container } = render(<YoutubeDataGrid />);
    expect(container.querySelector('input[type="text"]')).toBeInTheDocument();
  });

  test('renders the select dropdown', async () => {
    const { container } = render(<YoutubeDataGrid />);
    expect(container.querySelector('select')).toBeInTheDocument();
  });

  test('renders the search button', async () => {
    const { container } = render(<YoutubeDataGrid />);
    expect(container.querySelector('button')).toBeInTheDocument();
  });

  test('renders the video cards', async () => {
    const { container } = render(<YoutubeDataGrid />);
    expect(container.querySelectorAll('.video-card')).toHaveLength(1);
  });

  test('renders the pagination component', async () => {
    const { container } = render(<YoutubeDataGrid />);
    expect(container.querySelector('pagination-component')).toBeInTheDocument();
  });
});