mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 17:57:26 +03:00
Migrated MapModal test to react testing library
This commit is contained in:
Alejandro Celaya
parent
ec7c7d521f
commit
b75fd2e03a
2 changed files with 188 additions and 38 deletions
|
|
@ -1,14 +1,9 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { Marker, Popup } from 'react-leaflet';
|
||||
import { Modal } from 'reactstrap';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { MapModal } from '../../../src/visits/helpers/MapModal';
|
||||
import { CityStats } from '../../../src/visits/types';
|
||||
|
||||
describe('<MapModal />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const toggle = () => '';
|
||||
const isOpen = true;
|
||||
const title = 'Foobar';
|
||||
const toggle = jest.fn();
|
||||
const zaragozaLat = 41.6563497;
|
||||
const zaragozaLong = -0.876566;
|
||||
const newYorkLat = 40.730610;
|
||||
|
|
@ -26,36 +21,8 @@ describe('<MapModal />', () => {
|
|||
},
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<MapModal toggle={toggle} isOpen={isOpen} title={title} locations={locations} />);
|
||||
});
|
||||
|
||||
afterEach(() => wrapper.unmount());
|
||||
|
||||
it('renders modal with provided props', () => {
|
||||
const modal = wrapper.find(Modal);
|
||||
const header = wrapper.find('.map-modal__modal-title');
|
||||
|
||||
expect(modal.prop('toggle')).toEqual(toggle);
|
||||
expect(modal.prop('isOpen')).toEqual(isOpen);
|
||||
expect(header.find('.btn-close').prop('onClick')).toEqual(toggle);
|
||||
expect(header.text()).toContain(title);
|
||||
});
|
||||
|
||||
it('renders open street map tile', () => {
|
||||
expect(wrapper.find('OpenStreetMapTile')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders proper amount of markers', () => {
|
||||
const markers = wrapper.find(Marker);
|
||||
|
||||
expect(markers).toHaveLength(locations.length);
|
||||
locations.forEach(({ latLong, count, cityName }, index) => {
|
||||
const marker = markers.at(index);
|
||||
const popup = marker.find(Popup);
|
||||
|
||||
expect(marker.prop('position')).toEqual(latLong);
|
||||
expect(popup.text()).toEqual(`${count} visits from ${cityName}`);
|
||||
});
|
||||
it('renders expected map', () => {
|
||||
render(<MapModal toggle={toggle} isOpen title="Foobar" locations={locations} />);
|
||||
expect(screen.getByRole('dialog')).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
183
test/visits/helpers/__snapshots__/MapModal.test.tsx.snap
Normal file
183
test/visits/helpers/__snapshots__/MapModal.test.tsx.snap
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<MapModal /> renders expected map 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"
|
||||
>
|
||||
Foobar
|
||||
<button
|
||||
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: -101px; top: -96px;"
|
||||
/>
|
||||
</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: 26px; top: -1px;"
|
||||
/>
|
||||
<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: -26px; 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: 26px; top: -1px; z-index: -1;"
|
||||
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: -26px; 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="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>
|
||||
`;
|
||||
Loading…
Reference in a new issue