@zeedhi/common 1.115.0 → 3.0.1

package/tests/unit/components/zd-time/time.spec.ts

@@ -0,0 +1,1036 @@
+import { FormatterParserProvider, I18n } from '@zeedhi/core';
+import times from 'lodash.times';
+import { Time } from '../../../../src';
+
+jest.useFakeTimers();
+
+describe('Time', () => {
+  describe('constructor()', () => {
+    it('should create new time picker with default values', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+
+      expect(instance.timeFormat).toBe('ampm');
+      expect(instance.valueFormat).toEqual('HH:mm');
+      expect(instance.displayFormat).toEqual('hh:mm A');
+      expect(instance.fullWidth).toBeFalsy();
+      expect(instance.scrollable).toBeFalsy();
+      expect(instance.showTimePicker).toBeFalsy();
+      expect(instance.inputFormat).toBeUndefined();
+      expect(instance.width).toBe(290);
+    });
+
+    it('should create new time picker replacing default values', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        timeFormat: '24hr',
+        fullWidth: true,
+        scrollable: true,
+        showTimePicker: true,
+        useSeconds: true,
+        width: 200,
+        valueFormat: 'hh-mm-ss A',
+        displayFormat: 'HH-mm-ss',
+        inputFormat: 'HH*mm*ss',
+      });
+
+      expect(instance.timeFormat).toBe('24hr');
+      expect(instance.valueFormat).toBe('hh-mm-ss A');
+      expect(instance.displayFormat).toBe('HH-mm-ss');
+      expect(instance.inputFormat).toBe('HH*mm*ss');
+      expect(instance.fullWidth).toBeTruthy();
+      expect(instance.scrollable).toBeTruthy();
+      expect(instance.showTimePicker).toBeTruthy();
+      expect(instance.width).toBe(200);
+    });
+
+    it('when the formats are not defined in constructor, should sync them with useSeconds', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+      });
+
+      expect(instance.valueFormat).toBe('HH:mm');
+      expect(instance.displayFormat).toBe('hh:mm A');
+
+      instance.useSeconds = true;
+
+      expect(instance.valueFormat).toBe('HH:mm:ss');
+      expect(instance.displayFormat).toBe('hh:mm:ss A');
+    });
+
+    it('when the formats are not defined in constructor, should remove sync when the formats change', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+      });
+
+      instance.valueFormat = 'HH mm';
+      instance.displayFormat = 'HH mm';
+
+      instance.useSeconds = true;
+
+      expect(instance.valueFormat).toBe('HH mm');
+      expect(instance.displayFormat).toBe('HH mm');
+    });
+  });
+
+  describe('validation', () => {
+    it('should apply time validation', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+      });
+      expect(instance.timeValidation()).toBeTruthy();
+
+      instance.value = '14:00';
+      expect(instance.timeValidation()).toBeTruthy();
+
+      instance.value = '99:99';
+      expect(instance.timeValidation()).toBe(I18n.translate('VALIDATION_INVALID_TIME'));
+    });
+
+    it('should apply time allowed validation', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        minTime: '04:00',
+      });
+      expect(instance.timeAllowedValidation()).toBeTruthy();
+
+      instance.value = '14:00';
+      expect(instance.timeAllowedValidation()).toBeTruthy();
+
+      instance.value = '01:00';
+      expect(instance.timeAllowedValidation()).toBe(I18n.translate('VALIDATION_INVALID_TIME'));
+    });
+  });
+
+  describe('isSameOrAfterMin()', () => {
+    it('should check if time same or after minTime', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        minTime: '04:00',
+      });
+
+      expect(instance.isSameOrAfterMin('05:00')).toBeTruthy();
+      expect(instance.isSameOrAfterMin('04:00')).toBeTruthy();
+      expect(instance.isSameOrAfterMin('03:00')).toBeFalsy();
+    });
+
+    it('should return true if minTime is not defined', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+      });
+
+      expect(instance.isSameOrAfterMin('05:00')).toBeTruthy();
+    });
+  });
+
+  describe('isSameOrBeforeMax()', () => {
+    it('should check if time same or before maxTime', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        maxTime: '04:00',
+      });
+
+      expect(instance.isSameOrBeforeMax('05:00')).toBeFalsy();
+      expect(instance.isSameOrBeforeMax('04:00')).toBeTruthy();
+      expect(instance.isSameOrBeforeMax('03:00')).toBeTruthy();
+    });
+
+    it('should return true if maxTime is not defined', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+      });
+
+      expect(instance.isSameOrBeforeMax('05:00')).toBeTruthy();
+    });
+  });
+
+  describe('isHourAllowed()', () => {
+    it('should check if time hour is allowed', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        allowedHours: [
+          10,
+          12,
+        ],
+      });
+
+      expect(instance.isHourAllowed('05:00')).toBeFalsy();
+      expect(instance.isHourAllowed('10:00')).toBeTruthy();
+      expect(instance.isHourAllowed('12:30')).toBeTruthy();
+    });
+
+    it('should return true if allowedHours is not defined', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+      });
+
+      expect(instance.isHourAllowed('05:00')).toBeTruthy();
+    });
+  });
+
+  describe('isMinuteAllowed()', () => {
+    it('should check if time minute is allowed', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        allowedMinutes: [
+          10,
+          12,
+        ],
+      });
+
+      expect(instance.isMinuteAllowed('05:00')).toBeFalsy();
+      expect(instance.isMinuteAllowed('10:10')).toBeTruthy();
+      expect(instance.isMinuteAllowed('12:12')).toBeTruthy();
+    });
+
+    it('should return true if allowedMinutes is not defined', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+      });
+
+      expect(instance.isMinuteAllowed('05:00')).toBeTruthy();
+    });
+  });
+
+  describe('isSecondAllowed()', () => {
+    it('should check if time second is allowed', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        useSeconds: true,
+        allowedSeconds: [
+          10,
+          12,
+        ],
+      });
+
+      expect(instance.isSecondAllowed('05:00:00')).toBeFalsy();
+      expect(instance.isSecondAllowed('12:00:10')).toBeTruthy();
+      expect(instance.isSecondAllowed('12:12:12')).toBeTruthy();
+      expect(instance.isSecondAllowed('12:00')).toBeFalsy();
+    });
+
+    it('should return true if allowedSeconds is not defined', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        useSeconds: true,
+      });
+
+      expect(instance.isSecondAllowed('05:00:00')).toBeTruthy();
+      expect(instance.isSecondAllowed('05:00')).toBeTruthy();
+    });
+  });
+
+  describe('isFullyValid()', () => {
+    it('should check if a value is valid and displayValue is valid', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        value: '14:00',
+      });
+      expect(instance.isFullyValid()).toBeTruthy();
+      expect(instance.isFullyValid('15:00')).toBeTruthy();
+    });
+  });
+
+  describe('isValidTime()', () => {
+    it('should check if a time is valid', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+      });
+      expect(instance.isValidTime('14:00', 'HH:mm')).toBeTruthy();
+    });
+  });
+
+  describe('formatter()', () => {
+    it('should return valor do display', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        displayFormat: 'hh:mm A',
+      });
+      expect(instance.formatter('14:00')).toBe('02:00 PM');
+    });
+
+    it('should return \'\' when value is empty', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      expect(instance.formatter('')).toBe('');
+    });
+  });
+
+  describe('parser()', () => {
+    it('should return valor da row', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        displayFormat: 'hh:mm A',
+      });
+      expect(instance.parser('04:00 AM')).toBe('04:00');
+    });
+
+    it('should return null when value is empty', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      expect(instance.parser('')).toBeNull();
+    });
+  });
+
+  describe('click()', () => {
+    it('should execute click event', () => {
+      let eventCalled = false;
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        events: {
+          click: () => {
+            eventCalled = true;
+            return true;
+          },
+        },
+      });
+      const event = new Event('click');
+      instance.click(event);
+      expect(eventCalled).toBeTruthy();
+      instance.click();
+      expect(eventCalled).toBeTruthy();
+    });
+
+    it('shouldn\'t throw a error when field doesn\'t have click event', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      delete instance.events.click;
+      expect(() => { instance.click({} as Event); }).not.toThrowError();
+    });
+
+    it('should toggle showTimePicker when event is not prevented', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      instance.showTimePicker = false;
+      instance.click({ defaultPrevented: false } as Event);
+      expect(instance.showTimePicker).toBeTruthy();
+      instance.click({ defaultPrevented: false } as Event);
+      expect(instance.showTimePicker).toBeFalsy();
+      instance.click({ defaultPrevented: true } as Event);
+      expect(instance.showTimePicker).toBeFalsy();
+    });
+  });
+
+  describe('updateMask', () => {
+    it('should not change mask when initial mask is empty string', () => {
+      const date = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        mask: '',
+      });
+
+      expect(date.mask).toEqual('');
+      expect(date.updateMask()).toEqual('');
+    });
+
+    it('when no mask is set, should get mask based on displayFormat', () => {
+      const date = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        displayFormat: 'HH mm',
+      });
+
+      expect(date.updateMask()).toBe('## ##');
+      expect(date.mask).toBe('## ##');
+    });
+
+    it('when initial mask is undefined but mask is set, should get mask based on displayFormat', () => {
+      const date = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        displayFormat: 'hh mm A',
+      });
+
+      date.mask = '#';
+
+      expect(date.updateMask()).toBe('## ## #');
+      expect(date.mask).toBe('## ## #');
+    });
+
+    it('when initial mask is set, should not get mask based on displayFormat', () => {
+      const date = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        mask: '##-##',
+        displayFormat: 'HH mm',
+      });
+
+      expect(date.updateMask()).toBe('##-##');
+      expect(date.mask).toBe('##-##');
+    });
+
+    it('when initial mask is set and value is valid, should not remove masks', () => {
+      const date = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        valueFormat: 'HH:mm',
+        mask: '##:##',
+        displayFormat: 'HH mm',
+      });
+
+      expect(date.updateMask()).toBe('##:##');
+      expect(date.mask).toBe('##:##');
+
+      date.value = '14:30';
+
+      expect(date.updateMask()).toBe('##:##');
+      expect(date.mask).toBe('##:##');
+    });
+
+    it('when initial mask is set and value is set but invalid, should not change mask', () => {
+      const date = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        valueFormat: 'HH:mm',
+        mask: '##:##',
+        displayFormat: 'HH mm',
+      });
+
+      expect(date.updateMask()).toBe('##:##');
+      expect(date.mask).toBe('##:##');
+
+      date.value = '12:45';
+
+      expect(date.updateMask()).toBe('##:##');
+      expect(date.mask).toBe('##:##');
+    });
+  });
+
+  describe('events', () => {
+    it('should call onDateClick event', () => {
+      let onSelectTimeCalled = false;
+
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+      });
+
+      instance.selectTime('20:12');
+      expect(onSelectTimeCalled).toBeFalsy();
+
+      const date = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        events: {
+          onSelectTime: () => { onSelectTimeCalled = true; },
+        },
+      });
+
+      date.selectTime('12:12');
+      expect(onSelectTimeCalled).toBeTruthy();
+    });
+  });
+
+  describe('clear()', () => {
+    it('should clear value and call event', () => {
+      let eventCalled = false;
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        events: {
+          onClear: () => {
+            eventCalled = true;
+          },
+        },
+      });
+      instance.value = '12:00';
+      instance.clear();
+      expect(instance.value).toBeNull();
+      expect(eventCalled).toBeTruthy();
+    });
+  });
+
+
+
+  describe('blur()', () => {
+    it('should clear value, call event and hide time picker', () => {
+      const eventFn = jest.fn();
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        showDatePicker: true,
+      });
+
+      instance.setTimeValue('02:28');
+      const input = document.createElement('input');
+      input.value = '01:01';
+      instance.displayValue = '01:01 AM';
+      const event = new Event('blur');
+      input.dispatchEvent(event);
+      expect(() => { instance.blur(event, {}); }).not.toThrow();
+      expect(eventFn).not.toHaveBeenCalled();
+      expect(instance.value).toBe('01:01');
+      expect(instance.showTimePicker).toBeFalsy();
+
+      instance.events = {
+        blur: eventFn,
+      };
+
+      instance.blur(new Event('blur'), {});
+      instance.displayValue = '';
+      expect(eventFn).toHaveBeenCalled();
+      expect(instance.value).toBeNull();
+    });
+
+    it('should remove time mask if initial mask is set and value is valid', () => {
+      const eventFn = jest.fn();
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        mask: '## ##',
+      });
+
+      instance.displayValue = '12 21';
+      expect(eventFn).not.toHaveBeenCalled();
+
+      instance.events = {
+        blur: eventFn,
+      };
+      instance.blur(new Event('blur'), {});
+
+      expect(eventFn).toHaveBeenCalled();
+      expect(instance.mask).toBe<string>('');
+    });
+  });
+
+  describe('focus()', () => {
+    it('if initial mask and value is set, should assign initialMask to mask', () => {
+      const eventFn = jest.fn();
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        mask: '## ##',
+      });
+
+      instance.mask = '';
+      instance.setTimeValue('12:00');
+
+      expect(eventFn).not.toHaveBeenCalled();
+
+      instance.events = {
+        focus: eventFn,
+      };
+      instance.focus(new Event('focus'), {});
+
+      jest.runAllTimers();
+
+      expect(eventFn).toHaveBeenCalled();
+
+      expect(instance.mask).toBe('');
+    });
+
+    it('if initial mask or value is not set, should not assign initialMask to mask', () => {
+      const eventFn = jest.fn();
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+        displayFormat: 'HH/mm',
+      });
+
+      instance.setTimeValue('12/00');
+
+      expect(eventFn).not.toHaveBeenCalled();
+
+      instance.events = {
+        focus: eventFn,
+      };
+      instance.focus(new Event('focus'), {});
+
+      expect(eventFn).toHaveBeenCalled();
+      expect(instance.updateMask()).toBe<string>('##/##');
+      expect(instance.mask).toBe<string>('##/##');
+    });
+  });
+
+  describe('isoValue', () => {
+    it('should return date in ISO format', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      instance.value = '00:30';
+      expect(instance.isoValue).toBe('00:30');
+      instance.isoValue = '00:30';
+      expect(instance.value).toBe('00:30');
+      expect(instance.timeValidation()).toBeTruthy();
+    });
+
+    it('should not call change event if the value is the same', () => {
+      const changeFn = jest.fn();
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      instance.isoValue = '19:40';
+      expect(changeFn).toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.isoValue = '19:40';
+      expect(changeFn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('displayValue', () => {
+    it('should return date formatted', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        displayFormat: 'HH:mm',
+      });
+      instance.value = '00:45';
+      expect(instance.displayValue).toBe('12:45 AM');
+      instance.displayValue = '12:45 PM';
+      expect(instance.value).toBe('12:45');
+      expect(instance.timeValidation()).toBeTruthy();
+    });
+
+    it('should return date formatted when both day and month are less than 12', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        displayFormat: 'hh-mm A',
+      });
+      instance.value = '00:45';
+      expect(instance.displayValue).toBe('12-45 AM');
+      instance.displayValue = '12-45 AM';
+      expect(instance.value).toBe('00:45');
+      expect(instance.timeValidation()).toBeTruthy();
+
+      instance.value = '13:30'; // MM-DD-YYYY
+      expect(instance.displayValue).toBe('01-30 PM');
+      instance.displayValue = '01-30 PM';
+      expect(instance.value).toBe('13:30');
+      expect(instance.timeValidation()).toBeTruthy();
+    });
+
+    it('when initial mask and complex displayFormat, should use mask on focus and use displayFormat on blur', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        valueFormat: 'HH:mm',
+        displayFormat: 'HH-mm',
+        inputFormat: 'HH*mm',
+      });
+      // set value directly
+      instance.value = '12:30'; // DD/MM/YYYY
+      expect(instance.value).toBe('12:30');
+      expect(instance.displayValue).toBe('12*30');
+
+      // multiple blur/focus calls should not change behavior
+      times(2, () => {
+        instance.blur(new Event('blur'), {});
+        expect(instance.value).toBe('12:30');
+        expect(instance.displayValue).toBe('12-30');
+
+        instance.focus(new Event('focus'), {});
+        jest.runAllTimers();
+        expect(instance.value).toBe('12:30');
+        expect(instance.displayValue).toBe('12*30');
+      });
+    });
+
+    it('when initial mask and complex displayFormat, should behave the same when setting via value/displayValue', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        valueFormat: 'HH:mm',
+        displayFormat: 'HH/mm',
+        mask: '## ##',
+      });
+      instance.value = '00:30'; // DD/MM/YYYY
+      expect(instance.value).toBe('00:30');
+      expect(instance.displayValue).toBe('00 30');
+
+      instance.displayValue = '12 30'; // DD MM YYYY
+      expect(instance.value).toBe('12:30');
+      expect(instance.displayValue).toBe('12 30');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toBe('12:30');
+      expect(instance.displayValue).toBe('12/30');
+    });
+
+    it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        valueFormat: 'HH:mm',
+        displayFormat: 'hh-mm A',
+        mask: '##-## ##',
+      });
+      instance.value = '01:45'; // DD/MM/YYYY
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toBe('01:45');
+      expect(instance.displayValue).toBe('01-45 AM');
+
+      instance.blur(new Event('blur'), {});
+      instance.displayValue = '01-45 PM'; // DD MM YYYY
+      expect(instance.value).toBe('13:45');
+      expect(instance.displayValue).toBe('01-45 PM');
+    });
+
+    it('should display value with no delimiters', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        valueFormat: 'HH:mm',
+        displayFormat: 'HHmm',
+        mask: '## ##',
+      });
+      instance.value = '13:30'; // DD/MM/YYYY
+      expect(instance.value).toBe('13:30');
+      expect(instance.displayValue).toBe('13 30');
+
+      instance.value = '12:09'; // DD MM YYYY
+      expect(instance.value).toBe('12:09');
+      expect(instance.displayValue).toBe('12 09');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toBe('12:09');
+      expect(instance.displayValue).toBe('1209');
+    });
+
+    it('should not call change event if the value is the same', () => {
+      const changeFn = jest.fn();
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        displayFormat: 'HH:mm',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      instance.setTimeValue('19:40');
+      expect(changeFn).not.toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.setTimeValue('19:40');
+      expect(changeFn).not.toHaveBeenCalled();
+
+      instance.setTimeValue('');
+      instance.displayValue = '19:40';
+      expect(changeFn).not.toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.setTimeValue('');
+      expect(changeFn).toHaveBeenCalled();
+    });
+
+    it('should use inputFormat on focus and use displayFormat on blur', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        valueFormat: 'hh:mm A',
+        displayFormat: 'HH:mm',
+        inputFormat: 'HH*mm',
+      });
+      // set value directly
+      instance.value = '10:12 AM'; // DD/MM/YYYY
+      expect(instance.value).toBe('10:12 AM');
+      expect(instance.displayValue).toBe('10:12 AM');
+
+      // multiple blur/focus calls should not change behavior
+      times(2, () => {
+        instance.blur(new Event('blur'), {});
+        expect(instance.value).toBe('10:12');
+        expect(instance.displayValue).toBe('10:12 AM');
+
+        instance.focus(new Event('focus'), {});
+        jest.runAllTimers();
+        expect(instance.value).toBe('10:12');
+        expect(instance.displayValue).toBe('10*12');
+      });
+    });
+
+    it('using inputFormat, should not parse when value is invalid', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        valueFormat: 'HH:mm',
+        displayFormat: 'HH:mm',
+        inputFormat: 'mm:HH',
+      });
+      instance.displayValue = '09:1'; // MM/DD/YYYY
+      expect(instance.value).toBe('09:1');
+      expect(instance.displayValue).toBe('09:1');
+    });
+  });
+
+  describe('setTimeValue()', () => {
+    it('should update displayValue when the value passed is valid', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      instance.setTimeValue('13:30');
+      expect(instance.displayValue).toBe('');
+    });
+
+    it('should clear displayValue when the value passed is empty', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      instance.setTimeValue('13:30');
+      expect(instance.displayValue).toBe('');
+      instance.setTimeValue('');
+      expect(instance.displayValue).toBe('');
+    });
+
+    it('shouldn\'t update displayValue when the value passed is invalid', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      instance.setTimeValue('13:30');
+      expect(instance.displayValue).toBe('');
+      instance.setTimeValue('99:99');
+      expect(instance.displayValue).toBe('');
+    });
+
+    it('should update timeValidation', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      expect(instance.timeValidation()).toBeTruthy();
+      instance.setTimeValue('99:99');
+      expect(instance.timeValidation()).toBeTruthy();
+      instance.setTimeValue('13:30');
+      expect(instance.timeValidation()).toBeTruthy();
+      instance.setTimeValue('99:30');
+      expect(instance.timeValidation()).toBeTruthy();
+      instance.setTimeValue('');
+      expect(instance.timeValidation()).toBeTruthy();
+    });
+
+    it('should not call change event if the value is the same', () => {
+      const changeFn = jest.fn();
+      const instance = new Time({
+        name: 'time',
+        component: 'Time',
+        displayFormat: 'HH:mm',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      instance.setTimeValue('13:30');
+      expect(changeFn).not.toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.setTimeValue('13:30');
+      expect(changeFn).not.toHaveBeenCalled();
+
+      instance.setTimeValue('');
+      expect(changeFn).not.toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.setTimeValue('');
+      expect(changeFn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('formatISOTimeValue()', () => {
+    it('should return parsed value from timeFormat to isoFormat', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      expect(instance.formatISOTimeValue('14:30')).toBe('14:30');
+      expect(instance.formatISOTimeValue('')).toBe('');
+      expect(instance.formatISOTimeValue('99:99')).toBe('');
+    });
+  });
+
+  describe('parseISOTimeValue()', () => {
+    it('should return parsed value from isoFormat to timeFormat', () => {
+      const instance = new Time({ name: 'time', component: 'Time' });
+      expect(instance.parseISOTimeValue('14:30')).toBe('14:30');
+      expect(instance.parseISOTimeValue('')).toBeNull();
+      expect(instance.parseISOTimeValue('99:99')).toBeNull();
+    });
+
+    it('should return parsed value from isoFormat to timeFormat with useSeconds true', () => {
+      const instance = new Time({ name: 'time', component: 'Time', useSeconds: true });
+      expect(instance.parseISOTimeValue('14:30:30')).toBe('14:30:30');
+      expect(instance.parseISOTimeValue('')).toBeNull();
+      expect(instance.parseISOTimeValue('99:99:99')).toBeNull();
+    });
+  });
+
+  describe('FormatterParserProvider', () => {
+    it('should return formatter function', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdTime');
+      expect(formatterFn).toBeInstanceOf(Function);
+    });
+
+    it('should format time', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdTime');
+      expect(formatterFn(null)).toBe('');
+      expect(formatterFn('')).toBe('');
+      expect(formatterFn('15:00', { displayFormat: 'HH:mm' })).toBe('03:00 PM');
+      expect(formatterFn('15:00', { displayFormat: 'h:mm A' })).toBe('3:00 PM');
+      expect(formatterFn('15:00', { timeFormat: '24hr' })).toBe('15:00');
+      expect(formatterFn('aaa', { displayFormat: 'HH:mm' })).toBe('aaa');
+
+      expect(formatterFn('2020-05-29T12:00:00-03:00', {
+        timeFormat: '24hr',
+        useSeconds: true,
+        valueFormat: 'YYYY-MM-DDTHH:mm:ssZ',
+      })).toBe('12:00:00');
+
+      expect(formatterFn('16:00', { displayFormat: 'hh:mm A', valueFormat: 'HH:mm' })).toBe('04:00 PM');
+    });
+
+    it('when value is invalid and mask is set, should get same value', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdTime');
+
+      const formatted = formatterFn('20:12', {
+        valueFormat: 'HH:mm',
+        displayFormat: 'HH:mm',
+        mask: '##:##',
+        initialMask: '##:##',
+      });
+
+      expect(formatted).toBe('20:12');
+    });
+
+    it('when value is valid and mask is set, should get masked value', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdTime');
+
+      const formatted = formatterFn('20:12', {
+        displayFormat: 'hh:mm A',
+        inputFormat: 'HH:mm',
+        mask: '##:##',
+        initialMask: '##:##',
+      });
+
+      expect(formatted).toBe('20:12');
+    });
+
+    it('should return parser function', () => {
+      const parserTimeFn = FormatterParserProvider.getParser('ZdTime');
+      expect(parserTimeFn).toBeInstanceOf(Function);
+    });
+
+    it('should parse time', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdTime');
+      expect(parserFn('12:00')).toBe('12:00');
+      expect(parserFn('aaa')).toBe('aaa');
+      expect(parserFn('')).toBe(null);
+      expect(parserFn('11:00:00 AM', { timeFormat: 'ampm', useSeconds: true })).toBe('11:00:00');
+    });
+
+    it('when formatted value is masked, should remove mask and parse using displayFormat mask', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdTime');
+
+      const parsed = parserFn('20:19', {
+        valueFormat: 'HH:mm',
+        displayFormat: 'hh:mm A',
+        mask: '##:##',
+      });
+
+      expect(parsed).toBe('20:19');
+    });
+
+    it('when formatted value is masked and can\'t be masked using displayFmt mask, should parse using dateFmt mask', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdTime');
+
+      const parsed = parserFn('20-12', {
+        valueFormat: 'HH:mm',
+        displayFormat: 'hi:mm A',
+        mask: '##-##',
+      });
+
+      expect(parsed).toBe('20:12');
+    });
+
+    it('when formatted value is masked and can\'t use neither displayFmt or dateFmt mask, should not parse', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdTime');
+
+      const parsed = parserFn('20-12', {
+        valueFormat: 'Hi:mm',
+        displayFormat: 'hh:mm A',
+        mask: '##-##',
+      });
+
+      expect(parsed).toBe('20-12');
+    });
+
+    describe('getMask()', () => {
+      it('deve retornar máscara formatada quando estiver focado e máscara válida', () => {
+        const instance = new Time({
+          name: 'time',
+          component: 'ZdTime',
+        });
+        instance.mask = 'HH:mm';
+        instance.displayFormat = 'HH:mm '; // espaço no final
+        instance.isFocused = true;
+        expect(instance.getMask()).toBe('##:## ');
+      });
+
+      it('deve retornar vazio se não estiver focado', () => {
+        const instance = new Time({
+          name: 'time',
+          component: 'ZdTime',
+        });
+        instance.mask = 'HH:mm';
+        instance.displayFormat = 'HH:mm';
+        instance.isFocused = false;
+        expect(instance.getMask()).toBe('');
+      });
+
+      it('deve retornar vazio se a máscara contiver "{{"', () => {
+        const instance = new Time({
+          name: 'time',
+          component: 'ZdTime',
+        });
+        instance.mask = '{{dynamic}}';
+        instance.isFocused = true;
+        expect(instance.getMask()).toBe('');
+      });
+
+      it('deve retornar vazio se a máscara não for string', () => {
+        const instance = new Time({
+          name: 'time',
+          component: 'ZdTime',
+        });
+        instance.mask = undefined as any;
+        instance.isFocused = true;
+        expect(instance.getMask()).toBe('');
+      });
+    });
+
+    describe('toMask()', () => {
+      it('deve substituir letras por #', () => {
+        const instance = new Time({
+          name: 'time',
+          component: 'ZdTime',
+        });
+        expect(instance['toMask']('HH:mm:ss')).toBe('##:##:##');
+      });
+
+      it('deve retornar string vazia se input for vazio', () => {
+        const instance = new Time({
+          name: 'time',
+          component: 'ZdTime',
+        });
+        expect(instance['toMask']('')).toBe('');
+      });
+      it('deve retornar vazio se displayFormat for vazio ou undefined', () => {
+      const instance = new Time({
+        name: 'time',
+        component: 'ZdTime',
+      });
+      instance.mask = 'HH:mm';
+      instance.displayFormat = '';
+      instance.isFocused = true;
+      expect(instance.getMask()).toBe('');
+
+      instance.displayFormat = undefined as any;
+      expect(instance.getMask()).toBe('');
+    });
+    });
+  });
+});