Make Pane component compatible with StrictMode (#810)

PaulLeCam · Jan 30, 2021 · 8f2166c · 8f2166c
1 parent b24d87c
commit 8f2166c
Show file tree

Hide file tree

Showing 3 changed files with 944 additions and 4 deletions.
diff --git a/packages/react-leaflet/__tests__/Pane.tsx b/packages/react-leaflet/__tests__/Pane.tsx
@@ -0,0 +1,78 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { MapContainer, Pane, TileLayer } from '../src'
+
+describe('Pane', () => {
+  test('renders', () => {
+    const { container } = render(
+      <MapContainer center={[0, 0]} zoom={10}>
+        <Pane name="foo" style={{ zIndex: 1000 }}>
+          <TileLayer attribution="tiles attribution" url="http://localhost" />
+        </Pane>
+      </MapContainer>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  test('renders in Strict Mode', () => {
+    const { container } = render(
+      <React.StrictMode>
+        <MapContainer center={[0, 0]} zoom={10}>
+          <Pane name="foo" style={{ zIndex: 1001 }}>
+            <TileLayer attribution="tiles attribution" url="http://localhost" />
+          </Pane>
+        </MapContainer>
+      </React.StrictMode>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  test('renders nested panes', () => {
+    const { container } = render(
+      <React.StrictMode>
+        <MapContainer center={[0, 0]} zoom={10}>
+          <Pane name="foo" style={{ zIndex: 1001 }}>
+            <Pane name="bar" style={{ zIndex: 4000 }}>
+              <TileLayer attribution="tiles attribution" url="http://localhost/nested" />
+            </Pane>
+            <TileLayer attribution="tiles attribution" url="http://localhost/not-nested" />
+          </Pane>
+        </MapContainer>
+      </React.StrictMode>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  test('can unmount and remount with the same name', () => {
+    const { rerender, container } = render(
+      <MapContainer center={[0, 0]} zoom={10}>
+        <Pane name="foo" style={{ zIndex: 1001 }}>
+          <Pane name="bar" style={{ zIndex: 4000 }}>
+            <TileLayer attribution="tiles attribution" url="http://localhost/nested" />
+          </Pane>
+          <TileLayer attribution="tiles attribution" url="http://localhost/not-nested" />
+        </Pane>
+      </MapContainer>,
+    )
+    expect(container).toMatchSnapshot()
+
+    rerender(
+      <MapContainer center={[0, 0]} zoom={10}>
+      </MapContainer>,
+    )
+    expect(container).toMatchSnapshot()
+
+    rerender(
+      <MapContainer center={[0, 0]} zoom={10}>
+        <Pane name="bar" style={{ zIndex: 1001 }}>
+          <Pane name="foo" style={{ zIndex: 4000 }}>
+            <TileLayer attribution="tiles attribution" url="http://localhost/new-foo-nested" />
+          </Pane>
+          <TileLayer attribution="tiles attribution" url="http://localhost/new-bar-not-nested" />
+        </Pane>
+      </MapContainer>
+    )
+    expect(container).toMatchSnapshot()
+  })
+})