Skip to content

Commit

Permalink
Update test for MapLayerTypeToggleButton
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtrucs
dtrucs committed Oct 2, 2024
1 parent da91278 commit 39a3896
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 132 deletions.
2 changes: 1 addition & 1 deletion frontend/src/components/Map/components/CustomControl/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useMap } from 'react-leaflet';
import L, { ControlPosition } from 'leaflet';
import ReactDOM from 'react-dom';

interface CustomControlProps {
export interface CustomControlProps {
children: React.ReactNode;
position?: ControlPosition;
name?: string;
Expand Down
10 changes: 9 additions & 1 deletion frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { MapContainer } from 'react-leaflet';
import { render } from 'services/testing/reactTestingLibraryWrapper';
import { CustomControlProps } from 'components/Map/components/CustomControl';
import { MapLayerTypeToggleButton } from './MapLayerTypeToggleButton';

jest.mock('components/Map/config', () => ({
Expand All @@ -9,6 +9,14 @@ jest.mock('components/Map/config', () => ({
}),
}));

jest.mock(
'components/Map/components/CustomControl',
() =>
function CustomControl(props: CustomControlProps) {
return <div className="leaflet-control-container" {...props} />;
},
);

describe('MapLayerTypeToggleButton', () => {
it('renders correctly', () => {
const mapLayerTypeToggleButton = render(
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { SquaredButtonWithImage } from 'components/SquaredButtonWithImage/SquaredButtonWithImage';
import { ControlPosition } from 'leaflet';
import { useState } from 'react';
import { ControlPosition } from 'leaflet';
import Control from 'components/Map/components/CustomControl';
import { SquaredButtonWithImage } from 'components/SquaredButtonWithImage/SquaredButtonWithImage';

export type TileLayerType = 'classic' | 'satellite';

Expand Down
174 changes: 46 additions & 128 deletions .../components/MapLayerTypeToggleButton/__snapshots__/MapLayerTypeToggleButton.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,158 +6,76 @@ Object {
"baseElement": <body>
<div>
<div
class="leaflet-container leaflet-grab leaflet-touch-drag"
style="position: relative;"
tabindex="0"
data-testid="MapContainer"
>
<div
class="leaflet-pane leaflet-map-pane"
style="left: 0px; top: 0px;"
>
<div
class="leaflet-pane leaflet-tile-pane"
/>
<div
class="leaflet-pane leaflet-shadow-pane"
/>
<div
class="leaflet-pane leaflet-overlay-pane"
/>
<div
class="leaflet-pane leaflet-marker-pane"
/>
<div
class="leaflet-pane leaflet-tooltip-pane"
/>
<div
class="leaflet-pane leaflet-popup-pane"
/>
</div>
<div
class="leaflet-control-container"
position="bottomleft"
>
<div
class="leaflet-top leaflet-left"
/>
<div
class="leaflet-top leaflet-right"
/>
<div
class="leaflet-bottom leaflet-left"
<button
class="leaflet-toggleLayer"
type="button"
>
<div
class="leaflet-control-custom leaflet-control"
class="size-12 relative overflow-hidden shadow-md rounded-medium border-2 border-solid border-white"
>
<button
class="leaflet-toggleLayer"
type="button"
<img
alt=""
class="object-cover size-full rounded-medium"
data-nimg="1"
decoding="async"
height="44"
loading="lazy"
src="/_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=96&q=75"
srcset="/_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=48&q=75 1x, /_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=96&q=75 2x"
style="color: transparent;"
width="44"
/>
<span
class="font-bold text-white text-CTA text-center w-full absolute bottom-1 left-0 right-0 z-text"
>
<div
class="size-12 relative overflow-hidden shadow-md rounded-medium border-2 border-solid border-white"
>
<img
alt=""
class="object-cover size-full rounded-medium"
data-nimg="1"
decoding="async"
height="44"
loading="lazy"
src="/_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=96&q=75"
srcset="/_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=48&q=75 1x, /_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=96&q=75 2x"
style="color: transparent;"
width="44"
/>
<span
class="font-bold text-white text-CTA text-center w-full absolute bottom-1 left-0 right-0 z-text"
>
Satellite
</span>
</div>
</button>
Satellite
</span>
</div>
</div>
<div
class="leaflet-bottom leaflet-right"
/>
</button>
</div>
</div>
</div>
</body>,
"container": <div>
<div
class="leaflet-container leaflet-grab leaflet-touch-drag"
style="position: relative;"
tabindex="0"
data-testid="MapContainer"
>
<div
class="leaflet-pane leaflet-map-pane"
style="left: 0px; top: 0px;"
>
<div
class="leaflet-pane leaflet-tile-pane"
/>
<div
class="leaflet-pane leaflet-shadow-pane"
/>
<div
class="leaflet-pane leaflet-overlay-pane"
/>
<div
class="leaflet-pane leaflet-marker-pane"
/>
<div
class="leaflet-pane leaflet-tooltip-pane"
/>
<div
class="leaflet-pane leaflet-popup-pane"
/>
</div>
<div
class="leaflet-control-container"
position="bottomleft"
>
<div
class="leaflet-top leaflet-left"
/>
<div
class="leaflet-top leaflet-right"
/>
<div
class="leaflet-bottom leaflet-left"
<button
class="leaflet-toggleLayer"
type="button"
>
<div
class="leaflet-control-custom leaflet-control"
class="size-12 relative overflow-hidden shadow-md rounded-medium border-2 border-solid border-white"
>
<button
class="leaflet-toggleLayer"
type="button"
<img
alt=""
class="object-cover size-full rounded-medium"
data-nimg="1"
decoding="async"
height="44"
loading="lazy"
src="/_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=96&q=75"
srcset="/_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=48&q=75 1x, /_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=96&q=75 2x"
style="color: transparent;"
width="44"
/>
<span
class="font-bold text-white text-CTA text-center w-full absolute bottom-1 left-0 right-0 z-text"
>
<div
class="size-12 relative overflow-hidden shadow-md rounded-medium border-2 border-solid border-white"
>
<img
alt=""
class="object-cover size-full rounded-medium"
data-nimg="1"
decoding="async"
height="44"
loading="lazy"
src="/_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=96&q=75"
srcset="/_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=48&q=75 1x, /_next/image?url=%2Fimages%2Fsatellite-toggle-button-image.png&w=96&q=75 2x"
style="color: transparent;"
width="44"
/>
<span
class="font-bold text-white text-CTA text-center w-full absolute bottom-1 left-0 right-0 z-text"
>
Satellite
</span>
</div>
</button>
Satellite
</span>
</div>
</div>
<div
class="leaflet-bottom leaflet-right"
/>
</button>
</div>
</div>
</div>,
Expand Down

0 comments on commit 39a3896

Please sign in to comment.