✅ [#4798] Modals are now located inside storybook root

open-formulieren · Nov 18, 2024 · 720701a · 720701a
1 parent 82a6f28
commit 720701a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 17 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, fireEvent, fn, screen, userEvent, waitFor, within} from '@storybook/test';
+import {expect, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test';
 import selectEvent from 'react-select-event';
 
 import {
@@ -271,7 +271,7 @@ export const Empty = {
       await userEvent.click(button);
       // Close the confirmation modal
       await userEvent.click(
-        within(await screen.findByRole('dialog')).getByRole('button', {
+        within(await canvas.findByRole('dialog')).getByRole('button', {
           name: 'Accepteren',
         })
       );

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, screen, userEvent, waitFor, within} from '@storybook/test';
+import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
 import {Form, Formik} from 'formik';
 import selectEvent from 'react-select-event';
 
@@ -82,7 +82,7 @@ export const SwitchToV2Empty = {
     await waitFor(async () => {
       // Close the confirmation modal
       await userEvent.click(
-        within(await screen.findByRole('dialog')).getByRole('button', {
+        within(await canvas.findByRole('dialog')).getByRole('button', {
           name: 'Accepteren',
         })
       );
@@ -110,7 +110,7 @@ export const SwitchToV2Empty = {
     await waitFor(async () => {
       // Close the confirmation modal
       await userEvent.click(
-        within(await screen.findByRole('dialog')).getByRole('button', {
+        within(await canvas.findByRole('dialog')).getByRole('button', {
           name: 'Accepteren',
         })
       );
@@ -145,7 +145,7 @@ export const SwitchToV2Existing = {
     await waitFor(async () => {
       // Close the confirmation modal
       await userEvent.click(
-        within(await screen.findByRole('dialog')).getByRole('button', {
+        within(await canvas.findByRole('dialog')).getByRole('button', {
           name: 'Accepteren',
         })
       );
@@ -172,7 +172,7 @@ export const SwitchToV2Existing = {
     await waitFor(async () => {
       // Close the confirmation modal
       await userEvent.click(
-        within(await screen.findByRole('dialog')).getByRole('button', {
+        within(await canvas.findByRole('dialog')).getByRole('button', {
           name: 'Accepteren',
         })
       );
@@ -208,7 +208,7 @@ export const SwitchToV2NonExisting = {
     await waitFor(async () => {
       // Close the confirmation modal
       await userEvent.click(
-        within(await screen.findByRole('dialog')).getByRole('button', {
+        within(await canvas.findByRole('dialog')).getByRole('button', {
           name: 'Accepteren',
         })
       );
@@ -233,7 +233,7 @@ export const SwitchToV2NonExisting = {
     await waitFor(async () => {
       // Close the confirmation modal
       await userEvent.click(
-        within(await screen.findByRole('dialog')).getByRole('button', {
+        within(await canvas.findByRole('dialog')).getByRole('button', {
           name: 'Accepteren',
         })
       );
@@ -269,7 +269,7 @@ export const APIFetchError = {
     await waitFor(async () => {
       // Close the confirmation modal
       await userEvent.click(
-        within(await screen.findByRole('dialog')).getByRole('button', {
+        within(await canvas.findByRole('dialog')).getByRole('button', {
           name: 'Accepteren',
         })
       );

diff --git a/src/openforms/js/components/admin/form_design/useConfirm.stories.js b/src/openforms/js/components/admin/form_design/useConfirm.stories.js
@@ -1,4 +1,4 @@
-import {expect, screen, userEvent, within} from '@storybook/test';
+import {expect, userEvent, within} from '@storybook/test';
 import {useState} from 'react';
 
 import ActionButton from 'components/admin/forms/ActionButton';
@@ -44,14 +44,16 @@ export const Default = {
     await userEvent.click(canvas.getByRole('button', {name: 'Open confirmation modal'}));
 
     // The confirmation modal is opened, and shows the title and message
-    const confirmationModal = screen.getByRole('dialog');
+    const confirmationModal = canvas.getByRole('dialog');
     expect(confirmationModal).toBeVisible();
     expect(within(confirmationModal).getByText('The confirmation title')).toBeVisible();
     expect(within(confirmationModal).getByText('A sample confirmation message')).toBeVisible();
 
     await step('Closing the modal returns false', async () => {
       // Close the modal using the close button
-      const closeBtn = await screen.findByRole('button', {name: 'Sluiten'});
+      const closeBtn = await within(canvas.getByRole('dialog')).findByRole('button', {
+        name: 'Sluiten',
+      });
       await userEvent.click(closeBtn);
 
       expect(await canvas.findByText('Confirmation result: false')).toBeVisible();
@@ -62,7 +64,9 @@ export const Default = {
       await userEvent.click(canvas.getByRole('button', {name: 'Open confirmation modal'}));
 
       // Close the modal using the confirm button
-      const confirmBtn = await screen.findByRole('button', {name: 'Accepteren'});
+      const confirmBtn = await within(canvas.getByRole('dialog')).findByRole('button', {
+        name: 'Accepteren',
+      });
       await userEvent.click(confirmBtn);
 
       expect(await canvas.findByText('Confirmation result: true')).toBeVisible();
@@ -73,7 +77,9 @@ export const Default = {
       await userEvent.click(canvas.getByRole('button', {name: 'Open confirmation modal'}));
 
       // Close the modal using the cancel button
-      const cancelBtn = await screen.findByRole('button', {name: 'Annuleren'});
+      const cancelBtn = await within(canvas.getByRole('dialog')).findByRole('button', {
+        name: 'Annuleren',
+      });
       await userEvent.click(cancelBtn);
 
       expect(await canvas.findByText('Confirmation result: false')).toBeVisible();

diff --git a/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js b/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js
@@ -600,11 +600,11 @@ export const ConfigurePrefillObjectsAPI = {
       // open modal for configuration
       const editIcon = canvas.getByTitle('Prefill instellen');
       await userEvent.click(editIcon);
-      expect(await screen.findByRole('dialog')).toBeVisible();
+      expect(await canvas.findByRole('dialog')).toBeVisible();
     });
 
     await step('Configure Objects API prefill', async () => {
-      const modal = within(await screen.findByRole('dialog'));
+      const modal = within(await canvas.findByRole('dialog'));
       const pluginDropdown = await screen.findByLabelText('Plugin');
       expect(pluginDropdown).toBeVisible();
       await userEvent.selectOptions(pluginDropdown, 'Objects API');