|
import React from 'react';
|
|
import { Provider } from 'react-redux';
|
|
import thunk from 'redux-thunk';
|
|
import configureMockStore from 'redux-mock-store';
|
|
import { fireEvent, screen, render, act } from '@testing-library/react';
|
|
import '@testing-library/jest-dom';
|
|
|
|
import { Table } from './Table';
|
|
|
|
const mockStore = configureMockStore([thunk]);
|
|
const store = mockStore({});
|
|
const columns = {
|
|
name: { title: 'Name' },
|
|
email: { title: 'Email' },
|
|
role: { title: 'Role' },
|
|
};
|
|
|
|
const results = [
|
|
{ id: 1, name: 'John Doe', email: 'johndoe@example.com', role: 'Admin' },
|
|
{ id: 2, name: 'Jane Smith', email: 'janesmith@example.com', role: 'User' },
|
|
];
|
|
|
|
const setParams = jest.fn();
|
|
const refreshData = jest.fn();
|
|
|
|
describe('Table', () => {
|
|
test('renders column names and result data', () => {
|
|
render(
|
|
<Provider store={store}>
|
|
<Table
|
|
columns={columns}
|
|
params={{ page: 1, perPage: 10, order: '' }}
|
|
setParams={setParams}
|
|
refreshData={refreshData}
|
|
results={results}
|
|
url="/users"
|
|
isPending={false}
|
|
/>
|
|
</Provider>
|
|
);
|
|
|
|
// Check that column names are displayed
|
|
expect(screen.getByText('Name')).toBeInTheDocument();
|
|
expect(screen.getByText('Email')).toBeInTheDocument();
|
|
expect(screen.getByText('Role')).toBeInTheDocument();
|
|
|
|
// Check that result data is displayed
|
|
expect(screen.getByText('John Doe')).toBeInTheDocument();
|
|
expect(screen.getByText('johndoe@example.com')).toBeInTheDocument();
|
|
expect(screen.getByText('Admin')).toBeInTheDocument();
|
|
expect(screen.getByText('Jane Smith')).toBeInTheDocument();
|
|
expect(screen.getByText('janesmith@example.com')).toBeInTheDocument();
|
|
expect(screen.getByText('User')).toBeInTheDocument();
|
|
});
|
|
|
|
test('calls setParams with sort order when column header is clicked', async () => {
|
|
render(
|
|
<Provider store={store}>
|
|
<Table
|
|
columns={{ ...columns, name: { ...columns.name, isSorted: true } }}
|
|
params={{ page: 1, perPage: 10, order: '' }}
|
|
setParams={setParams}
|
|
refreshData={refreshData}
|
|
results={results}
|
|
url="/users"
|
|
isPending={false}
|
|
/>
|
|
</Provider>
|
|
);
|
|
fireEvent.click(screen.getByRole('button', { name: 'Name' }));
|
|
expect(setParams).toHaveBeenCalledWith({
|
|
order: 'name desc',
|
|
page: 1,
|
|
perPage: 10,
|
|
});
|
|
fireEvent.click(screen.getByRole('button', { name: 'Name' }));
|
|
expect(setParams).toHaveBeenCalledWith({
|
|
order: 'name asc',
|
|
page: 1,
|
|
perPage: 10,
|
|
});
|
|
});
|
|
|
|
test('shows delete modal when delete button is clicked', () => {
|
|
const onDeleteClick = jest.fn();
|
|
const resultWithDeleteButton = { ...results[0], can_delete: true };
|
|
|
|
render(
|
|
<Provider store={store}>
|
|
<Table
|
|
columns={columns}
|
|
params={{ page: 1, perPage: 10, order: '' }}
|
|
setParams={setParams}
|
|
refreshData={refreshData}
|
|
results={[resultWithDeleteButton]}
|
|
isDeleteable={true}
|
|
onDeleteClick={onDeleteClick}
|
|
url="/users"
|
|
isPending={false}
|
|
/>
|
|
</Provider>
|
|
);
|
|
|
|
fireEvent.click(screen.getByLabelText('Actions'));
|
|
fireEvent.click(screen.getByText('Delete'));
|
|
expect(
|
|
screen.getByText('You are about to delete John Doe. Are you sure?')
|
|
).toBeInTheDocument();
|
|
fireEvent.click(screen.getByText('Delete'));
|
|
});
|
|
|
|
test('disables delete button when item cannot be deleted', () => {
|
|
const resultWithDeleteButton = { ...results[0], can_delete: false };
|
|
|
|
render(
|
|
<Provider store={store}>
|
|
<Table
|
|
columns={columns}
|
|
params={{ page: 1, perPage: 10, order: '' }}
|
|
setParams={setParams}
|
|
refreshData={refreshData}
|
|
results={[resultWithDeleteButton]}
|
|
isDeleteable={true}
|
|
url="/users"
|
|
isPending={false}
|
|
/>
|
|
</Provider>
|
|
);
|
|
fireEvent.click(screen.getByLabelText('Actions'));
|
|
expect(screen.getByText('Delete')).toHaveClass('pf-m-disabled');
|
|
});
|
|
|
|
test('no actions button when there are no actions', () => {
|
|
const resultWithDeleteButton = { ...results[0], can_delete: true };
|
|
|
|
render(
|
|
<Provider store={store}>
|
|
<Table
|
|
columns={columns}
|
|
params={{ page: 1, perPage: 10, order: '' }}
|
|
setParams={setParams}
|
|
refreshData={refreshData}
|
|
results={[resultWithDeleteButton]}
|
|
isDeleteable={true}
|
|
url="/users"
|
|
isPending={false}
|
|
/>
|
|
</Provider>
|
|
);
|
|
expect(screen.queryAllByText('Actions')).toHaveLength(0);
|
|
});
|
|
|
|
test('show error and not the table on error', () => {
|
|
render(
|
|
<Provider store={store}>
|
|
<Table
|
|
columns={columns}
|
|
params={{ page: 1, perPage: 10, order: '' }}
|
|
setParams={setParams}
|
|
refreshData={refreshData}
|
|
results={results}
|
|
errorMessage="Error test"
|
|
isDeleteable={true}
|
|
url="/users"
|
|
isPending={false}
|
|
/>
|
|
</Provider>
|
|
);
|
|
expect(screen.queryAllByText('John')).toHaveLength(0);
|
|
expect(screen.queryAllByText('items')).toHaveLength(0);
|
|
expect(screen.queryAllByText('Error test')).toHaveLength(1);
|
|
});
|
|
test('show empty state', () => {
|
|
render(
|
|
<Provider store={store}>
|
|
<Table
|
|
columns={columns}
|
|
params={{ page: 1, perPage: 10, order: '' }}
|
|
setParams={setParams}
|
|
refreshData={refreshData}
|
|
results={[]}
|
|
isDeleteable={true}
|
|
url="/users"
|
|
isPending={false}
|
|
/>
|
|
</Provider>
|
|
);
|
|
expect(screen.queryAllByText('items')).toHaveLength(0);
|
|
expect(screen.queryAllByText('No Results')).toHaveLength(2);
|
|
expect(screen.queryAllByText('Loading...')).toHaveLength(0);
|
|
});
|
|
test('show empty state while loading', () => {
|
|
render(
|
|
<Provider store={store}>
|
|
<Table
|
|
columns={columns}
|
|
params={{ page: 1, perPage: 10, order: '' }}
|
|
setParams={setParams}
|
|
refreshData={refreshData}
|
|
results={[]}
|
|
isDeleteable={true}
|
|
url="/users"
|
|
isPending={true}
|
|
/>
|
|
</Provider>
|
|
);
|
|
expect(screen.queryAllByText('items')).toHaveLength(0);
|
|
expect(screen.queryAllByText('No Results')).toHaveLength(0);
|
|
expect(screen.queryAllByText('Loading...')).toHaveLength(1);
|
|
});
|
|
});
|
