Migrated OpenMapModalBtn test to react testing library

This commit is contained in:
Alejandro Celaya 2022-06-11 18:10:08 +02:00
parent b75fd2e03a
commit ab21f923c6
6 changed files with 396 additions and 48 deletions

View file

@ -235,7 +235,7 @@ export const VisitsStats: FC<VisitsStatsProps> = ({
stats={cities} stats={cities}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')} highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}
highlightedLabel={highlightedLabel} highlightedLabel={highlightedLabel}
extraHeaderContent={(activeCities: string[]) => mapLocations.length > 0 && ( extraHeaderContent={(activeCities) => mapLocations.length > 0 && (
<OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} /> <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
)} )}
sortingItems={{ sortingItems={{

View file

@ -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 { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
import { rangeOf } from '../../utils/utils'; import { rangeOf } from '../../utils/utils';
import { Order } from '../../utils/helpers/ordering'; import { Order } from '../../utils/helpers/ordering';
@ -14,7 +14,7 @@ interface SortableBarChartCardProps extends Omit<HorizontalBarChartProps, 'max'>
title: Function | string; title: Function | string;
sortingItems: Record<string, string>; sortingItems: Record<string, string>;
withPagination?: boolean; withPagination?: boolean;
extraHeaderContent?: Function; extraHeaderContent?: (activeCities?: string[]) => ReactNode;
} }
const toLowerIfString = (value: any) => (type(value) === 'String' ? toLower(value) : value); const toLowerIfString = (value: any) => (type(value) === 'String' ? toLower(value) : value);

View file

@ -40,7 +40,7 @@ export const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProp
<ModalBody className="map-modal__modal-body"> <ModalBody className="map-modal__modal-body">
<h3 className="map-modal__modal-title"> <h3 className="map-modal__modal-title">
{title} {title}
<button type="button" className="btn-close float-end" onClick={toggle} /> <button type="button" className="btn-close float-end" aria-label="Close" onClick={toggle} />
</h3> </h3>
<MapContainer {...calculateMapProps(locations)}> <MapContainer {...calculateMapProps(locations)}>
<OpenStreetMapTile /> <OpenStreetMapTile />

View file

@ -9,7 +9,7 @@ import './OpenMapModalBtn.scss';
interface OpenMapModalBtnProps { interface OpenMapModalBtnProps {
modalTitle: string; modalTitle: string;
activeCities: string[]; activeCities?: string[];
locations?: CityStats[]; locations?: CityStats[];
} }
@ -19,7 +19,9 @@ export const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: Op
const [locationsToShow, setLocationsToShow] = useState<CityStats[]>([]); const [locationsToShow, setLocationsToShow] = useState<CityStats[]>([]);
const id = useDomId(); 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 = () => { const onClick = () => {
if (!activeCities) { if (!activeCities) {
setLocationsToShow(locations); setLocationsToShow(locations);

View file

@ -1,61 +1,54 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen, waitFor } from '@testing-library/react';
import { Dropdown, DropdownItem, UncontrolledTooltip } from 'reactstrap'; import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { OpenMapModalBtn } from '../../../src/visits/helpers/OpenMapModalBtn'; import { OpenMapModalBtn } from '../../../src/visits/helpers/OpenMapModalBtn';
import { MapModal } from '../../../src/visits/helpers/MapModal';
import { CityStats } from '../../../src/visits/types'; import { CityStats } from '../../../src/visits/types';
describe('<OpenMapModalBtn />', () => { describe('<OpenMapModalBtn />', () => {
let wrapper: ShallowWrapper;
const title = 'Foo'; const title = 'Foo';
const locations = [ const locations = [
Mock.of<CityStats>({ cityName: 'foo', count: 30 }), Mock.of<CityStats>({ cityName: 'foo', count: 30, latLong: [5, 5] }),
Mock.of<CityStats>({ cityName: 'bar', count: 45 }), Mock.of<CityStats>({ cityName: 'bar', count: 45, latLong: [88, 88] }),
]; ];
const createWrapper = (activeCities: string[] = []) => { const setUp = (activeCities?: string[]) => ({
wrapper = shallow(<OpenMapModalBtn modalTitle={title} locations={locations} activeCities={activeCities} />); user: userEvent.setup(),
...render(<OpenMapModalBtn modalTitle={title} locations={locations} activeCities={activeCities} />),
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);
}); });
it('opens dropdown instead of modal when a list of active cities has been provided', () => { it('renders tooltip on button hover and opens modal on click', async () => {
const wrapper = createWrapper(['bar']); 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); await user.click(screen.getByRole('button'));
expect(wrapper.find(MapModal).prop('isOpen')).toEqual(false); 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', () => { it('opens dropdown instead of modal when a list of active cities has been provided', async () => {
const wrapper = createWrapper(['bar']); const { user } = setUp(['bar']);
wrapper.find('.open-map-modal-btn__btn').simulate('click'); expect(screen.queryByRole('menu')).not.toBeInTheDocument();
wrapper.find(Dropdown).find(DropdownItem).at(1).simulate('click'); expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
const modal = wrapper.find(MapModal); await user.click(screen.getByRole('button'));
expect(modal.prop('title')).toEqual(title); await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
expect(modal.prop('locations')).toEqual([ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
{ });
cityName: 'bar',
count: 45, 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();
}); });
}); });

View file

@ -0,0 +1,353 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<OpenMapModalBtn /> filters out non-active cities from list of locations 1`] = `
<div
class="modal fade"
role="dialog"
style="display: block;"
tabindex="-1"
>
<div
class="modal-dialog map-modal__modal"
role="document"
>
<div
class="modal-content map-modal__modal-content"
>
<div
class="map-modal__modal-body modal-body"
>
<h3
class="map-modal__modal-title"
>
Foo
<button
aria-label="Close"
class="btn-close float-end"
type="button"
/>
</h3>
<div
class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
style="position: relative;"
tabindex="0"
>
<div
class="leaflet-pane leaflet-map-pane"
style="left: 0px; top: 0px;"
>
<div
class="leaflet-pane leaflet-tile-pane"
>
<div
class="leaflet-layer "
style="z-index: 1;"
>
<div
class="leaflet-tile-container leaflet-zoom-animated"
style="z-index: 18; left: 0px; top: 0px;"
>
<img
alt=""
class="leaflet-tile"
role="presentation"
src="https://a.tile.openstreetmap.org/0/0/0.png"
style="width: 256px; height: 256px; left: -161px; top: -62px;"
/>
</div>
</div>
</div>
<div
class="leaflet-pane leaflet-overlay-pane"
/>
<div
class="leaflet-pane leaflet-shadow-pane"
>
<img
alt=""
class="leaflet-marker-shadow leaflet-zoom-hide"
src="marker-shadow.png"
style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; left: -29px; top: 62px;"
/>
<img
alt=""
class="leaflet-marker-shadow leaflet-zoom-hide"
src="marker-shadow.png"
style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; left: 30px; top: -62px;"
/>
</div>
<div
class="leaflet-pane leaflet-marker-pane"
>
<img
alt="Marker"
class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
role="button"
src="marker-icon.png"
style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; left: -29px; top: 62px; z-index: 62;"
tabindex="0"
/>
<img
alt="Marker"
class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
role="button"
src="marker-icon.png"
style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; left: 30px; top: -62px; z-index: -62;"
tabindex="0"
/>
</div>
<div
class="leaflet-pane leaflet-tooltip-pane"
/>
<div
class="leaflet-pane leaflet-popup-pane"
/>
</div>
<div
class="leaflet-control-container"
>
<div
class="leaflet-top leaflet-left"
>
<div
class="leaflet-control-zoom leaflet-bar leaflet-control"
>
<a
aria-disabled="false"
aria-label="Zoom in"
class="leaflet-control-zoom-in"
href="#"
role="button"
title="Zoom in"
>
<span
aria-hidden="true"
>
+
</span>
</a>
<a
aria-disabled="true"
aria-label="Zoom out"
class="leaflet-control-zoom-out leaflet-disabled"
href="#"
role="button"
title="Zoom out"
>
<span
aria-hidden="true"
>
</span>
</a>
</div>
</div>
<div
class="leaflet-top leaflet-right"
/>
<div
class="leaflet-bottom leaflet-left"
/>
<div
class="leaflet-bottom leaflet-right"
>
<div
class="leaflet-control-attribution leaflet-control"
>
<a
href="https://leafletjs.com"
title="A JavaScript library for interactive maps"
>
Leaflet
</a>
<span
aria-hidden="true"
>
|
</span>
©
<a
href="http://osm.org/copyright"
>
OpenStreetMap
</a>
contributors
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`<OpenMapModalBtn /> filters out non-active cities from list of locations 2`] = `
<div
class="modal fade"
role="dialog"
style="display: block;"
tabindex="-1"
>
<div
class="modal-dialog map-modal__modal"
role="document"
>
<div
class="modal-content map-modal__modal-content"
>
<div
class="map-modal__modal-body modal-body"
>
<h3
class="map-modal__modal-title"
>
Foo
<button
aria-label="Close"
class="btn-close float-end"
type="button"
/>
</h3>
<div
class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
style="position: relative;"
tabindex="0"
>
<div
class="leaflet-pane leaflet-map-pane"
style="left: 0px; top: 0px;"
>
<div
class="leaflet-pane leaflet-tile-pane"
>
<div
class="leaflet-layer "
style="z-index: 1;"
>
<div
class="leaflet-tile-container leaflet-zoom-animated"
style="z-index: 18; left: 0px; top: 0px;"
>
<img
alt=""
class="leaflet-tile"
role="presentation"
src="https://a.tile.openstreetmap.org/10/762/0.png"
style="width: 256px; height: 256px; left: -80px; top: 0px;"
/>
</div>
</div>
</div>
<div
class="leaflet-pane leaflet-overlay-pane"
/>
<div
class="leaflet-pane leaflet-shadow-pane"
>
<img
alt=""
class="leaflet-marker-shadow leaflet-zoom-hide"
src="marker-shadow.png"
style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; left: 0px; top: 0px;"
/>
</div>
<div
class="leaflet-pane leaflet-marker-pane"
>
<img
alt="Marker"
class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
role="button"
src="marker-icon.png"
style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; left: 0px; top: 0px; z-index: 0;"
tabindex="0"
/>
</div>
<div
class="leaflet-pane leaflet-tooltip-pane"
/>
<div
class="leaflet-pane leaflet-popup-pane"
/>
</div>
<div
class="leaflet-control-container"
>
<div
class="leaflet-top leaflet-left"
>
<div
class="leaflet-control-zoom leaflet-bar leaflet-control"
>
<a
aria-disabled="false"
aria-label="Zoom in"
class="leaflet-control-zoom-in"
href="#"
role="button"
title="Zoom in"
>
<span
aria-hidden="true"
>
+
</span>
</a>
<a
aria-disabled="false"
aria-label="Zoom out"
class="leaflet-control-zoom-out"
href="#"
role="button"
title="Zoom out"
>
<span
aria-hidden="true"
>
</span>
</a>
</div>
</div>
<div
class="leaflet-top leaflet-right"
/>
<div
class="leaflet-bottom leaflet-left"
/>
<div
class="leaflet-bottom leaflet-right"
>
<div
class="leaflet-control-attribution leaflet-control"
>
<a
href="https://leafletjs.com"
title="A JavaScript library for interactive maps"
>
Leaflet
</a>
<span
aria-hidden="true"
>
|
</span>
©
<a
href="http://osm.org/copyright"
>
OpenStreetMap
</a>
contributors
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;