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

open-formulieren · Nov 12, 2024 · 6004e0d · 6004e0d
1 parent e19b84a
commit 6004e0d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 10 deletions.
diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.stories.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.stories.js
@@ -1,4 +1,4 @@
-import {expect, findByRole, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test';
+import {expect, fireEvent, fn, screen, userEvent, waitFor, within} from '@storybook/test';
 import selectEvent from 'react-select-event';
 
 import {
@@ -189,8 +189,6 @@ export const Empty = {
   },
   play: async ({canvasElement, step, args}) => {
     const canvas = within(canvasElement);
-    const originalConfirm = window.confirm;
-    window.confirm = () => true;
 
     const pluginDropdown = canvas.getByLabelText('Plugin');
     const decisionDefDropdown = canvas.getByLabelText('Beslisdefinitie-ID');
@@ -271,6 +269,12 @@ export const Empty = {
       const button = canvas.getByTitle('Verwijderen');
 
       await userEvent.click(button);
+      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 varsDropdowns = within(
         document.querySelector('.logic-dmn__mapping-config')
@@ -282,8 +286,6 @@ export const Empty = {
       await expect(varsDropdowns.length).toBe(0);
       await expect(textInput.length).toBe(0);
     });
-
-    window.confirm = originalConfirm;
   },
 };
 

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,21 @@ 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);
+
+      // Expect v2Tab to be the selected tab
+      expect(v2Tab).toHaveAttribute('aria-selected', 'true');
+    });
+
     const groupSelect = canvas.getByLabelText('API-groep');
     await selectEvent.select(groupSelect, 'Objects API group 1');
 
@@ -113,12 +122,21 @@ 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);
+
+      // Expect v2Tab to be the selected tab
+      expect(v2Tab).toHaveAttribute('aria-selected', 'true');
+    });
+
     const testForm = await canvas.findByTestId('test-form');
 
     await waitFor(() => {
@@ -152,12 +170,21 @@ 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);
+
+      // Expect v2Tab to be the selected tab
+      expect(v2Tab).toHaveAttribute('aria-selected', 'true');
+    });
+
     const testForm = await canvas.findByTestId('test-form');
     await waitFor(() => {
       expect(testForm).toHaveFormValues({
@@ -189,12 +216,21 @@ 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);
+
+      // Expect v2Tab to be the selected tab
+      expect(v2Tab).toHaveAttribute('aria-selected', 'true');
+    });
+
     await step('Retrieving object types', async () => {
       const groupSelect = canvas.getByLabelText('API-groep');
       await selectEvent.select(groupSelect, 'Objects API group 1');