@digigov/form 2.0.0-254f7786 → 2.0.0-264e5fff

package/src/FormBuilder/scenarios.test.tsx

@@ -77,6 +77,29 @@ const fillDateInput = async ({ formBuilder, fill }) => {
   await yearInput.fill(value?.year || '');
 };
 
+const fillDateTimeInput = async ({ formBuilder, fill }) => {
+  const { fieldKey, value } = fill;
+
+  const dayInput = await getLocator(formBuilder, 'name', `${fieldKey}-day`);
+  await dayInput.fill(value?.day || '');
+
+  const monthInput = await getLocator(formBuilder, 'name', `${fieldKey}-month`);
+  await monthInput.fill(value?.month || '');
+
+  const yearInput = await getLocator(formBuilder, 'name', `${fieldKey}-year`);
+  await yearInput.fill(value?.year || '');
+
+  const hourInput = await getLocator(formBuilder, 'name', `${fieldKey}-hours`);
+  await hourInput.fill(value?.hours || '');
+
+  const minuteInput = await getLocator(
+    formBuilder,
+    'name',
+    `${fieldKey}-minutes`
+  );
+  await minuteInput.fill(value?.minutes || '');
+};
+
 const fillChoiceMultiple = async ({ formBuilder, fill, field }) => {
   const { fieldKey, value } = fill;
 
@@ -410,8 +433,9 @@ const fillActionPerType = {
   iban: fillSimpleInput,
   postal_code: fillSimpleInput,
   phone_number: fillSimpleInput,
-
+  rate: fillSimpleInput,
   date: fillDateInput,
+  datetime: fillDateTimeInput,
   otp: fillOtpInput,
   image: fillImageInput,
   file: fillFileInput,
@@ -469,7 +493,11 @@ const expectErrorMessages = async (formBuilder, scenarioExpect, expect) => {
           );
         }
       }
-      await expect(labelLocator).toHaveText(expectText);
+      if (expectObj.textAssertion === 'toContainText') {
+        await expect(labelLocator).toContainText(expectText);
+      } else {
+        await expect(labelLocator).toHaveText(expectText);
+      }
     }
   }
 };
@@ -628,6 +656,7 @@ const generateScenarios = (
       fields: scenarioFields,
       fill: scenarioFill,
       expect: scenarioExpect,
+      delay: ['multiplicity', 'fieldArray'].includes(fieldKey) ? 500 : 0,
     });
   }
   return generatedScenarios;
@@ -639,6 +668,8 @@ const el = {
       day: 'Ημέρα',
       month: 'Μήνας',
       year: 'Έτος',
+      hours: 'Ώρα',
+      minutes: 'Λεπτά',
     },
     error: {
       required: 'Το πεδίο είναι υποχρεωτικό.',
@@ -647,10 +678,11 @@ const el = {
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
+      amka: 'Ο ΑΜΚΑ που συμπληρώσατε δεν είναι έγκυρος.',
       file_size:
-        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}} Bytes).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}} Bytes).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
@@ -666,8 +698,87 @@ const el = {
       },
       date: {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
+        invalid_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
+        invalid_day_month:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το ετος.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
+        invalid_day_range: 'Η ήμέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
+      },
+      datetime: {
+        invalid: 'Η ημερομηνία και ώρα πρέπει να είναι έγκυρη.',
+        invalid_month_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, την ώρα και τα λεπτά.',
+        invalid_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος, την ώρα και τα λεπτά.',
+        invalid_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, την ώρα και τα λεπτά.',
+        invalid_day_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, την ώρα και τα λεπτά.',
+        invalid__hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
+        invalid_minutes: 'Η ημερομηνία πρέπει να περιλαμβάνει τα λεπτά.',
+        invalid_hours: 'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα.',
+        invalid_month_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και τα λεπτά.',
+        invalid_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και την ώρα.',
+        invalid_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και τα λεπτά.',
+        invalid_day_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και την ώρα.',
+        invalid_day_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος.',
+        invalid_day_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, το έτος και την ώρα.',
+        invalid_day_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
+        invalid_day_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και τα λεπτά.',
+        invalid_day_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και την ώρα.',
+        invalid_day_month:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και τα λεπτά.',
+        invalid_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και την ώρα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το έτος.',
+        invalid_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και τα λεπτά.',
+        invalid_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και την ώρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_day_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τα λεπτά.',
+        invalid_day_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και την ώρα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
+        invalid_hours_range: 'Η ώρα πρέπει να είναι μεταξύ 0 και 23.',
+        invalid_minutes_range: 'Τα λεπτά πρέπει να είναι μεταξύ 0 και 59.',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
+        invalid_day_month_year_minutes:
+          'Η ημερομηννία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος κ  τα λεπτά.',
+        invalid_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
+        earlier_than:
+          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}.',
+        later_than:
+          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}.',
       },
       otp: {
         invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
@@ -681,6 +792,10 @@ const el = {
         more_than: 'Έχετε υπερβεί το όριο των {{max}} χαρακτήρων.',
         less_than: 'Χρειάζονται τουλάχιστον {{min}} χαρακτήρες.',
       },
+      rate: {
+        rate_percent:
+          'Συμπληρώστε ένα έγκυρο ακέραιο ποσοστό από το {{min}} έως το {{max}}',
+      },
     },
   },
 };
