From 388c9b699d42e580c12f290c6fdf36c6658b8b32 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sun, 7 Jan 2024 21:02:39 +0100
Subject: [PATCH] Remove Snapshot Tests

---
 package.json                                  |   1 +
 src/components/Attachments.test.tsx           |  21 -
 src/components/Message.test.tsx               |  20 +-
 .../__snapshots__/Attachments.test.tsx.snap   | 323 -----------
 .../__snapshots__/Message.test.tsx.snap       | 513 ------------------
 yarn.lock                                     | 153 +++++-
 6 files changed, 150 insertions(+), 881 deletions(-)
 delete mode 100644 src/components/Attachments.test.tsx
 delete mode 100644 src/components/__snapshots__/Attachments.test.tsx.snap
 delete mode 100644 src/components/__snapshots__/Message.test.tsx.snap

diff --git a/package.json b/package.json
index 96a9e97..bd31eac 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
     "@types/node": "^20.10.7",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
diff --git a/src/components/Attachments.test.tsx b/src/components/Attachments.test.tsx
deleted file mode 100644
index 2bfa7c1..0000000
--- a/src/components/Attachments.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { render } from '@testing-library/react'
-import Attachments from './Attachments'
-
-describe('Attachment', function () {
-  test('renders single image correctly', function () {
-    const attachments = [{ contentType: 'image/jpeg', url: 'https://example.com/image.jpg' }]
-    const { asFragment } = render(<Attachments attachments={attachments} />)
-
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders multiple images as slider', function () {
-    const attachments = [
-      { contentType: 'image/jpeg', url: 'https://example.com/image.jpg' },
-      { contentType: 'image/jpeg', url: 'https://example.com/image.jpg' },
-    ]
-    const { asFragment } = render(<Attachments attachments={attachments} />)
-
-    expect(asFragment()).toMatchSnapshot()
-  })
-})
diff --git a/src/components/Message.test.tsx b/src/components/Message.test.tsx
index 6868291..46cadcb 100644
--- a/src/components/Message.test.tsx
+++ b/src/components/Message.test.tsx
@@ -11,25 +11,7 @@ describe('Message', function () {
       attachments: [],
       geoInformation: '{"type":"FeatureCollection","features":[]}',
     }
-    const { asFragment } = render(<Message message={message} />)
-
-    expect(asFragment()).toMatchSnapshot()
-
+    render(<Message message={message} />)
     expect(screen.getByText('a few seconds ago')).toBeInTheDocument()
   })
-
-  test('renders with map correctly', function () {
-    const message = {
-      id: '1',
-      text: 'message',
-      ticker: 1,
-      createdAt: new Date(),
-      attachments: [],
-      geoInformation:
-        '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[13.466282,52.5024]},"properties":null}]}',
-    }
-    const { asFragment } = render(<Message message={message} />)
-
-    expect(asFragment()).toMatchSnapshot()
-  })
 })
