✅ [open-formulieren/open-forms#2177] Expanding and fixing storybook s…

…tories for map component

src/components/Map/Map.stories.jsx

@@ -1,4 +1,4 @@
-import {expect, fn, userEvent, within} from '@storybook/test';
+import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
 import {useState} from 'react';
 
 import {ConfigDecorator} from 'story-utils/decorators';
@@ -53,17 +53,35 @@ export default {
 export const Map = {};
 
 export const MapWithAddressSearch = {
-  play: async ({canvasElement}) => {
+  args: {
+    onGeoJsonFeatureSet: fn(),
+  },
+  play: async ({canvasElement, args}) => {
     const canvas = within(canvasElement);
-    const button = await canvas.findByLabelText('Zoeken');
-    await userEvent.click(button);
+
+    await waitFor(async () => {
+      const button = await canvas.findByLabelText('Zoeken');
+      await userEvent.click(button);
+      expect(await canvas.findByPlaceholderText('Zoek adres')).toBeVisible();
+    });
 
     const searchField = await canvas.findByPlaceholderText('Zoek adres');
     const searchBox = within(searchField.parentNode);
     await userEvent.type(searchField, 'Gemeente Utrecht');
     const searchResult = await searchBox.findByText('Utrecht, Utrecht, Utrecht');
 
     await userEvent.click(searchResult);
+    await waitFor(async () => {
+      // A marker is placed on the search result
+      expect(args.onGeoJsonFeatureSet).toBeCalledWith({
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'Point',
+          coordinates: [5.074754, 52.091138],
+        },
+      });
+    });
   },
 };
 
@@ -84,13 +102,11 @@ export const MapWithAerialPhotoBackground = {
 
 export const MapWithInteractions = {
   args: {
-    geoJsonFeature: undefined,
     interactions: {
       polygon: true,
       polyline: true,
       marker: true,
     },
-    defaultCenter: [52.1326332, 5.291266],
     onGeoJsonFeatureSet: fn(),
   },
   parameters: {
@@ -120,7 +136,7 @@ export const MapWithInteractions = {
         properties: {},
         geometry: {
           type: 'Point',
-          coordinates: [5.287384, 52.134262],
+          coordinates: [5.287385, 52.134126],
         },
       });
     });