🎨 [#445] Ensure map interaction tests are not flaky

* Added a test id for testing-library to the map container so that the
  interaction tests only start running when the container is visible
* Added robustness for interaction elements that may exist in the DOM
  but not be visible yet because map tiles are still loading

waitFor has longer default timeouts than canvas.findBy* queries, and
while the latter can be specified, the element is find before it's
visible and there are still race conditions. For this reason, the
visibility check is decoupled from the lookup expectation.

src/components/Map/LeafletMap.jsx

@@ -112,6 +112,7 @@ const LeaftletMap = ({
           duration: 3000,
         }}
       >
+        <EnsureTestId />
         <TileLayer {...TILE_LAYER_RD} url={tileLayerUrl} />
         <FeatureGroup ref={featureGroupRef}>
           {!disabled && (
@@ -172,6 +173,17 @@ LeaftletMap.propTypes = {
   tileLayerUrl: PropTypes.string,
 };
 
+const EnsureTestId = () => {
+  const map = useMap();
+  const container = map.getContainer();
+  useEffect(() => {
+    if (!container.dataset.testid) {
+      container.dataset.testid = 'leaflet-map';
+    }
+  }, [container]);
+  return null;
+};
+
 const Geometry = ({geoJsonGeometry, featureGroupRef}) => {
   useEffect(() => {
     if (!featureGroupRef.current) {

src/components/Map/Map.stories.jsx

@@ -109,12 +109,22 @@ export const MapWithInteractions = {
   },
   play: async ({canvasElement, step, args}) => {
     const canvas = within(canvasElement);
-    const map = canvasElement.querySelector('.leaflet-pane.leaflet-map-pane');
+    const map = await canvas.findByTestId('leaflet-map');
+
+    await waitFor(() => {
+      expect(map).not.toBeNull();
+      expect(map).toBeVisible();
+    });
 
     await step('All interactions are available', async () => {
-      expect(await canvas.findByTitle('Pin/punt')).toBeVisible();
-      expect(await canvas.findByTitle('Veelhoek (polygoon)')).toBeVisible();
-      expect(await canvas.findByTitle('Lijn')).toBeVisible();
+      const pin = await canvas.findByTitle('Pin/punt');
+      await waitFor(() => expect(pin).toBeVisible());
+
+      const polygon = await canvas.findByTitle('Veelhoek (polygoon)');
+      await waitFor(() => expect(polygon).toBeVisible());
+
+      const line = await canvas.findByTitle('Lijn');
+      await waitFor(() => expect(line).toBeVisible());
     });
 
     await step('Draw a marker', async () => {