Merge pull request #666 from acelaya-forks/feature/tests

Migrated Paginator test to react testing library

.github/workflows/ci.yml

@@ -14,3 +14,4 @@ jobs:
       node-version: 16.15
       with-mutation-tests: true
       publish-coverage: true
+      force-install: true

.github/workflows/deploy-preview.yml

@@ -19,7 +19,7 @@ jobs:
           node-version: 16.15
       - name: Build
         run: |
-          npm ci && \
+          npm ci --force && \
           node ./scripts/set-homepage.js /shlink-web-client/${GITHUB_HEAD_REF#refs/heads/} && \
           rm src/service-worker.ts && \
           npm run build

.github/workflows/publish-release.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           node-version: 16.15
       - name: Generate release assets
-        run: npm ci && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
+        run: npm ci --force && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
       - name: Publish release with assets
         uses: docker://antonyurchenko/git-release:latest
         env:

test/short-urls/Paginator.test.tsx

@@ -1,15 +1,17 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { PaginationItem, PaginationLink } from 'reactstrap';
 import { Mock } from 'ts-mockery';
+import { MemoryRouter } from 'react-router-dom';
 import { Paginator } from '../../src/short-urls/Paginator';
 import { ShlinkPaginator } from '../../src/api/types';
 import { ELLIPSIS } from '../../src/utils/helpers/pagination';
 
 describe('<Paginator />', () => {
-  let wrapper: ShallowWrapper;
   const buildPaginator = (pagesCount?: number) => Mock.of<ShlinkPaginator>({ pagesCount, currentPage: 1 });
-
+  const setUp = (paginator?: ShlinkPaginator, currentQueryString?: string) => render(
-  afterEach(() => wrapper?.unmount());
+    <MemoryRouter>
+      <Paginator serverId="abc123" paginator={paginator} currentQueryString={currentQueryString} />
+    </MemoryRouter>,
+  );
 
   it.each([
     [undefined],
@@ -17,8 +19,8 @@ describe('<Paginator />', () => {
     [buildPaginator(0)],
     [buildPaginator(1)],
   ])('renders nothing if the number of pages is below 2', (paginator) => {
-    wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} />);
+    const { container } = setUp(paginator);
-    expect(wrapper.text()).toEqual('');
+    expect(container.firstChild).toBeNull();
   });
 
   it.each([
@@ -33,11 +35,12 @@ describe('<Paginator />', () => {
     expectedPages,
     expectedEllipsis,
   ) => {
-    wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} />);
+    setUp(paginator);
-    const items = wrapper.find(PaginationItem);
-    const ellipsis = items.filterWhere((item) => item.find(PaginationLink).prop('children') === ELLIPSIS);
 
-    expect(items).toHaveLength(expectedPages);
+    const links = screen.getAllByRole('link');
+    const ellipsis = screen.queryAllByText(ELLIPSIS);
+
+    expect(links).toHaveLength(expectedPages);
     expect(ellipsis).toHaveLength(expectedEllipsis);
   });
 
@@ -45,10 +48,10 @@ describe('<Paginator />', () => {
     const paginator = buildPaginator(3);
     const currentQueryString = '?foo=bar';
 
-    wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} currentQueryString={currentQueryString} />);
+    setUp(paginator, currentQueryString);
-    const links = wrapper.find(PaginationLink);
+    const links = screen.getAllByRole('link');
 
     expect(links).toHaveLength(5);
-    links.forEach((link) => expect(link.prop('to')).toContain(currentQueryString));
+    links.forEach((link) => expect(link).toHaveAttribute('href', expect.stringContaining(currentQueryString)));
   });
 });