@zeedhi/common 1.112.0 → 3.0.0

package/tests/unit/components/zd-date-input/date-input.spec.ts

@@ -0,0 +1,1111 @@
+import { FormatterParserProvider, I18n, init } from '@zeedhi/core';
+import times from 'lodash.times';
+import { DateInput } from '../../../../src';
+import { mockLoaderGetInstance } from '../../__helpers__';
+
+jest.useFakeTimers();
+
+describe('DateInput', () => {
+  describe('constructor()', () => {
+    beforeEach(() => {
+      jest.spyOn(window.navigator, 'language', 'get').mockReturnValue('pt-BR');
+      I18n.init({});
+    });
+
+    it('should create new date picker with default values', () => {
+      const instance = new DateInput({ name: 'date', component: 'ZdDateInput' });
+      expect(instance.allowedDates).toBeUndefined();
+      expect(instance.appendIcon).toBe('calendar');
+      expect(instance.autocomplete).toBeFalsy();
+      expect(instance.dateFormat).toBe('MM-DD-YYYY');
+      expect(instance.displayFormat).toBe('MM-DD-YYYY');
+      expect(instance.inputFormat).toBeUndefined();
+      expect(instance.dark).toBeFalsy();
+      expect(instance.color).toBe('primary');
+      expect(instance.firstDayOfWeek).toBe(0);
+      expect(instance.fullWidth).toBeFalsy();
+      expect(instance.light).toBeFalsy();
+      expect(instance.showWeek).toBeFalsy();
+      expect(instance.width).toBe(248);
+      expect(instance.helperOptions).toEqual([]);
+      expect(instance.helperValue).toBe('');
+    });
+
+    it('should create new date picker replacing default values', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        allowedDates: ['2021-04-04'],
+        appendIcon: '',
+        autocomplete: true,
+        dateFormat: 'DD-MM-YYYY',
+        displayFormat: 'DD-MM-YYYY',
+        inputFormat: 'DD-MM-YYYY',
+        dark: true,
+        color: 'secondary',
+        firstDayOfWeek: 2,
+        fullWidth: true,
+        light: true,
+        locale: 'en-US',
+        scrollable: true,
+        showWeek: true,
+        width: 200,
+        helperOptions: ['TODAY'],
+        helperValue: 'TODAY',
+      });
+      expect(instance.allowedDates).toEqual(['2021-04-04']);
+      expect(instance.appendIcon).toBe('');
+      expect(instance.name).toBe('date');
+      expect(instance.component).toBe('ZdDateInput');
+      expect(instance.autocomplete).toBeTruthy();
+      expect(instance.dateFormat).toBe('DD-MM-YYYY');
+      expect(instance.displayFormat).toBe('DD-MM-YYYY');
+      expect(instance.inputFormat).toBe('DD-MM-YYYY');
+      expect(instance.dark).toBeTruthy();
+      expect(instance.color).toBe('secondary');
+      expect(instance.firstDayOfWeek).toBe(2);
+      expect(instance.fullWidth).toBeTruthy();
+      expect(instance.light).toBeTruthy();
+      expect(instance.showWeek).toBeTruthy();
+      expect(instance.width).toBe(200);
+      expect(instance.helperOptions).toEqual(['TODAY']);
+      expect(instance.helperValue).toBe('TODAY');
+    });
+  });
+
+  describe('formatter()', () => {
+    it('should return valor do display', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        displayFormat: 'DD/MM/YYYY',
+      });
+      expect(instance.formatter('01-31-2020')).toBe('31/01/2020');
+    });
+
+    it('should return \'\' when value is empty', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      expect(instance.formatter('')).toBe('');
+    });
+  });
+
+  describe('parser()', () => {
+    it('should return valor da row', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        displayFormat: 'DD/MM/YYYY',
+      });
+      expect(instance.parser('31/01/2020')).toBe('01-31-2020');
+    });
+
+    it('should return null when value is empty', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      expect(instance.parser('')).toBeNull();
+    });
+  });
+
+  describe('displayValue', () => {
+    it('should return date formatted', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        displayFormat: 'DD/MM/YYYY',
+      });
+      instance.value = '02-28-2020';
+      expect(instance.displayValue).toBe('28/02/2020');
+      instance.displayValue = '28/02/2020';
+      expect(instance.value).toBe('02-28-2020');
+      expect(instance.dateValidation()).toBeTruthy();
+    });
+
+    it('should return date formatted when both day and month are less than 12', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        displayFormat: 'DD/MM/YYYY',
+      });
+      instance.value = '02-01-2020'; // MM-DD-YYYY
+      expect(instance.displayValue).toBe('01/02/2020');
+      instance.displayValue = '01/02/2020';
+      expect(instance.value).toBe('02-01-2020');
+      expect(instance.dateValidation()).toBeTruthy();
+
+      instance.value = '01-02-2020'; // MM-DD-YYYY
+      expect(instance.displayValue).toBe('02/01/2020');
+      instance.displayValue = '02/01/2020';
+      expect(instance.value).toBe('01-02-2020');
+      expect(instance.dateValidation()).toBeTruthy();
+    });
+
+    it('when initial mask and complex displayFormat, should use mask on focus and use displayFormat on blur', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        inputFormat: 'DD MM YYYY',
+      });
+      // set value directly
+      instance.value = '10/12/2020'; // DD/MM/YYYY
+      expect(instance.value).toBe('10/12/2020');
+      expect(instance.displayValue).toBe('10 12 2020');
+
+      // multiple blur/focus calls should not change behavior
+      times(2, () => {
+        instance.blur(new Event('blur'), {});
+        expect(instance.value).toBe('10/12/2020');
+        expect(instance.displayValue).toBe('December 10, 2020');
+
+        instance.focus(new Event('focus'), {});
+        jest.runAllTimers();
+        expect(instance.value).toBe('10/12/2020');
+        expect(instance.displayValue).toBe('10 12 2020');
+      });
+    });
+
+    it('when initial mask and complex displayFormat, should behave the same when setting via value/displayValue', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        mask: '## ## ####',
+      });
+      instance.value = '08/12/2020'; // DD/MM/YYYY
+      expect(instance.value).toBe('08/12/2020');
+      expect(instance.displayValue).toBe('08 12 2020');
+
+      instance.displayValue = '09 12 2020'; // DD MM YYYY
+      expect(instance.value).toBe('09/12/2020');
+      expect(instance.displayValue).toBe('09 12 2020');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toBe('09/12/2020');
+      expect(instance.displayValue).toBe('December 09, 2020');
+    });
+
+    it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MM/DD/YYYY',
+        mask: '## ## ####',
+      });
+      instance.value = '08/12/2020'; // DD/MM/YYYY
+      expect(instance.value).toBe('08/12/2020');
+      expect(instance.displayValue).toBe('12 08 2020');
+
+      instance.displayValue = '12 09 2020'; // DD MM YYYY
+      expect(instance.value).toBe('09/12/2020');
+      expect(instance.displayValue).toBe('12 09 2020');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toBe('09/12/2020');
+      expect(instance.displayValue).toBe('12/09/2020');
+    });
+
+    it('should display value with no delimiters', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMDDYYYY',
+        mask: '## ## ####',
+      });
+      instance.value = '08/12/2020'; // DD/MM/YYYY
+      expect(instance.value).toBe('08/12/2020');
+      expect(instance.displayValue).toBe('12 08 2020');
+
+      instance.displayValue = '12 09 2020'; // DD MM YYYY
+      expect(instance.value).toBe('09/12/2020');
+      expect(instance.displayValue).toBe('12 09 2020');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toBe('09/12/2020');
+      expect(instance.displayValue).toBe('12092020');
+    });
+
+    it('should not call change event if the value is the same', () => {
+      const changeFn = jest.fn();
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        displayFormat: 'DD/MM/YYYY',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      instance.setDateValue('28/02/2020');
+      expect(changeFn).toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.setDateValue('28/02/2020');
+      expect(changeFn).not.toHaveBeenCalled();
+    });
+
+    it('should use inputFormat on focus and use displayFormat on blur', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        inputFormat: 'MM/DD/YYYY',
+      });
+      // set value directly
+      instance.value = '10/12/2020'; // DD/MM/YYYY
+      expect(instance.value).toBe('10/12/2020');
+      expect(instance.displayValue).toBe('12/10/2020');
+
+      // multiple blur/focus calls should not change behavior
+      times(2, () => {
+        instance.blur(new Event('blur'), {});
+        expect(instance.value).toBe('10/12/2020');
+        expect(instance.displayValue).toBe('December 10, 2020');
+
+        instance.focus(new Event('focus'), {});
+        jest.runAllTimers();
+        expect(instance.value).toBe('10/12/2020');
+        expect(instance.displayValue).toBe('12/10/2020');
+      });
+    });
+
+    it('using inputFormat should behave the same when setting via value/displayValue', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        inputFormat: 'MM/DD/YYYY',
+      });
+      instance.value = '08/12/2020'; // DD/MM/YYYY
+      expect(instance.value).toBe('08/12/2020');
+      expect(instance.displayValue).toBe('12/08/2020');
+
+      instance.displayValue = '12/09/2020'; // MM/DD/YYYY
+      expect(instance.value).toBe('09/12/2020');
+      expect(instance.displayValue).toBe('12/09/2020');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toBe('09/12/2020');
+      expect(instance.displayValue).toBe('December 09, 2020');
+    });
+
+    it('using inputFormat, should not parse when value is invalid', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        inputFormat: 'MM/DD/YYYY',
+      });
+      instance.displayValue = '09/1'; // MM/DD/YYYY
+      expect(instance.value).toBe('09/1');
+      expect(instance.displayValue).toBe('09/1');
+    });
+  });
+
+  describe('setDateValue()', () => {
+    it('should update displayValue when the value passed is valid', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      instance.setDateValue('01-01-2020');
+      expect(instance.displayValue).toBe('01-01-2020');
+    });
+
+    it('should clear displayValue when the value passed is empty', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      instance.setDateValue('01-01-2020');
+      expect(instance.displayValue).toBe('01-01-2020');
+      instance.setDateValue('');
+      expect(instance.displayValue).toBe('');
+    });
+
+    it('shouldn\'t update displayValue when the value passed is invalid', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      instance.setDateValue('01-01-2020');
+      expect(instance.displayValue).toBe('01-01-2020');
+      instance.setDateValue('99-99-2020');
+      expect(instance.displayValue).toBe('01-01-2020');
+    });
+
+    it('should update dateValidation', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      expect(instance.dateValidation()).toBeTruthy();
+      instance.setDateValue('99-99-2020');
+      expect(instance.dateValidation()).toBe(I18n.translate('VALIDATION_INVALID_DATE'));
+      instance.setDateValue('01-01-2020');
+      expect(instance.dateValidation()).toBeTruthy();
+      instance.setDateValue('31-01-2020');
+      expect(instance.dateValidation()).toBe(I18n.translate('VALIDATION_INVALID_DATE'));
+      instance.setDateValue('');
+      expect(instance.dateValidation()).toBeTruthy();
+    });
+
+    it('should not call change event if the value is the same', () => {
+      const changeFn = jest.fn();
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        displayFormat: 'DD/MM/YYYY',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      instance.setDateValue('28/02/2020');
+      expect(changeFn).toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.setDateValue('28/02/2020');
+      expect(changeFn).not.toHaveBeenCalled();
+
+      instance.setDateValue('');
+      expect(changeFn).toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.setDateValue('');
+      expect(changeFn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('isValidDate()', () => {
+    it('should return true when date is valid', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      expect(instance.isValidDate('01/01/01', 'DD/MM/YY')).toBeTruthy();
+      expect(instance.isValidDate('01-01-01', 'DD/MM/YY')).toBeFalsy();
+      expect(instance.isValidDate('31/02/01', 'DD/MM/YY')).toBeFalsy();
+      expect(instance.isValidDate('31/13/01', 'DD/MM/YY')).toBeFalsy();
+      expect(instance.isValidDate('40/01/01', 'DD/MM/YY')).toBeFalsy();
+    });
+
+    it('should return true when date is valid with min/max value', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'MM/DD/YYYY',
+        max: '07/12/2023',
+        min: '07/02/2023',
+      });
+      expect(instance.isValidDate('07/11/2023', 'MM/DD/YYYY')).toBeTruthy();
+      expect(instance.isValidDate('07/12/2023', 'MM/DD/YYYY')).toBeTruthy();
+      expect(instance.isValidDate('07/02/2023', 'MM/DD/YYYY')).toBeTruthy();
+      expect(instance.isValidDate('07/13/2023', 'MM/DD/YYYY')).toBeFalsy();
+      expect(instance.isValidDate('07/01/2023', 'MM/DD/YYYY')).toBeFalsy();
+    });
+
+    it('should return true when date is valid with function allowedDates', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        allowedDates: (date: string) => parseInt(date.split('-')[1], 10) % 2 === 0,
+      });
+      expect(instance.isValidDate('06-11-2023', 'MM-DD-YYYY')).toBeFalsy();
+      expect(instance.isValidDate('06-12-2023', 'MM-DD-YYYY')).toBeTruthy();
+    });
+
+    it('should return true when date is valid with array allowedDates', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        dateFormat: 'MM/DD/YYYY',
+        allowedDates: ['07/11/2023', '07/13/2023'],
+      });
+      expect(instance.isValidDate('07/11/2023', 'MM/DD/YYYY')).toBeTruthy();
+      expect(instance.isValidDate('07/12/2023', 'MM/DD/YYYY')).toBeFalsy();
+      expect(instance.isValidDate('07/13/2023', 'MM/DD/YYYY')).toBeTruthy();
+      expect(instance.isValidDate('07/01/2023', 'MM/DD/YYYY')).toBeFalsy();
+    });
+  });
+
+  describe('formatISODateValue()', () => {
+    it('should return parsed value from dateFormat to isoFormat', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      expect(instance.formatISODateValue('02-28-2020')).toBe('2020-02-28');
+      expect(instance.formatISODateValue('')).toBe('');
+      expect(instance.formatISODateValue('02/31/2020')).toBe('');
+    });
+  });
+
+  describe('parseISODateValue()', () => {
+    it('should return parsed value from isoFormat to dateFormat', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      expect(instance.parseISODateValue('2020-02-28')).toBe('02-28-2020');
+      expect(instance.parseISODateValue('')).toBeNull();
+      expect(instance.parseISODateValue('2020-02-31')).toBeNull();
+    });
+  });
+
+  describe('dateValidation()', () => {
+    it('should return true when dateError is false', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      expect(instance.dateValidation()).toBeTruthy();
+      instance.setDateValue('01-01-2020');
+      expect(instance.dateValidation()).toBeTruthy();
+    });
+
+    it('should return \'Invalid date\' when dateError is true', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      expect(instance.dateValidation()).toBeTruthy();
+      instance.setDateValue('99/99/2020');
+      expect(instance.dateValidation()).toBe(I18n.translate('VALIDATION_INVALID_DATE'));
+    });
+  });
+
+  describe('click()', () => {
+    it('should execute click event', () => {
+      const eventFn = jest.fn();
+      const instance = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        label: 'DatePicker',
+        events: {
+          click: eventFn,
+        },
+      });
+      const event = new Event('click');
+      instance.click(event, {});
+      expect(eventFn).toHaveBeenCalled();
+      instance.click();
+      expect(eventFn).toHaveBeenCalled();
+    });
+
+    it('shouldn\'t throw a error when field doesn\'t have click event', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      delete instance.events.click;
+      expect(() => { instance.click({} as Event, {}); }).not.toThrowError();
+    });
+
+    it('should toggle showDatePicker when event is not prevented', () => {
+      const instance = new DateInput({ name: 'date', component: 'DateInput' });
+      instance.showDatePicker = false;
+      instance.click({ defaultPrevented: false } as Event, {});
+      expect(instance.showDatePicker).toBeTruthy();
+      instance.click({ defaultPrevented: false } as Event, {});
+      expect(instance.showDatePicker).toBeFalsy();
+      instance.click({ defaultPrevented: true } as Event, {});
+      expect(instance.showDatePicker).toBeFalsy();
+    });
+  });
+
+  describe('blur()', () => {
+    it('should clear value, call event and hide date picker', () => {
+      const eventFn = jest.fn();
+      const instance = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        showDatePicker: true,
+      });
+
+      instance.setDateValue('02-28-2020');
+      const input = document.createElement('input');
+      input.value = '01-01-2020';
+      instance.displayValue = '01-01-2020';
+      const event = new Event('blur');
+      input.dispatchEvent(event);
+      expect(() => { instance.blur(event, {}); }).not.toThrow();
+      expect(eventFn).not.toHaveBeenCalled();
+      expect(instance.value).toBe('01-01-2020');
+      expect(instance.showDatePicker).toBeFalsy();
+
+      instance.events = {
+        blur: eventFn,
+      };
+      instance.blur(new Event('blur'), {});
+      instance.displayValue = '';
+      expect(eventFn).toHaveBeenCalled();
+      expect(instance.value).toBeNull();
+    });
+
+    it('should remove date mask if initial mask is set and value is valid', () => {
+      const eventFn = jest.fn();
+      const instance = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        mask: '## ## ####',
+      });
+
+      instance.displayValue = '12 21 2020';
+      expect(eventFn).not.toHaveBeenCalled();
+
+      instance.events = {
+        blur: eventFn,
+      };
+      instance.blur(new Event('blur'), {});
+
+      expect(eventFn).toHaveBeenCalled();
+      expect(instance.mask).toBe<string>('');
+    });
+  });
+
+  describe('mounted', () => {
+    it('should not call the formatter', () => {
+      const setDateValueSpy = jest.fn();
+      const formatterSpy = jest.fn();
+      const instance = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+      });
+
+      instance.setDateValue = setDateValueSpy;
+      instance.formatter = formatterSpy;
+
+      instance.onMounted();
+
+      expect(formatterSpy).not.toHaveBeenCalled();
+      expect(setDateValueSpy).not.toHaveBeenCalled();
+    });
+    it('should call the formatter', () => {
+      const setDateValueSpy = jest.fn();
+      const formatterSpy = jest.fn();
+      const instance = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        value: '02/02/2002',
+      });
+
+      instance.setDateValue = setDateValueSpy;
+      instance.formatter = formatterSpy;
+
+      instance.onMounted();
+
+      expect(formatterSpy).toHaveBeenCalledWith('02/02/2002');
+      expect(setDateValueSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('focus()', () => {
+    it('if initial mask and value is set, should assign initialMask to mask', () => {
+      const eventFn = jest.fn();
+      const instance = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        mask: '## ## ####',
+      });
+
+      instance.mask = '';
+      instance.setDateValue('02-28-2020');
+
+      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 DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        displayFormat: 'DD/MM/YYYY',
+      });
+
+      instance.setDateValue('21-12-2020');
+
+      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('FormatterParserProvider', () => {
+    it('should return formatter function', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
+      expect(formatterFn).toBeInstanceOf(Function);
+
+      const formatterDateTimeFn = FormatterParserProvider.getFormatter('ZdDateTime');
+      expect(formatterDateTimeFn).toBeInstanceOf(Function);
+    });
+
+    it('should format date', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
+      expect(formatterFn('12-20-2019')).toBe('12-20-2019');
+      expect(formatterFn('20-12-2019')).toBe('20-12-2019');
+      expect(formatterFn('aaa')).toBe('aaa');
+      expect(formatterFn('20/12/2019', { dateFormat: 'DD/MM/YYYY', displayFormat: 'YYYY-MM-DD' })).toBe('2019-12-20');
+    });
+
+    it('when value is invalid and mask is set, should get same value', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
+
+      const formatted = formatterFn('20/12', {
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY-MM-DD',
+        mask: '####/##/##',
+        initialMask: '####/##/##',
+      });
+
+      expect(formatted).toBe('20/12');
+    });
+
+    it('when value is valid and mask is set, should get masked value', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
+
+      const formatted = formatterFn('20/12/2020', {
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY-MM-DD',
+        mask: '##/##/####',
+        initialMask: '##/##/####',
+      });
+
+      expect(formatted).toBe('20/12/2020');
+    });
+
+    it('should format date time', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdDateTime');
+      expect(formatterFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
+      expect(formatterFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
+      expect(formatterFn('aaa')).toBe('aaa');
+      expect(formatterFn('')).toBe('');
+      expect(formatterFn('20/12/2019 12:34:56', {
+        dateTimeFormat: 'DD/MM/YYYY HH:mm:ss',
+        displayFormat: 'YYYY-MM-DD HH:mm:ss',
+      })).toBe('2019-12-20 12:34:56');
+    });
+
+    it('should return parser function', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
+      expect(parserFn).toBeInstanceOf(Function);
+      const parserDateTimeFn = FormatterParserProvider.getParser('ZdDateTime');
+      expect(parserDateTimeFn).toBeInstanceOf(Function);
+    });
+
+    it('when formatted value is masked, should remove mask and parse using displayFormat mask', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
+
+      const parsed = parserFn('2019/12/20', {
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY-MM-DD',
+        mask: '####/##/##',
+      });
+
+      expect(parsed).toBe('20/12/2019');
+    });
+
+    it('when formatted value is masked and can\'t be masked using displayFmt mask, should parse using dateFmt mask', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
+
+      const parsed = parserFn('20-12-2019', {
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY MMMM, Do',
+        mask: '##-##-####',
+      });
+
+      expect(parsed).toBe('20/12/2019');
+    });
+
+    it('when formatted value is masked and can\'t use neither displayFmt or dateFmt mask, should not parse', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
+
+      const parsed = parserFn('20-12-2019', {
+        dateFormat: 'Do/MM/YYYY',
+        displayFormat: 'YYYY MMMM, Do',
+        mask: '##-##-####',
+      });
+
+      expect(parsed).toBe('20-12-2019');
+    });
+
+    it('should parse date', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
+      expect(parserFn('12-20-2019')).toBe('12-20-2019');
+      expect(parserFn('20-12-2019')).toBe('20-12-2019');
+      expect(parserFn('aaa')).toBe('aaa');
+      expect(parserFn('2019-12-20', { dateFormat: 'DD/MM/YYYY', displayFormat: 'YYYY-MM-DD' })).toBe('20/12/2019');
+    });
+
+    it('should parse date time', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdDateTime');
+      expect(parserFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
+      expect(parserFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
+      expect(parserFn('aaa')).toBe('aaa');
+      expect(parserFn('')).toBeNull();
+      expect(parserFn('2019-12-20 12:34:56', {
+        dateTimeFormat: 'DD/MM/YYYY HH:mm:ss',
+        displayFormat: 'YYYY-MM-DD HH:mm:ss',
+      })).toBe('20/12/2019 12:34:56');
+    });
+  });
+
+  describe('togglePicker', () => {
+    it('should toggle showDatePicker value', () => {
+      const date = new DateInput({ name: 'date', component: 'ZdDateInput', showDatePicker: false });
+
+      date.togglePicker();
+      expect(date.showDatePicker).toBeTruthy();
+
+      date.togglePicker();
+      expect(date.showDatePicker).toBeFalsy();
+    });
+  });
+
+  describe('appendIconClick', () => {
+    beforeEach(() => {
+      init({
+        controllers: {
+          AppController: class AppController {
+            public appendIcon = 'icon';
+          },
+        },
+      });
+    });
+
+    it('should open datePicker', () => {
+      const date = new DateInput({ name: 'date', component: 'ZdDateInput', appendIcon: '{{AppController.appendIcon}}' });
+      date.onCreated();
+
+      expect(date.appendIcon).toBe('icon');
+      expect(date.showDatePicker).toBeFalsy();
+      date.appendIconClick({} as Event, {});
+      expect(date.showDatePicker).toBeTruthy();
+    });
+
+    it('should not open datePicker if click is defaultPrevented', () => {
+      const date = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        events: {
+          click: ({ event }: any) => { event.defaultPrevented = true; },
+        },
+      });
+
+      expect(date.showDatePicker).toBeFalsy();
+      date.appendIconClick({} as Event, {});
+      expect(date.showDatePicker).toBeFalsy();
+    });
+  });
+
+  describe('updateMask', () => {
+    it('should not change mask when initial mask is empty string', () => {
+      const date = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        mask: '',
+      });
+
+      expect(date.mask).toEqual('');
+      expect(date.updateMask()).toEqual('');
+    });
+
+    it('when no mask is set, should get mask based on displayFormat', () => {
+      const date = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        displayFormat: 'DD MM YYYY',
+      });
+
+      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 DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        displayFormat: 'DD MM YYYY',
+      });
+
+      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 DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        mask: '##-##-####',
+        displayFormat: 'DD MM YYYY',
+      });
+
+      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 DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        dateFormat: 'DD/MM/YYYY',
+        mask: '##-##-####',
+        displayFormat: 'DD MM YYYY',
+      });
+
+      expect(date.updateMask()).toBe('##-##-####');
+      expect(date.mask).toBe('##-##-####');
+
+      date.value = '17/11/2020';
+
+      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 DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        dateFormat: 'DD/MM/YYYY',
+        mask: '##-##-####',
+        displayFormat: 'DD MM YYYY',
+      });
+
+      expect(date.updateMask()).toBe('##-##-####');
+      expect(date.mask).toBe('##-##-####');
+
+      date.value = '17/11';
+
+      expect(date.updateMask()).toBe('##-##-####');
+      expect(date.mask).toBe('##-##-####');
+    });
+  });
+
+  describe('events', () => {
+    it('should call onDateClick event', () => {
+      const spy = jest.fn();
+
+      const date = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        events: {
+          onSelectDate: spy,
+        },
+      });
+
+      date.selectDate('12/12/2021');
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('updateHelperHint', () => {
+    it('should update hint', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'ZdDateInput',
+        hint: 'hint',
+        persistentHint: false,
+      });
+
+      expect(instance.hint).toBe('hint');
+      expect(instance.persistentHint).toBeFalsy();
+
+      instance.helperValue = 'TODAY';
+      instance.updateHelperHint();
+      expect(instance.hint).toBe('Hoje');
+      expect(instance.persistentHint).toBeTruthy();
+
+      instance.change();
+      expect(instance.hint).toBe('hint');
+      expect(instance.persistentHint).toBeFalsy();
+    });
+
+    it('if helperValue is undefined, should not update hint', () => {
+      const instance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+        hint: 'hint',
+        persistentHint: false,
+      });
+
+      expect(instance.hint).toBe('hint');
+      expect(instance.persistentHint).toBeFalsy();
+
+      instance.helperValue = undefined;
+      instance.updateHelperHint();
+      expect(instance.hint).toBe('hint');
+      expect(instance.persistentHint).toBeFalsy();
+    });
+  });
+
+  describe('value accessor', () => {
+    it('when accessor changes, should change date input value', () => {
+      const controller = {
+        value: '05-22-2025',
+      }
+      const mock = mockLoaderGetInstance(controller)
+      const instance = new DateInput({
+        name: 'input',
+        component: 'ZdDateInput',
+        value: '{{AppController.value}}',
+      });
+      instance.onCreated();
+
+      expect(instance.value).toBe('05-22-2025');
+
+      controller.value = '05-23-2025';
+      expect(instance.value).toBe('05-23-2025');
+
+      instance.value = '05-24-2025';
+      expect(controller.value).toBe('05-24-2025');
+
+      mock.mockClear();
+    })
+  });
+
+  describe('getMask()', () => {
+    let dateInputInstance!: DateInput;
+
+    beforeEach(() => {
+      dateInputInstance = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+      });
+    });
+
+    it('should return an empty string if isFocused is false, regardless of format properties', () => {
+      dateInputInstance.isFocused = false;
+      dateInputInstance.inputFormat = 'YYYY-MM-DD';
+      dateInputInstance.displayFormat = 'DD/MM/YYYY';
+      expect(dateInputInstance.getMask()).toBe('');
+    });
+
+    it('when isFocused is true, should return masked inputFormat if inputFormat is a non-empty string', () => {
+      dateInputInstance.isFocused = true;
+      dateInputInstance.inputFormat = 'YYYY-MM-DD HH:mm';
+      dateInputInstance.displayFormat = 'MM/DD/YY'; // This should be ignored
+      expect(dateInputInstance.getMask()).toBe('####-##-## ##:##');
+    });
+
+    it('when isFocused is true, should return masked displayFormat if inputFormat is undefined and displayFormat is a non-empty string', () => {
+      dateInputInstance.isFocused = true;
+      dateInputInstance.inputFormat = undefined;
+      dateInputInstance.displayFormat = 'DD.MM.YYYY';
+      expect(dateInputInstance.getMask()).toBe('##.##.####');
+    });
+
+    it('when isFocused is true, should return an empty string if both inputFormat and displayFormat are undefined', () => {
+      dateInputInstance.isFocused = true;
+      dateInputInstance.inputFormat = undefined;
+      dateInputInstance.displayFormat = '';
+      expect(dateInputInstance.getMask()).toBe('');
+    });
+  });
+
+  describe('getNativeDate', () => {
+    let dateInput: DateInput;
+
+    beforeEach(() => {
+      dateInput = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+      });
+    });
+
+    it('should return the correct native Date object after setting a value', () => {
+      const dateString = '05-22-2025';
+      dateInput.value = dateString; // This should set dateObject internally
+      const nativeDate = dateInput.getNativeDate();
+      expect(nativeDate).toBeInstanceOf(Date);
+      expect(nativeDate?.toISOString().substring(0, 10)).toBe('2025-05-22');
+    });
+
+    it('when instance value is not set, should return null', () => {
+      dateInput.value = '';
+      const nativeDate = dateInput.getNativeDate();
+      expect(nativeDate).toBeNull();
+    });
+  });
+
+  describe('setNativeDate', () => {
+    let dateInput: DateInput;
+
+    beforeEach(() => {
+      dateInput = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+      });
+    });
+
+    it('should update the internal value based on the dateFormat', () => {
+      const testDate = new Date(2026, 11, 25); // December 25, 2026
+      dateInput.dateFormat = 'YYYY-MM-DD'; // Ensure dateFormat is set for predictable value
+      dateInput.setNativeDate(testDate);
+      expect(dateInput.value).toBe('2026-12-25');
+    });
+
+    it('should update the displayValue based on the set value and displayFormat', () => {
+      const testDate = new Date(2027, 2, 10); // March 10, 2027
+      dateInput.dateFormat = 'YYYY-MM-DD';
+      dateInput.displayFormat = 'DD/MM/YYYY';
+      dateInput.setNativeDate(testDate);
+      expect(dateInput.displayValue).toBe('10/03/2027');
+    });
+  });
+
+  describe('getAllowedDates', () => {
+    let dateInput: DateInput;
+
+    beforeEach(() => {
+      dateInput = new DateInput({
+        name: 'date',
+        component: 'DateInput',
+      });
+    });
+
+    it('should return true if allowedDates is undefined', () => {
+      dateInput.allowedDates = undefined;
+      const testDate = new Date(2023, 0, 15); // January 15, 2023
+      expect(dateInput.getAllowedDates(testDate)).toBe(true);
+    });
+
+    it('should return false if allowedDates is an empty array', () => {
+      dateInput.allowedDates = [];
+      const testDate = new Date(2023, 0, 15); // January 15, 2023
+      expect(dateInput.getAllowedDates(testDate)).toBe(false);
+    });
+
+    it('should return true if allowedDates is a function and returns true for the date (MM-DD-YYYY format)', () => {
+      // The function receives the date formatted by dateFormat
+      dateInput.allowedDates = (dateString) => dateString === '01-15-2023';
+      const testDate = new Date(2023, 0, 15); // January 15, 2023
+      expect(dateInput.getAllowedDates(testDate)).toBe(true);
+    });
+
+    it('should return false if allowedDates is a function and returns false for the date (MM-DD-YYYY format)', () => {
+      // The function receives the date formatted by dateFormat
+      dateInput.allowedDates = (dateString) => dateString === '01-16-2023';
+      const testDate = new Date(2023, 0, 15); // January 15, 2023
+      expect(dateInput.getAllowedDates(testDate)).toBe(false);
+    });
+
+    it('should return true if allowedDates is an array and includes the date string (MM-DD-YYYY format)', () => {
+      // The array elements should match the dateFormat
+      dateInput.allowedDates = ['01-10-2023', '01-15-2023', '01-20-2023'];
+      const testDate = new Date(2023, 0, 15); // January 15, 2023
+      expect(dateInput.getAllowedDates(testDate)).toBe(true);
+    });
+
+    it('should return false if allowedDates is an array and does not include the date string (MM-DD-YYYY format)', () => {
+      // The array elements should match the dateFormat
+      dateInput.allowedDates = ['01-10-2023', '01-20-2023'];
+      const testDate = new Date(2023, 0, 15); // January 15, 2023
+      expect(dateInput.getAllowedDates(testDate)).toBe(false);
+    });
+
+    it('should use the component\'s dateFormat for converting the date object to string for comparison', () => {
+      // Test with a different date format set directly on the component
+      dateInput.dateFormat = 'YYYY/MM/DD';
+      dateInput.allowedDates = ['2023/01/15']; // Allowed date in YYYY/MM/DD format
+      const testDate = new Date(2023, 0, 15); // January 15, 2023
+      expect(dateInput.getAllowedDates(testDate)).toBe(true);
+
+      dateInput.allowedDates = (dateString) => dateString === '2023/01/16'; // Function expects YYYY/MM/DD
+      expect(dateInput.getAllowedDates(testDate)).toBe(false);
+    });
+  });
+});