diff --git a/src/components/__snapshots__/Attachments.test.tsx.snap b/src/components/__snapshots__/Attachments.test.tsx.snap
deleted file mode 100644
index 3c1b56f..0000000
--- a/src/components/__snapshots__/Attachments.test.tsx.snap
+++ /dev/null
@@ -1,323 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Attachment > renders multiple images as slider 1`] = `
-<DocumentFragment>
-  <div
-    class="carousel sc-bczRLJ ehiAyy"
-  >
-    <div
-      aria-label="slider"
-      aria-live="polite"
-      class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-      role="listbox"
-      tabindex="0"
-    >
-      <div
-        class="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-      >
-        <div
-          class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal"
-          style="width: 200%; transform: translateX(0%) translateX(0px); flex-direction: row;"
-        >
-          <div
-            aria-label="slide"
-            aria-selected="true"
-            class="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--visible"
-            role="option"
-            style="width: 50%; padding-bottom: 37.5%;"
-            tabindex="0"
-          >
-            <div
-              class="slideInner___2mfX9 carousel__inner-slide"
-            >
-              <div
-                alt=""
-                class="image___xtQGH carousel__image carousel__image--loading"
-                orientation="horizontal"
-                src="https://example.com/image.jpg"
-              />
-            </div>
-          </div>
-          <div
-            aria-label="slide"
-            aria-selected="false"
-            class="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-            role="option"
-            style="width: 50%; padding-bottom: 37.5%;"
-            tabindex="-1"
-          >
-            <div
-              class="slideInner___2mfX9 carousel__inner-slide"
-            >
-              <div
-                alt=""
-                class="image___xtQGH carousel__image carousel__image--loading"
-                orientation="horizontal"
-                src="https://example.com/image.jpg"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="sc-gsnTZi UmfOC"
-    >
-      <div
-        class="ui mini buttons"
-      >
-        <button
-          aria-label="slide dot"
-          class="dot___3c3SI carousel__dot carousel__dot--0 carousel__dot--selected ui icon button"
-          disabled=""
-          role="button"
-        >
-          <i
-            aria-hidden="true"
-            class="circle icon"
-          />
-        </button>
-        <button
-          aria-label="slide dot"
-          class="dot___3c3SI carousel__dot carousel__dot--1 ui icon button"
-          role="button"
-        >
-          <i
-            aria-hidden="true"
-            class="circle icon"
-          />
-        </button>
-      </div>
-    </div>
-    <button
-      aria-label="previous"
-      class="buttonBack___1mlaL carousel__back-button ui grey large icon left floated button"
-      disabled=""
-      role="button"
-      style="position: absolute; bottom: 50%; transform: translateY(50%); left: 5px;"
-    >
-      <i
-        aria-hidden="true"
-        class="arrow circle left icon"
-      />
-    </button>
-    <button
-      aria-label="next"
-      class="buttonNext___2mOCa carousel__next-button ui grey large icon right floated button"
-      role="button"
-      style="position: absolute; bottom: 50%; transform: translateY(50%); right: 5px;"
-    >
-      <i
-        aria-hidden="true"
-        class="arrow circle right icon"
-      />
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Attachment > renders single image correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="carousel sc-bczRLJ ehiAyy"
-  >
-    <div
-      aria-label="slider"
-      aria-live="polite"
-      class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-      role="listbox"
-      tabindex="0"
-    >
-      <div
-        class="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-      >
-        <div
-          class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal"
-          style="width: 100%; transform: translateX(0%) translateX(0px); flex-direction: row;"
-        >
-          <div
-            aria-label="slide"
-            aria-selected="true"
-            class="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--visible"
-            role="option"
-            style="width: 100%; padding-bottom: 75%;"
-            tabindex="0"
-          >
-            <div
-              class="slideInner___2mfX9 carousel__inner-slide"
-            >
-              <div
-                alt=""
-                class="image___xtQGH carousel__image carousel__image--loading"
-                orientation="horizontal"
-                src="https://example.com/image.jpg"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Attachment renders multiple images as slider 1`] = `
-<DocumentFragment>
-  <div
-    class="carousel sc-bczRLJ ehiAyy"
-  >
-    <div
-      aria-label="slider"
-      aria-live="polite"
-      class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-      role="listbox"
-      tabindex="0"
-    >
-      <div
-        class="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-      >
-        <div
-          class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal"
-          style="width: 200%; transform: translateX(0%) translateX(0px); flex-direction: row;"
-        >
-          <div
-            aria-label="slide"
-            aria-selected="true"
-            class="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--visible"
-            role="option"
-            style="width: 50%; padding-bottom: 37.5%;"
-            tabindex="0"
-          >
-            <div
-              class="slideInner___2mfX9 carousel__inner-slide"
-            >
-              <div
-                alt=""
-                class="image___xtQGH carousel__image carousel__image--loading"
-                orientation="horizontal"
-                src="https://example.com/image.jpg"
-              />
-            </div>
-          </div>
-          <div
-            aria-label="slide"
-            aria-selected="false"
-            class="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-            role="option"
-            style="width: 50%; padding-bottom: 37.5%;"
-            tabindex="-1"
-          >
-            <div
-              class="slideInner___2mfX9 carousel__inner-slide"
-            >
-              <div
-                alt=""
-                class="image___xtQGH carousel__image carousel__image--loading"
-                orientation="horizontal"
-                src="https://example.com/image.jpg"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="sc-gsnTZi UmfOC"
-    >
-      <div
-        class="ui mini buttons"
-      >
-        <button
-          aria-label="slide dot"
-          class="dot___3c3SI carousel__dot carousel__dot--0 carousel__dot--selected ui icon button"
-          disabled=""
-          role="button"
-        >
-          <i
-            aria-hidden="true"
-            class="circle icon"
-          />
-        </button>
-        <button
-          aria-label="slide dot"
-          class="dot___3c3SI carousel__dot carousel__dot--1 ui icon button"
-          role="button"
-        >
-          <i
-            aria-hidden="true"
-            class="circle icon"
-          />
-        </button>
-      </div>
-    </div>
-    <button
-      aria-label="previous"
-      class="buttonBack___1mlaL carousel__back-button ui grey large icon left floated button"
-      disabled=""
-      role="button"
-      style="position: absolute; bottom: 50%; transform: translateY(50%); left: 5px;"
-    >
-      <i
-        aria-hidden="true"
-        class="arrow circle left icon"
-      />
-    </button>
-    <button
-      aria-label="next"
-      class="buttonNext___2mOCa carousel__next-button ui grey large icon right floated button"
-      role="button"
-      style="position: absolute; bottom: 50%; transform: translateY(50%); right: 5px;"
-    >
-      <i
-        aria-hidden="true"
-        class="arrow circle right icon"
-      />
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Attachment renders single image correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="carousel sc-bczRLJ ehiAyy"
-  >
-    <div
-      aria-label="slider"
-      aria-live="polite"
-      class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-      role="listbox"
-      tabindex="0"
-    >
-      <div
-        class="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-      >
-        <div
-          class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal"
-          style="width: 100%; transform: translateX(0%) translateX(0px); flex-direction: row;"
-        >
-          <div
-            aria-label="slide"
-            aria-selected="true"
-            class="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--visible"
-            role="option"
-            style="width: 100%; padding-bottom: 75%;"
-            tabindex="0"
-          >
-            <div
-              class="slideInner___2mfX9 carousel__inner-slide"
-            >
-              <div
-                alt=""
-                class="image___xtQGH carousel__image carousel__image--loading"
-                orientation="horizontal"
-                src="https://example.com/image.jpg"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/components/__snapshots__/Message.test.tsx.snap b/src/components/__snapshots__/Message.test.tsx.snap
deleted file mode 100644
index ea04489..0000000
--- a/src/components/__snapshots__/Message.test.tsx.snap
+++ /dev/null
@@ -1,513 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Message > renders correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="ui fluid card"
-  >
-    <div
-      class="content"
-    >
-      <div>
-        message
-      </div>
-    </div>
-    <div
-      class="content sc-jSMfEi bNJnoD"
-    >
-      <div
-        class="carousel sc-bczRLJ ehiAyy"
-      >
-        <div
-          aria-label="slider"
-          aria-live="polite"
-          class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-          role="listbox"
-          tabindex="0"
-        >
-          <div
-            class="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-          >
-            <div
-              class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal"
-              style="width: 0%; transform: translateX(NaN%) translateX(0px); flex-direction: row;"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="extra content"
-    >
-      <div
-        class="ui grid"
-      >
-        <div
-          class="row"
-        >
-          <div
-            class="ten wide column"
-          >
-            <div>
-              <i
-                aria-hidden="true"
-                class="clock icon"
-              />
-              a few seconds ago
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Message > renders with map correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="ui fluid card"
-  >
-    <div
-      class="content"
-    >
-      <div>
-        message
-      </div>
-    </div>
-    <div
-      class="content sc-jSMfEi bNJnoD"
-    >
-      <div
-        class="carousel sc-bczRLJ ehiAyy"
-      >
-        <div
-          aria-label="slider"
-          aria-live="polite"
-          class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-          role="listbox"
-          tabindex="0"
-        >
-          <div
-            class="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-          >
-            <div
-              class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal"
-              style="width: 0%; transform: translateX(NaN%) translateX(0px); flex-direction: row;"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="sc-dkzDqf caXGek 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/13/4402/2687.png"
-                style="width: 256px; height: 256px; left: -111px; top: -68px;"
-              />
-            </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="/node_modules/leaflet/dist/images/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="/node_modules/leaflet/dist/images/marker-icon.png"
-            style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; left: 0px; top: 0px; z-index: 0; 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>
-          </div>
-        </div>
-      </div>
-      <button
-        class="ui icon button sc-eCYdqJ ebewNW"
-      >
-        <i
-          aria-hidden="true"
-          class="expand icon"
-        />
-      </button>
-    </div>
-    <div
-      class="extra content"
-    >
-      <div
-        class="ui grid"
-      >
-        <div
-          class="row"
-        >
-          <div
-            class="ten wide column"
-          >
-            <div>
-              <i
-                aria-hidden="true"
-                class="clock icon"
-              />
-              a few seconds ago
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Message renders correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="ui fluid card"
-  >
-    <div
-      class="content"
-    >
-      <div>
-        message
-      </div>
-    </div>
-    <div
-      class="content sc-jSMfEi bNJnoD"
-    >
-      <div
-        class="carousel sc-bczRLJ ehiAyy"
-      >
-        <div
-          aria-label="slider"
-          aria-live="polite"
-          class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-          role="listbox"
-          tabindex="0"
-        >
-          <div
-            class="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-          >
-            <div
-              class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal"
-              style="width: 0%; transform: translateX(NaN%) translateX(0px); flex-direction: row;"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="extra content"
-    >
-      <div
-        class="ui grid"
-      >
-        <div
-          class="row"
-        >
-          <div
-            class="ten wide column"
-          >
-            <div>
-              <i
-                aria-hidden="true"
-                class="clock icon"
-              />
-              a few seconds ago
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Message renders with map correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="ui fluid card"
-  >
-    <div
-      class="content"
-    >
-      <div>
-        message
-      </div>
-    </div>
-    <div
-      class="content sc-jSMfEi bNJnoD"
-    >
-      <div
-        class="carousel sc-bczRLJ ehiAyy"
-      >
-        <div
-          aria-label="slider"
-          aria-live="polite"
-          class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-          role="listbox"
-          tabindex="0"
-        >
-          <div
-            class="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-          >
-            <div
-              class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal"
-              style="width: 0%; transform: translateX(NaN%) translateX(0px); flex-direction: row;"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="sc-dkzDqf caXGek 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/13/4402/2687.png"
-                style="width: 256px; height: 256px; left: -111px; top: -68px;"
-              />
-            </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="[object Object]"
-            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="[object Object]"
-            style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; left: 0px; top: 0px; z-index: 0; 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>
-          </div>
-        </div>
-      </div>
-      <button
-        class="ui icon button sc-eCYdqJ ebewNW"
-      >
-        <i
-          aria-hidden="true"
-          class="expand icon"
-        />
-      </button>
-    </div>
-    <div
-      class="extra content"
-    >
-      <div
-        class="ui grid"
-      >
-        <div
-          class="row"
-        >
-          <div
-            class="ten wide column"
-          >
-            <div>
-              <i
-                aria-hidden="true"
-                class="clock icon"
-              />
-              a few seconds ago
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/yarn.lock b/yarn.lock
index f5113c7..1051879 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -37,7 +37,7 @@
     css-tree "^2.3.1"
     is-potential-custom-element-name "^1.0.1"
 
