import { screen } from '@testing-library/react'; import { MemoryRouter, useNavigate } from 'react-router-dom'; import { Mock } from 'ts-mockery'; import type { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import type { ReachableServer } from '../../src/servers/data'; import type { Settings } from '../../src/settings/reducers/settings'; import type { ShortUrl, 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'; import type { SemVer } from '../../src/utils/helpers/version'; import { renderWithEvents } from '../__helpers__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn().mockReturnValue(jest.fn()), useLocation: jest.fn().mockReturnValue({ search: '?tags=test%20tag&search=example.com' }), })); describe('', () => { const ShortUrlsTable: ShortUrlsTableType = ({ onTagClick }) => onTagClick?.('foo')}>ShortUrlsTable; const ShortUrlsFilteringBar = () => ShortUrlsFilteringBar; const listShortUrlsMock = jest.fn(); const navigate = jest.fn(); const shortUrlsList = Mock.of({ shortUrls: { data: [ Mock.of({ shortCode: 'testShortCode', shortUrl: 'https://www.example.com/testShortUrl', longUrl: 'https://www.example.com/testLongUrl', tags: ['test tag'], }), ], pagination: { pagesCount: 3 }, }, }); const ShortUrlsList = createShortUrlsList(ShortUrlsTable, ShortUrlsFilteringBar); const setUp = (settings: Partial = {}, version: SemVer = '3.0.0') => renderWithEvents( ({ mercureInfo: { loading: true } })} listShortUrls={listShortUrlsMock} shortUrlsList={shortUrlsList} selectedServer={Mock.of({ id: '1', version })} settings={Mock.of(settings)} /> , ); beforeEach(() => { (useNavigate as any).mockReturnValue(navigate); }); afterEach(jest.clearAllMocks); it('wraps expected components', () => { setUp(); expect(screen.getByText('ShortUrlsTable')).toBeInTheDocument(); expect(screen.getByText('ShortUrlsFilteringBar')).toBeInTheDocument(); }); it('passes current query to paginator', () => { 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', async () => { const { user } = setUp(); expect(navigate).not.toHaveBeenCalled(); await user.click(screen.getByText('ShortUrlsTable')); expect(navigate).toHaveBeenCalledWith(expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`)); }); it.each([ [Mock.of({ field: 'visits', dir: 'ASC' }), 'visits', 'ASC'], [Mock.of({ field: 'title', dir: 'DESC' }), 'title', 'DESC'], [Mock.all(), undefined, undefined], ])('has expected initial ordering based on settings', (defaultOrdering, field, dir) => { setUp({ shortUrlsList: { defaultOrdering } }); expect(listShortUrlsMock).toHaveBeenCalledWith(expect.objectContaining({ orderBy: { field, dir }, })); }); it.each([ [Mock.of({ shortUrlsList: { defaultOrdering: { field: 'visits', dir: 'ASC' }, }, }), '3.3.0' as SemVer, { field: 'visits', dir: 'ASC' }], [Mock.of({ shortUrlsList: { defaultOrdering: { field: 'visits', dir: 'ASC' }, }, visits: { excludeBots: true }, }), '3.3.0' as SemVer, { field: 'visits', dir: 'ASC' }], [Mock.of({ shortUrlsList: { defaultOrdering: { field: 'visits', dir: 'ASC' }, }, }), '3.4.0' as SemVer, { field: 'visits', dir: 'ASC' }], [Mock.of({ shortUrlsList: { defaultOrdering: { field: 'visits', dir: 'ASC' }, }, visits: { excludeBots: true }, }), '3.4.0' as SemVer, { field: 'nonBotVisits', dir: 'ASC' }], ])('parses order by based on server version and config', (settings, serverVersion, expectedOrderBy) => { setUp(settings, serverVersion); expect(listShortUrlsMock).toHaveBeenCalledWith(expect.objectContaining({ orderBy: expectedOrderBy })); }); });