Add tests

apps/public/src/app/(map)/layout.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react'
+
+import Layout from './layout'
+
+describe('Layout', () => {
+  it('should render', () => {
+    const { container } = render(<Layout>Test</Layout>)
+
+    const outerWrapper = container.querySelector('html')
+    const body = container.querySelector('body')
+    const main = container.querySelector('main')
+
+    expect(outerWrapper).toHaveAttribute('lang', 'nl')
+    expect(body).toBeInTheDocument()
+    expect(main).toBeInTheDocument()
+  })
+})

apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+
+import { BaseLayer } from './BaseLayer'
+
+describe('BaseLayer', () => {
+  it('renders the component', () => {
+    const { container } = render(<BaseLayer />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+})
+
+// TODO: add tests

apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx

@@ -31,7 +31,8 @@ export const BaseLayer = () => {
       zoomControl: false,
       maxZoom: 18,
       minZoom: 11,
-      // Prevent the user browsing too far outside Amsterdam otherwise the map will render blank greyspace. Amsterdam tile layer only supports Amsterdam and the immediate surrounding areas
+      // Prevent the user browsing too far outside Amsterdam otherwise the map will render blank greyspace.
+      // Amsterdam tile layer only supports Amsterdam and the immediate surrounding areas
       maxBounds: [
         [52.25168, 4.64034],
         [52.50536, 5.10737],

apps/public/src/app/(map)/locatie/kies/page.test.tsx

@@ -0,0 +1,15 @@
+import { render, waitFor } from '@testing-library/react'
+
+import Page from './page'
+
+describe('Page', () => {
+  it('should render', async () => {
+    const { container } = render(<Page />)
+
+    const outerWrapper = container.querySelector('div')
+
+    waitFor(() => {
+      expect(outerWrapper).toBeInTheDocument()
+    })
+  })
+})

apps/public/src/app/(map)/locatie/kies/page.tsx

@@ -2,7 +2,7 @@
 
 import dynamic from 'next/dynamic'
 
-const Map = dynamic(() => import('./_components/Map').then((module) => module.Map), {
+const Map = dynamic(() => import('./_components/BaseLayer').then((module) => module.BaseLayer), {
   loading: () => <p>Loading...</p>, // TODO: improve loading state
   ssr: false,
 })