-"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
+"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
   integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
@@ -469,6 +469,13 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
 
+"@jest/expect-utils@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6"
+  integrity sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==
+  dependencies:
+    jest-get-type "^29.6.3"
+
 "@jest/schemas@^29.6.3":
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
@@ -476,6 +483,18 @@
   dependencies:
     "@sinclair/typebox" "^0.27.8"
 
+"@jest/types@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59"
+  integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
@@ -764,11 +783,33 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
-"@types/istanbul-lib-coverage@^2.0.1":
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
   integrity sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
 
+"@types/istanbul-lib-report@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz#53047614ae72e19fc0401d872de3ae2b4ce350bf"
+  integrity sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz#0f03e3d2f670fbdac586e34b433783070cc16f54"
+  integrity sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^29.5.11":
+  version "29.5.11"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.11.tgz#0c13aa0da7d0929f078ab080ae5d4ced80fa2f2c"
+  integrity sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==
+  dependencies:
+    expect "^29.0.0"
+    pretty-format "^29.0.0"
+
 "@types/json-schema@^7.0.12":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -798,7 +839,7 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/node@^20.10.7":
+"@types/node@*", "@types/node@^20.10.7":
   version "20.10.7"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.7.tgz#40fe8faf25418a75de9fe68a8775546732a3a901"
   integrity sha512-fRbIKb8C/Y2lXxB5eVMj4IU7xpdox0Lh8bUPEdtLysaylsml1hOOx1+STloRs/B9nf7C6kPRmmg/V7aQW7usNg==
