@digigov/form 2.0.0-0edebf87 → 2.0.0-13876dba

package/src/FormBuilder/scenarios.test.tsx

@@ -0,0 +1,1978 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import Jimp from 'jimp';
+import FormBuilder from '@digigov/form/FormBuilder';
+
+const getLocator = async (
+  formBuilder,
+  locatorLabel,
+  label,
+  isVisible = true
+) => {
+  const locator = await formBuilder.locator(`[${locatorLabel}=${label}]`);
+  if (isVisible) {
+    await locator.waitFor({ state: 'visible' });
+  }
+  return locator;
+};
+
+const locatorExists = async (formBuilder, locatorLabel, label) => {
+  const locatorIsVisible = await formBuilder
+    .locator(`[${locatorLabel}=${label}]`)
+    .isVisible();
+  return locatorIsVisible;
+};
+
+const simulateAutoCompleteFill = async (
+  formBuilder,
+  fieldKey,
+  value,
+  field
+) => {
+  const autoCompleteLocator = await getLocator(formBuilder, 'name', fieldKey);
+  await autoCompleteLocator.click();
+  const ariaOwnsValue = await autoCompleteLocator.getAttribute('aria-owns');
+  const autoCompleteMenu = await getLocator(formBuilder, 'id', ariaOwnsValue);
+  if (Array.isArray(value) && field?.extra?.multiple) {
+    for (const valueItem of value) {
+      const autoCompleteMenuItem = await getLocator(
+        autoCompleteMenu,
+        'value',
+        valueItem
+      );
+      await autoCompleteMenuItem.click();
+    }
+    const autoCompleteArrowButton = await getLocator(
+      formBuilder,
+      'id',
+      `${fieldKey}-id__button-arrow`
+    );
+    await autoCompleteArrowButton.click();
+  } else {
+    const autoCompleteMenuItem = await getLocator(
+      autoCompleteMenu,
+      'value',
+      value
+    );
+    await autoCompleteMenuItem.click();
+  }
+};
+
+const fillSimpleInput = async ({ formBuilder, fill }) => {
+  const { fieldKey, value } = fill;
+  const input = await getLocator(formBuilder, 'name', fieldKey);
+  await input.fill(value);
+};
+
+const fillDateInput = 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 fillChoiceMultiple = async ({ formBuilder, fill, field }) => {
+  const { fieldKey, value } = fill;
+
+  if (field?.extra?.component?.includes('Select')) {
+    const selectLocator = await getLocator(formBuilder, 'name', fieldKey);
+    await selectLocator.selectOption(value);
+  } else if (field?.extra?.component?.includes('AutoComplete')) {
+    await simulateAutoCompleteFill(formBuilder, fieldKey, value, field);
+  } else {
+    for (const valueItem of value) {
+      const checkboxLocator = await getLocator(
+        formBuilder,
+        'name',
+        `${fieldKey}\\.${valueItem}`
+      );
+      await checkboxLocator.check(true);
+    }
+  }
+};
+
+const fillChoiceSingle = async ({ formBuilder, fill, field }) => {
+  const { fieldKey, value } = fill;
+  if (field?.extra?.component?.includes('Select')) {
+    const selectLocator = await getLocator(formBuilder, 'name', fieldKey);
+    await selectLocator.selectOption(value);
+  } else if (field?.extra?.component?.includes('AutoComplete')) {
+    await simulateAutoCompleteFill(formBuilder, fieldKey, value, field);
+  } else {
+    const radioLocator = await getLocator(
+      formBuilder,
+      'id',
+      `${fieldKey}\\.${value}`
+    );
+    await radioLocator.check();
+  }
+};
+
+const fillOtpInput = async ({ formBuilder, fill }) => {
+  const { fieldKey, value } = fill;
+
+  for (let otpField = 0; otpField < 6; otpField++) {
+    const otpLocator = await getLocator(
+      formBuilder,
+      'name',
+      `${fieldKey}-${otpField}`
+    );
+    await otpLocator.fill(value?.[`${otpField}`] || '');
+  }
+};
+
+const imageTypes = {
+  bmp: 'image/bmp',
+  gif: 'image/gif',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpeg',
+  jpe: 'image/jpeg',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  svgz: 'image/svg+xml',
+  ico: 'image/x-icon',
+  webp: 'image/webp',
+};
+
+const fileTypes = {
+  xhtml: 'application/xhtml+xml',
+  xht: 'application/xhtml+xml',
+  xhtm: 'application/xhtml+xml',
+  html: 'text/html',
+  htm: 'text/html',
+  shtml: 'text/html',
+  shtm: 'text/html',
+  apng: 'image/apng',
+  wasm: 'application/wasm',
+  mp3: 'audio/mpeg',
+  wav: 'audio/x-wav',
+  flac: 'audio/x-flac',
+  m4a: 'audio/mp4',
+  js: 'application/javascript',
+  mjs: 'application/javascript',
+  m4v: 'video/x-m4v',
+  ogv: 'video/ogg',
+  ogm: 'video/ogg',
+  epub: 'application/epub+zip',
+  pdf: 'application/pdf',
+  mpeg: 'video/mpeg',
+  mpg: 'video/mpeg',
+  mpe: 'video/mpeg',
+  m1v: 'video/mpeg',
+  m2v: 'video/mpeg',
+  mpga: 'audio/mpeg',
+  mp2: 'audio/mpeg',
+  mp2a: 'audio/mpeg',
+  m2a: 'audio/mpeg',
+  m3a: 'audio/mpeg',
+  otf: 'font/otf',
+  ttf: 'font/ttf',
+  woff: 'font/woff',
+  woff2: 'font/woff2',
+  atom: 'application/atom+xml',
+  ecma: 'application/ecmascript',
+  es: 'application/ecmascript',
+  geojson: 'application/geo+json',
+  json: 'application/json',
+  map: 'application/json',
+  jsonml: 'application/jsonml+json',
+  jsonld: 'application/ld+json',
+  webmanifest: 'application/manifest+json',
+  ogx: 'application/ogg',
+  rss: 'application/rss+xml',
+  webapp: 'application/x-web-app-manifest+json',
+  xml: 'text/xml',
+  xsl: 'application/xml',
+  xsd: 'application/xml',
+  rng: 'application/xml',
+  mp4a: 'audio/mp4',
+  oga: 'audio/ogg',
+  ogg: 'audio/ogg',
+  spx: 'audio/ogg',
+  weba: 'audio/webm',
+  bmp: 'image/bmp',
+  gif: 'image/gif',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpeg',
+  jpe: 'image/jpeg',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  svgz: 'image/svg+xml',
+  ico: 'image/x-icon',
+  webp: 'image/webp',
+  xbm: 'image/x-xbitmap',
+  appcache: 'text/cache-manifest',
+  manifest: 'text/cache-manifest',
+  coffee: 'text/coffeescript',
+  litcoffee: 'text/coffeescript',
+  css: 'text/css',
+  jade: 'text/jade',
+  jsx: 'text/jsx',
+  less: 'text/less',
+  markdown: 'text/markdown',
+  md: 'text/markdown',
+  mml: 'text/mathml',
+  n3: 'text/n3',
+  txt: 'text/plain',
+  text: 'text/plain',
+  conf: 'text/plain',
+  def: 'text/plain',
+  list: 'text/plain',
+  log: 'text/plain',
+  in: 'text/plain',
+  ini: 'text/plain',
+  dsc: 'text/prs.lines.tag',
+  rtx: 'text/richtext',
+  sgml: 'text/sgml',
+  sgm: 'text/sgml',
+  shex: 'text/shex',
+  slim: 'text/slim',
+  slm: 'text/slim',
+  stylus: 'text/stylus',
+  styl: 'text/stylus',
+  t: 'text/troff',
+  tr: 'text/troff',
+  roff: 'text/troff',
+  man: 'text/troff',
+  me: 'text/troff',
+  ms: 'text/troff',
+  ttl: 'text/turtle',
+  uri: 'text/uri-list',
+  uris: 'text/uri-list',
+  urls: 'text/uri-list',
+  curl: 'text/vnd.curl',
+  dcurl: 'text/vnd.curl.dcurl',
+  mcurl: 'text/vnd.curl.mcurl',
+  scurl: 'text/vnd.curl.scurl',
+  sub: 'text/vnd.dvb.subtitle',
+  fly: 'text/vnd.fly',
+  flx: 'text/vnd.fmi.flexstor',
+  gv: 'text/vnd.graphviz',
+  '3dml': 'text/vnd.in3d.3dml',
+  spot: 'text/vnd.in3d.spot',
+  wml: 'text/vnd.wap.wml',
+  wmls: 'text/vnd.wap.wmlscript',
+  vtt: 'text/vtt',
+  s: 'text/x-asm',
+  asm: 'text/x-asm',
+  c: 'text/x-c',
+  cc: 'text/x-c',
+  cxx: 'text/x-c',
+  cpp: 'text/x-c',
+  h: 'text/x-c',
+  hh: 'text/x-c',
+  dic: 'text/x-c',
+  htc: 'text/x-component',
+  f: 'text/x-fortran',
+  for: 'text/x-fortran',
+  f77: 'text/x-fortran',
+  f90: 'text/x-fortran',
+  hbs: 'text/x-handlebars-template',
+  java: 'text/x-java-source',
+  lua: 'text/x-lua',
+  mkd: 'text/x-markdown',
+  nfo: 'text/x-nfo',
+  opml: 'text/x-opml',
+  org: 'text/x-org',
+  p: 'text/x-pascal',
+  pas: 'text/x-pascal',
+  pde: 'text/x-processing',
+  sass: 'text/x-sass',
+  scss: 'text/x-scss',
+  etx: 'text/x-setext',
+  sfv: 'text/x-sfv',
+  ymp: 'text/x-suse-ymp',
+  uu: 'text/x-uuencode',
+  yaml: 'text/yaml',
+  yml: 'text/yaml',
+  mp4: 'video/mp4',
+  mp4v: 'video/mp4',
+  mpg4: 'video/mp4',
+  webm: 'video/webm',
+};
+
+function calculateDimensions(memorySizeInMB) {
+  const bytesPerPixel = 4;
+  const bytesPerMB = 1024 * 1024;
+  const memorySizeInBytes = memorySizeInMB * bytesPerMB;
+  const totalPixels = memorySizeInBytes / bytesPerPixel;
+  const sideLength = Math.sqrt(totalPixels);
+  const width = Math.floor(sideLength);
+  const height = Math.floor(sideLength);
+  return { width, height };
+}
+
+const fillImageInput = async ({ formBuilder, fill }) => {
+  const { fieldKey, value } = fill;
+
+  const buttonUploadLocator = await getLocator(
+    formBuilder,
+    'name',
+    `${fieldKey}`,
+    false
+  );
+  let width = value?.width;
+  let height = value?.height;
+  if (value?.size) {
+    const sizeObj = calculateDimensions(value?.size);
+    width = sizeObj?.width;
+    height = sizeObj?.height;
+  }
+  const image = new Jimp(width, height, 'green');
+  const imageBuffer = await image.getBufferAsync(Jimp.MIME_PNG);
+  const fileExtension = value?.fileName.split('.').pop();
+  await buttonUploadLocator.setInputFiles({
+    buffer: imageBuffer,
+    mimeType: imageTypes[fileExtension],
+    name: value?.fileName,
+  });
+};
+
+const fillFileInput = async ({ formBuilder, fill }) => {
+  const { fieldKey, value } = fill;
+
+  const fileExtension = value?.fileName.split('.').pop();
+  const buttonUploadLocator = await getLocator(
+    formBuilder,
+    'name',
+    `${fieldKey}`,
+    false
+  );
+  await buttonUploadLocator.setInputFiles({
+    buffer: Buffer.alloc(value?.size * 1024),
+    mimeType: fileTypes[fileExtension],
+    name: value?.fileName,
+  });
+};
+
+const fillObjectInput = async ({ formBuilder, fill, field }) => {
+  for (const extraField of fill.value.of.extra.fields) {
+    const objField = field.extra.of.extra.fields.find(({ key }) => {
+      return key === extraField.fieldKey;
+    });
+    const fillObj = {
+      fieldKey: `${fill.fieldKey}\\.${fill.index}\\.${extraField.fieldKey}`,
+      value: extraField.value,
+    };
+    await fillActionPerType[objField.type]({
+      formBuilder,
+      fill: fillObj,
+      field,
+    });
+  }
+  if (field.multiplicity) {
+    const buttonActionLocator = await getLocator(
+      formBuilder,
+      'name',
+      `${fill.fieldKey}\\.${fill.index}-${fill.value.of.extra.action}-object`
+    );
+    await buttonActionLocator.click();
+  }
+};
+
+const fillArrayInput = async ({ formBuilder, fill, field }) => {
+  const { value } = fill;
+  if (field.multiplicity) {
+    const radioLocator = await getLocator(
+      formBuilder,
+      'id',
+      `radio-input-${field.key}-${value?.question}`
+    );
+    await radioLocator.check(true);
+  } else {
+    const buttonAddLocator = await getLocator(
+      formBuilder,
+      'name',
+      `${field.key}-add-object`
+    );
+    await buttonAddLocator.click();
+  }
+  if (value.of) {
+    await fillActionPerType[value.of.type]({ formBuilder, fill, field });
+  }
+};
+
+const fillActionPerType = {
+  int: fillSimpleInput,
+  string: fillSimpleInput,
+  text: fillSimpleInput,
+  email: fillSimpleInput,
+  uuid4: fillSimpleInput,
+  mobile_phone: fillSimpleInput,
+  number: fillSimpleInput,
+  afm: fillSimpleInput,
+  iban: fillSimpleInput,
+  postal_code: fillSimpleInput,
+  phone_number: fillSimpleInput,
+
+  date: fillDateInput,
+  otp: fillOtpInput,
+  image: fillImageInput,
+  file: fillFileInput,
+  'choice:multiple': fillChoiceMultiple,
+  'choice:single': fillChoiceSingle,
+  array: fillArrayInput,
+  object: fillObjectInput,
+};
+
+const fillFields = async (page, formBuilder, scenario) => {
+  for (const fill of scenario.fill) {
+    const field = scenario.fields.find(({ key }) => {
+      return key === fill.fieldKey;
+    });
+    if (fillActionPerType[field.type]) {
+      await fillActionPerType[field.type]({ formBuilder, fill, field, page });
+    } else {
+      console.log(
+        '\nField type:',
+        field.type,
+        "doesn't exist in fillActionPerType\n"
+      );
+    }
+  }
+};
+
+const submitForm = async (formBuilder) => {
+  await formBuilder.locator(`[type=submit]`).click();
+};
+
+const expectErrorMessages = async (formBuilder, scenarioExpect, expect) => {
+  for (const expectObj of scenarioExpect) {
+    if (expectObj.type === 'success') {
+      const labelLocatorIsVisible = await locatorExists(
+        formBuilder,
+        'id',
+        `${expectObj.fieldKey}-error`
+      );
+      expect(labelLocatorIsVisible).toBeFalsy();
+    } else {
+      let expectText = expectObj.text;
+      const argRegex = /{{([^}]+)}}/g;
+      const argMatches = [...expectObj.text.matchAll(argRegex)];
+      const labelLocator = await getLocator(
+        formBuilder,
+        'id',
+        `${expectObj.fieldKey}-error`
+      );
+      if (argMatches.length > 0) {
+        for (const argMatch of argMatches) {
+          const argKey = argMatch[1];
+          expectText = expectText.replace(
+            new RegExp(`{{\\s*${argKey}\\s*}}`, 'g'),
+            expectObj.args[argKey]
+          );
+        }
+      }
+      if (expectObj.textAssertion === 'toContainText') {
+        await expect(labelLocator).toContainText(expectText);
+      } else {
+        await expect(labelLocator).toHaveText(expectText);
+      }
+    }
+  }
+};
+
+const generateScenarios = (
+  scenarioTitles,
+  fillTemplate,
+  fieldsTemplate,
+  fieldKey,
+  isMultiplicity,
+  locals
+) => {
+  const generatedScenarios: any[] = [];
+  const addRegex = /add\s+(\d+)/;
+  const minRegex = /min=(\d+)/;
+  const maxRegex = /max=(\d+)/;
+  const exactRegex = /exact=(\d+)/;
+  const { min, max, length, required } = locals;
+
+  for (const title of scenarioTitles) {
+    const titleLowerCase = title.toLowerCase();
+    const scenarioFields: any[] = [];
+    const scenarioFill: any[] = [];
+    const scenarioExpect: any[] = [];
+
+    const addMatch = titleLowerCase.match(addRegex);
+    const minMatch = titleLowerCase.match(minRegex);
+    const maxMatch = titleLowerCase.match(maxRegex);
+    const exactMatch = titleLowerCase.match(exactRegex);
+
+    const addNumber = addMatch ? Number(addMatch[1]) : null;
+    const minNumber = minMatch ? Number(minMatch[1]) : null;
+    const maxNumber = maxMatch ? Number(maxMatch[1]) : null;
+    const exactNumber = exactMatch ? Number(exactMatch[1]) : null;
+
+    let addNumberFinal = addNumber;
+
+    if (minNumber !== null) {
+      const expectEntry = {
+        type: 'error',
+        fieldKey: fieldKey,
+        args: { min: minNumber },
+        text: min,
+      };
+      if (addNumber !== null && addNumber >= minNumber) {
+        if (maxNumber === null) {
+          scenarioExpect.push({
+            ...expectEntry,
+            type: 'success',
+          });
+        }
+      } else {
+        scenarioExpect.push(expectEntry);
+        if (isMultiplicity) {
+          scenarioExpect.push({
+            type: 'error',
+            fieldKey: 'needs-more',
+            text: required,
+          });
+        }
+      }
+    }
+
+    if (maxNumber !== null) {
+      const expectEntry = {
+        type: 'error',
+        fieldKey: fieldKey,
+        args: { max: maxNumber },
+        text: max,
+      };
+      if (addNumber !== null && addNumber <= maxNumber) {
+        if (minNumber === null) {
+          scenarioExpect.push({
+            ...expectEntry,
+            type: 'success',
+          });
+        }
+      } else {
+        addNumberFinal = maxNumber;
+        scenarioExpect.push(expectEntry);
+        if (isMultiplicity) {
+          scenarioExpect.push({
+            type: 'error',
+            fieldKey: 'needs-more',
+            args: { max: maxNumber },
+            text: max,
+          });
+        }
+      }
+    }
+
+    if (exactNumber !== null) {
+      const expectEntry = {
+        type: 'error',
+        fieldKey: fieldKey,
+        args: { length: exactNumber },
+        text: length,
+      };
+      if (addNumber !== null && addNumber === exactNumber) {
+        scenarioExpect.push({
+          ...expectEntry,
+          type: 'success',
+        });
+      } else {
+        scenarioExpect.push({
+          ...expectEntry,
+          type: 'error',
+        });
+      }
+    }
+
+    if (addNumberFinal !== null) {
+      for (let i = 0; i < addNumberFinal; i++) {
+        const finalScenarioFill = {
+          index: i,
+          ...fillTemplate,
+        };
+        scenarioFill.push(finalScenarioFill);
+        for (const multiplicityField of fillTemplate?.value?.of?.extra
+          ?.fields ?? []) {
+          scenarioExpect.push({
+            type: 'success',
+            fieldKey: `${fillTemplate.fieldKey}\\.${i}\\.${multiplicityField.fieldKey}`,
+            text: required,
+          });
+        }
+      }
+      if (addNumber !== null && addNumber > addNumberFinal) {
+        scenarioFill.push({
+          fieldKey: fieldKey,
+          value: {
+            question: 'yes',
+          },
+        });
+      }
+      // This will choose 'no' in the radio-choice for last action before submitting the form
+      // scenarioFill.push({
+      //   fieldKey: fieldKey,
+      //   value: {
+      //     question: 'no',
+      //   },
+      // })
+    }
+    scenarioFields.push({
+      ...fieldsTemplate,
+      extra: {
+        ...fieldsTemplate.extra,
+        ...(minNumber !== null ? { min: minNumber } : {}),
+        ...(maxNumber !== null ? { max: maxNumber } : {}),
+        ...(exactNumber !== null ? { length: exactNumber } : {}),
+      },
+    });
+    generatedScenarios.push({
+      title: title,
+      describe: `${fieldKey} scenario`,
+      fields: scenarioFields,
+      fill: scenarioFill,
+      expect: scenarioExpect,
+    });
+  }
+  return generatedScenarios;
+};
+
+const el = {
+  form: {
+    label: {
+      day: 'Ημέρα',
+      month: 'Μήνας',
+      year: 'Έτος',
+    },
+    error: {
+      required: 'Το πεδίο είναι υποχρεωτικό.',
+      number: 'Συμπληρώστε έναν έγκυρο αριθμό',
+      positive_integer_number: 'Συμπληρώστε έναν θετικό ακέραιο αριθμό',
+      string: 'Το πεδίο πρέπει να είναι string',
+      email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
+      afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
+      file_size:
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+      image_size:
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+      mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
+      phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
+      landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
+      uuid4: 'Ο κωδικός επιβεβαίωσης δεν είναι έγκυρος.',
+      iban: 'Συμπληρώστε έναν έγκυρο αριθμό IBAN',
+      postalCode: 'Συμπληρώστε έναν έγκυρο αριθμό ταχυδρομικού κώδικα.',
+      'needs-more':
+        'Για να συνεχίσετε, πατήστε το κουμπί «Προσθήκη». Διαφορετικά, επιλέξε το «Όχι» σαν απάντηση.',
+      array: {
+        min: 'Το πεδίο πρέπει να έχει τουλάχιστον {{min}} εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.',
+        max: 'Έχετε φτάσει το όριο των {{max}} εγγραφών. Αν θέλετε να προσθέσετε μια νέα, διαγράψτε μια από τις παραπάνω εγγραφές. Διαφορετικά, επιλέξτε το «Όχι» σαν απάντηση.',
+        length: 'Το πεδίο πρέπει να έχει ακριβώς {{length}} εγγραφές',
+      },
+      date: {
+        invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
+        earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
+        later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
+      },
+      otp: {
+        invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
+        less_than: 'Έχετε συμπληρώσει λιγότερα από {{maxLength}} ψηφία.',
+      },
+      image: {
+        image_dimension_size:
+          'Οι διαστάσεις που καταχωρίσατε υπερβαίνουν τα αναμενόμενα όρια. Ελάχιστο μέγεθος: ({{minWidth}}x{{minHeight}})px, Μέγιστο μέγεθος: ({{maxWidth}}x{{maxHeight}})px',
+      },
+      text: {
+        more_than: 'Έχετε υπερβεί το όριο των {{max}} χαρακτήρων.',
+        less_than: 'Χρειάζονται τουλάχιστον {{min}} χαρακτήρες.',
+      },
+    },
+  },
+};
+
+export const INPUTS_FIELDS = [
+  {
+    key: 'date-example',
+    type: 'date',
+    required: true,
+    label: {
+      primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  },
+  {
+    key: 'otp',
+    type: 'otp',
+    maxLength: 6,
+    label: {
+      primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
+    },
+    required: true,
+  },
+  {
+    key: 'checkbox',
+    type: 'choice:multiple',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'autocomplete_multiple',
+    required: true,
+    type: 'choice:multiple',
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'AutoComplete',
+      multiple: true,
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'radio',
+    type: 'choice:single',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'select',
+    type: 'choice:single',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'Select',
+      options: [
+        {
+          label: { primary: '' },
+          value: '',
+        },
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'autocomplete_single',
+    required: true,
+    type: 'choice:single',
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'AutoComplete',
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'image',
+    type: 'image',
+    required: true,
+    label: {
+      primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+    },
+  },
+  {
+    key: 'file',
+    type: 'file',
+    label: {
+      primary: 'Ανεβάστε το αρχείο της απόδειξης',
+    },
+    required: true,
+  },
+];
+
+const inputsScenarios = [
+  {
+    title: 'success fill for inputs',
+    describe: 'inputs scenario',
+    fields: INPUTS_FIELDS,
+    fill: [
+      {
+        fieldKey: 'date-example',
+        value: {
+          day: '22',
+          month: '11',
+          year: '2020',
+        },
+      },
+      {
+        fieldKey: 'otp',
+        value: {
+          '0': '4',
+          '1': '4',
+          '2': '4',
+          '3': '4',
+          '4': '4',
+          '5': '4',
+        },
+      },
+      {
+        fieldKey: 'checkbox',
+        value: ['fever', 'fatigue'],
+      },
+      {
+        fieldKey: 'autocomplete_multiple',
+        value: ['fever', 'fatigue'],
+      },
+      {
+        fieldKey: 'radio',
+        value: 'fever',
+      },
+      {
+        fieldKey: 'select',
+        value: 'fatigue',
+      },
+      {
+        fieldKey: 'autocomplete_single',
+        value: 'fatigue',
+      },
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          width: 500,
+          height: 500,
+          size: 3,
+        },
+      },
+      {
+        fieldKey: 'file',
+        value: {
+          fileName: 'file.txt',
+          size: 200,
+        },
+      },
+    ],
+    expect: [
+      {
+        type: 'success',
+        fieldKey: 'date-example',
+        text: el.form.error.date.invalid,
+      },
+      {
+        type: 'success',
+        fieldKey: 'otp',
+        args: {
+          maxLength: 6,
+        },
+        text: el.form.error.otp.less_than,
+      },
+      {
+        type: 'success',
+        fieldKey: 'checkbox',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'autocomplete_multiple',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'radio',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'select',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'autocomplete_single',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'image',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'file',
+        text: el.form.error.required,
+      },
+    ],
+  },
+  {
+    title: 'empty fill for inputs',
+    describe: 'inputs scenario',
+    fields: INPUTS_FIELDS,
+    fill: [],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'date-example',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'otp',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'checkbox',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'autocomplete_multiple',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'radio',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'select',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'autocomplete_single',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'image',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'file',
+        text: el.form.error.required,
+      },
+    ],
+  },
+  {
+    title: 'incorrect types for DateInput and OtpInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'date-example',
+        type: 'date',
+        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: '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: '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: {
+          maxSizeToMb: 0.0003,
+        },
+        text: el.form.error.image_size,
+      },
+      {
+        type: 'error',
+        fieldKey: 'file',
+        args: {
+          maxSizeToMb: 0.0003,
+        },
+        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: {
+      primary: 'Συμπληρώστε το αίτημά σας',
+    },
+  },
+  {
+    key: 'email',
+    type: 'email',
+    label: {
+      primary: 'Διεύθυνση ηλεκτρονικού ταχυδρομείου (email)',
+    },
+    required: true,
+  },
+  {
+    key: 'desired-mount',
+    type: 'number',
+    label: {
+      primary: 'Συμπληρώστε το ποσό που σας ενδιαφέρει',
+    },
+    required: true,
+  },
+  {
+    key: 'age',
+    type: 'int',
+    required: true,
+    label: {
+      primary: 'Ποιά είναι η ηλικία σας;',
+      secondary: 'Καταχωρίστε την ηλικία σας',
+    },
+  },
+  {
+    key: 'afm',
+    type: 'afm',
+    required: true,
+    label: { primary: 'ΑΦΜ' },
+  },
+  {
+    key: 'iban',
+    type: 'iban',
+    label: {
+      primary: 'Συμπληρώστε το αριθμό του τραπεζικού σας λογαριασμού',
+    },
+    required: true,
+  },
+  {
+    key: 'uuid4',
+    type: 'uuid4',
+    label: {
+      primary: 'Συμπληρώστε το uuid4',
+    },
+    required: true,
+  },
+  {
+    key: 'mobile-phone',
+    type: 'mobile_phone',
+    label: {
+      primary: 'Συμπληρώστε το κινητό σας τηλέφωνο',
+    },
+    required: true,
+    extra: {
+      countries: ['gr'],
+      phoneType: 'mobile',
+    },
+  },
+  {
+    key: 'phone-number',
+    type: 'phone_number',
+    label: {
+      primary: 'Συμπληρώστε το τηλέφωνό σας',
+    },
+    required: true,
+    extra: {
+      countries: ['gr'],
+    },
+  },
+  {
+    key: 'phone-number-landline',
+    type: 'phone_number',
+    label: {
+      primary: 'Συμπληρώστε το σταθερό σας τηλέφωνό',
+    },
+    required: true,
+    extra: {
+      countries: ['gr'],
+      phoneType: 'landline',
+    },
+  },
+  {
+    key: 'postal-code',
+    type: 'postal_code',
+    label: {
+      primary: 'Συμπληρώστε τον ταχυδρομικό σας κώδικα',
+    },
+    extra: { countries: ['GR'] },
+    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 = [
+  {
+    title: 'success fill for inputs Input',
+    describe: 'inputs Input scenario',
+    fields: INPUTS_INPUT_FIELDS,
+    fill: [
+      {
+        fieldKey: 'text',
+        value: 'aaaaaaa',
+      },
+      {
+        fieldKey: 'age',
+        value: '12',
+      },
+      {
+        fieldKey: 'email',
+        value: 'example@mail.com',
+      },
+      {
+        fieldKey: 'location',
+        value: 'Location1',
+      },
+      {
+        fieldKey: 'postal-code',
+        value: '42100',
+      },
+      {
+        fieldKey: 'afm',
+        value: '094536469',
+      },
+      {
+        fieldKey: 'desired-mount',
+        value: '12.5',
+      },
+      {
+        fieldKey: 'mobile-phone',
+        value: '+306900000000',
+      },
+      {
+        fieldKey: 'phone-number',
+        value: '6900000000',
+      },
+      {
+        fieldKey: 'phone-number-landline',
+        value: '2100000000',
+      },
+      {
+        fieldKey: 'iban',
+        value: 'GR3201122267115323218375195',
+      },
+      {
+        fieldKey: 'uuid4',
+        value: '1e805d00-ea67-478a-ab8b-d13ff8b38fa3',
+      },
+    ],
+    expect: [
+      {
+        type: 'success',
+        fieldKey: 'age',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'text',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'email',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'location',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'postal-code',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'afm',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'desired-mount',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'phone-number',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'iban',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'uuid4',
+        text: el.form.error.required,
+      },
+    ],
+  },
+  {
+    title: 'empty fill for inputs Input',
+    describe: 'inputs Input scenario',
+    delay: 5_000,
+    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
+    fill: [],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'age',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'email',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'location',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal-code',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'afm',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'desired-mount',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'iban',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        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',
+      },
+    ],
+  },
+  {
+    title: 'incorrect types for inputs Input',
+    describe: 'inputs Input scenario',
+    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
+    fill: [
+      {
+        fieldKey: 'age',
+        value: 'aa',
+      },
+      {
+        fieldKey: 'email',
+        value: '23232',
+      },
+      {
+        fieldKey: 'location',
+        value: '23232',
+      },
+      {
+        fieldKey: 'postal-code',
+        value: 'aaaaa',
+      },
+      {
+        fieldKey: 'afm',
+        value: 'aaaaaaaaa',
+      },
+      {
+        fieldKey: 'desired-mount',
+        value: 'aaa',
+      },
+      {
+        fieldKey: 'mobile-phone',
+        value: '+33690000000',
+      },
+      {
+        fieldKey: 'phone-number',
+        value: '000000000',
+      },
+      {
+        fieldKey: 'phone-number-landline',
+        value: '000000000',
+      },
+      {
+        fieldKey: 'iban',
+        value: 'aaaaaa',
+      },
+      {
+        fieldKey: 'uuid4',
+        value: 'aaaaaa',
+      },
+      {
+        fieldKey: 'address_number',
+        value: 'aa',
+      },
+      {
+        fieldKey: 'postal_code',
+        value: 'aaaaa',
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'age',
+        text: el.form.error.number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'email',
+        text: el.form.error.email,
+      },
+      {
+        type: 'success',
+        fieldKey: 'location',
+        text: el.form.error.string,
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal-code',
+        text: el.form.error.postalCode,
+      },
+      {
+        type: 'error',
+        fieldKey: 'afm',
+        text: el.form.error.afm,
+      },
+      {
+        type: 'error',
+        fieldKey: 'desired-mount',
+        text: el.form.error.number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.mobile_phone,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number',
+        text: el.form.error.phone_number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.landline,
+      },
+      {
+        type: 'error',
+        fieldKey: 'iban',
+        text: el.form.error.iban,
+      },
+      {
+        type: 'error',
+        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',
+      },
+    ],
+  },
+];
+
+const multiplicityScenarioTitles = [
+  'add 0 items with min=3',
+  'add 1 item with min=3',
+  'add 3 items with min=3',
+  'add 1 item with max=3',
+  'add 3 items with max=3',
+  'add 4 items with max=3',
+  'add 1 item with min=2 and max=3',
+  'add 3 items with min=2 and max=3',
+  'add 4 items with min=2 and max=3',
+  'add 1 item with exact=3',
+  'add 3 items with exact=3',
+  'add 4 items with exact=3',
+];
+
+const multiplicityFieldsTemplate = {
+  key: 'multiplicity',
+  type: 'array',
+  multiplicity: true,
+  label: {
+    primary: 'Εξαρτώμενα μέλη',
+    secondary:
+      'Τα εξαρτώμενα μέλη είναι φυσικά πρόσωπα που υπάγονται στη φορολογική σας δήλωση',
+  },
+  extra: {
+    label: {
+      object: {
+        title: 'Εξαρτώμενο μέλος',
+        add: 'Προσθήκη',
+        delete: 'Αφαίρεση μέλους',
+      },
+      question: {
+        title: 'Θέλετε να προσθέσετε εξαρτώμενα μέλη;',
+        yes: 'Ναι',
+        no: 'Όχι',
+      },
+    },
+    of: {
+      type: 'object',
+      label: {
+        primary: 'Στοιχεία εξαρτώμενου μέλους',
+        secondary:
+          'Συμπληρώστε τα στοιχεία παρακάτω και μετά πατήστε το κουμπί «Προσθήκη»',
+      },
+      extra: {
+        fields: [
+          {
+            key: 'firstName',
+            required: true,
+            type: 'string',
+            label: {
+              primary: 'Όνομα',
+            },
+          },
+          {
+            key: 'lastName',
+            required: true,
+            type: 'string',
+            label: {
+              primary: 'Επώνυμο',
+            },
+          },
+          {
+            key: 'dob',
+            required: true,
+            type: 'date',
+            label: {
+              primary: 'Ημερομηνία γέννησης',
+            },
+            extra: {
+              max: 'now',
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const multiplicityFillTemplate = {
+  fieldKey: 'multiplicity',
+  value: {
+    question: 'yes',
+    of: {
+      type: 'object',
+      extra: {
+        fields: [
+          {
+            fieldKey: 'firstName',
+            value: 'FirstName',
+          },
+          {
+            fieldKey: 'lastName',
+            value: 'LastName',
+          },
+          {
+            fieldKey: 'dob',
+            value: {
+              day: '20',
+              month: '11',
+              year: '2020',
+            },
+          },
+        ],
+        action: 'add',
+      },
+    },
+  },
+};
+
+const multiplicityScenarios: any[] = [];
+const locals = {
+  min: el.form.error.array.min,
+  max: el.form.error.array.max,
+  length: el.form.error.array.length,
+  required: el.form.error.required,
+};
+multiplicityScenarios.push(
+  ...generateScenarios(
+    multiplicityScenarioTitles,
+    multiplicityFillTemplate,
+    multiplicityFieldsTemplate,
+    'multiplicity',
+    true,
+    locals
+  )
+);
+
+const fieldArrayScenarioTitles = [
+  'add 0 items with min=3',
+  'add 1 item with min=3',
+  'add 3 items with min=3',
+  'add 1 item with max=3',
+  'add 3 items with max=3',
+  'add 4 items with max=3',
+  'add 1 item with min=2 and max=3',
+  'add 3 items with min=2 and max=3',
+  'add 4 items with min=2 and max=3',
+  'add 1 item with exact=3',
+  'add 3 items with exact=3',
+  'add 4 items with exact=3',
+];
+
+const fieldArrayFieldsTemplate = {
+  key: 'fieldArray',
+  type: 'array',
+  editable: true,
+  label: {
+    primary: 'Εξαρτώμενα μέλη',
+    secondary:
+      'Τα εξαρτώμενα μέλη είναι φυσικά πρόσωπα που υπάγονται στη φορολογική σας δήλωση',
+  },
+  extra: {
+    label: {
+      object: {
+        title: 'Εξαρτώμενο μέλος',
+        add: 'Προσθήκη',
+        delete: 'Αφαίρεση μέλους',
+      },
+      question: {
+        title: 'Θέλετε να προσθέσετε εξαρτώμενα μέλη;',
+        yes: 'Ναι',
+        no: 'Όχι',
+      },
+    },
+    border: 'border',
+    of: {
+      type: 'object',
+      label: {
+        primary: 'Στοιχεία εξαρτώμενου μέλους',
+        secondary:
+          'Συμπληρώστε τα στοιχεία παρακάτω και μετά πατήστε το κουμπί «Προσθήκη»',
+      },
+      extra: {
+        fields: [
+          {
+            key: 'firstName',
+            required: true,
+            type: 'string',
+            label: {
+              primary: 'Όνομα',
+            },
+          },
+          {
+            key: 'lastName',
+            required: true,
+            type: 'string',
+            label: {
+              primary: 'Επώνυμο',
+            },
+          },
+          {
+            key: 'dob',
+            required: true,
+            type: 'date',
+            label: {
+              primary: 'Ημερομηνία γέννησης',
+            },
+            extra: {
+              max: 'now',
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const fieldArrayFillTemplate = {
+  fieldKey: 'fieldArray',
+  value: {
+    question: 'yes',
+    of: {
+      type: 'object',
+      extra: {
+        fields: [
+          {
+            fieldKey: 'firstName',
+            value: 'FirstName',
+          },
+          {
+            fieldKey: 'lastName',
+            value: 'LastName',
+          },
+          {
+            fieldKey: 'dob',
+            value: {
+              day: '20',
+              month: '11',
+              year: '2020',
+            },
+          },
+        ],
+        action: 'add',
+      },
+    },
+  },
+};
+
+const fieldArrayScenarios: any[] = [];
+const tmpLocals = {
+  min: el.form.error.array.min,
+  max: el.form.error.array.max,
+  length: el.form.error.array.length,
+  required: el.form.error.required,
+};
+fieldArrayScenarios.push(
+  ...generateScenarios(
+    fieldArrayScenarioTitles,
+    fieldArrayFillTemplate,
+    fieldArrayFieldsTemplate,
+    'fieldArray',
+    false,
+    tmpLocals
+  )
+);
+
+const scenarios = [
+  ...fieldArrayScenarios,
+  ...multiplicityScenarios,
+  ...inputsScenarios,
+  ...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}
+          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',
+      });
+      expect(screenshot).toMatchSnapshot();
+
+      await expectErrorMessages(formBuilder, scenario.expect, expect);
+    });
+  });
+}