Untitled
unknown
plain_text
a year ago
6.7 kB
7
Indexable
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); }); });
Editor is loading...
Leave a Comment