✅ [open-formulieren/open-forms#2177] Expanding storybook story for ma…

…p address search

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],
+        },
+      });
+    });
   },
 };