✅ [#4606] Extend SB tests

Author: sergei-maertens

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');
   },
 };