src/components/time/Time.unit.js

import Harness from '../../../test/harness';
import assert from 'power-assert';
import TimeComponent from './Time';
import {
  comp1,
  comp2,
  comp3,
  timeForm2,
  timeForm,
} from './fixtures';
import Webform from '../../Webform';

describe('Time Component', () => {
  it('Should build a time component', () => {
    return Harness.testCreate(TimeComponent, comp1);
  });

  it('Should format value on blur', (done) => {
    const formElement = document.createElement('div');
    const form = new Webform(formElement);
    form.setForm(timeForm).then(() => {
      const component = form.components[0];
      const inputEvent = new Event('input', { bubbles: true, cancelable: true });
      const blurEvent = new Event('blur');
      const timeInput = component.element.querySelector('input[name="data[time]"]');

      timeInput.value = '10:0_ __';
      timeInput.dispatchEvent(inputEvent);

      setTimeout(() => {
        assert.equal(timeInput.value, '10:0_ __');
        assert.equal(component.dataValue, '10:00:00');
        timeInput.dispatchEvent(blurEvent);

        setTimeout(() => {
          assert.equal(timeInput.value, '10:00 AM');
          done();
        }, 500);
      }, 250);
    })
      .catch(done);
  });

  it('Should not show error if value corresponds to the mask', (done) => {
    Harness.testCreate(TimeComponent, comp2).then((component) => {
      const inputEvent = new Event('input', { bubbles: true, cancelable: true });
      const timeInput = component.element.querySelector('input[name="data[time]"]');
      timeInput.value = '12:0_';
      timeInput.dispatchEvent(inputEvent);

      setTimeout(() => {
        timeInput.value = '12:00';
        timeInput.dispatchEvent(inputEvent);

        setTimeout(() => {
          component.checkData(component.data);

          setTimeout(() => {
            assert.equal(component.errors.length, 0);
            done();
          }, 700);
        }, 600);
      }, 500);
    });
  });

  it('Should be invalid if time is not real', (done) => {
    const formElement = document.createElement('div');
    const form = new Webform(formElement);
    form.setForm(timeForm2).then(() => {
      const component = form.components[0];
      Harness.setInputValue(component, 'data[time]', '89:19');
      setTimeout(() => {
        assert.equal(component.error.message, 'Invalid time', 'Should have an error');
        done();
      }, 650);
    }).catch(done);
  });

  it('Should build a time component', (done) => {
    Harness.testCreate(TimeComponent, comp3).then((time) => {
      assert.deepEqual(time.dataValue, ['10:00:00', '11:00:00'], 'Should be set to default value');
      done();
    }).catch(done);
  });
});