From ab21f923c62fc42152820fc7a5b12c29eca6b420 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jun 2022 18:10:08 +0200 Subject: [PATCH] Migrated OpenMapModalBtn test to react testing library --- src/visits/VisitsStats.tsx | 2 +- src/visits/charts/SortableBarChartCard.tsx | 4 +- src/visits/helpers/MapModal.tsx | 2 +- src/visits/helpers/OpenMapModalBtn.tsx | 6 +- test/visits/helpers/OpenMapModalBtn.test.tsx | 77 ++-- .../OpenMapModalBtn.test.tsx.snap | 353 ++++++++++++++++++ 6 files changed, 396 insertions(+), 48 deletions(-) create mode 100644 test/visits/helpers/__snapshots__/OpenMapModalBtn.test.tsx.snap diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx index 41e37d0a..f2ec12c2 100644 --- a/src/visits/VisitsStats.tsx +++ b/src/visits/VisitsStats.tsx @@ -235,7 +235,7 @@ export const VisitsStats: FC = ({ stats={cities} highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')} highlightedLabel={highlightedLabel} - extraHeaderContent={(activeCities: string[]) => mapLocations.length > 0 && ( + extraHeaderContent={(activeCities) => mapLocations.length > 0 && ( )} sortingItems={{ diff --git a/src/visits/charts/SortableBarChartCard.tsx b/src/visits/charts/SortableBarChartCard.tsx index 83219b73..8d43bdb3 100644 --- a/src/visits/charts/SortableBarChartCard.tsx +++ b/src/visits/charts/SortableBarChartCard.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react'; +import { FC, ReactNode, useState } from 'react'; import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda'; import { rangeOf } from '../../utils/utils'; import { Order } from '../../utils/helpers/ordering'; @@ -14,7 +14,7 @@ interface SortableBarChartCardProps extends Omit title: Function | string; sortingItems: Record; withPagination?: boolean; - extraHeaderContent?: Function; + extraHeaderContent?: (activeCities?: string[]) => ReactNode; } const toLowerIfString = (value: any) => (type(value) === 'String' ? toLower(value) : value); diff --git a/src/visits/helpers/MapModal.tsx b/src/visits/helpers/MapModal.tsx index 94dfa823..27296ff9 100644 --- a/src/visits/helpers/MapModal.tsx +++ b/src/visits/helpers/MapModal.tsx @@ -40,7 +40,7 @@ export const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProp

{title} -

diff --git a/src/visits/helpers/OpenMapModalBtn.tsx b/src/visits/helpers/OpenMapModalBtn.tsx index c6b367e1..9d3032e7 100644 --- a/src/visits/helpers/OpenMapModalBtn.tsx +++ b/src/visits/helpers/OpenMapModalBtn.tsx @@ -9,7 +9,7 @@ import './OpenMapModalBtn.scss'; interface OpenMapModalBtnProps { modalTitle: string; - activeCities: string[]; + activeCities?: string[]; locations?: CityStats[]; } @@ -19,7 +19,9 @@ export const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: Op const [locationsToShow, setLocationsToShow] = useState([]); const id = useDomId(); - const filterLocations = (cities: CityStats[]) => cities.filter(({ cityName }) => activeCities.includes(cityName)); + const filterLocations = (cities: CityStats[]) => ( + !activeCities ? cities : cities.filter(({ cityName }) => activeCities?.includes(cityName)) + ); const onClick = () => { if (!activeCities) { setLocationsToShow(locations); diff --git a/test/visits/helpers/OpenMapModalBtn.test.tsx b/test/visits/helpers/OpenMapModalBtn.test.tsx index 89eea4fc..f33e67a8 100644 --- a/test/visits/helpers/OpenMapModalBtn.test.tsx +++ b/test/visits/helpers/OpenMapModalBtn.test.tsx @@ -1,61 +1,54 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { Dropdown, DropdownItem, UncontrolledTooltip } from 'reactstrap'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Mock } from 'ts-mockery'; import { OpenMapModalBtn } from '../../../src/visits/helpers/OpenMapModalBtn'; -import { MapModal } from '../../../src/visits/helpers/MapModal'; import { CityStats } from '../../../src/visits/types'; describe('', () => { - let wrapper: ShallowWrapper; const title = 'Foo'; const locations = [ - Mock.of({ cityName: 'foo', count: 30 }), - Mock.of({ cityName: 'bar', count: 45 }), + Mock.of({ cityName: 'foo', count: 30, latLong: [5, 5] }), + Mock.of({ cityName: 'bar', count: 45, latLong: [88, 88] }), ]; - const createWrapper = (activeCities: string[] = []) => { - wrapper = shallow(); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); - - it('renders expected content', () => { - const wrapper = createWrapper(); - const button = wrapper.find('.open-map-modal-btn__btn'); - const tooltip = wrapper.find(UncontrolledTooltip); - const dropdown = wrapper.find(Dropdown); - const modal = wrapper.find(MapModal); - - expect(button).toHaveLength(1); - expect(tooltip).toHaveLength(1); - expect(dropdown).toHaveLength(1); - expect(modal).toHaveLength(1); + const setUp = (activeCities?: string[]) => ({ + user: userEvent.setup(), + ...render(), }); - it('opens dropdown instead of modal when a list of active cities has been provided', () => { - const wrapper = createWrapper(['bar']); + it('renders tooltip on button hover and opens modal on click', async () => { + const { user } = setUp(); - wrapper.find('.open-map-modal-btn__btn').simulate('click'); + expect(screen.queryByRole('tooltip')).not.toBeInTheDocument(); + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); + expect(screen.queryByRole('menu')).not.toBeInTheDocument(); - expect(wrapper.find(Dropdown).prop('isOpen')).toEqual(true); - expect(wrapper.find(MapModal).prop('isOpen')).toEqual(false); + await user.click(screen.getByRole('button')); + await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument()); + await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument()); + expect(screen.queryByRole('menu')).not.toBeInTheDocument(); }); - it('filters out non-active cities from list of locations', () => { - const wrapper = createWrapper(['bar']); + it('opens dropdown instead of modal when a list of active cities has been provided', async () => { + const { user } = setUp(['bar']); - wrapper.find('.open-map-modal-btn__btn').simulate('click'); - wrapper.find(Dropdown).find(DropdownItem).at(1).simulate('click'); + expect(screen.queryByRole('menu')).not.toBeInTheDocument(); + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); - const modal = wrapper.find(MapModal); + await user.click(screen.getByRole('button')); - expect(modal.prop('title')).toEqual(title); - expect(modal.prop('locations')).toEqual([ - { - cityName: 'bar', - count: 45, - }, - ]); + await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument()); + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); + }); + + it.each([ + ['Show all locations'], + ['Show locations in current page'], + ])('filters out non-active cities from list of locations', async (name) => { + const { user } = setUp(['bar']); + + await user.click(screen.getByRole('button')); + await user.click(screen.getByRole('menuitem', { name })); + + expect(await screen.findByRole('dialog')).toMatchSnapshot(); }); }); diff --git a/test/visits/helpers/__snapshots__/OpenMapModalBtn.test.tsx.snap b/test/visits/helpers/__snapshots__/OpenMapModalBtn.test.tsx.snap new file mode 100644 index 00000000..9d7c396b --- /dev/null +++ b/test/visits/helpers/__snapshots__/OpenMapModalBtn.test.tsx.snap @@ -0,0 +1,353 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` filters out non-active cities from list of locations 1`] = ` +