2020-08-30 20:45:17 +03:00
|
|
|
import { shallow, ShallowWrapper } from 'enzyme';
|
2021-10-17 14:43:37 +03:00
|
|
|
import { ReactElement } from 'react';
|
2020-08-30 20:45:17 +03:00
|
|
|
import { Mock } from 'ts-mockery';
|
2022-02-08 00:17:57 +03:00
|
|
|
import { useNavigate } from 'react-router-dom';
|
2021-11-09 01:41:17 +03:00
|
|
|
import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList';
|
2021-12-25 12:24:37 +03:00
|
|
|
import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
|
2020-09-06 20:41:15 +03:00
|
|
|
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
|
2020-12-07 13:17:19 +03:00
|
|
|
import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
|
2021-10-17 14:43:37 +03:00
|
|
|
import Paginator from '../../src/short-urls/Paginator';
|
2021-11-09 01:41:17 +03:00
|
|
|
import { ReachableServer } from '../../src/servers/data';
|
2021-12-24 15:14:13 +03:00
|
|
|
import { Settings } from '../../src/settings/reducers/settings';
|
2019-09-14 19:23:26 +03:00
|
|
|
|
2022-02-08 00:17:57 +03:00
|
|
|
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' }),
|
|
|
|
}));
|
|
|
|
|
2019-09-14 19:23:26 +03:00
|
|
|
describe('<ShortUrlsList />', () => {
|
2020-08-30 20:45:17 +03:00
|
|
|
let wrapper: ShallowWrapper;
|
2020-12-07 13:17:19 +03:00
|
|
|
const ShortUrlsTable = () => null;
|
2021-12-25 21:51:25 +03:00
|
|
|
const ShortUrlsFilteringBar = () => null;
|
2019-09-14 19:23:26 +03:00
|
|
|
const listShortUrlsMock = jest.fn();
|
2022-02-08 00:17:57 +03:00
|
|
|
const navigate = jest.fn();
|
2020-12-07 13:17:19 +03:00
|
|
|
const shortUrlsList = Mock.of<ShortUrlsListModel>({
|
|
|
|
shortUrls: {
|
|
|
|
data: [
|
|
|
|
Mock.of<ShortUrl>({
|
|
|
|
shortCode: 'testShortCode',
|
|
|
|
shortUrl: 'https://www.example.com/testShortUrl',
|
|
|
|
longUrl: 'https://www.example.com/testLongUrl',
|
|
|
|
tags: [ 'test tag' ],
|
|
|
|
}),
|
|
|
|
],
|
2022-03-13 20:56:42 +03:00
|
|
|
pagination: {},
|
2020-12-07 13:17:19 +03:00
|
|
|
},
|
|
|
|
});
|
2021-12-25 21:51:25 +03:00
|
|
|
const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable, ShortUrlsFilteringBar);
|
2021-12-24 15:39:51 +03:00
|
|
|
const createWrapper = (defaultOrdering: ShortUrlsOrder = {}) => shallow(
|
2021-10-17 14:43:37 +03:00
|
|
|
<ShortUrlsList
|
|
|
|
{...Mock.of<MercureBoundProps>({ mercureInfo: { loading: true } })}
|
|
|
|
listShortUrls={listShortUrlsMock}
|
|
|
|
shortUrlsList={shortUrlsList}
|
2021-11-09 01:41:17 +03:00
|
|
|
selectedServer={Mock.of<ReachableServer>({ id: '1' })}
|
2021-12-24 16:15:28 +03:00
|
|
|
settings={Mock.of<Settings>({ shortUrlsList: { defaultOrdering } })}
|
2021-10-17 14:43:37 +03:00
|
|
|
/>,
|
|
|
|
).dive(); // Dive is needed as this component is wrapped in a HOC
|
2019-09-14 19:23:26 +03:00
|
|
|
|
|
|
|
beforeEach(() => {
|
2022-02-08 00:17:57 +03:00
|
|
|
(useNavigate as any).mockReturnValue(navigate);
|
|
|
|
|
2021-10-17 14:43:37 +03:00
|
|
|
wrapper = createWrapper();
|
2019-09-14 19:23:26 +03:00
|
|
|
});
|
|
|
|
|
2022-02-08 00:17:57 +03:00
|
|
|
afterEach(jest.clearAllMocks);
|
2020-08-30 20:45:17 +03:00
|
|
|
afterEach(() => wrapper?.unmount());
|
2019-09-14 19:23:26 +03:00
|
|
|
|
2021-10-17 14:43:37 +03:00
|
|
|
it('wraps expected components', () => {
|
2020-12-07 13:17:19 +03:00
|
|
|
expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
|
2021-10-17 14:43:37 +03:00
|
|
|
expect(wrapper.find(Paginator)).toHaveLength(1);
|
2021-12-25 21:51:25 +03:00
|
|
|
expect(wrapper.find(ShortUrlsFilteringBar)).toHaveLength(1);
|
2021-11-09 01:41:17 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('passes current query to paginator', () => {
|
|
|
|
expect(wrapper.find(Paginator).prop('currentQueryString')).toEqual('?tags=test%20tag&search=example.com');
|
2019-09-14 19:23:26 +03:00
|
|
|
});
|
|
|
|
|
2021-10-17 14:43:37 +03:00
|
|
|
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');
|
|
|
|
|
2022-02-08 00:17:57 +03:00
|
|
|
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')}`));
|
2021-10-17 14:43:37 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('invokes order icon rendering', () => {
|
2021-12-25 12:24:37 +03:00
|
|
|
const renderIcon = (field: ShortUrlsOrderableFields) =>
|
|
|
|
(wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: ShortUrlsOrderableFields) => ReactElement)(field);
|
2021-10-17 14:43:37 +03:00
|
|
|
|
2021-11-07 00:34:29 +03:00
|
|
|
expect(renderIcon('visits').props.currentOrder).toEqual({});
|
2021-10-17 14:43:37 +03:00
|
|
|
|
2022-03-13 12:32:27 +03:00
|
|
|
(wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits');
|
2021-11-07 00:34:29 +03:00
|
|
|
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' });
|
2021-10-17 14:43:37 +03:00
|
|
|
|
2022-03-13 12:32:27 +03:00
|
|
|
(wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits', 'ASC');
|
2021-11-07 00:34:29 +03:00
|
|
|
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' });
|
2021-10-17 14:43:37 +03:00
|
|
|
});
|
|
|
|
|
2021-11-09 01:41:17 +03:00
|
|
|
it('handles order through table', () => {
|
2021-12-25 12:24:37 +03:00
|
|
|
const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
|
2021-10-17 14:43:37 +03:00
|
|
|
|
2022-03-13 12:32:27 +03:00
|
|
|
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({});
|
2021-12-24 15:14:13 +03:00
|
|
|
|
2021-10-17 14:43:37 +03:00
|
|
|
orderByColumn('visits')();
|
2022-03-13 12:32:27 +03:00
|
|
|
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
|
2021-12-24 15:14:13 +03:00
|
|
|
|
2021-10-17 14:43:37 +03:00
|
|
|
orderByColumn('title')();
|
2022-03-13 12:32:27 +03:00
|
|
|
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
|
2021-10-17 14:43:37 +03:00
|
|
|
|
2021-12-24 15:14:13 +03:00
|
|
|
orderByColumn('shortCode')();
|
2022-03-13 12:32:27 +03:00
|
|
|
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
|
2021-10-17 14:43:37 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it.each([
|
2021-12-24 15:14:13 +03:00
|
|
|
[ Mock.of<ShortUrlsOrder>({ field: 'visits', dir: 'ASC' }), 'visits', 'ASC' ],
|
|
|
|
[ Mock.of<ShortUrlsOrder>({ field: 'title', dir: 'DESC' }), 'title', 'DESC' ],
|
|
|
|
[ Mock.of<ShortUrlsOrder>(), undefined, undefined ],
|
2021-11-06 14:26:20 +03:00
|
|
|
])('has expected initial ordering', (initialOrderBy, field, dir) => {
|
2021-10-17 14:43:37 +03:00
|
|
|
const wrapper = createWrapper(initialOrderBy);
|
|
|
|
|
2022-03-13 12:32:27 +03:00
|
|
|
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field, dir });
|
2019-09-14 19:23:26 +03:00
|
|
|
});
|
|
|
|
});
|