import { describe, expect, it } from 'vitest';
import { render } from 'vitest-browser-react';
import BooksList from './BooksList';

const books = [
  {
    id: 1,
    title: 'JavaScript - das umfassende Handbuch',
  },
  {
    id: 2,
    title: 'Clean Code',
  },
  {
    id: 3,
    title: 'Design Patterns',
  },
];

describe('BooksList', () => {
  it('should render the books list', async () => {
    const screen = await render(<BooksList books={books} />);

    const bookItems = screen.getByTestId('book');

    await expect.element(bookItems).toHaveLength(3);

    await expect
      .element(bookItems.nth(0))
      .toHaveTextContent('JavaScript - das umfassende Handbuch');
    await expect.element(bookItems.nth(1)).toHaveTextContent('Clean Code');
    await expect.element(bookItems.nth(2)).toHaveTextContent('Design Patterns');
  });
});