@@ -695,6 +810,33 @@ export const INPUTS_FIELDS = [
       secondary: 'Για παράδειγμα, 05 11 2020',
     },
   },
+  {
+    key: 'date-example-2',
+    type: 'date',
+    required: true,
+    label: {
+      primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  },
+  {
+    key: 'datetime-example',
+    type: 'datetime',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020 13:30',
+    },
+  },
+  {
+    key: 'datetime-example-2',
+    type: 'datetime',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020 13:30',
+    },
+  },
   {
     key: 'otp',
     type: 'otp',
@@ -854,6 +996,34 @@ const inputsScenarios = [
           year: '2020',
         },
       },
+      {
+        fieldKey: 'date-example-2',
+        value: {
+          day: '2',
+          month: '1',
+          year: '2020',
+        },
+      },
+      {
+        fieldKey: 'datetime-example',
+        value: {
+          day: '22',
+          month: '11',
+          year: '2020',
+          hours: '22',
+          minutes: '22',
+        },
+      },
+      {
+        fieldKey: 'datetime-example-2',
+        value: {
+          day: '2',
+          month: '1',
+          year: '2020',
+          hours: '2',
+          minutes: '2',
+        },
+      },
       {
         fieldKey: 'otp',
         value: {
@@ -908,6 +1078,21 @@ const inputsScenarios = [
         fieldKey: 'date-example',
         text: el.form.error.date.invalid,
       },
+      {
+        type: 'success',
+        fieldKey: 'date-example-2',
+        text: el.form.error.date.invalid,
+      },
+      {
+        type: 'success',
+        fieldKey: 'datetime-example',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'datetime-example-2',
+        text: el.form.error.required,
+      },
       {
         type: 'success',
         fieldKey: 'otp',
@@ -964,6 +1149,11 @@ const inputsScenarios = [
         fieldKey: 'date-example',
         text: el.form.error.required,
       },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example',
+        text: el.form.error.required,
+      },
       {
         type: 'error',
         fieldKey: 'otp',
@@ -1020,176 +1210,753 @@ const inputsScenarios = [
         },
       },
       {
-        key: 'otp',
-        type: 'otp',
-        maxLength: 6,
+        key: 'date-example-2',
+        type: 'date',
+        required: true,
         label: {
-          primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
+      },
+      {
+        key: 'date-example-3',
+        type: 'date',
         required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
       },
-    ],
-    fill: [
       {
-        fieldKey: 'date-example',
-        value: {
-          day: 'a2',
-          month: '11',
-          year: '2020',
+        key: 'date-example-4',
+        type: 'date',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
       },
       {
-        fieldKey: 'otp',
-        value: {
-          '0': 'a',
-          '1': '4',
-          '2': '4',
-          '3': '4',
-          '4': '4',
-          '5': '4',
+        key: 'date-example-5',
+        type: 'date',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
       },
-    ],
-    expect: [
       {
-        type: 'error',
-        fieldKey: 'date-example',
-        text: el.form.error.date.invalid,
+        key: 'date-example-6',
+        type: 'date',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
       },
       {
-        type: 'error',
-        fieldKey: 'otp',
-        args: {
-          maxLength: 6,
+        key: 'date-example-7',
+        type: 'date',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
-        text: el.form.error.otp.less_than,
       },
-    ],
-  },
-  {
-    title: 'wrong sizes for ImageInput and FileInput',
-    describe: 'inputs scenario',
-    fields: [
       {
-        key: 'image',
-        type: 'image',
+        key: 'datetime-example-1',
+        type: 'datetime',
         required: true,
         label: {
-          primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+          primary: 'Ποιά είναι η ημερομηνία και ώρα του ραντεβού;',
+          secondary: 'Για παράδειγμα, 05/11/2020 14:30',
         },
-        extra: {
-          limit: {
-            maxSize: 300,
-          },
+      },
+      {
+        key: 'datetime-example-2',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία και ώρα του ραντεβού;',
+          secondary: 'Για παράδειγμα, 05/11/2020 14:30',
         },
       },
       {
-        key: 'file',
-        type: 'file',
+        key: 'datetime-example-3',
+        type: 'datetime',
         required: true,
         label: {
-          primary: 'Ανεβάστε το αρχείο της απόδειξης',
+          primary: 'Ποιά είναι η ημερομηνία και ώρα του ραντεβού;',
+          secondary: 'Για παράδειγμα, 05/11/2020 14:30',
         },
-        extra: {
-          limit: {
-            maxSize: 300,
-          },
+      },
+      {
+        key: 'datetime-example-4',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία και ώρα του ραντεβού;',
+          secondary: 'Για παράδειγμα, 05/11/2020 14:30',
         },
       },
-    ],
-    fill: [
       {
-        fieldKey: 'image',
-        value: {
-          fileName: 'green_image.png',
-          size: 300,
+        key: 'datetime-example-5',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία και ώρα του ραντεβού;',
+          secondary: 'Για παράδειγμα, 05/11/2020 14:30',
         },
       },
+
       {
-        fieldKey: 'file',
-        value: {
-          fileName: 'file.txt',
-          size: 200,
+        key: 'datetime-example-6',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία και ώρα του ραντεβού;',
+          secondary: 'Για παράδειγμα, 05/11/2020 14:30',
         },
       },
-    ],
-    expect: [
       {
-        type: 'error',
-        fieldKey: 'image',
-        args: {
-          maxSizeToMb: 0.0003,
+        key: 'datetime-example-7',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία και ώρα του ραντεβού;',
+          secondary: 'Για παράδειγμα, 05/11/2020 14:30',
         },
-        text: el.form.error.image_size,
       },
       {
-        type: 'error',
-        fieldKey: 'file',
-        args: {
-          maxSizeToMb: 0.0003,
+        key: 'datetime-example-8',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
-        text: el.form.error.file_size,
       },
-    ],
-  },
-  {
-    title: 'wrong dimensions for ImageInput',
-    describe: 'inputs scenario',
-    fields: [
       {
-        key: 'image',
-        type: 'image',
+        key: 'datetime-example-9',
+        type: 'datetime',
         required: true,
         label: {
-          primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
-        extra: {
-          limit: {
-            maxHeight: 400,
-            maxWidth: 400,
-            minHeight: 100,
-            minWidth: 100,
-          },
+      },
+      {
+        key: 'datetime-example-10',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
       },
-    ],
-    fill: [
       {
-        fieldKey: 'image',
-        value: {
-          fileName: 'green_image.png',
-          width: 500,
-          height: 500,
+        key: 'datetime-example-11',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
       },
-    ],
-    expect: [
       {
-        type: 'error',
-        fieldKey: 'image',
-        args: {
-          minWidth: 100,
-          minHeight: 100,
-          maxWidth: 400,
-          maxHeight: 400,
+        key: 'datetime-example-12',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
-        text: el.form.error.image.image_dimension_size,
       },
-    ],
-  },
-];
-
-const INPUTS_INPUT_FIELDS = [
-  {
-    key: 'location',
-    type: 'string',
-    label: {
-      primary: 'Συμπληρώστε τον τόπο κατοικίας σας',
-    },
-    required: true,
-  },
-  {
-    key: 'text',
+      {
+        key: 'datetime-example-13',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-14',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-15',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-16',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-17',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-18',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-19',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-20',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-21',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'datetime-example-22',
+        type: 'datetime',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'otp',
+        type: 'otp',
+        maxLength: 6,
+        label: {
+          primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
+        },
+        required: true,
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'date-example',
+        value: {
+          day: 'a2',
+          month: '11',
+          year: '2020',
+        },
+      },
+      {
+        fieldKey: 'date-example-2',
+        value: {
+          day: '',
+          month: '11',
+          year: '2020',
+        },
+      },
+      {
+        fieldKey: 'date-example-3',
+        value: {
+          day: '11',
+          month: '',
+          year: '2020',
+        },
+      },
+      {
+        fieldKey: 'date-example-4',
+        value: {
+          day: '11',
+          month: '11',
+          year: '',
+        },
+      },
+      {
+        fieldKey: 'date-example-5',
+        value: {
+          day: '',
+          month: '',
+          year: '2020',
+        },
+      },
+      {
+        fieldKey: 'date-example-6',
+        value: {
+          day: '',
+          month: '11',
+          year: '',
+        },
+      },
+      {
+        fieldKey: 'date-example-7',
+        value: {
+          day: '11',
+          month: '',
+          year: '',
+        },
+      },
+      {
+        fieldKey: 'datetime-example-1',
+        value: {
+          day: 'a2',
+          month: '11',
+          year: '2024',
+          hours: '15',
+          minutes: '15',
+        },
+      },
+      {
+        fieldKey: 'datetime-example-2',
+        value: { day: '12', month: '', year: '', hours: '', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-3',
+        value: { day: '', month: '12', year: '', hours: '', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-4',
+        value: { day: '', month: '', year: '2024', hours: '', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-5',
+        value: { day: '', month: '', year: '', hours: '13', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-6',
+        value: { day: '', month: '', year: '', hours: '', minutes: '45' },
+      },
+      {
+        fieldKey: 'datetime-example-7',
+        value: { day: '12', month: '11', year: '', hours: '', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-8',
+        value: { day: '12', month: '', year: '2024', hours: '', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-9',
+        value: { day: '', month: '11', year: '2024', hours: '', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-10',
+        value: { day: '12', month: '11', year: '2024', hours: '', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-11',
+        value: {
+          day: '12',
+          month: '11',
+          year: '2024',
+          hours: '15',
+          minutes: '',
+        },
+      },
+      {
+        fieldKey: 'datetime-example-12',
+        value: {
+          day: '12',
+          month: '11',
+          year: '2024',
+          hours: '',
+          minutes: '15',
+        },
+      },
+      {
+        fieldKey: 'datetime-example-13',
+        value: { day: '12', month: '', year: '', hours: '15', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-14',
+        value: { day: '12', month: '', year: '', hours: '', minutes: '15' },
+      },
+      {
+        fieldKey: 'datetime-example-15',
+        value: { day: '12', month: '', year: '', hours: '15', minutes: '15' },
+      },
+      {
+        fieldKey: 'datetime-example-16',
+        value: { day: '', month: '12', year: '', hours: '15', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-17',
+        value: { day: '', month: '12', year: '', hours: '', minutes: '15' },
+      },
+      {
+        fieldKey: 'datetime-example-18',
+        value: { day: '', month: '12', year: '', hours: '15', minutes: '15' },
+      },
+      {
+        fieldKey: 'datetime-example-19',
+        value: { day: '', month: '', year: '2024', hours: '15', minutes: '' },
+      },
+      {
+        fieldKey: 'datetime-example-20',
+        value: { day: '', month: '', year: '2024', hours: '', minutes: '15' },
+      },
+      {
+        fieldKey: 'datetime-example-21',
+        value: { day: '', month: '', year: '2024', hours: '15', minutes: '15' },
+      },
+      {
+        fieldKey: 'datetime-example-22',
+        value: { day: '', month: '', year: '', hours: '15', minutes: '15' },
+      },
+      {
+        fieldKey: 'otp',
+        value: {
+          '0': 'a',
+          '1': '4',
+          '2': '4',
+          '3': '4',
+          '4': '4',
+          '5': '4',
+        },
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'date-example',
+        text: el.form.error.date.invalid,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-2',
+        text: el.form.error.date.invalid_day,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-3',
+        text: el.form.error.date.invalid_month,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-4',
+        text: el.form.error.date.invalid_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-5',
+        text: el.form.error.date.invalid_day_month,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-6',
+        text: el.form.error.date.invalid_day_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-7',
+        text: el.form.error.date.invalid_month_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-2',
+        text: el.form.error.date.invalid_day,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-3',
+        text: el.form.error.date.invalid_month,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-4',
+        text: el.form.error.date.invalid_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-5',
+        text: el.form.error.date.invalid_day_month,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-6',
+        text: el.form.error.date.invalid_day_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'date-example-7',
+        text: el.form.error.date.invalid_month_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-1',
+        text: el.form.error.datetime.invalid,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-2',
+        text: el.form.error.datetime.invalid_month_year_hours_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-3',
+        text: el.form.error.datetime.invalid_day_year_hours_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-4',
+        text: el.form.error.datetime.invalid_day_month_hours_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-5',
+        text: el.form.error.datetime.invalid_day_month_year_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-6',
+        text: el.form.error.datetime.invalid_day_month_year_hours,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-7',
+        text: el.form.error.datetime.invalid_year_hours_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-8',
+        text: el.form.error.datetime.invalid_month_hours_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-9',
+        text: el.form.error.datetime.invalid_day_hours_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-10',
+        text: el.form.error.datetime.invalid_hours_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-11',
+        text: el.form.error.datetime.invalid_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-12',
+        text: el.form.error.datetime.invalid_hours,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-13',
+        text: el.form.error.datetime.invalid_month_year_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-14',
+        text: el.form.error.datetime.invalid_month_year_hours,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-15',
+        text: el.form.error.datetime.invalid_month_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-16',
+        text: el.form.error.datetime.invalid_day_year_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-17',
+        text: el.form.error.datetime.invalid_day_year_hours,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-18',
+        text: el.form.error.datetime.invalid_day_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-19',
+        text: el.form.error.datetime.invalid_day_month_minutes,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-20',
+        text: el.form.error.datetime.invalid_day_month_hours,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-21',
+        text: el.form.error.datetime.invalid_day_month,
+      },
+      {
+        type: 'error',
+        fieldKey: 'datetime-example-22',
+        text: el.form.error.datetime.invalid_day_month_year,
+      },
+      {
+        type: 'error',
+        fieldKey: 'otp',
+        args: {
+          maxLength: 6,
+        },
+        text: el.form.error.otp.less_than,
+      },
+    ],
+  },
+  {
+    title: 'wrong sizes for ImageInput and FileInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'image',
+        type: 'image',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+        },
+        extra: {
+          limit: {
+            maxSize: 300,
+          },
+        },
+      },
+      {
+        key: 'file',
+        type: 'file',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε το αρχείο της απόδειξης',
+        },
+        extra: {
+          limit: {
+            maxSize: 300,
+          },
+        },
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          size: 300,
+        },
+      },
+      {
+        fieldKey: 'file',
+        value: {
+          fileName: 'file.txt',
+          size: 200,
+        },
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'image',
+        args: {
+          maxSize: 300,
+        },
+        text: el.form.error.image_size,
+      },
+      {
+        type: 'error',
+        fieldKey: 'file',
+        args: {
+          maxSize: 300,
+        },
+        text: el.form.error.file_size,
+      },
+    ],
+  },
+  {
+    title: 'wrong dimensions for ImageInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'image',
+        type: 'image',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+        },
+        extra: {
+          limit: {
+            maxHeight: 400,
+            maxWidth: 400,
+            minHeight: 100,
+            minWidth: 100,
+          },
+        },
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          width: 500,
+          height: 500,
+        },
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'image',
+        args: {
+          minWidth: 100,
+          minHeight: 100,
+          maxWidth: 400,
+          maxHeight: 400,
+        },
+        text: el.form.error.image.image_dimension_size,
+      },
+    ],
+  },
+];
+
+const INPUTS_INPUT_FIELDS = [
+  {
+    key: 'location',
+    type: 'string',
+    label: {
+      primary: 'Συμπληρώστε τον τόπο κατοικίας σας',
+    },
+    required: true,
+  },
+  {
+    key: 'text',
     type: 'text',
     required: true,
     label: {
@@ -1287,6 +2054,64 @@ const INPUTS_INPUT_FIELDS = [
     extra: { countries: ['GR'] },
     required: true,
   },
+  {
+    key: 'rate',
+    type: 'rate',
+    min: 0,
+    max: 100,
+    label: {
+      primary: 'Συμπληρώστε το ποσοστό παραχώρησης',
+    },
+    required: true,
+  },
+];
+
+const ERROR_GROUPING_FIELDS = [
+  {
+    key: 'address',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Οδός',
+    },
+  },
+  {
+    key: 'address_number',
+    type: 'int',
+    required: true,
+    layout: { xl: 2, lg: 2, md: 2, xs: 6 },
+    label: {
+      primary: 'Αριθμός',
+    },
+  },
+  {
+    key: 'postal_code',
+    type: 'postal_code',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 4, xs: 6 },
+    label: {
+      primary: 'Ταχ. Κώδικας',
+    },
+  },
+  {
+    key: 'town',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Πόλη',
+    },
+  },
+  {
+    key: 'country',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Χώρα',
+    },
+  },
 ];
 
 const inputsInputScenarios = [
@@ -1343,6 +2168,10 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         value: '1e805d00-ea67-478a-ab8b-d13ff8b38fa3',
       },
+      {
+        fieldKey: 'rate',
+        value: '90',
+      },
     ],
     expect: [
       {
@@ -1405,12 +2234,18 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.required,
       },
+      {
+        type: 'success',
+        fieldKey: 'rate',
+        text: el.form.error.required,
+      },
     ],
   },
   {
     title: 'empty fill for inputs Input',
     describe: 'inputs Input scenario',
-    fields: INPUTS_INPUT_FIELDS,
+    delay: 5_000,
+    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
     fill: [],
     expect: [
       {
@@ -1468,12 +2303,47 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.required,
       },
+      {
+        type: 'error',
+        fieldKey: 'address',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'address_number',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal_code',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'town',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'country',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'rate',
+        text: el.form.error.required,
+      },
     ],
   },
   {
     title: 'incorrect types for inputs Input',
     describe: 'inputs Input scenario',
-    fields: INPUTS_INPUT_FIELDS,
+    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
     fill: [
       {
         fieldKey: 'age',
@@ -1481,11 +2351,11 @@ const inputsInputScenarios = [
       },
       {
         fieldKey: 'email',
-        value: '23232',
+        value: 'example@mail.',
       },
       {
         fieldKey: 'location',
-        value: '23232',
+        value: '',
       },
       {
         fieldKey: 'postal-code',
@@ -1519,6 +2389,18 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         value: 'aaaaaa',
       },
+      {
+        fieldKey: 'address_number',
+        value: 'aa',
+      },
+      {
+        fieldKey: 'postal_code',
+        value: 'aaaaa',
+      },
+      {
+        fieldKey: 'rate',
+        value: '120',
+      },
     ],
     expect: [
       {
@@ -1532,9 +2414,9 @@ const inputsInputScenarios = [
         text: el.form.error.email,
       },
       {
-        type: 'success',
+        type: 'error',
         fieldKey: 'location',
-        text: el.form.error.string,
+        text: el.form.error.required,
       },
       {
         type: 'error',
@@ -1576,6 +2458,24 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.uuid4,
       },
+      {
+        type: 'error',
+        fieldKey: 'address_number',
+        text: el.form.error.number,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal_code',
+        text: el.form.error.postalCode,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'rate',
+        text: el.form.error.rate.rate_percent,
+        args: { min: 0, max: 100 },
+      },
     ],
   },
 ];
@@ -1726,6 +2626,7 @@ const fieldArrayScenarioTitles = [
 const fieldArrayFieldsTemplate = {
   key: 'fieldArray',
   type: 'array',
+  editable: true,
   label: {
     primary: 'Εξαρτώμενα μέλη',
     secondary:
@@ -1744,6 +2645,7 @@ const fieldArrayFieldsTemplate = {
         no: 'Όχι',
       },
     },
+    border: 'border',
     of: {
       type: 'object',
       label: {
@@ -1842,16 +2744,25 @@ const scenarios = [
   ...inputsInputScenarios,
 ];
 
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
 for (const scenario of scenarios) {
   test.describe(scenario.describe, () => {
     test(scenario.title, async ({ mount, page }) => {
       const formBuilder = await mount(
         // @ts-ignore
-        <FormBuilder auto={true} fields={scenario.fields} onSubmit={() => {}} />
+        <FormBuilder
+          auto={true}
+          grid={true}
+          fields={scenario.fields}
+          onSubmit={() => {}}
+        />
       );
       await fillFields(page, formBuilder, scenario);
       await submitForm(formBuilder);
-
+      if (scenario.delay) {
+        await delay(scenario.delay);
+      }
       const screenshot = await page.screenshot({
         fullPage: true,
         animations: 'disabled',