Migrated ShortUrlsList test to react testing library

test/short-urls/ShortUrlsList.test.tsx

@@ -1,26 +1,25 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { ReactElement } from '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: FC<ShortUrlsTableProps> = ({ onTagClick }) => <span onClick={() => onTagClick?.('foo')}>ShortUrlsTable</span>;
-  const ShortUrlsTable = () => null;
+  const ShortUrlsFilteringBar = () => <span>ShortUrlsFilteringBar</span>;
-  const ShortUrlsFilteringBar = () => null;
   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(
+  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 } })}
-    />,
+        />
-  ).dive(); // Dive is needed as this component is wrapped in a HOC
+      </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);
+    setUp();
-    expect(wrapper.find(Paginator)).toHaveLength(1);
+
-    expect(wrapper.find(ShortUrlsFilteringBar)).toHaveLength(1);
+    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', () => {
+  it('gets list refreshed every time a tag is clicked', async () => {
-    wrapper.find(ShortUrlsTable).simulate('tagClick', 'foo');
+    const { user } = setUp();
-    wrapper.find(ShortUrlsTable).simulate('tagClick', 'bar');
-    wrapper.find(ShortUrlsTable).simulate('tagClick', 'baz');
 
-    expect(navigate).toHaveBeenCalledTimes(3);
+    expect(navigate).not.toHaveBeenCalled();
-    expect(navigate).toHaveBeenNthCalledWith(1, expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`));
+    await user.click(screen.getByText('ShortUrlsTable'));
-    expect(navigate).toHaveBeenNthCalledWith(2, expect.stringContaining(`tags=${encodeURIComponent('test tag,bar')}`));
+    expect(navigate).toHaveBeenCalledWith(expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`));
-    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' });
   });
 
   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) => {
+  ])('has expected initial ordering based on settings', (initialOrderBy, field, dir) => {
-    const wrapper = createWrapper(initialOrderBy);
+    setUp(initialOrderBy);
-
+    expect(listShortUrlsMock).toHaveBeenCalledWith(expect.objectContaining({
-    expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field, dir });
+      orderBy: { field, dir },
+    }));
   });
 });