From a481f818667ec85f4e1b6528038416eceef93370 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 29 Nov 2024 09:10:38 +0100
Subject: [PATCH] :white_check_mark: [#4606] Extend SB tests

---
 .../zgw/ZGWOptionsFormFields.stories.js       | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js
index ac47f81e6c..bfb4d6b2df 100644
--- a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js
+++ b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js
@@ -152,21 +152,37 @@ export const SelectCaseTypeAndDocumentType = {
     },
   },
 
-  play: async ({canvasElement}) => {
+  play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
 
-    const catalogueSelect = canvas.getByLabelText('Catalogus');
-    await rsSelect(catalogueSelect, 'Catalogus 1');
+    await step('Select catalogue', async () => {
+      const catalogueSelect = canvas.getByLabelText('Catalogus');
+      await rsSelect(catalogueSelect, 'Catalogus 1');
+    });
+
+    await step('Select case type', async () => {
+      const caseTypeSelect = canvas.getByLabelText('Zaaktype', {
+        selector: '#id_caseTypeIdentification',
+      });
+      await rsSelect(caseTypeSelect, 'Request passport');
+    });
+
+    await step('Select document type', async () => {
+      const documentTypeSelect = canvas.getByLabelText('Documenttype', {
+        selector: '#id_documentTypeDescription',
+      });
+      await rsSelect(documentTypeSelect, 'Attachment');
+    });
 
-    const caseTypeSelect = canvas.getByLabelText('Zaaktype', {
-      selector: '#id_caseTypeIdentification',
+    await step('Select employee role type', async () => {
+      const roleTypeSelect = canvas.getByLabelText('Medewerkerroltype');
+      await rsSelect(roleTypeSelect, 'Baliemedewerker');
     });
-    await rsSelect(caseTypeSelect, 'Request passport');
 
-    const documentTypeSelect = canvas.getByLabelText('Documenttype', {
-      selector: '#id_documentTypeDescription',
+    await step('Select product', async () => {
+      const productSelect = canvas.getByLabelText('Product');
+      await rsSelect(productSelect, 'Product 1423');
     });
-    await rsSelect(documentTypeSelect, 'Attachment');
   },
 };