From 54fe849efdf6847cc9229262711d6eae570e5e9f Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 10 Jun 2022 21:31:13 +0200 Subject: [PATCH] Migrated more tests to react testing lib --- test/visits/OrphanVisits.test.tsx | 70 ++++++++++++++-------------- test/visits/ShortUrlVisits.test.tsx | 71 +++++++++++++++-------------- test/visits/TagVisits.test.tsx | 66 ++++++++++++++++----------- 3 files changed, 114 insertions(+), 93 deletions(-) diff --git a/test/visits/OrphanVisits.test.tsx b/test/visits/OrphanVisits.test.tsx index b4641a3a..0f1f426a 100644 --- a/test/visits/OrphanVisits.test.tsx +++ b/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 { VisitsStats } from '../../src/visits/VisitsStats'; +import { Visit, VisitsInfo } from '../../src/visits/types'; 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('', () => { + const getOrphanVisits = jest.fn(); + const exportVisits = jest.fn(); + const orphanVisits = Mock.of({ visits: [Mock.of({ date: formatISO(new Date()) })] }); + const OrphanVisits = createOrphanVisits(Mock.of({ exportVisits })); + const setUp = () => ({ + user: userEvent.setup(), + ...render( + + ({ mercureInfo: {} })} + getOrphanVisits={getOrphanVisits} + orphanVisits={orphanVisits} + cancelGetOrphanVisits={jest.fn()} + settings={Mock.all()} + selectedServer={Mock.all()} + /> + , + ), + }); + it('wraps visits stats and header', () => { - const getOrphanVisits = jest.fn(); - const cancelGetOrphanVisits = jest.fn(); - const orphanVisits = Mock.all(); - const OrphanVisits = createOrphanVisits(Mock.all()); + setUp(); + expect(screen.getByRole('heading', { name: 'Orphan visits' })).toBeInTheDocument(); + expect(getOrphanVisits).toHaveBeenCalled(); + }); - const wrapper = shallow( - ({ mercureInfo: {} })} - getOrphanVisits={getOrphanVisits} - orphanVisits={orphanVisits} - cancelGetOrphanVisits={cancelGetOrphanVisits} - settings={Mock.all()} - selectedServer={Mock.all()} - />, - ).dive(); - const stats = wrapper.find(VisitsStats); - const header = wrapper.find(VisitsHeader); + it('exports visits when clicking the button', async () => { + const { user } = setUp(); + const btn = screen.getByRole('button', { name: 'Export (1)' }); - expect(stats).toHaveLength(1); - expect(header).toHaveLength(1); - expect(stats.prop('cancelGetVisits')).toEqual(cancelGetOrphanVisits); - expect(stats.prop('visitsInfo')).toEqual(orphanVisits); - expect(stats.prop('isOrphanVisits')).toEqual(true); - expect(header.prop('visits')).toEqual(orphanVisits.visits); - expect(header.prop('goBack')).toEqual(expect.any(Function)); + expect(exportVisits).not.toHaveBeenCalled(); + expect(btn).toBeInTheDocument(); + + await user.click(btn); + expect(exportVisits).toHaveBeenCalledWith('orphan_visits.csv', expect.anything()); }); }); diff --git a/test/visits/ShortUrlVisits.test.tsx b/test/visits/ShortUrlVisits.test.tsx index 984648f2..960f986c 100644 --- a/test/visits/ShortUrlVisits.test.tsx +++ b/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'; - -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useNavigate: jest.fn().mockReturnValue(jest.fn()), - useLocation: jest.fn().mockReturnValue({ search: '' }), - useParams: jest.fn().mockReturnValue({ shortCode: 'abc123' }), -})); +import { Visit } from '../../src/visits/types'; +import { Settings } from '../../src/settings/reducers/settings'; describe('', () => { - let wrapper: ShallowWrapper; const getShortUrlVisitsMock = jest.fn(); - const ShortUrlVisits = createShortUrlVisits(Mock.all()); - - beforeEach(() => { - wrapper = shallow( - ()} - {...Mock.of({ mercureInfo: {} })} - getShortUrlDetail={identity} - getShortUrlVisits={getShortUrlVisitsMock} - shortUrlVisits={Mock.of({ loading: true, visits: [] })} - shortUrlDetail={Mock.all()} - cancelGetShortUrlVisits={() => {}} - />, - ).dive(); // Dive is needed as this component is wrapped in a HOC + const exportVisits = jest.fn(); + const shortUrlVisits = Mock.of({ visits: [Mock.of({ date: formatISO(new Date()) })] }); + const ShortUrlVisits = createShortUrlVisits(Mock.of({ exportVisits })); + const setUp = () => ({ + user: userEvent.setup(), + ...render( + + ()} + {...Mock.of({ mercureInfo: {} })} + getShortUrlDetail={identity} + getShortUrlVisits={getShortUrlVisitsMock} + shortUrlVisits={shortUrlVisits} + shortUrlDetail={Mock.all()} + settings={Mock.all()} + cancelGetShortUrlVisits={() => {}} + /> + , + ), }); - afterEach(jest.clearAllMocks); - afterEach(() => wrapper.unmount()); + it('wraps visits stats and header', () => { + setUp(); + expect(screen.getAllByRole('heading')[0]).toHaveTextContent('Visits for'); + expect(getShortUrlVisitsMock).toHaveBeenCalled(); + }); - it('renders visit stats and visits header', () => { - const visitStats = wrapper.find(VisitsStats); - const visitHeader = wrapper.find(ShortUrlVisitsHeader); + it('exports visits when clicking the button', async () => { + const { user } = setUp(); + const btn = screen.getByRole('button', { name: 'Export (1)' }); - expect(visitStats).toHaveLength(1); - expect(visitStats.prop('isOrphanVisits')).not.toBeDefined(); - expect(visitHeader).toHaveLength(1); + expect(exportVisits).not.toHaveBeenCalled(); + expect(btn).toBeInTheDocument(); + + await user.click(btn); + expect(exportVisits).toHaveBeenCalledWith('short-url_undefined_visits.csv', expect.anything()); }); }); diff --git a/test/visits/TagVisits.test.tsx b/test/visits/TagVisits.test.tsx index 114b68c0..3b8f92c1 100644 --- a/test/visits/TagVisits.test.tsx +++ b/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('', () => { - let wrapper: ShallowWrapper; const getTagVisitsMock = jest.fn(); - - beforeEach(() => { - const TagVisits = createTagVisits(Mock.all(), Mock.all()); - - wrapper = shallow( - ()} - {...Mock.of({ mercureInfo: {} })} - getTagVisits={getTagVisitsMock} - tagVisits={Mock.of({ loading: true, visits: [] })} - cancelGetTagVisits={() => {}} - />, - ).dive(); // Dive is needed as this component is wrapped in a HOC + const exportVisits = jest.fn(); + const tagVisits = Mock.of({ visits: [Mock.of({ date: formatISO(new Date()) })] }); + const TagVisits = createTagVisits( + Mock.of({ isColorLightForKey: () => false, getColorForKey: () => 'red' }), + Mock.of({ exportVisits }), + ); + const setUp = () => ({ + user: userEvent.setup(), + ...render( + + ()} + {...Mock.of({ mercureInfo: {} })} + getTagVisits={getTagVisitsMock} + tagVisits={tagVisits} + settings={Mock.all()} + cancelGetTagVisits={() => {}} + /> + , + ), }); - afterEach(() => wrapper.unmount()); - afterEach(jest.resetAllMocks); + it('wraps visits stats and header', () => { + setUp(); + expect(screen.getAllByRole('heading')[0]).toHaveTextContent('Visits for'); + expect(getTagVisitsMock).toHaveBeenCalled(); + }); - it('renders visit stats and visits header', () => { - const visitStats = wrapper.find(VisitsStats); - const visitHeader = wrapper.find(TagVisitsHeader); + it('exports visits when clicking the button', async () => { + const { user } = setUp(); + const btn = screen.getByRole('button', { name: 'Export (1)' }); - expect(visitStats).toHaveLength(1); - expect(visitStats.prop('isOrphanVisits')).not.toBeDefined(); - expect(visitHeader).toHaveLength(1); + expect(exportVisits).not.toHaveBeenCalled(); + expect(btn).toBeInTheDocument(); + + await user.click(btn); + expect(exportVisits).toHaveBeenCalledWith('tag_foo_visits.csv', expect.anything()); }); });