import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import { describe, beforeAll, afterEach, afterAll, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import BooksList from './BooksList';

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

const server = setupServer(
  http.get('/books', () => {
    return HttpResponse.json(books);
  })
);

describe('BooksList', () => {
  beforeAll(() => server.listen());
  afterEach(() => server.resetHandlers());
  afterAll(() => server.close());
  it('should render data from server', async () => {
    render(<BooksList />);

    const books = await screen.findAllByTestId('book');
    expect(books).toHaveLength(3);
    expect(books[0]).toHaveTextContent('JavaScript - das umfassende Handbuch');
    expect(books[1]).toHaveTextContent('Clean Code');
    expect(books[2]).toHaveTextContent('Design Patterns');
  });
});
