import { shallow, ShallowWrapper } from 'enzyme'; import { ReactElement } from 'react'; import { Mock } from 'ts-mockery'; import { History, Location } from 'history'; import { match } from 'react-router'; import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList'; import { ShortUrlsOrderableFields, 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 SortingDropdown from '../../src/utils/SortingDropdown'; import Paginator from '../../src/short-urls/Paginator'; import { ReachableServer } from '../../src/servers/data'; import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks'; import { Settings } from '../../src/settings/reducers/settings'; describe('', () => { let wrapper: ShallowWrapper; const ShortUrlsTable = () => null; const SearchBar = () => null; const listShortUrlsMock = jest.fn(); const push = 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' ], }), ], }, }); const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable, SearchBar); const createWrapper = (defaultOrdering: ShortUrlsOrder = {}) => shallow( ({ mercureInfo: { loading: true } })} listShortUrls={listShortUrlsMock} match={Mock.of>({ params: {} })} location={Mock.of({ search: '?tags=test%20tag&search=example.com' })} shortUrlsList={shortUrlsList} history={Mock.of({ push })} selectedServer={Mock.of({ id: '1' })} settings={Mock.of({ shortUrlsList: { defaultOrdering } })} />, ).dive(); // Dive is needed as this component is wrapped in a HOC beforeEach(() => { wrapper = createWrapper(); }); afterEach(jest.resetAllMocks); afterEach(() => wrapper?.unmount()); it('wraps expected components', () => { expect(wrapper.find(ShortUrlsTable)).toHaveLength(1); expect(wrapper.find(SortingDropdown)).toHaveLength(1); expect(wrapper.find(Paginator)).toHaveLength(1); expect(wrapper.find(SearchBar)).toHaveLength(1); }); it('passes current query to paginator', () => { expect(wrapper.find(Paginator).prop('currentQueryString')).toEqual('?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'); expect(push).toHaveBeenCalledTimes(3); expect(push).toHaveBeenNthCalledWith(1, expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`)); expect(push).toHaveBeenNthCalledWith(2, expect.stringContaining(`tags=${encodeURIComponent('test tag,bar')}`)); expect(push).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(SortingDropdown).simulate('change', 'visits'); expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' }); wrapper.find(SortingDropdown).simulate('change', '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(SortingDropdown).prop('order')).toEqual({}); orderByColumn('visits')(); expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); orderByColumn('title')(); expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' }); orderByColumn('shortCode')(); expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' }); }); it('handles order through dropdown', () => { expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); wrapper.find(SortingDropdown).simulate('change', 'shortCode', 'DESC'); expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' }); wrapper.find(SortingDropdown).simulate('change', undefined, undefined); expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); }); it.each([ [ Mock.of({ field: 'visits', dir: 'ASC' }), 'visits', 'ASC' ], [ Mock.of({ field: 'title', dir: 'DESC' }), 'title', 'DESC' ], [ Mock.of(), undefined, undefined ], ])('has expected initial ordering', (initialOrderBy, field, dir) => { const wrapper = createWrapper(initialOrderBy); expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field, dir }); }); });