mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated ShortUrlsTable test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-05 20:46:31 +02:00
parent 43840d7656
commit 3cd25dc2df
1 changed files with 37 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
test/short-urls/ShortUrlsTable.test.tsx
View file

@ -1,71 +1,68 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable'; import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable';
import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList'; import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
import { ReachableServer, SelectedServer } from '../../src/servers/data'; import { ReachableServer, SelectedServer } from '../../src/servers/data';
import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data'; import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data';
describe('<ShortUrlsTable />', () => { describe('<ShortUrlsTable />', () => {
let wrapper: ShallowWrapper;
const shortUrlsList = Mock.all<ShortUrlsList>(); const shortUrlsList = Mock.all<ShortUrlsList>();
const orderByColumn = jest.fn(); const orderByColumn = jest.fn();
const ShortUrlsRow = () => null; const ShortUrlsTable = shortUrlsTableCreator(() => <span>ShortUrlsRow</span>);
const ShortUrlsTable = shortUrlsTableCreator(ShortUrlsRow); const setUp = (server: SelectedServer = null) => ({
user: userEvent.setup(),
const createWrapper = (server: SelectedServer = null) => { ...render(
wrapper = shallow(
<ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={server} orderByColumn={() => orderByColumn} />, <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={server} orderByColumn={() => orderByColumn} />,
); ),
return wrapper;
};
beforeEach(() => createWrapper());
afterEach(jest.resetAllMocks);
afterEach(() => wrapper?.unmount());
it('should render inner table by default', () => {
expect(wrapper.find('table')).toHaveLength(1);
}); });
it('should render table header by default', () => { afterEach(jest.resetAllMocks);
expect(wrapper.find('table').find('thead')).toHaveLength(1);
it('should render inner table by default', () => {
setUp();
expect(screen.getByRole('table')).toBeInTheDocument();
});
it('should render row groups by default', () => {
setUp();
expect(screen.getAllByRole('rowgroup')).toHaveLength(2);
}); });
it('should render 6 table header cells by default', () => { it('should render 6 table header cells by default', () => {
expect(wrapper.find('table').find('thead').find('tr').find('th')).toHaveLength(6); setUp();
expect(screen.getAllByRole('columnheader')).toHaveLength(6);
}); });
it('should render 6 table header cells without order by icon by default', () => { it('should render table header cells without "order by" icon by default', () => {
const thElements = wrapper.find('table').find('thead').find('tr').find('th'); setUp();
expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
thElements.forEach((thElement) => {
expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
});
}); });
it('should render table header cells with conditional order by icon', () => { it('should render table header cells with conditional order by icon', () => {
const getThElementForSortableField = (orderableField: string) => wrapper.find('table') setUp();
.find('thead')
.find('tr') const getThElementForSortableField = (orderableField: string) => screen.getAllByRole('columnheader').find(
.find('th') ({ innerHTML }) => innerHTML.includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields]),
.filterWhere((e) => e.text().includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields])); );
const sortableFields = Object.keys(SHORT_URLS_ORDERABLE_FIELDS).filter((sortableField) => sortableField !== 'title'); const sortableFields = Object.keys(SHORT_URLS_ORDERABLE_FIELDS).filter((sortableField) => sortableField !== 'title');
expect.assertions(sortableFields.length); expect.assertions(sortableFields.length * 2);
sortableFields.forEach((sortableField) => { sortableFields.forEach((sortableField) => {
getThElementForSortableField(sortableField).simulate('click'); const element = getThElementForSortableField(sortableField);
expect(element).toBeDefined();
element && fireEvent.click(element);
expect(orderByColumn).toHaveBeenCalled(); expect(orderByColumn).toHaveBeenCalled();
}); });
}); });
it('should render composed title column', () => { it('should render composed title column', () => {
const wrapper = createWrapper(Mock.of<ReachableServer>({ version: '2.0.0' })); setUp(Mock.of<ReachableServer>({ version: '2.0.0' }));
const composedColumn = wrapper.find('table').find('th').at(2);
const text = composedColumn.text();
expect(text).toContain('Title'); const { innerHTML } = screen.getAllByRole('columnheader')[2];
expect(text).toContain('Long URL');
expect(innerHTML).toContain('Title');
expect(innerHTML).toContain('Long URL');
}); });
}); });