formiojs/Webform.unit.js

Common js library for client side interaction with <form.io>

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

require("core-js/modules/es.object.keys.js");

require("core-js/modules/es.symbol.js");

require("core-js/modules/es.array.filter.js");

require("core-js/modules/es.object.get-own-property-descriptor.js");

require("core-js/modules/es.object.get-own-property-descriptors.js");

require("core-js/modules/es.string.iterator.js");

require("core-js/modules/es.weak-map.js");

require("core-js/modules/es.symbol.description.js");

require("core-js/modules/es.symbol.iterator.js");

require("regenerator-runtime/runtime.js");

require("core-js/modules/es.string.trim.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/web.dom-collections.for-each.js");

require("core-js/modules/es.array.includes.js");

require("core-js/modules/es.array.iterator.js");

require("core-js/modules/web.dom-collections.iterator.js");

require("core-js/modules/es.regexp.exec.js");

require("core-js/modules/es.string.split.js");

require("core-js/modules/es.string.replace.js");

require("core-js/modules/es.array.concat.js");

require("core-js/modules/es.string.includes.js");

require("core-js/modules/es.promise.js");

require("core-js/modules/es.promise.finally.js");

var _powerAssert = _interopRequireDefault(require("power-assert"));

var _chai = require("chai");

var _sinon = _interopRequireDefault(require("sinon"));

var _lodash = _interopRequireDefault(require("lodash"));

var _each = _interopRequireDefault(require("lodash/each"));

var _i18next = _interopRequireDefault(require("i18next"));

var _harness = _interopRequireDefault(require("../test/harness"));

var _forms = _interopRequireDefault(require("../test/forms"));

var _Webform = _interopRequireDefault(require("./Webform"));

require("flatpickr");

var _Formio = _interopRequireDefault(require("./Formio"));

var _formtest = require("../test/formtest");

var _dataGridOnBlurValidation = _interopRequireDefault(require("../test/forms/dataGridOnBlurValidation"));

var _updateErrorClassesWidgets = _interopRequireDefault(require("../test/forms/updateErrorClasses-widgets"));

var _nestedModalWizard = _interopRequireDefault(require("../test/forms/nestedModalWizard"));

var _disableSubmitButton = _interopRequireDefault(require("../test/forms/disableSubmitButton"));

var _formWithAddressComponent = _interopRequireDefault(require("../test/forms/formWithAddressComponent"));

var _dataGridWithInitEmpty = _interopRequireDefault(require("../test/forms/dataGridWithInitEmpty"));

var _dataGridNestedForm = _interopRequireDefault(require("../test/forms/dataGrid-nestedForm"));

var _formWithDataGrid = _interopRequireDefault(require("../test/forms/formWithDataGrid"));

var _translationTestForm = _interopRequireDefault(require("../test/forms/translationTestForm"));

var _dataGridWithConditionalColumn = _interopRequireDefault(require("../test/forms/dataGridWithConditionalColumn"));

var _fixtures = require("../test/fixtures");

var _nativePromiseOnly = _interopRequireDefault(require("native-promise-only"));

var _utils = require("../lib/utils/utils");

var _truncateMultipleSpaces = _interopRequireDefault(require("../test/forms/truncateMultipleSpaces"));

var _calculatedValue = _interopRequireDefault(require("../test/forms/calculatedValue"));

var _conditionalDataGridWithTableAndRadio = _interopRequireDefault(require("../test/forms/conditionalDataGridWithTableAndRadio"));

var _calculateValueWithManualOverrideLableValueDataGrid = _interopRequireDefault(require("../test/forms/calculateValueWithManualOverrideLableValueDataGrid"));

var _nestedDataGridsAndContainers = _interopRequireDefault(require("../test/forms/nestedDataGridsAndContainers"));

var _columnWithConditionalComponents = _interopRequireDefault(require("../test/forms/columnWithConditionalComponents"));

var _formWithSurvey = _interopRequireDefault(require("../test/forms/formWithSurvey"));

var _formWithSelectBoxes = _interopRequireDefault(require("../test/forms/formWithSelectBoxes"));

var _formWithDayComp = _interopRequireDefault(require("../test/forms/formWithDayComp"));

var _formWithCalcValue = _interopRequireDefault(require("../test/forms/formWithCalcValue"));

var _formWithAllowCalculateOverride = _interopRequireDefault(require("../test/forms/formWithAllowCalculateOverride"));

var _clearOnHideInsideEditGrid = _interopRequireDefault(require("../test/forms/clearOnHideInsideEditGrid"));

var _nestedDataGridWithInitEmpty = _interopRequireDefault(require("../test/forms/nestedDataGridWithInitEmpty"));

var FormioUtils = _interopRequireWildcard(require("./utils/utils"));

var _htmlRenderMode = _interopRequireDefault(require("../test/forms/htmlRenderMode"));