@@ -843,6 +884,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
   integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
 
+"@types/stack-utils@^2.0.0":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
+  integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
+
 "@types/styled-components@^5.1.24":
   version "5.1.25"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad"
@@ -857,6 +903,18 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/yargs-parser@*":
+  version "21.0.3"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
+  integrity sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==
+
+"@types/yargs@^17.0.8":
+  version "17.0.32"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.32.tgz#030774723a2f7faafebf645f4e5a48371dca6229"
+  integrity sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@typescript-eslint/eslint-plugin@^6.17.0":
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.0.tgz#94b86f3c25b468c714a04bd490017ecec2fd3746"
@@ -1359,6 +1417,11 @@ check-error@^1.0.3:
   dependencies:
     get-func-name "^2.0.2"
 
+ci-info@^3.2.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
+  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
+
 clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
@@ -1999,6 +2062,11 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
 escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@@ -2153,6 +2221,17 @@ exenv@^1.2.2:
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
 
+expect@^29.0.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.7.0.tgz#578874590dcb3214514084c08115d8aee61e11bc"
+  integrity sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==
+  dependencies:
+    "@jest/expect-utils" "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+
 extend@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -2429,6 +2508,11 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
+graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
@@ -2886,6 +2970,58 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
+jest-diff@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"
+  integrity sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.6.3"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-get-type@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
+  integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==
+
+jest-matcher-utils@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
+  integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.7.0"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-message-util@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.7.0.tgz#8bc392e204e95dfe7564abbe72a404e28e51f7f3"
+  integrity sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.6.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-util@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.7.0.tgz#23c2b62bfb22be82b44de98055802ff3710fc0bc"
+  integrity sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
 jkroso-type@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/jkroso-type/-/jkroso-type-1.1.1.tgz#bc4ced6d6c45fe0745282bafc86a9f8c4fc9ce61"
@@ -3668,7 +3804,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.3.1:
+picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -3924,7 +4060,7 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^29.7.0:
+pretty-format@^29.0.0, pretty-format@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
   integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
@@ -4395,6 +4531,13 @@ space-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
   integrity sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==
 
+stack-utils@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
 stackback@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"