✅ [#4798] Added confirm modal handling to storybook tests

open-formulieren · Nov 8, 2024 · e5909be · e5909be
1 parent 4aaa7cc
commit e5909be
Showing 1 changed file with 29 additions and 5 deletions.
diff --git a/...ponents/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js b/...ponents/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js
@@ -1,4 +1,4 @@
-import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
+import {expect, fn, screen, userEvent, waitFor, within} from '@storybook/test';
 import {Form, Formik} from 'formik';
 import selectEvent from 'react-select-event';
 
@@ -74,12 +74,18 @@ export const Default = {};
 
 export const SwitchToV2Empty = {
   play: async ({canvasElement}) => {
-    window.confirm = fn(() => true);
     const canvas = within(canvasElement);
 
     const v2Tab = canvas.getByRole('tab', {name: 'Variabelekoppelingen'});
     await userEvent.click(v2Tab);
 
+    await waitFor(async () => {
+      // Close the confirmation modal
+      const confirmModal = await screen.findByRole('dialog');
+      const confirmButton = within(confirmModal).getByRole('button', {name: 'Accepteren'});
+      await userEvent.click(confirmButton);
+    });
+
     const groupSelect = canvas.getByLabelText('API-groep');
     await selectEvent.select(groupSelect, 'Objects API group 1');
 
@@ -113,12 +119,18 @@ export const SwitchToV2Existing = {
     },
   },
   play: async ({canvasElement}) => {
-    window.confirm = fn(() => true);
     const canvas = within(canvasElement);
 
     const v2Tab = canvas.getByRole('tab', {name: 'Variabelekoppelingen'});
     await userEvent.click(v2Tab);
 
+    await waitFor(async () => {
+      // Close the confirmation modal
+      const confirmModal = await screen.findByRole('dialog');
+      const confirmButton = within(confirmModal).getByRole('button', {name: 'Accepteren'});
+      await userEvent.click(confirmButton);
+    });
+
     const testForm = await canvas.findByTestId('test-form');
 
     await waitFor(() => {
@@ -152,12 +164,18 @@ export const SwitchToV2NonExisting = {
     },
   },
   play: async ({canvasElement}) => {
-    window.confirm = fn(() => true);
     const canvas = within(canvasElement);
 
     const v2Tab = canvas.getByRole('tab', {name: 'Variabelekoppelingen'});
     await userEvent.click(v2Tab);
 
+    await waitFor(async () => {
+      // Close the confirmation modal
+      const confirmModal = await screen.findByRole('dialog');
+      const confirmButton = within(confirmModal).getByRole('button', {name: 'Accepteren'});
+      await userEvent.click(confirmButton);
+    });
+
     const testForm = await canvas.findByTestId('test-form');
     await waitFor(() => {
       expect(testForm).toHaveFormValues({
@@ -189,12 +207,18 @@ export const APIFetchError = {
     },
   },
   play: async ({canvasElement, step}) => {
-    window.confirm = fn(() => true);
     const canvas = within(canvasElement);
 
     const v2Tab = canvas.getByRole('tab', {name: 'Variabelekoppelingen'});
     await userEvent.click(v2Tab);
 
+    await waitFor(async () => {
+      // Close the confirmation modal
+      const confirmModal = await screen.findByRole('dialog');
+      const confirmButton = within(confirmModal).getByRole('button', {name: 'Accepteren'});
+      await userEvent.click(confirmButton);
+    });
+
     await step('Retrieving object types', async () => {
       const groupSelect = canvas.getByLabelText('API-groep');
       await selectEvent.select(groupSelect, 'Objects API group 1');