var _optionalSanitize = _interopRequireDefault(require("../test/forms/optionalSanitize"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

global.requestAnimationFrame = function (cb) {
  return cb();
};

global.cancelAnimationFrame = function () {};
/* eslint-disable max-statements */


describe('Webform tests', function () {
  this.retries(3);
  it('Should recalculate value when submission is being set in edit mode', function (done) {
    var formElement = document.createElement('div');
    var form = new _Webform.default(formElement);
    form.setForm(_formWithCalcValue.default).then(function () {
      var numberComp = form.getComponent('number');
      var checkbox = form.getComponent('checkbox');
      form.setSubmission({}).then(function () {
        setTimeout(function () {
          _powerAssert.default.equal(numberComp.dataValue, 0);

          _powerAssert.default.equal(checkbox.dataValue, true);

          form.setSubmission({
            data: {
              number: 7,
              checkbox: true
            }
          }).then(function () {
            setTimeout(function () {
              _powerAssert.default.equal(numberComp.dataValue, 7);

              _powerAssert.default.equal(checkbox.dataValue, false);

              done();
            }, 500);
          });
        }, 500);
      });
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should show survey values in html render mode', function (done) {
    var formElement = document.createElement('div');
    var form = new _Webform.default(formElement, {
      renderMode: 'html',
      readOnly: true
    });
    form.setForm(_formWithSurvey.default).then(function () {
      form.setSubmission({
        data: {
          survey: {
            question1: 'a3',
            question2: 'a1'
          }
        }
      }).then(function () {
        var survey = form.getComponent('survey');
        var values = survey.element.querySelectorAll('td');

        _powerAssert.default.equal(values.length, 2);

        _powerAssert.default.equal(values[0].innerHTML.trim(), 'a3');

        _powerAssert.default.equal(values[1].innerHTML.trim(), 'a1');

        done();
      });
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should show select boxes values in html render mode', function (done) {
    var formElement = document.createElement('div');
    var form = new _Webform.default(formElement, {
      renderMode: 'html',
      readOnly: true
    });
    form.setForm(_formWithSelectBoxes.default).then(function () {
      form.setSubmission({
        data: {
          selectBoxes: {
            a: true,
            b: true,
            c: false
          }
        }
      }).then(function () {
        var selectBoxes = form.getComponent('selectBoxes');
        var values = selectBoxes.element.querySelector('[ref="value"]').textContent.trim();

        _powerAssert.default.equal(values, 'a, b');

        done();
      });
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should show day value in html render mode', function (done) {
    var formElement = document.createElement('div');
    var form = new _Webform.default(formElement, {
      renderMode: 'html',
      readOnly: true
    });
    form.setForm(_formWithDayComp.default).then(function () {
      form.setSubmission({
        data: {
          day: '05/07/2020'
        }
      }).then(function () {
        var day = form.getComponent('day');
        var value = day.element.querySelector('[ref="value"]').textContent.trim();

        _powerAssert.default.equal(value, '05/07/2020');

        done();
      });
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should allow to input value and add rows in deeply nested conditional dataGrid', function (done) {
    var formElement = document.createElement('div');
    var form = new _Webform.default(formElement);
    form.setForm(_nestedDataGridsAndContainers.default).then(function () {
      var parentDataGrid = form.getComponent('dataGrid6');

      _powerAssert.default.equal(parentDataGrid.rows.length, 1);

      _powerAssert.default.equal(parentDataGrid.rows[0].dataGrid5.visible, false);

      var checkbox = form.getComponent('checkbox');
      checkbox.setValue(true);
      setTimeout(function () {
        _powerAssert.default.equal(parentDataGrid.rows.length, 1);

        _powerAssert.default.equal(parentDataGrid.rows[0].dataGrid5.visible, true);

        var numberInput = parentDataGrid.rows[0].dataGrid5.rows[0].number.refs.input[0];
        numberInput.value = 555;
        var inputEvent = new Event('input');
        numberInput.dispatchEvent(inputEvent);
        setTimeout(function () {
          var conditionalDataGrid = form.getComponent('dataGrid6').rows[0].dataGrid5;
          var numberComp = conditionalDataGrid.rows[0].number;

          _powerAssert.default.equal(numberComp.dataValue, 555);

          _powerAssert.default.equal(numberComp.refs.input[0].value, 555);

          var addRowBtn = conditionalDataGrid.refs['datagrid-dataGrid5-addRow'][0];
          var clickEvent = new Event('click');
          addRowBtn.dispatchEvent(clickEvent);
          setTimeout(function () {
            _powerAssert.default.equal(conditionalDataGrid.rows.length, 2);

            done();
          }, 300);
        }, 300);
      }, 300);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should adjust columns when conditional fields appear/disappear', function (done) {
    var formElement = document.createElement('div');
    var form = new _Webform.default(formElement);
    form.setForm(_columnWithConditionalComponents.default).then(function () {
      var selectBoxes = form.getComponent('selectBoxes');
      var columns = form.getComponent('columns');
      columns.columns.forEach(function (column, index) {
        _powerAssert.default.equal(column[0].visible, false, "Column ".concat(index + 1, " component should be hidden"));

        _powerAssert.default.equal(columns.component.columns[index].currentWidth, 0, "Column ".concat(index + 1, "  width should be 0"));
      });
      selectBoxes.setValue({
        '1': false,
        '2': false,
        '3': true,
        '4': false,
        '5': false,
        '6': true
      });
      setTimeout(function () {
        columns.columns.forEach(function (column, index) {
          if ([3, 6].includes(index + 1)) {
            _powerAssert.default.equal(column[0].visible, true, "Column ".concat(index + 1, " component should be visible"));

            _powerAssert.default.equal(columns.component.columns[index].currentWidth, 2, "Column ".concat(index + 1, "  width should be 2"));
          } else {
            _powerAssert.default.equal(column[0].visible, false, "Column ".concat(index + 1, " component should be hidden"));

            _powerAssert.default.equal(columns.component.columns[index].currentWidth, 0, "Column ".concat(index + 1, "  width should be 0"));
          }
        });
        var visibleTextField1 = columns.columns[2][0].refs.input[0];
        var visibleTextField2 = columns.columns[5][0].refs.input[0];
        visibleTextField1.value = 'test   ';
        visibleTextField2.value = ' some ';
        var inputEvent = new Event('input');
        visibleTextField1.dispatchEvent(inputEvent);
        visibleTextField2.dispatchEvent(inputEvent);
        setTimeout(function () {
          var visibleTextField1 = columns.columns[2][0].refs.input[0];
          var visibleTextField2 = columns.columns[5][0].refs.input[0];

          _powerAssert.default.equal(visibleTextField1.value, 'test   ', 'Should not cut whitespaces while inputting into the conditional component inside column');

          _powerAssert.default.equal(visibleTextField2.value, ' some ', 'Should not cut whitespaces while inputting into the conditional component inside column');

          selectBoxes.setValue({
            '1': false,
            '2': false,
            '3': false,
            '4': false,
            '5': false,
            '6': true
          });
          setTimeout(function () {
            columns.columns.forEach(function (column, index) {
              if ([6].includes(index + 1)) {
                _powerAssert.default.equal(column[0].visible, true, "Column ".concat(index + 1, " component should be visible"));

                _powerAssert.default.equal(columns.component.columns[index].currentWidth, 2, "Column ".concat(index + 1, "  width should be 2"));
              } else {
                _powerAssert.default.equal(column[0].visible, false, "Column ".concat(index + 1, " component should be hidden"));

                _powerAssert.default.equal(columns.component.columns[index].currentWidth, 0, "Column ".concat(index + 1, "  width should be 0"));
              }
            });
            done();
          }, 300);
        }, 300);
      }, 300);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should not translate en value if _userInput option is provided and value presents in reserved translation names', function (done) {
    var formElement = document.createElement('div');
    var form = new _Webform.default(formElement, {
      language: 'en'
    });
    form.setForm(_translationTestForm.default).then(function () {
      setTimeout(function () {
        var selectComp = form.getComponent('select');
        var options = selectComp.element.querySelector('[role="listbox"]').children;
        var option1 = options[0].textContent.trim();
        var option2 = options[1].textContent.trim();
        var label = selectComp.element.querySelector('label').textContent.trim();

        _powerAssert.default.equal(option1, _translationTestForm.default.components[0].data.values[0].label);

        _powerAssert.default.equal(option2, _translationTestForm.default.components[0].data.values[1].label);

        _powerAssert.default.equal(label, _translationTestForm.default.components[0].label);

        document.body.innerHTML = '';
        done();
      }, 100);
    }).catch(done);
  });
  it('Should translate in English if _userInput option is provided and value does not present in reserved translation names', function (done) {
    var formElement = document.createElement('div');
    var selectLabel = 'Select test label';
    var translationForm = (0, _utils.fastCloneDeep)(_translationTestForm.default);
    translationForm.components[0].label = selectLabel;
    var form = new _Webform.default(formElement, {
      language: 'en',
      i18n: {
        en: {
          'Select test label': 'English Label'
        },
        fr: {
          'Select test label': 'French Label'
        }
      }
    });
    form.setForm(translationForm).then(function () {
      var selectComp = form.getComponent('select');
      var label = selectComp.element.querySelector('label').textContent.trim();

      _powerAssert.default.equal(label, 'English Label');

      document.body.innerHTML = '';
      done();
    }).catch(done);
  });
  it('Should translate value in franch if _userInput option is provided and value does not present in reserved translation names', function (done) {
    var formElement = document.createElement('div');
    var selectLabel = 'Select test label';
    var translationForm = (0, _utils.fastCloneDeep)(_translationTestForm.default);
    translationForm.components[0].label = selectLabel;
    var form = new _Webform.default(formElement, {
      language: 'fr',
      i18n: {
        en: {
          'Select test label': 'English Label'
        },
        fr: {
          'Select test label': 'French Label'
        }
      }
    });
    form.setForm(translationForm).then(function () {
      var selectComp = form.getComponent('select');
      var label = selectComp.element.querySelector('label').textContent.trim();

      _powerAssert.default.equal(label, 'French Label');

      document.body.innerHTML = '';
      done();
    }).catch(done);
  });
  it('Should display dataGrid conditional column once the condition is met', function (done) {
    var formElement = document.createElement('div');
    var formWithCondDataGridColumn = new _Webform.default(formElement);
    formWithCondDataGridColumn.setForm(_dataGridWithConditionalColumn.default).then(function () {
      var condDataGridField = formWithCondDataGridColumn.element.querySelector('[name="data[dataGrid][0][numberCond]"]');

      _powerAssert.default.equal(!!condDataGridField, false);

      var textField = formWithCondDataGridColumn.element.querySelector('[name="data[textField]"]');
      textField.value = 'show';
      var inputEvent = new Event('input');
      textField.dispatchEvent(inputEvent);
      setTimeout(function () {
        var condDataGridFieldAfterFulfillingCond = formWithCondDataGridColumn.element.querySelector('[name="data[dataGrid][0][numberCond]"]');

        _powerAssert.default.equal(!!condDataGridFieldAfterFulfillingCond, true);

        done();
      }, 300);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should remove dataGrid extra rows and components after setting value with less row number', function (done) {
    var formElement = document.createElement('div');
    var formWithDG = new _Webform.default(formElement);
    formWithDG.setForm(_formWithDataGrid.default.form).then(function () {
      formWithDG.setSubmission(_formWithDataGrid.default.submission3rows);
      setTimeout(function () {
        _powerAssert.default.equal(formWithDG.components[0].rows.length, 3);

        _powerAssert.default.equal(formWithDG.components[0].components.length, 3);

        formWithDG.setSubmission(_formWithDataGrid.default.submission1row);
        setTimeout(function () {
          _powerAssert.default.equal(formWithDG.components[0].rows.length, 1);

          _powerAssert.default.equal(formWithDG.components[0].components.length, 1);

          done();
        }, 200);
      }, 100);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should not delete/change date value in dataGrid after adding new row', function (done) {
    var formElement = document.createElement('div');
    var formWithDate = new _Webform.default(formElement);
    formWithDate.setForm(_formtest.formWithCustomFormatDate).then(function () {
      setTimeout(function () {
        var clickEvent = new Event('click');
        var dateCompInputWidget = formWithDate.element.querySelector('.formio-component-textField').querySelector('.flatpickr-input').widget;
        var dateAltFormat = dateCompInputWidget.calendar.config.altFormat;
        dateCompInputWidget.calendar.setDate('30-05-2020', true, dateAltFormat);
        var dateCompInputWidget1 = formWithDate.element.querySelector('.formio-component-dateTime').querySelector('.flatpickr-input').widget;
        var dateAltFormat1 = dateCompInputWidget1.calendar.config.altFormat;
        dateCompInputWidget1.calendar.setDate('30-05-2020', true, dateAltFormat1);
        var dateCompInputWidget2 = formWithDate.element.querySelector('.formio-component-textField2').querySelector('.flatpickr-input').widget;
        var dateAltFormat2 = dateCompInputWidget2.calendar.config.altFormat;
        dateCompInputWidget2.calendar.setDate('30-05-2020', true, dateAltFormat2);
        setTimeout(function () {
          var dateCompAltInput = formWithDate.element.querySelector('.formio-component-textField').querySelector('.flatpickr-input');
          var dateComp = formWithDate.element.querySelector('.formio-component-textField').querySelector('[type="text"]');
          var dateCompAltInput1 = formWithDate.element.querySelector('.formio-component-dateTime').querySelector('.flatpickr-input');
          var dateComp1 = formWithDate.element.querySelector('.formio-component-dateTime').querySelector('[type="text"]');
          var dateCompAltInput2 = formWithDate.element.querySelector('.formio-component-textField2').querySelector('.flatpickr-input');
          var dateComp2 = formWithDate.element.querySelector('.formio-component-textField2').querySelector('[type="text"]');

          _powerAssert.default.equal(dateCompAltInput.value, '30-05-2020');

          _powerAssert.default.equal(dateComp.value, '30-05-2020');

          _powerAssert.default.equal(dateCompAltInput1.value, '2020-05-30T00:00:00');

          _powerAssert.default.equal(dateComp1.value, '30-05-2020');

          _powerAssert.default.equal(dateCompAltInput2.value, '2020-05-30T00:00:00');

          _powerAssert.default.equal(dateComp2.value, '30-05-2020');

          var addNewRowBtn = formWithDate.element.querySelector('.formio-button-add-row');
          addNewRowBtn.dispatchEvent(clickEvent);
          setTimeout(function () {
            var dataGridRows = formWithDate.element.querySelectorAll('[ref="datagrid-dataGrid-row"]');

            _powerAssert.default.equal(dataGridRows.length, 2);

            var dateCompAltInputAfterAddingRow = formWithDate.element.querySelectorAll('.formio-component-textField')[0].querySelector('.flatpickr-input');
            var dateCompAfterAddingRow = formWithDate.element.querySelectorAll('.formio-component-textField')[0].querySelector('[type="text"]');
            var dateCompAltInputAfterAddingRow1 = formWithDate.element.querySelectorAll('.formio-component-dateTime')[0].querySelector('.flatpickr-input');
            var dateCompAfterAddingRow1 = formWithDate.element.querySelectorAll('.formio-component-dateTime')[0].querySelector('[type="text"]');
            var dateCompAltInputAfterAddingRow2 = formWithDate.element.querySelectorAll('.formio-component-textField2')[0].querySelector('.flatpickr-input');
            var dateCompAfterAddingRow2 = formWithDate.element.querySelectorAll('.formio-component-textField2')[0].querySelector('[type="text"]');

            _powerAssert.default.equal(dateCompAltInputAfterAddingRow.value, '30-05-2020');

            _powerAssert.default.equal(dateCompAfterAddingRow.value, '30-05-2020');

            _powerAssert.default.equal(dateCompAltInputAfterAddingRow1.value, '2020-05-30T00:00:00');

            _powerAssert.default.equal(dateCompAfterAddingRow1.value, '30-05-2020');

            _powerAssert.default.equal(dateCompAltInputAfterAddingRow2.value, '2020-05-30T00:00:00');

            _powerAssert.default.equal(dateCompAfterAddingRow2.value, '30-05-2020');

            done();
          }, 150);
        }, 50);
      }, 100);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should open collapsed panel with invalid components inside container that is inside the panel on submit', function (done) {
    var formElement = document.createElement('div');
    var formWithPanel = new _Webform.default(formElement);
    formWithPanel.setForm(_formtest.formWithCollapsedPanel).then(function () {
      var clickEvent = new Event('click');

      _powerAssert.default.equal(formWithPanel.components[0].collapsed, true);

      var submitBtn = formWithPanel.element.querySelector('[name="data[submit]"]');
      submitBtn.dispatchEvent(clickEvent);
      setTimeout(function () {
        _powerAssert.default.equal(formWithPanel.components[0].collapsed, false);

        done();
      }, 200);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should correctly set date after collapsing and openning the panel', function (done) {
    var formElement = document.createElement('div');
    var formWithDate = new _Webform.default(formElement);
    formWithDate.setForm(_formtest.formWithDateTimeComponents).then(function () {
      var clickEvent = new Event('click');
      var dateTimeCompInputWidget = formWithDate.element.querySelector('.formio-component-dateTime1').querySelector('.flatpickr-input').widget;
      var dateTimeAltFormat = dateTimeCompInputWidget.calendar.config.altFormat;
      dateTimeCompInputWidget.calendar.setDate('05-05-2020T00:00:00', true, dateTimeAltFormat);
      var textFieldDateCompWidget = formWithDate.element.querySelector('.formio-component-textField1').querySelector('.flatpickr-input').widget;
      var textFieldDateAltFormat = textFieldDateCompWidget.calendar.config.altFormat;
      textFieldDateCompWidget.calendar.setDate('04-04-2020T00:00:00', true, textFieldDateAltFormat);
      setTimeout(function () {
        var dateTimeCompAltInput = formWithDate.element.querySelector('.formio-component-dateTime1').querySelector('.flatpickr-input');
        var textFieldDateCompAltInput = formWithDate.element.querySelector('.formio-component-textField1').querySelector('.flatpickr-input');
        var dateTimeComp = formWithDate.element.querySelector('.formio-component-dateTime1').querySelector('[type="text"]');
        var textFieldDateComp = formWithDate.element.querySelector('.formio-component-textField1').querySelector('[type="text"]');

        _powerAssert.default.equal(dateTimeCompAltInput.value, '2020-05-05T00:00:00');

        _powerAssert.default.equal(textFieldDateCompAltInput.value, '2020-04-04T00:00:00');

        _powerAssert.default.equal(dateTimeComp.value, '05-05-2020');

        _powerAssert.default.equal(textFieldDateComp.value, '04-04-2020');

        var panelCollapseBtn = formWithDate.element.querySelector('.formio-collapse-icon');
        panelCollapseBtn.dispatchEvent(clickEvent);
        setTimeout(function () {
          var panelBody = formWithDate.element.querySelector('.panel-body');

          _powerAssert.default.equal(!!panelBody, false);

          formWithDate.element.querySelector('.formio-collapse-icon').dispatchEvent(clickEvent);
          setTimeout(function () {
            var dateTimeCompAfterOpenningPanel = formWithDate.element.querySelector('.formio-component-dateTime1').querySelector('[type="text"]');
            var textFieldDateCompAfterOpenningPanel = formWithDate.element.querySelector('.formio-component-textField1').querySelector('[type="text"]');
            var dateTimeCompAltInputAfterOpenningPanel = formWithDate.element.querySelector('.formio-component-dateTime1').querySelector('.flatpickr-input');
            var textFieldDateCompAltInputAfterOpenningPanel = formWithDate.element.querySelector('.formio-component-textField1').querySelector('.flatpickr-input');

            _powerAssert.default.equal(dateTimeCompAltInputAfterOpenningPanel.value, '2020-05-05T00:00:00');

            _powerAssert.default.equal(textFieldDateCompAltInputAfterOpenningPanel.value, '2020-04-04T00:00:00');

            _powerAssert.default.equal(dateTimeCompAfterOpenningPanel.value, '05-05-2020');

            _powerAssert.default.equal(textFieldDateCompAfterOpenningPanel.value, '04-04-2020');

            done();
          }, 250);
        }, 150);
      }, 50);
    }).catch(function (err) {
      return done(err);
    });
  });
  it("Should show confirmation alert when clicking X btn or clicking outside modal window after editing\n  editGrid modal draft row", function (done) {
    var formElement = document.createElement('div');
    var formWithNestedDraftModals = new _Webform.default(formElement);
    formWithNestedDraftModals.setForm(_formtest.formWithEditGridAndNestedDraftModalRow).then(function () {
      var editGrid = formWithNestedDraftModals.getComponent('editGrid');
      var clickEvent = new Event('click');
      var inputEvent = new Event('input');
      var addRowBtn = formWithNestedDraftModals.element.querySelector('[ref="editgrid-editGrid-addRow"]'); //click to open row in modal view

      addRowBtn.dispatchEvent(clickEvent);
      setTimeout(function () {
        var rowModal = document.querySelector(".editgrid-row-modal-".concat(editGrid.id)); //checking if row modal was openned

        _powerAssert.default.equal(!!rowModal, true);

        var textField = rowModal.querySelector('[name="data[textField]"]');
        textField.value = 'test'; //input value

        textField.dispatchEvent(inputEvent);
        setTimeout(function () {
          //checking if the value was set inside the field
          _powerAssert.default.equal(textField.value, 'test');

          var saveModalBtn = rowModal.querySelector('.btn-primary'); //clicking save button to save row draft

          saveModalBtn.dispatchEvent(clickEvent);
          setTimeout(function () {
            var editGridRows = formWithNestedDraftModals.element.querySelectorAll('[ref="editgrid-editGrid-row"]'); //checking if the editGrid row was created

            _powerAssert.default.equal(editGridRows.length, 1);

            var editRowBtn = editGridRows[0].querySelector('.editRow'); //click the edit btn to open the row again

            editRowBtn.dispatchEvent(clickEvent);
            setTimeout(function () {
              var rowModalForEditing = document.querySelector(".editgrid-row-modal-".concat(editGrid.id));
              var textFieldInputForEditing = rowModalForEditing.querySelector('[name="data[textField]"]');
              textFieldInputForEditing.value = 'changed value'; //changing textfield value

              textFieldInputForEditing.dispatchEvent(inputEvent);
              setTimeout(function () {
                //checking if the textfield value was changed
                var inputValue = textFieldInputForEditing.value;

                _powerAssert.default.equal(inputValue, 'changed value');

                var XCloseBtn = rowModalForEditing.querySelector('[ref="dialogClose"]'); //clicking modal close btn

                XCloseBtn.dispatchEvent(clickEvent);
                setTimeout(function () {
                  var dialogConfirmationWindows = document.querySelectorAll(".editgrid-row-modal-confirmation-".concat(editGrid.id)); //checking if confirmation dialog is openned

                  _powerAssert.default.equal(dialogConfirmationWindows.length, 1);

                  var dialogCancelBtn = dialogConfirmationWindows[0].querySelector('[ref="dialogCancelButton"]'); //closing confirmation dialog

                  dialogCancelBtn.dispatchEvent(clickEvent);
                  setTimeout(function () {
                    var confirmationWindows = document.querySelectorAll(".editgrid-row-modal-confirmation-".concat(editGrid.id)); //checking if confirmation dialig is closed

                    _powerAssert.default.equal(confirmationWindows.length, 0);

                    var dialog = document.querySelector(".editgrid-row-modal-".concat(editGrid.id));
                    var overlay = dialog.querySelector('[ref="dialogOverlay"]'); //clocking model overlay to open confirmation dialog again

                    overlay.dispatchEvent(clickEvent);
                    setTimeout(function () {
                      var confirmationDialogsAfterClickingOverlay = document.querySelectorAll(".editgrid-row-modal-confirmation-".concat(editGrid.id));

                      _powerAssert.default.equal(confirmationDialogsAfterClickingOverlay.length, 1);

                      document.body.innerHTML = '';
                      done();
                    }, 190);
                  }, 170);
                }, 150);
              }, 130);
            }, 110);
          }, 100);
        }, 70);
      }, 50);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should not show validation errors when saving invalid draft row in dataGrid', function (done) {
    var formElement = document.createElement('div');
    var formWithDraftModals = new _Webform.default(formElement);
    formWithDraftModals.setForm(_formtest.formWithEditGridModalDrafts).then(function () {
      var clickEvent = new Event('click');
      var inputEvent = new Event('input');
      var addRowBtn = formWithDraftModals.element.querySelector('[ref="editgrid-editGrid-addRow"]'); //click to open row in modal view

      addRowBtn.dispatchEvent(clickEvent);
      setTimeout(function () {
        var rowModal = document.querySelector('.formio-dialog-content'); //checking if row modal was openned

        _powerAssert.default.equal(!!rowModal, true);

        var textFieldInput = rowModal.querySelector('[name="data[editGrid][0][textField]"]');
        textFieldInput.value = 'test'; //input value in one of required row fields

        textFieldInput.dispatchEvent(inputEvent);
        setTimeout(function () {
          //checking if the value was set inside the field
          _powerAssert.default.equal(textFieldInput.value, 'test');

          var saveModalBtn = rowModal.querySelector('.btn-primary'); //clicking save button to save row draft

          saveModalBtn.dispatchEvent(clickEvent);
          setTimeout(function () {
            var editGridRows = formWithDraftModals.element.querySelectorAll('[ref="editgrid-editGrid-row"]'); //checking if the editGrid row was created

            _powerAssert.default.equal(editGridRows.length, 1);

            var rowError = formWithDraftModals.element.querySelector('.editgrid-row-error').textContent.trim();
            var editGridError = formWithDraftModals.element.querySelector('[ref="messageContainer"]').querySelector('.error');

            _powerAssert.default.equal(!!rowError, false);

            _powerAssert.default.equal(!!editGridError, false);

            done();
          }, 200);
        }, 100);
      }, 50);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should show dataGrid rows when viewing submission in dataGrid with initEmpty option', function (done) {
    var formElement = document.createElement('div');
    var formWithDataGridInitEmptyOption = new _Webform.default(formElement);
    formWithDataGridInitEmptyOption.setForm(_dataGridWithInitEmpty.default.form).then(function () {
      formWithDataGridInitEmptyOption.setSubmission(_dataGridWithInitEmpty.default.submission2);
      setTimeout(function () {
        var dataGridRows = formWithDataGridInitEmptyOption.element.querySelectorAll('[ref = "datagrid-dataGrid-row"]');
        var dataGrid1Rows = formWithDataGridInitEmptyOption.element.querySelectorAll('[ref = "datagrid-dataGrid1-row"]');

        _powerAssert.default.equal(dataGrid1Rows.length, 1);

        _powerAssert.default.equal(dataGridRows.length, 1);

        formWithDataGridInitEmptyOption.setSubmission(_dataGridWithInitEmpty.default.submission3);
        setTimeout(function () {
          var dataGridRows1 = formWithDataGridInitEmptyOption.element.querySelectorAll('[ref = "datagrid-dataGrid-row"]');
          var dataGrid1Rows1 = formWithDataGridInitEmptyOption.element.querySelectorAll('[ref = "datagrid-dataGrid1-row"]');
          var dataGridSecondRowComponentValue = formWithDataGridInitEmptyOption.element.querySelector('[name = "data[dataGrid][1][textField]"]');
          var dataGrid1FirstRowComponentValue = formWithDataGridInitEmptyOption.element.querySelector('[name = "data[dataGrid1][0][textArea]"]');
          var dataGrid1SecondRowComponentValue = formWithDataGridInitEmptyOption.element.querySelector('[name = "data[dataGrid1][1][number]"]');

          _powerAssert.default.equal(dataGrid1Rows1.length, 2);

          _powerAssert.default.equal(dataGridRows1.length, 2);

          _powerAssert.default.equal(dataGridSecondRowComponentValue.value, 'test2');

          _powerAssert.default.equal(dataGrid1FirstRowComponentValue.textContent, 'test3');

          _powerAssert.default.equal(dataGrid1SecondRowComponentValue.value, 222);

          done();
        }, 300);
      }, 200);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should not show dataGrid rows when empty submission is set for dataGrid with initEmpty', function (done) {
    var formElement = document.createElement('div');
    var formWithDataGridInitEmptyOption = new _Webform.default(formElement);
    formWithDataGridInitEmptyOption.setForm(_dataGridWithInitEmpty.default.form).then(function () {
      formWithDataGridInitEmptyOption.setSubmission(_dataGridWithInitEmpty.default.submission1);
      setTimeout(function () {
        var dataGridRows = formWithDataGridInitEmptyOption.element.querySelectorAll('[ref = "datagrid-dataGrid-row"]');
        var dataGrid1Rows = formWithDataGridInitEmptyOption.element.querySelectorAll('[ref = "datagrid-dataGrid1-row"]');

        _powerAssert.default.equal(dataGridRows.length, 0);

        _powerAssert.default.equal(dataGrid1Rows.length, 0);

        formWithDataGridInitEmptyOption.setSubmission({
          data: {}
        });
        setTimeout(function () {
          var dataGridRows1 = formWithDataGridInitEmptyOption.element.querySelectorAll('[ref = "datagrid-dataGrid-row"]');
          var dataGrid1Rows1 = formWithDataGridInitEmptyOption.element.querySelectorAll('[ref = "datagrid-dataGrid1-row"]');

          _powerAssert.default.equal(dataGridRows1.length, 0);

          _powerAssert.default.equal(dataGrid1Rows1.length, 0);

          done();
        }, 300);
      }, 200);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should show address submission data inside dataGrid', function (done) {
    var formElement = document.createElement('div');
    var formWithAddress = new _Webform.default(formElement);
    formWithAddress.setForm(_formWithAddressComponent.default.form).then(function () {
      formWithAddress.setSubmission({
        data: _formWithAddressComponent.default.submission
      });
      setTimeout(function () {
        var addressInput = formWithAddress.element.querySelector('[name = "data[dataGrid][0][address]"]');

        _powerAssert.default.equal(addressInput.value, _formWithAddressComponent.default.submission.dataGrid[0].address['formatted_address']);

        done();
      }, 300);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should validate field on blur inside panel', function (done) {
    var formElement = document.createElement('div');
    var formWithBlurValidation = new _Webform.default(formElement);
    formWithBlurValidation.setForm(_formtest.formWithBlurValidationInsidePanel).then(function () {
      var inputEvent = new Event('input');
      var focusEvent = new Event('focus');
      var blurEvent = new Event('blur');
      var fieldWithBlurValidation = formWithBlurValidation.element.querySelector('[name="data[textField]"]');
      fieldWithBlurValidation.dispatchEvent(focusEvent);
      'test'.split('').forEach(function (character) {
        fieldWithBlurValidation.value = fieldWithBlurValidation.value + character;
        fieldWithBlurValidation.dispatchEvent(inputEvent);
      });
      setTimeout(function () {
        var validationErrorBeforeBlur = formWithBlurValidation.element.querySelector('.error');

        _powerAssert.default.equal(!!validationErrorBeforeBlur, false);

        _powerAssert.default.equal(formWithBlurValidation.data.textField, 'test');

        fieldWithBlurValidation.dispatchEvent(blurEvent);
        setTimeout(function () {
          var validationErrorAfterBlur = formWithBlurValidation.element.querySelector('.error');

          _powerAssert.default.equal(!!validationErrorAfterBlur, true);

          _powerAssert.default.equal(validationErrorAfterBlur.textContent, 'Text Field must have at least 5 characters.');

          done();
        }, 350);
      }, 300);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should submit form with empty time field when time field is not required', function (done) {
    var formElement = document.createElement('div');
    var formWithTime = new _Webform.default(formElement);
    formWithTime.setForm(_formtest.formWithTimeComponent).then(function () {
      var clickEvent = new Event('click');
      var submitBtn = formWithTime.element.querySelector('[name="data[submit]"]');
      submitBtn.dispatchEvent(clickEvent);
      setTimeout(function () {
        _powerAssert.default.equal(formWithTime.errors.length, 0);

        _powerAssert.default.equal(formWithTime.data.submit, true);

        done();
      }, 200);
    }).catch(function (err) {
      return done(err);
    });
  });
  it("Should show validation errors and update validation errors list when openning and editing edit grid rows\n  in draft modal mode after pushing submit btn", function (done) {
    var formElement = document.createElement('div');
    var formWithDraftModals = new _Webform.default(formElement, {
      sanitize: true
    });
    formWithDraftModals.setForm(_formtest.formWithEditGridModalDrafts).then(function () {
      var clickEvent = new Event('click');
      var inputEvent = new Event('input');
      var addRowBtn = formWithDraftModals.element.querySelector('[ref="editgrid-editGrid-addRow"]'); //click to open row in modal view

      addRowBtn.dispatchEvent(clickEvent);
      setTimeout(function () {
        var editGrid = formWithDraftModals.getComponent('editGrid');

        _powerAssert.default.equal(editGrid.editRows.length, 1, 'Should create a row');

        var rowModal = editGrid.editRows[0].dialog; //checking if row modal was openned

        _powerAssert.default.equal(!!rowModal, true, 'Should open a modal window');

        var textFieldInput = rowModal.querySelector('[name="data[editGrid][0][textField]"]');
        textFieldInput.value = 'test'; //input value in one of required row fields

        textFieldInput.dispatchEvent(inputEvent);
        setTimeout(function () {
          //checking if the value was set inside the field
          _powerAssert.default.equal(textFieldInput.value, 'test');

          var saveModalBtn = rowModal.querySelector('.btn-primary'); //clicking save button to save row draft

          saveModalBtn.dispatchEvent(clickEvent);
          setTimeout(function () {
            var editGridRows = formWithDraftModals.element.querySelectorAll('[ref="editgrid-editGrid-row"]'); //checking if the editGrid row was created

            _powerAssert.default.equal(editGridRows.length, 1);

            var submitBtn = formWithDraftModals.element.querySelector('[name="data[submit]"]'); //pushing submit button to trigger validation

            submitBtn.dispatchEvent(clickEvent);
            setTimeout(function () {
              //checking the number of appeared errors
              _powerAssert.default.equal(formWithDraftModals.errors.length, 2);

              var rowError = formWithDraftModals.element.querySelector('.editgrid-row-error').textContent.trim();
              var editGridError = formWithDraftModals.element.querySelector('[ref="messageContainer"]').querySelector('.error').textContent; //checking if right errors were shown in right places

              _powerAssert.default.equal(rowError, 'Invalid row. Please correct it or delete.');

              _powerAssert.default.equal(editGridError, 'Please correct invalid rows before proceeding.');

              var rowEditBtn = editGridRows[0].querySelector('.editRow'); //open row modal again to check if there are errors

              rowEditBtn.dispatchEvent(clickEvent);
              setTimeout(function () {
                var rowModalAfterValidation = editGrid.editRows[0].dialog;
                var alertWithErrorText = rowModalAfterValidation.querySelector('.alert-danger'); //checking if alert with errors list appeared inside the modal

                _powerAssert.default.equal(!!alertWithErrorText, true, 'Should show error alert');

                var alertErrorMessages = rowModalAfterValidation.querySelectorAll('[ref="messageRef"]');

                _powerAssert.default.equal(alertErrorMessages.length, 1);

                var numberComponentError = rowModalAfterValidation.querySelector('.formio-component-number').querySelector('.error').textContent; //checking if error was shown for empty required field

                _powerAssert.default.equal(numberComponentError, 'Number is required');

                var numberInput = rowModalAfterValidation.querySelector('[name="data[editGrid][0][number]"]');
                numberInput.value = 123; //input value to make the field valid

                numberInput.dispatchEvent(inputEvent);
                setTimeout(function () {
                  var rowModalWithValidFields = document.querySelector(".editgrid-row-modal-".concat(editGrid.id));
                  var alertErrorMessagesAfterInputtingValidValues = rowModalWithValidFields.querySelectorAll('[ref="messageRef"]');

                  _powerAssert.default.equal(alertErrorMessagesAfterInputtingValidValues.length, 0); //input values to make all row fields invalid


                  var validNumberInput = rowModalWithValidFields.querySelector('[name="data[editGrid][0][number]"]');
                  validNumberInput.value = null;
                  validNumberInput.dispatchEvent(inputEvent);
                  var validTextInput = rowModalWithValidFields.querySelector('[name="data[editGrid][0][textField]"]');
                  validTextInput.value = '';
                  validTextInput.dispatchEvent(inputEvent);
                  setTimeout(function () {
                    var alertErrorMessagesAfterInputtingInvalidValues = document.querySelector(".editgrid-row-modal-".concat(editGrid.id)).querySelectorAll('[ref="messageRef"]');

                    _powerAssert.default.equal(alertErrorMessagesAfterInputtingInvalidValues.length, 2);

                    document.body.innerHTML = '';
                    done();
                  }, 280);
                }, 240);
              }, 200);
            }, 160);
          }, 120);
        }, 80);
      }, 50);
    }).catch(function (err) {
      return done(err);
    });
  });
  it('Should not override calculated value', function (done) {
    var formElement = document.createElement('div');
    var formWithCalculatedAmount = new _Webform.default(formElement);
    formWithCalculatedAmount.setForm(_formtest.formWithCalculatedValueWithoutOverriding).then(function () {
      var inputEvent = new Event('input');
      var amountInput1 = formWithCalculatedAmount.element.querySelector('[name="data[amount1]"]');
      var amountInput2 = formWithCalculatedAmount.element.querySelector('[name="data[amount2]"]');
      amountInput1.value = 6;
      amountInput2.value = 4;
      amountInput1.disp