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 { render, screen } from '@testing-library/react';
|
||||||
import { Marker, Popup } from 'react-leaflet';
|
|
||||||
import { Modal } from 'reactstrap';
|
|
||||||
import { MapModal } from '../../../src/visits/helpers/MapModal';
|
import { MapModal } from '../../../src/visits/helpers/MapModal';
|
||||||
import { CityStats } from '../../../src/visits/types';
|
import { CityStats } from '../../../src/visits/types';
|
||||||
|
|
||||||
describe('<MapModal />', () => {
|
describe('<MapModal />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
const toggle = jest.fn();
|
||||||
const toggle = () => '';
|
|
||||||
const isOpen = true;
|
|
||||||
const title = 'Foobar';
|
|
||||||
const zaragozaLat = 41.6563497;
|
const zaragozaLat = 41.6563497;
|
||||||
const zaragozaLong = -0.876566;
|
const zaragozaLong = -0.876566;
|
||||||
const newYorkLat = 40.730610;
|
const newYorkLat = 40.730610;
|
||||||
|
|
@ -26,36 +21,8 @@ describe('<MapModal />', () => {
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
beforeEach(() => {
|
it('renders expected map', () => {
|
||||||
wrapper = shallow(<MapModal toggle={toggle} isOpen={isOpen} title={title} locations={locations} />);
|
render(<MapModal toggle={toggle} isOpen title="Foobar" locations={locations} />);
|
||||||
});
|
expect(screen.getByRole('dialog')).toMatchSnapshot();
|
||||||
|
|
||||||
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}`);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
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