👌 #19 - PR feecback.

- Move fixture to story. - Remove selector option in test.
open-formulieren · May 11, 2023 · f6b4280 · f6b4280
1 parent c78f36a
commit f6b4280
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 88 deletions.
diff --git a/src/fixtures/formio/formio-conditional.ts b/src/fixtures/formio/formio-conditional.ts
diff --git a/src/fixtures/formio/index.ts b/src/fixtures/formio/index.ts
@@ -1,5 +1,4 @@
 export * from './formio-columns';
-export * from './formio-conditional';
 export * from './formio-example';
 export * from './formio-length';
 export * from './formio-pattern';

diff --git a/src/lib/renderer/renderer.stories.tsx b/src/lib/renderer/renderer.stories.tsx
@@ -166,7 +166,89 @@ renderFormWithConditionalLogic.args = {
   configuration: DEFAULT_RENDER_CONFIGURATION,
   form: {
     display: 'form',
-    components: FORMIO_CONDITIONAL,
+    components: [
+      // Reference field.
+      {
+        id: 'favoriteAnimal',
+        type: 'textfield',
+        label: 'Favorite animal',
+        key: 'favoriteAnimal',
+      },
+
+      // Case: hide unless "cat"
+      {
+        conditional: {
+          eq: 'cat',
+          show: true,
+          when: 'favoriteAnimal',
+        },
+        id: 'motivationCat',
+        hidden: true,
+        type: 'textfield',
+        key: 'motivation',
+        label: 'Motivation',
+        placeholder: 'I like cats because...',
+        description: 'Please motivate why "cat" is your favorite animal...',
+      },
+
+      // Case hide unless "dog"
+      {
+        conditional: {
+          eq: 'dog',
+          show: true,
+          when: 'favoriteAnimal',
+        },
+        id: 'motivationDog',
+        hidden: true,
+        type: 'textfield',
+        key: 'motivation',
+        label: 'Motivation',
+        placeholder: 'I like dogs because...',
+        description: 'Please motivate why "dog" is your favorite animal...',
+      },
+
+      // Case hide unless "" (empty string)
+      {
+        conditional: {
+          eq: '',
+          show: true,
+          when: 'favoriteAnimal',
+        },
+        id: 'content1',
+        hidden: true,
+        type: 'content',
+        key: 'content',
+        html: 'Please enter you favorite animal.',
+      },
+
+      // Case show unless "cat"
+      {
+        conditional: {
+          eq: 'cat',
+          show: false,
+          when: 'favoriteAnimal',
+        },
+        id: 'content2',
+        hidden: false,
+        type: 'content',
+        key: 'content',
+        html: 'Have you tried "cat"?',
+      },
+
+      // Case show unless "dog"
+      {
+        conditional: {
+          eq: 'dog',
+          show: false,
+          when: 'favoriteAnimal',
+        },
+        id: 'content3',
+        hidden: false,
+        type: 'content',
+        key: 'content',
+        html: 'Have you tried "dog"?',
+      },
+    ],
   },
   initialValues: {
     favoriteAnimal: '',
@@ -177,9 +259,7 @@ renderFormWithConditionalLogic.args = {
 };
 renderFormWithConditionalLogic.play = async ({canvasElement}) => {
   const canvas = within(canvasElement);
-  const input = canvas.getByLabelText('Favorite animal', {
-    selector: 'input',
-  });
+  const input = canvas.getByLabelText('Favorite animal');
   expect(
     await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
   ).toBeNull();