Update tests to use vi instead of jest

This commit is contained in:
Alejandro Celaya
2023-05-27 11:57:26 +02:00
parent e2cbb2713a
commit 07fcb4e016
117 changed files with 3699 additions and 325 deletions

View File

@@ -3,7 +3,7 @@ import { MapModal } from '../../../src/visits/helpers/MapModal';
import type { CityStats } from '../../../src/visits/types';
describe('<MapModal />', () => {
const toggle = jest.fn();
const toggle = vi.fn();
const zaragozaLat = 41.6563497;
const zaragozaLong = -0.876566;
const newYorkLat = 40.730610;

View File

@@ -4,7 +4,7 @@ import type { OrphanVisitType, VisitsFilter } from '../../../src/visits/types';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<VisitsFilterDropdown />', () => {
const onChange = jest.fn();
const onChange = vi.fn();
const setUp = (selected: VisitsFilter = {}, isOrphanVisits = true) => renderWithEvents(
<VisitsFilterDropdown
isOrphanVisits={isOrphanVisits}
@@ -13,7 +13,7 @@ describe('<VisitsFilterDropdown />', () => {
/>,
);
beforeEach(jest.clearAllMocks);
beforeEach(vi.clearAllMocks);
it('has expected text', () => {
setUp();

View File

@@ -1,4 +1,186 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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
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"
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="https://osm.org/copyright"
>
OpenStreetMap
</a>
contributors
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`<MapModal /> renders expected map 1`] = `
<div

View File

@@ -1,4 +1,354 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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"
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="https://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"
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="https://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 1`] = `
<div