mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Migrated ShortUrlsList test to react testing library
This commit is contained in:
Alejandro Celaya
parent
fd7aa570ed
commit
cb13e82b9c
1 changed files with 45 additions and 66 deletions
|
|
@ -1,26 +1,25 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { ReactElement } from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { FC } from 'react';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { MemoryRouter, useNavigate } from 'react-router-dom';
|
||||
import { ShortUrlsList as createShortUrlsList } from '../../src/short-urls/ShortUrlsList';
|
||||
import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
|
||||
import { ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
|
||||
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
|
||||
import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
|
||||
import { Paginator } from '../../src/short-urls/Paginator';
|
||||
import { ReachableServer } from '../../src/servers/data';
|
||||
import { Settings } from '../../src/settings/reducers/settings';
|
||||
import { ShortUrlsTableProps } from '../../src/short-urls/ShortUrlsTable';
|
||||
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useNavigate: jest.fn().mockReturnValue(jest.fn()),
|
||||
useParams: jest.fn().mockReturnValue({}),
|
||||
useLocation: jest.fn().mockReturnValue({ search: '?tags=test%20tag&search=example.com' }),
|
||||
}));
|
||||
|
||||
describe('<ShortUrlsList />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const ShortUrlsTable = () => null;
|
||||
const ShortUrlsFilteringBar = () => null;
|
||||
const ShortUrlsTable: FC<ShortUrlsTableProps> = ({ onTagClick }) => <span onClick={() => onTagClick?.('foo')}>ShortUrlsTable</span>;
|
||||
const ShortUrlsFilteringBar = () => <span>ShortUrlsFilteringBar</span>;
|
||||
const listShortUrlsMock = jest.fn();
|
||||
const navigate = jest.fn();
|
||||
const shortUrlsList = Mock.of<ShortUrlsListModel>({
|
||||
|
|
@ -33,85 +32,65 @@ describe('<ShortUrlsList />', () => {
|
|||
tags: ['test tag'],
|
||||
}),
|
||||
],
|
||||
pagination: {},
|
||||
pagination: { pagesCount: 3 },
|
||||
},
|
||||
});
|
||||
const ShortUrlsList = createShortUrlsList(ShortUrlsTable, ShortUrlsFilteringBar);
|
||||
const createWrapper = (defaultOrdering: ShortUrlsOrder = {}) => shallow(
|
||||
<ShortUrlsList
|
||||
{...Mock.of<MercureBoundProps>({ mercureInfo: { loading: true } })}
|
||||
listShortUrls={listShortUrlsMock}
|
||||
shortUrlsList={shortUrlsList}
|
||||
selectedServer={Mock.of<ReachableServer>({ id: '1' })}
|
||||
settings={Mock.of<Settings>({ shortUrlsList: { defaultOrdering } })}
|
||||
/>,
|
||||
).dive(); // Dive is needed as this component is wrapped in a HOC
|
||||
const setUp = (defaultOrdering: ShortUrlsOrder = {}) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<MemoryRouter>
|
||||
<ShortUrlsList
|
||||
{...Mock.of<MercureBoundProps>({ mercureInfo: { loading: true } })}
|
||||
listShortUrls={listShortUrlsMock}
|
||||
shortUrlsList={shortUrlsList}
|
||||
selectedServer={Mock.of<ReachableServer>({ id: '1' })}
|
||||
settings={Mock.of<Settings>({ shortUrlsList: { defaultOrdering } })}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
),
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
(useNavigate as any).mockReturnValue(navigate);
|
||||
|
||||
wrapper = createWrapper();
|
||||
});
|
||||
|
||||
afterEach(jest.clearAllMocks);
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it('wraps expected components', () => {
|
||||
expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
|
||||
expect(wrapper.find(Paginator)).toHaveLength(1);
|
||||
expect(wrapper.find(ShortUrlsFilteringBar)).toHaveLength(1);
|
||||
setUp();
|
||||
|
||||
expect(screen.getByText('ShortUrlsTable')).toBeInTheDocument();
|
||||
expect(screen.getByText('ShortUrlsFilteringBar')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('passes current query to paginator', () => {
|
||||
expect(wrapper.find(Paginator).prop('currentQueryString')).toEqual('?tags=test%20tag&search=example.com');
|
||||
setUp();
|
||||
|
||||
const links = screen.getAllByRole('link');
|
||||
|
||||
expect(links.length > 0).toEqual(true);
|
||||
links.forEach(
|
||||
(link) => expect(link).toHaveAttribute('href', expect.stringContaining('?tags=test%20tag&search=example.com')),
|
||||
);
|
||||
});
|
||||
|
||||
it('gets list refreshed every time a tag is clicked', () => {
|
||||
wrapper.find(ShortUrlsTable).simulate('tagClick', 'foo');
|
||||
wrapper.find(ShortUrlsTable).simulate('tagClick', 'bar');
|
||||
wrapper.find(ShortUrlsTable).simulate('tagClick', 'baz');
|
||||
it('gets list refreshed every time a tag is clicked', async () => {
|
||||
const { user } = setUp();
|
||||
|
||||
expect(navigate).toHaveBeenCalledTimes(3);
|
||||
expect(navigate).toHaveBeenNthCalledWith(1, expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`));
|
||||
expect(navigate).toHaveBeenNthCalledWith(2, expect.stringContaining(`tags=${encodeURIComponent('test tag,bar')}`));
|
||||
expect(navigate).toHaveBeenNthCalledWith(3, expect.stringContaining(`tags=${encodeURIComponent('test tag,baz')}`));
|
||||
});
|
||||
|
||||
it('invokes order icon rendering', () => {
|
||||
const renderIcon = (field: ShortUrlsOrderableFields) =>
|
||||
(wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: ShortUrlsOrderableFields) => ReactElement)(field);
|
||||
|
||||
expect(renderIcon('visits').props.currentOrder).toEqual({});
|
||||
|
||||
(wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits');
|
||||
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' });
|
||||
|
||||
(wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits', 'ASC');
|
||||
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' });
|
||||
});
|
||||
|
||||
it('handles order through table', () => {
|
||||
const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
|
||||
|
||||
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({});
|
||||
|
||||
orderByColumn('visits')();
|
||||
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
|
||||
|
||||
orderByColumn('title')();
|
||||
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
|
||||
|
||||
orderByColumn('shortCode')();
|
||||
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
|
||||
expect(navigate).not.toHaveBeenCalled();
|
||||
await user.click(screen.getByText('ShortUrlsTable'));
|
||||
expect(navigate).toHaveBeenCalledWith(expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`));
|
||||
});
|
||||
|
||||
it.each([
|
||||
[Mock.of<ShortUrlsOrder>({ field: 'visits', dir: 'ASC' }), 'visits', 'ASC'],
|
||||
[Mock.of<ShortUrlsOrder>({ field: 'title', dir: 'DESC' }), 'title', 'DESC'],
|
||||
[Mock.of<ShortUrlsOrder>(), undefined, undefined],
|
||||
])('has expected initial ordering', (initialOrderBy, field, dir) => {
|
||||
const wrapper = createWrapper(initialOrderBy);
|
||||
|
||||
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field, dir });
|
||||
])('has expected initial ordering based on settings', (initialOrderBy, field, dir) => {
|
||||
setUp(initialOrderBy);
|
||||
expect(listShortUrlsMock).toHaveBeenCalledWith(expect.objectContaining({
|
||||
orderBy: { field, dir },
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue