Untitled

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { ContextoPlanetario } from '../context/Context';
import { Table } from '../components/Table';

describe('Table', () => {
  const planetMock = {
    name: 'Tatooine',
    rotation_period: '23',
    orbital_period: '304',
    diameter: '10465',
    climate: 'arid',
    gravity: '1 standard',
    terrain: 'desert',
    surface_water: '1',
    population: '200000',
    films: ['A New Hope'],
    created: '2014-12-09T13:50:49.641000Z',
    edited: '2014-12-20T20:58:18.411000Z',
    url: 'https://swapi.dev/api/planets/1/',
  };
  const planetMockList = [planetMock];

  const renderTable = (planets = planetMockList) => {
    render(
      <ContextoPlanetario.Provider value={{ listaPlanetas: planets }}>
        <Table />
      </ContextoPlanetario.Provider>
    );
  };

  test('renders table header', () => {
    renderTable();
    const headerElement = screen.getByText(/name/i);
    expect(headerElement).toBeInTheDocument();
  });

  test('renders table rows', () => {
    renderTable();
    const rowElements = screen.getAllByRole('row');
    expect(rowElements).toHaveLength(2);
  });

  test('renders table data', () => {
    renderTable();
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });

  test('filters table by name', () => {
    renderTable();
    const nameFilterInput = screen.getByTestId('name-filter');
    fireEvent.change(nameFilterInput, { target: { value: 'tatooine' } });
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });

  test('filters table by column and value', () => {
    renderTable();
    const columnFilterSelect = screen.getByTestId('column-filter');
    const comparisonFilterSelect = screen.getByTestId('comparison-filter');
    const valueFilterInput = screen.getByTestId('value-filter');
    const filterButton = screen.getByTestId('button-filter');
    fireEvent.change(columnFilterSelect, { target: { value: 'population' } });
    fireEvent.change(comparisonFilterSelect, { target: { value: 'maior que' } });
    fireEvent.change(valueFilterInput, { target: { value: '100000' } });
    fireEvent.click(filterButton);
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });

  test('removes a filter', () => {
    renderTable();
    const columnFilterSelect = screen.getByTestId('column-filter');
    const comparisonFilterSelect = screen.getByTestId('comparison-filter');
    const valueFilterInput = screen.getByTestId('value-filter');
    const filterButton = screen.getByTestId('button-filter');
    fireEvent.change(columnFilterSelect, { target: { value: 'population' } });
    fireEvent.change(comparisonFilterSelect, { target: { value: 'maior que' } });
    fireEvent.change(valueFilterInput, { target: { value: '100000' } });
    fireEvent.click(filterButton);
    const removeFilterButton = screen.getByRole('button', { name: /x/i });
    fireEvent.click(removeFilterButton);
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });

  test('removes all filters', () => {
    renderTable();
    const columnFilterSelect = screen.getByTestId('column-filter');
    const comparisonFilterSelect = screen.getByTestId('comparison-filter');
    const valueFilterInput = screen.getByTestId('value-filter');
    const filterButton = screen.getByTestId('button-filter');
    fireEvent.change(columnFilterSelect, { target: { value: 'population' } });
    fireEvent.change(comparisonFilterSelect, { target: { value: 'maior que' } });
    fireEvent.change(valueFilterInput, { target: { value: '100000' } });
    fireEvent.click(filterButton);
    const removeAllFiltersButton = screen.getByTestId('button-remove-filters');
    fireEvent.click(removeAllFiltersButton);
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });

  test('sorts table by column', () => {
    renderTable();
    const columnSortSelect = screen.getByTestId('column-sort');
    const columnSortButton = screen.getByTestId('column-sort-button');
    fireEvent.change(columnSortSelect, { target: { value: 'population' } });
    fireEvent.click(columnSortButton);
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });

  test('sorts table by column in descending order', () => {
    renderTable();
    const columnSortSelect = screen.getByTestId('column-sort');
    const columnSortInputDesc = screen.getByTestId('column-sort-input-desc');
    const columnSortButton = screen.getByTestId('column-sort-button');
    fireEvent.change(columnSortSelect, { target: { value: 'population' } });
    fireEvent.click(columnSortInputDesc);
    fireEvent.click(columnSortButton);
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });


  test('filters table by column and value (menor que)', () => {
    renderTable();
    const columnFilterSelect = screen.getByTestId('column-filter');
    const comparisonFilterSelect = screen.getByTestId('comparison-filter');
    const valueFilterInput = screen.getByTestId('value-filter');
    const filterButton = screen.getByTestId('button-filter');
    fireEvent.change(columnFilterSelect, { target: { value: 'population' } });
    fireEvent.change(comparisonFilterSelect, { target: { value: 'menor que' } });
    fireEvent.change(valueFilterInput, { target: { value: '300000' } });
    fireEvent.click(filterButton);
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });

  test('sorts table by column in ascending order', () => {
    renderTable();
    const columnSortSelect = screen.getByTestId('column-sort');
    const columnSortInputAsc = screen.getByTestId('column-sort-input-asc');
    const columnSortButton = screen.getByTestId('column-sort-button');
    fireEvent.change(columnSortSelect, { target: { value: 'population' } });
    fireEvent.click(columnSortInputAsc);
    fireEvent.click(columnSortButton);
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });

  test('sorts table by column in descending order (default)', () => {
    renderTable();
    const columnSortSelect = screen.getByTestId('column-sort');
    const columnSortButton = screen.getByTestId('column-sort-button');
    fireEvent.change(columnSortSelect, { target: { value: 'population' } });
    fireEvent.click(columnSortButton);
    fireEvent.click(columnSortButton);
    const dataElements = screen.getAllByRole('cell');
    expect(dataElements).toHaveLength(13);
  });
});