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

describe('BooksListItem', () => {
  const book = {
    id: 2,
    title: 'Clean Code',
    author: 'Robert Martin',
    isbn: '978-0132350884',
    rating: 4,
  };
  describe('Snapshots', () => {
    it('should match the snapshot', () => {
      const { container } = render(
        <table>
          <tbody>
            <BooksListItem book={book} onRate={() => {}} />
          </tbody>
        </table>
      );
      expect(container).toMatchSnapshot();
    });
  });

  describe('Rendering', () => {
    it('renders title, author and isbn correctly', () => {
      render(
        <table>
          <tbody>
            <BooksListItem book={book} onRate={() => {}} />
          </tbody>
        </table>
      );

      expect(screen.getByTestId('title')).toHaveTextContent('Clean Code');
      expect(screen.getByTestId('author')).toHaveTextContent('Robert Martin');
      expect(screen.getByTestId('isbn')).toHaveTextContent('978-0132350884');
    });

    it('renders the correct rating (4 filled stars, 1 empty)', () => {
      render(
        <table>
          <tbody>
            <BooksListItem book={book} onRate={() => {}} />
          </tbody>
        </table>
      );

      expect(screen.getByTestId('rate-1')).toHaveTextContent('★');
      expect(screen.getByTestId('rate-2')).toHaveTextContent('★');
      expect(screen.getByTestId('rate-3')).toHaveTextContent('★');
      expect(screen.getByTestId('rate-4')).toHaveTextContent('★');
      expect(screen.getByTestId('rate-5')).toHaveTextContent('☆');
    });
  });
});
