Re-implement Day and PhoneNumber Tests

src/components/day/Day.unit.js

@@ -1,4 +1,4 @@
-import { Formio } from '../../Formio';
+import Formio from '../../Formio';
 import assert from 'power-assert';
 
 import Harness from '../../../test/harness';
@@ -222,4 +222,50 @@ describe('Day Component', () => {
     });
     comp1.fields.year.hide = false;
   });
+  it('OnBlur validation should work properly with Day component', (done) => {
+    const element = document.createElement('div');
+
+    Formio.createForm(element, comp5).then(form => {
+      const dayComponent = form.components[0];
+      dayComponent.setValue('03/12/2023');
+
+      setTimeout(() => {
+        dayComponent.refs.day.focus();
+        dayComponent.refs.day.value = '';
+        dayComponent.refs.day.dispatchEvent(new Event('input'));
+
+        setTimeout(() => {
+          assert(!dayComponent.error, 'Day should be valid while changing');
+          dayComponent.refs.day.dispatchEvent(new Event('blur'));
+
+          setTimeout(() => {
+            assert(dayComponent.error, 'Should set error after Day component was blurred');
+            done();
+          }, 200);
+        }, 200);
+      }, 200);
+    }).catch(done);
+  });
+
+  it('Should restore focus after redraw', (done) => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    Formio.createForm(element, comp6).then(form => {
+      const textField = form.getComponent(['textField']);
+      textField.setValue('test');
+
+      setTimeout(() => {
+        const day = form.getComponent(['day']);
+        document.querySelector('select.form-control').focus();
+          day.refs.month.value = 2;
+          day.refs.month.dispatchEvent(new Event('input'));
+
+          setTimeout(() => {
+            console.log(global.document.activeElement, day.refs.month);
+            assert(global.document.activeElement === day.refs.month, 'Should keep focus on the year select');
+            done();
+          }, 200);
+      }, 500);
+    }).catch(done);
+  });
 });

src/components/phonenumber/PhoneNumber.unit.js

@@ -1,7 +1,7 @@
 import Harness from '../../../test/harness';
 import PhoneNumberComponent from './PhoneNumber';
 import assert from 'power-assert';
-import { Formio } from './../../Formio';
+import Formio from '../../Formio';
 
 import {
   comp1,
@@ -13,4 +13,46 @@ describe('PhoneNumber Component', () => {
       Harness.testElements(component, 'input[type="text"]', 1);
     });
   });
+
+  it('Should check mask and value in the phone component in the email template', (done) => {
+    const formJson =  {
+      components: [{
+          label: 'Phone Number',
+          tableView: true,
+          allowMultipleMasks: true,
+          inputMasks: [{
+            label: 'mask1',
+            mask: 'mask1'
+          }],
+          key: 'phoneNumber',
+          type: 'phoneNumber',
+          input: true
+       }]
+    };
+    const element = document.createElement('div');
+    Formio.createForm(element, formJson)
+      .then(form => {
+        form.setSubmission({
+          data: {
+            phoneNumber: {
+                value: 'mask1',
+                maskName: 'mask2'
+            }
+        },
+        });
+
+        const phoneNumber = form.getComponent('phoneNumber');
+
+        setTimeout(() => {
+          assert.equal(phoneNumber.dataValue.value, 'mask1', 'Should check value');
+          assert.equal(phoneNumber.dataValue.maskName, 'mask2', 'Should check maskName');
+          const toString = phoneNumber.getValueAsString(phoneNumber.dataValue, { email: true });
+          assert.ok(toString.includes('table'), 'Email template should render html table');
+          assert.ok(toString.includes(phoneNumber.dataValue.maskName), 'Email template should have Phone Number mackName');
+          assert.ok(toString.includes(phoneNumber.dataValue.value), 'Email template should have Phone Number value');
+          done();
+        }, 300);
+      })
+      .catch(done);
+  });
 });