2022-07-10 00:03:21 +03:00
|
|
|
import { screen } from '@testing-library/react';
|
2023-04-13 22:48:29 +03:00
|
|
|
import { fromPartial } from '@total-typescript/shoehorn';
|
2022-07-09 23:37:26 +03:00
|
|
|
import { MemoryRouter, useNavigate } from 'react-router-dom';
|
2023-08-02 10:01:44 +03:00
|
|
|
import type { Settings } from '../../src';
|
|
|
|
import type { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
|
|
|
|
import type { ShortUrlsOrder } from '../../src/short-urls/data';
|
|
|
|
import type { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
|
|
|
|
import { ShortUrlsList as createShortUrlsList } from '../../src/short-urls/ShortUrlsList';
|
|
|
|
import type { ShortUrlsTableType } from '../../src/short-urls/ShortUrlsTable';
|
2023-08-04 12:16:01 +03:00
|
|
|
import { FeaturesProvider } from '../../src/utils/features';
|
|
|
|
import { SettingsProvider } from '../../src/utils/settings';
|
2023-02-18 13:11:01 +03:00
|
|
|
import { renderWithEvents } from '../__helpers__/setUpTest';
|
2019-09-14 19:23:26 +03:00
|
|
|
|
2023-05-27 12:57:26 +03:00
|
|
|
vi.mock('react-router-dom', async () => ({
|
|
|
|
...(await vi.importActual<any>('react-router-dom')),
|
|
|
|
useNavigate: vi.fn().mockReturnValue(vi.fn()),
|
|
|
|
useLocation: vi.fn().mockReturnValue({ search: '?tags=test%20tag&search=example.com' }),
|
2022-02-08 00:17:57 +03:00
|
|
|
}));
|
|
|
|
|
2019-09-14 19:23:26 +03:00
|
|
|
describe('<ShortUrlsList />', () => {
|
2022-12-18 12:12:34 +03:00
|
|
|
const ShortUrlsTable: ShortUrlsTableType = ({ onTagClick }) => <span onClick={() => onTagClick?.('foo')}>ShortUrlsTable</span>;
|
2022-07-09 23:37:26 +03:00
|
|
|
const ShortUrlsFilteringBar = () => <span>ShortUrlsFilteringBar</span>;
|
2023-05-27 12:57:26 +03:00
|
|
|
const listShortUrlsMock = vi.fn();
|
|
|
|
const navigate = vi.fn();
|
2023-04-13 22:48:29 +03:00
|
|
|
const shortUrlsList = fromPartial<ShortUrlsListModel>({
|
2020-12-07 13:17:19 +03:00
|
|
|
shortUrls: {
|
|
|
|
data: [
|
2023-04-13 22:48:29 +03:00
|
|
|
{
|
2020-12-07 13:17:19 +03:00
|
|
|
shortCode: 'testShortCode',
|
|
|
|
shortUrl: 'https://www.example.com/testShortUrl',
|
|
|
|
longUrl: 'https://www.example.com/testLongUrl',
|
2022-03-26 14:17:42 +03:00
|
|
|
tags: ['test tag'],
|
2023-04-13 22:48:29 +03:00
|
|
|
},
|
2020-12-07 13:17:19 +03:00
|
|
|
],
|
2022-07-09 23:37:26 +03:00
|
|
|
pagination: { pagesCount: 3 },
|
2020-12-07 13:17:19 +03:00
|
|
|
},
|
|
|
|
});
|
2022-05-28 12:16:59 +03:00
|
|
|
const ShortUrlsList = createShortUrlsList(ShortUrlsTable, ShortUrlsFilteringBar);
|
2023-08-04 12:16:01 +03:00
|
|
|
const setUp = (settings: Partial<Settings> = {}, excludeBotsOnShortUrls = true) => renderWithEvents(
|
2022-07-10 00:03:21 +03:00
|
|
|
<MemoryRouter>
|
2023-08-04 12:16:01 +03:00
|
|
|
<SettingsProvider value={fromPartial(settings)}>
|
|
|
|
<FeaturesProvider value={fromPartial({ excludeBotsOnShortUrls })}>
|
|
|
|
<ShortUrlsList
|
|
|
|
{...fromPartial<MercureBoundProps>({ mercureInfo: { loading: true } })}
|
|
|
|
listShortUrls={listShortUrlsMock}
|
|
|
|
shortUrlsList={shortUrlsList}
|
|
|
|
/>
|
|
|
|
</FeaturesProvider>
|
|
|
|
</SettingsProvider>
|
2022-07-10 00:03:21 +03:00
|
|
|
</MemoryRouter>,
|
|
|
|
);
|
2019-09-14 19:23:26 +03:00
|
|
|
|
|
|
|
beforeEach(() => {
|
2022-02-08 00:17:57 +03:00
|
|
|
(useNavigate as any).mockReturnValue(navigate);
|
2019-09-14 19:23:26 +03:00
|
|
|
});
|
|
|
|
|
2021-10-17 14:43:37 +03:00
|
|
|
it('wraps expected components', () => {
|
2022-07-09 23:37:26 +03:00
|
|
|
setUp();
|
2021-10-17 14:43:37 +03:00
|
|
|
|
2022-07-09 23:37:26 +03:00
|
|
|
expect(screen.getByText('ShortUrlsTable')).toBeInTheDocument();
|
|
|
|
expect(screen.getByText('ShortUrlsFilteringBar')).toBeInTheDocument();
|
2021-10-17 14:43:37 +03:00
|
|
|
});
|
|
|
|
|
2022-07-09 23:37:26 +03:00
|
|
|
it('passes current query to paginator', () => {
|
|
|
|
setUp();
|
2021-10-17 14:43:37 +03:00
|
|
|
|
2022-07-09 23:37:26 +03:00
|
|
|
const links = screen.getAllByRole('link');
|
2021-10-17 14:43:37 +03:00
|
|
|
|
2022-07-09 23:37:26 +03:00
|
|
|
expect(links.length > 0).toEqual(true);
|
|
|
|
links.forEach(
|
|
|
|
(link) => expect(link).toHaveAttribute('href', expect.stringContaining('?tags=test%20tag&search=example.com')),
|
|
|
|
);
|
2021-10-17 14:43:37 +03:00
|
|
|
});
|
|
|
|
|
2022-07-09 23:37:26 +03:00
|
|
|
it('gets list refreshed every time a tag is clicked', async () => {
|
|
|
|
const { user } = setUp();
|
2021-12-24 15:14:13 +03:00
|
|
|
|
2022-07-09 23:37:26 +03:00
|
|
|
expect(navigate).not.toHaveBeenCalled();
|
|
|
|
await user.click(screen.getByText('ShortUrlsTable'));
|
|
|
|
expect(navigate).toHaveBeenCalledWith(expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`));
|
2021-10-17 14:43:37 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it.each([
|
2023-04-13 22:48:29 +03:00
|
|
|
[fromPartial<ShortUrlsOrder>({ field: 'visits', dir: 'ASC' }), 'visits', 'ASC'],
|
|
|
|
[fromPartial<ShortUrlsOrder>({ field: 'title', dir: 'DESC' }), 'title', 'DESC'],
|
|
|
|
[fromPartial<ShortUrlsOrder>({}), undefined, undefined],
|
2022-12-22 20:07:44 +03:00
|
|
|
])('has expected initial ordering based on settings', (defaultOrdering, field, dir) => {
|
|
|
|
setUp({ shortUrlsList: { defaultOrdering } });
|
2022-07-09 23:37:26 +03:00
|
|
|
expect(listShortUrlsMock).toHaveBeenCalledWith(expect.objectContaining({
|
|
|
|
orderBy: { field, dir },
|
|
|
|
}));
|
2019-09-14 19:23:26 +03:00
|
|
|
});
|
2022-12-22 20:07:44 +03:00
|
|
|
|
|
|
|
it.each([
|
2023-04-13 22:48:29 +03:00
|
|
|
[fromPartial<Settings>({
|
2022-12-22 20:07:44 +03:00
|
|
|
shortUrlsList: {
|
|
|
|
defaultOrdering: { field: 'visits', dir: 'ASC' },
|
|
|
|
},
|
2023-08-04 12:16:01 +03:00
|
|
|
}), false, { field: 'visits', dir: 'ASC' }],
|
2023-04-13 22:48:29 +03:00
|
|
|
[fromPartial<Settings>({
|
2022-12-22 20:07:44 +03:00
|
|
|
shortUrlsList: {
|
|
|
|
defaultOrdering: { field: 'visits', dir: 'ASC' },
|
|
|
|
},
|
|
|
|
visits: { excludeBots: true },
|
2023-08-04 12:16:01 +03:00
|
|
|
}), false, { field: 'visits', dir: 'ASC' }],
|
2023-04-13 22:48:29 +03:00
|
|
|
[fromPartial<Settings>({
|
2022-12-22 20:07:44 +03:00
|
|
|
shortUrlsList: {
|
|
|
|
defaultOrdering: { field: 'visits', dir: 'ASC' },
|
|
|
|
},
|
2023-08-04 12:16:01 +03:00
|
|
|
}), true, { field: 'visits', dir: 'ASC' }],
|
2023-04-13 22:48:29 +03:00
|
|
|
[fromPartial<Settings>({
|
2022-12-22 20:07:44 +03:00
|
|
|
shortUrlsList: {
|
|
|
|
defaultOrdering: { field: 'visits', dir: 'ASC' },
|
|
|
|
},
|
|
|
|
visits: { excludeBots: true },
|
2023-08-04 12:16:01 +03:00
|
|
|
}), true, { field: 'nonBotVisits', dir: 'ASC' }],
|
|
|
|
])('parses order by based on supported features version and config', (settings, excludeBotsOnShortUrls, expectedOrderBy) => {
|
|
|
|
setUp(settings, excludeBotsOnShortUrls);
|
2022-12-22 20:07:44 +03:00
|
|
|
expect(listShortUrlsMock).toHaveBeenCalledWith(expect.objectContaining({ orderBy: expectedOrderBy }));
|
|
|
|
});
|
2019-09-14 19:23:26 +03:00
|
|
|
});
|