import React, { useState } from 'react';
import { render, fireEvent, waitFor, screen, act } from '@testing-library/react';
import 'jest-styled-components';
import {
   PageListingRealWordMock,
   PageListingRealWordMockError,
   PageListingRealWordMockNotFound,
} from './__mocks__/PageListingRealWordMock';

it('renderizar PageListing com card skeleton', async () => {
   const { container } = render(<PageListingRealWordMock />);

   expect(screen.getAllByTestId('skeleton-card').length).toBe(20);

   expect(container.firstChild).toMatchSnapshot();
});

it('renderizar PageListing com cards', async () => {
   const { container } = render(<PageListingRealWordMock />);

   expect(screen.getAllByTestId('skeleton-card').length).toBe(20);

   await waitFor(() => {
      const card = screen.getByTestId('card-1');
      return !!card;
   });

   expect(screen.getAllByTestId('card-1').length).toBe(1);
   expect(screen.getAllByTestId('card-6').length).toBe(1);
   expect(container.firstChild).toMatchSnapshot();
});

it('renderizar PageListing com nav actions', async () => {
   const { container } = render(<PageListingRealWordMock />);

   expect(screen.getAllByTestId('skeleton-card').length).toBe(20);

   await waitFor(() => {
      const card = screen.getByTestId('card-1');
      return !!card;
   });

   fireEvent.click(screen.getAllByTestId('select-card')[0]);
   expect(screen.getAllByTestId('nav-actions-container')).not.toBeUndefined();

   expect(container.firstChild).toMatchSnapshot();
});

it('renderizar PageListing com not found', async () => {
   const { container } = render(<PageListingRealWordMockNotFound />);

   expect(screen.getAllByTestId('skeleton-card').length).toBe(20);

   await waitFor(() => {
      const card = screen.getByTestId('not-found-page');
      return !!card;
   });

   expect(screen.getAllByTestId('not-found-page')).not.toBeUndefined();

   expect(container.firstChild).toMatchSnapshot();
});

it('renderizar PageListing com error', async () => {
   const { container } = render(<PageListingRealWordMockError />);

   expect(screen.getAllByTestId('skeleton-card').length).toBe(20);

   await waitFor(() => {
      const card = screen.getByTestId('error-page-listing');
      return !!card;
   });

   expect(screen.getAllByTestId('error-page-listing')).not.toBeUndefined();

   expect(container.firstChild).toMatchSnapshot();
});
