Migrated more tests to react testing lib

test/visits/OrphanVisits.test.tsx

@@ -1,46 +1,50 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
 import { Mock } from 'ts-mockery';
+import { formatISO } from 'date-fns';
 import { OrphanVisits as createOrphanVisits } from '../../src/visits/OrphanVisits';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
-import { VisitsInfo } from '../../src/visits/types';
+import { Visit, VisitsInfo } from '../../src/visits/types';
-import { VisitsStats } from '../../src/visits/VisitsStats';
 import { Settings } from '../../src/settings/reducers/settings';
 import { ReportExporter } from '../../src/common/services/ReportExporter';
 import { SelectedServer } from '../../src/servers/data';
-import { VisitsHeader } from '../../src/visits/VisitsHeader';
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: jest.fn().mockReturnValue(jest.fn()),
-  useParams: jest.fn().mockReturnValue({}),
-}));
 
 describe('<OrphanVisits />', () => {
+  const getOrphanVisits = jest.fn();
+  const exportVisits = jest.fn();
+  const orphanVisits = Mock.of<VisitsInfo>({ visits: [Mock.of<Visit>({ date: formatISO(new Date()) })] });
+  const OrphanVisits = createOrphanVisits(Mock.of<ReportExporter>({ exportVisits }));
+  const setUp = () => ({
+    user: userEvent.setup(),
+    ...render(
+      <MemoryRouter>
+        <OrphanVisits
+          {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
+          getOrphanVisits={getOrphanVisits}
+          orphanVisits={orphanVisits}
+          cancelGetOrphanVisits={jest.fn()}
+          settings={Mock.all<Settings>()}
+          selectedServer={Mock.all<SelectedServer>()}
+        />
+      </MemoryRouter>,
+    ),
+  });
+
   it('wraps visits stats and header', () => {
-    const getOrphanVisits = jest.fn();
+    setUp();
-    const cancelGetOrphanVisits = jest.fn();
+    expect(screen.getByRole('heading', { name: 'Orphan visits' })).toBeInTheDocument();
-    const orphanVisits = Mock.all<VisitsInfo>();
+    expect(getOrphanVisits).toHaveBeenCalled();
-    const OrphanVisits = createOrphanVisits(Mock.all<ReportExporter>());
+  });
 
-    const wrapper = shallow(
+  it('exports visits when clicking the button', async () => {
-      <OrphanVisits
+    const { user } = setUp();
-        {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
+    const btn = screen.getByRole('button', { name: 'Export (1)' });
-        getOrphanVisits={getOrphanVisits}
-        orphanVisits={orphanVisits}
-        cancelGetOrphanVisits={cancelGetOrphanVisits}
-        settings={Mock.all<Settings>()}
-        selectedServer={Mock.all<SelectedServer>()}
-      />,
-    ).dive();
-    const stats = wrapper.find(VisitsStats);
-    const header = wrapper.find(VisitsHeader);
 
-    expect(stats).toHaveLength(1);
+    expect(exportVisits).not.toHaveBeenCalled();
-    expect(header).toHaveLength(1);
+    expect(btn).toBeInTheDocument();
-    expect(stats.prop('cancelGetVisits')).toEqual(cancelGetOrphanVisits);
+
-    expect(stats.prop('visitsInfo')).toEqual(orphanVisits);
+    await user.click(btn);
-    expect(stats.prop('isOrphanVisits')).toEqual(true);
+    expect(exportVisits).toHaveBeenCalledWith('orphan_visits.csv', expect.anything());
-    expect(header.prop('visits')).toEqual(orphanVisits.visits);
-    expect(header.prop('goBack')).toEqual(expect.any(Function));
   });
 });

test/visits/ShortUrlVisits.test.tsx

@@ -1,49 +1,54 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
 import { identity } from 'ramda';
 import { Mock } from 'ts-mockery';
+import { formatISO } from 'date-fns';
 import { ShortUrlVisits as createShortUrlVisits, ShortUrlVisitsProps } from '../../src/visits/ShortUrlVisits';
-import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader';
 import { ShortUrlVisits as ShortUrlVisitsState } from '../../src/visits/reducers/shortUrlVisits';
 import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
-import { VisitsStats } from '../../src/visits/VisitsStats';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { ReportExporter } from '../../src/common/services/ReportExporter';
-
+import { Visit } from '../../src/visits/types';
-jest.mock('react-router-dom', () => ({
+import { Settings } from '../../src/settings/reducers/settings';
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: jest.fn().mockReturnValue(jest.fn()),
-  useLocation: jest.fn().mockReturnValue({ search: '' }),
-  useParams: jest.fn().mockReturnValue({ shortCode: 'abc123' }),
-}));
 
 describe('<ShortUrlVisits />', () => {
-  let wrapper: ShallowWrapper;
   const getShortUrlVisitsMock = jest.fn();
-  const ShortUrlVisits = createShortUrlVisits(Mock.all<ReportExporter>());
+  const exportVisits = jest.fn();
-
+  const shortUrlVisits = Mock.of<ShortUrlVisitsState>({ visits: [Mock.of<Visit>({ date: formatISO(new Date()) })] });
-  beforeEach(() => {
+  const ShortUrlVisits = createShortUrlVisits(Mock.of<ReportExporter>({ exportVisits }));
-    wrapper = shallow(
+  const setUp = () => ({
-      <ShortUrlVisits
+    user: userEvent.setup(),
-        {...Mock.all<ShortUrlVisitsProps>()}
+    ...render(
-        {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
+      <MemoryRouter>
-        getShortUrlDetail={identity}
+        <ShortUrlVisits
-        getShortUrlVisits={getShortUrlVisitsMock}
+          {...Mock.all<ShortUrlVisitsProps>()}
-        shortUrlVisits={Mock.of<ShortUrlVisitsState>({ loading: true, visits: [] })}
+          {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
-        shortUrlDetail={Mock.all<ShortUrlDetail>()}
+          getShortUrlDetail={identity}
-        cancelGetShortUrlVisits={() => {}}
+          getShortUrlVisits={getShortUrlVisitsMock}
-      />,
+          shortUrlVisits={shortUrlVisits}
-    ).dive(); // Dive is needed as this component is wrapped in a HOC
+          shortUrlDetail={Mock.all<ShortUrlDetail>()}
+          settings={Mock.all<Settings>()}
+          cancelGetShortUrlVisits={() => {}}
+        />
+      </MemoryRouter>,
+    ),
   });
 
-  afterEach(jest.clearAllMocks);
+  it('wraps visits stats and header', () => {
-  afterEach(() => wrapper.unmount());
+    setUp();
+    expect(screen.getAllByRole('heading')[0]).toHaveTextContent('Visits for');
+    expect(getShortUrlVisitsMock).toHaveBeenCalled();
+  });
 
-  it('renders visit stats and visits header', () => {
+  it('exports visits when clicking the button', async () => {
-    const visitStats = wrapper.find(VisitsStats);
+    const { user } = setUp();
-    const visitHeader = wrapper.find(ShortUrlVisitsHeader);
+    const btn = screen.getByRole('button', { name: 'Export (1)' });
 
-    expect(visitStats).toHaveLength(1);
+    expect(exportVisits).not.toHaveBeenCalled();
-    expect(visitStats.prop('isOrphanVisits')).not.toBeDefined();
+    expect(btn).toBeInTheDocument();
-    expect(visitHeader).toHaveLength(1);
+
+    await user.click(btn);
+    expect(exportVisits).toHaveBeenCalledWith('short-url_undefined_visits.csv', expect.anything());
   });
 });

test/visits/TagVisits.test.tsx

@@ -1,47 +1,59 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { formatISO } from 'date-fns';
+import { MemoryRouter } from 'react-router-dom';
 import { Mock } from 'ts-mockery';
 import { TagVisits as createTagVisits, TagVisitsProps } from '../../src/visits/TagVisits';
-import { TagVisitsHeader } from '../../src/visits/TagVisitsHeader';
 import { ColorGenerator } from '../../src/utils/services/ColorGenerator';
 import { TagVisits as TagVisitsStats } from '../../src/visits/reducers/tagVisits';
-import { VisitsStats } from '../../src/visits/VisitsStats';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { ReportExporter } from '../../src/common/services/ReportExporter';
+import { Visit } from '../../src/visits/types';
+import { Settings } from '../../src/settings/reducers/settings';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  useNavigate: jest.fn().mockReturnValue(jest.fn()),
-  useLocation: jest.fn().mockReturnValue({}),
   useParams: jest.fn().mockReturnValue({ tag: 'foo' }),
 }));
 
 describe('<TagVisits />', () => {
-  let wrapper: ShallowWrapper;
   const getTagVisitsMock = jest.fn();
-
+  const exportVisits = jest.fn();
-  beforeEach(() => {
+  const tagVisits = Mock.of<TagVisitsStats>({ visits: [Mock.of<Visit>({ date: formatISO(new Date()) })] });
-    const TagVisits = createTagVisits(Mock.all<ColorGenerator>(), Mock.all<ReportExporter>());
+  const TagVisits = createTagVisits(
-
+    Mock.of<ColorGenerator>({ isColorLightForKey: () => false, getColorForKey: () => 'red' }),
-    wrapper = shallow(
+    Mock.of<ReportExporter>({ exportVisits }),
-      <TagVisits
+  );
-        {...Mock.all<TagVisitsProps>()}
+  const setUp = () => ({
-        {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
+    user: userEvent.setup(),
-        getTagVisits={getTagVisitsMock}
+    ...render(
-        tagVisits={Mock.of<TagVisitsStats>({ loading: true, visits: [] })}
+      <MemoryRouter>
-        cancelGetTagVisits={() => {}}
+        <TagVisits
-      />,
+          {...Mock.all<TagVisitsProps>()}
-    ).dive(); // Dive is needed as this component is wrapped in a HOC
+          {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
+          getTagVisits={getTagVisitsMock}
+          tagVisits={tagVisits}
+          settings={Mock.all<Settings>()}
+          cancelGetTagVisits={() => {}}
+        />
+      </MemoryRouter>,
+    ),
   });
 
-  afterEach(() => wrapper.unmount());
+  it('wraps visits stats and header', () => {
-  afterEach(jest.resetAllMocks);
+    setUp();
+    expect(screen.getAllByRole('heading')[0]).toHaveTextContent('Visits for');
+    expect(getTagVisitsMock).toHaveBeenCalled();
+  });
 
-  it('renders visit stats and visits header', () => {
+  it('exports visits when clicking the button', async () => {
-    const visitStats = wrapper.find(VisitsStats);
+    const { user } = setUp();
-    const visitHeader = wrapper.find(TagVisitsHeader);
+    const btn = screen.getByRole('button', { name: 'Export (1)' });
 
-    expect(visitStats).toHaveLength(1);
+    expect(exportVisits).not.toHaveBeenCalled();
-    expect(visitStats.prop('isOrphanVisits')).not.toBeDefined();
+    expect(btn).toBeInTheDocument();
-    expect(visitHeader).toHaveLength(1);
+
+    await user.click(btn);
+    expect(exportVisits).toHaveBeenCalledWith('tag_foo_visits.csv', expect.anything());
   });
 });