diff --git a/src/components/Map/Map.stories.jsx b/src/components/Map/Map.stories.jsx index d4aa1cd51..93afb42e5 100644 --- a/src/components/Map/Map.stories.jsx +++ b/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,10 +53,17 @@ 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); @@ -64,6 +71,17 @@ export const MapWithAddressSearch = { 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], }, }); });