@zeedhi/common 3.0.0 → 3.0.2

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

@@ -0,0 +1,1125 @@
+import { FormatterParserProvider, I18n, init } from '@zeedhi/core';
+import times from 'lodash.times';
+import { DateRange } from '../../../../src';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+jest.useFakeTimers();
+
+describe('DateRange', () => {
+  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 DateRange({ name: 'date', component: 'ZdDateRange' });
+      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.dark).toBeFalsy();
+      expect(instance.color).toBe('primary');
+      expect(instance.firstDayOfWeek).toBe(0);
+      expect(instance.fullWidth).toBeFalsy();
+      expect(instance.light).toBeFalsy();
+      expect(instance.locale).toBe('pt-BR');
+      expect(instance.scrollable).toBeFalsy();
+      expect(instance.showWeek).toBeFalsy();
+      expect(instance.splitter).toBe(' ~ ');
+      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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        appendIcon: '',
+        autocomplete: true,
+        dateFormat: 'DD-MM-YYYY',
+        displayFormat: 'DD-MM-YYYY',
+        dark: true,
+        color: 'secondary',
+        firstDayOfWeek: 2,
+        fullWidth: true,
+        light: true,
+        locale: 'en-US',
+        scrollable: true,
+        showWeek: true,
+        splitter: ' <> ',
+        width: 200,
+        helperOptions: ['TODAY'],
+        helperValue: 'TODAY',
+      });
+      expect(instance.appendIcon).toBe('');
+      expect(instance.name).toBe('date');
+      expect(instance.component).toBe('ZdDateRange');
+      expect(instance.autocomplete).toBeTruthy();
+      expect(instance.dateFormat).toBe('DD-MM-YYYY');
+      expect(instance.displayFormat).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.locale).toBe('en-US');
+      expect(instance.scrollable).toBeTruthy();
+      expect(instance.showWeek).toBeTruthy();
+      expect(instance.splitter).toBe(' <> ');
+      expect(instance.width).toBe(200);
+      expect(instance.helperOptions).toEqual(['TODAY']);
+      expect(instance.helperValue).toBe('TODAY');
+    });
+  });
+
+  describe('formatter()', () => {
+    it('should return display value', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'DateRange',
+        displayFormat: 'DD/MM/YYYY',
+      });
+      expect(instance.formatter(['01-31-2020'])).toBe('31/01/2020');
+      expect(instance.formatter(['01-20-2020', '01-31-2020'])).toBe('20/01/2020 ~ 31/01/2020');
+    });
+
+    it('should return \'\' when value is empty', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      expect(instance.formatter([''])).toBe('');
+    });
+  });
+
+  describe('parser()', () => {
+    it('should return row value', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'DateRange',
+        displayFormat: 'DD/MM/YYYY',
+      });
+      expect(instance.parser('31/01/2020')).toStrictEqual(['01-31-2020']);
+      expect(instance.parser('20/01/2020 ~ 31/01/2020')).toStrictEqual(['01-20-2020', '01-31-2020']);
+    });
+
+    it('should return null when value is empty', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      expect(instance.parser('')).toStrictEqual([]);
+    });
+  });
+
+  describe('displayValue', () => {
+    it('should return date formatted', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'DateRange',
+        displayFormat: 'DD/MM/YYYY',
+      });
+      instance.value = ['02-28-2020'];
+      expect(instance.displayValue).toBe('28/02/2020');
+      instance.displayValue = '28/02/2020';
+      expect(instance.value).toStrictEqual(['02-28-2020']);
+      expect(instance.dateValidation()).toBeTruthy();
+
+      instance.value = ['02-20-2020', '02-28-2020'];
+      expect(instance.displayValue).toBe('20/02/2020 ~ 28/02/2020');
+      instance.displayValue = '20/02/2020 ~ 28/02/2020';
+      expect(instance.value).toStrictEqual(['02-20-2020', '02-28-2020']);
+      expect(instance.dateValidation()).toBeTruthy();
+    });
+
+    it('should not call change event if the value is the same', () => {
+      const changeFn = jest.fn();
+      const instance = new DateRange({
+        name: 'date',
+        component: 'DateRange',
+        displayFormat: 'DD/MM/YYYY',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      instance.setDateValue('20/02/2020 ~ 28/02/2020');
+      expect(changeFn).toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.setDateValue('20/02/2020 ~ 28/02/2020');
+      expect(changeFn).not.toHaveBeenCalled();
+    });
+
+    it('should return date formatted when both day and month are less than 12', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'Date',
+        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).toStrictEqual(['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).toStrictEqual(['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 DateRange({
+        name: 'date',
+        component: 'Date',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        inputFormat: 'DD MM YYYY',
+      });
+      // set value directly
+      instance.value = ['10/12/2020', '11/12/2020']; // DD/MM/YYYY
+      expect(instance.value).toStrictEqual(['10/12/2020', '11/12/2020']);
+      expect(instance.displayValue).toBe('10 12 2020 ~ 11 12 2020');
+
+      // multiple blur/focus calls should not change behavior
+      times(2, () => {
+        instance.blur(new Event('blur'), {});
+        expect(instance.value).toStrictEqual(['10/12/2020', '11/12/2020']);
+        expect(instance.displayValue).toBe('December 10, 2020 ~ December 11, 2020');
+
+        instance.focus(new Event('focus'), {});
+        jest.runAllTimers();
+        expect(instance.value).toStrictEqual(['10/12/2020', '11/12/2020']);
+        expect(instance.displayValue).toBe('10 12 2020 ~ 11 12 2020');
+      });
+    });
+
+    it('should order dates when blur event is called', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'Date',
+        dateFormat: 'DD/MM/YYYY',
+      });
+
+      instance.value = ['10/12/2020', '8/12/2020'];
+      expect(instance.value).toStrictEqual(['10/12/2020', '8/12/2020']);
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toStrictEqual(['8/12/2020', '10/12/2020']);
+    });
+
+    it('when initial mask and complex displayFormat, should behave the same when setting via value/displayValue', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'Date',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        mask: '## ## ####',
+      });
+      instance.value = ['08/12/2020', '09/12/2020']; // DD/MM/YYYY
+      expect(instance.value).toStrictEqual(['08/12/2020', '09/12/2020']);
+      expect(instance.displayValue).toBe('08 12 2020 ~ 09 12 2020');
+
+      instance.displayValue = '09 12 2020 ~ 10 12 2020'; // DD MM YYYY
+      expect(instance.value).toStrictEqual(['09/12/2020', '10/12/2020']);
+      expect(instance.displayValue).toBe('09 12 2020 ~ 10 12 2020');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toStrictEqual(['09/12/2020', '10/12/2020']);
+      expect(instance.displayValue).toBe('December 09, 2020 ~ December 10, 2020');
+    });
+
+    it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'Date',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MM/DD/YYYY',
+        mask: '## ## ####',
+      });
+      instance.value = ['08/12/2020', '09/12/2020']; // DD/MM/YYYY
+      expect(instance.value).toStrictEqual(['08/12/2020', '09/12/2020']);
+      expect(instance.displayValue).toBe('12 08 2020 ~ 12 09 2020');
+
+      instance.displayValue = '12 09 2020 ~ 12 10 2020'; // DD MM YYYY
+      expect(instance.value).toStrictEqual(['09/12/2020', '10/12/2020']);
+      expect(instance.displayValue).toBe('12 09 2020 ~ 12 10 2020');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toStrictEqual(['09/12/2020', '10/12/2020']);
+      expect(instance.displayValue).toBe('12/09/2020 ~ 12/10/2020');
+    });
+
+    it('should display value with no delimiters', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'Date',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMDDYYYY',
+        mask: '## ## ####',
+      });
+      instance.value = ['08/12/2020', '09/12/2020']; // DD/MM/YYYY
+      expect(instance.value).toStrictEqual(['08/12/2020', '09/12/2020']);
+      expect(instance.displayValue).toBe('12 08 2020 ~ 12 09 2020');
+
+      instance.displayValue = '12 09 2020 ~ 12 10 2020'; // DD MM YYYY
+      expect(instance.value).toStrictEqual(['09/12/2020', '10/12/2020']);
+      expect(instance.displayValue).toBe('12 09 2020 ~ 12 10 2020');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toStrictEqual(['09/12/2020', '10/12/2020']);
+      expect(instance.displayValue).toBe('12092020 ~ 12102020');
+    });
+
+    it('should use inputFormat on focus and use displayFormat on blur', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'Date',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        inputFormat: 'MM/DD/YYYY',
+      });
+      // set value directly
+      instance.value = ['10/12/2020', '11/12/2020']; // DD/MM/YYYY
+      expect(instance.value).toStrictEqual(['10/12/2020', '11/12/2020']);
+      expect(instance.displayValue).toBe('12/10/2020 ~ 12/11/2020');
+
+      // multiple blur/focus calls should not change behavior
+      times(2, () => {
+        instance.blur(new Event('blur'), {});
+        expect(instance.value).toStrictEqual(['10/12/2020', '11/12/2020']);
+        expect(instance.displayValue).toBe('December 10, 2020 ~ December 11, 2020');
+
+        instance.focus(new Event('focus'), {});
+        jest.runAllTimers();
+        expect(instance.value).toStrictEqual(['10/12/2020', '11/12/2020']);
+        expect(instance.displayValue).toBe('12/10/2020 ~ 12/11/2020');
+      });
+    });
+
+    it('using inputFormat should behave the same when setting via value/displayValue', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'Date',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        inputFormat: 'MM/DD/YYYY',
+      });
+      instance.value = ['08/12/2020', '09/12/2020']; // DD/MM/YYYY
+      expect(instance.value).toStrictEqual(['08/12/2020', '09/12/2020']);
+      expect(instance.displayValue).toBe('12/08/2020 ~ 12/09/2020');
+
+      instance.displayValue = '12/09/2020 ~ 12/10/2020'; // MM/DD/YYYY
+      expect(instance.value).toStrictEqual(['09/12/2020', '10/12/2020']);
+      expect(instance.displayValue).toBe('12/09/2020 ~ 12/10/2020');
+
+      instance.blur(new Event('blur'), {});
+      expect(instance.value).toStrictEqual(['09/12/2020', '10/12/2020']);
+      expect(instance.displayValue).toBe('December 09, 2020 ~ December 10, 2020');
+    });
+
+    it('using inputFormat, should not parse when value is invalid', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'Date',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'MMMM DD, YYYY',
+        inputFormat: 'MM/DD/YYYY',
+      });
+      instance.displayValue = '09/1'; // MM/DD/YYYY
+      expect(instance.value).toStrictEqual(['09/1']);
+      expect(instance.displayValue).toBe('09/1');
+    });
+  });
+
+  describe('setDateValue()', () => {
+    it('should update displayValue when the value passed is valid', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      instance.setDateValue('01-01-2020  ~ 01-02-2020');
+      expect(instance.displayValue).toBe('');
+    });
+
+    it('should display only the first value position if second position equal \'\'', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      instance.setDateValue('01-01-2020 ~ ');
+      expect(instance.displayValue).toBe('');
+    });
+
+    it('should clear displayValue when the value passed is empty', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      instance.setDateValue('01-01-2020 ~ 01-02-2020');
+      expect(instance.displayValue).toBe('01-01-2020 ~ 01-02-2020');
+      instance.setDateValue('');
+      expect(instance.displayValue).toBe('');
+    });
+
+    it('shouldn\'t update displayValue when the value passed is invalid', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      instance.setDateValue('01-01-2020 ~ 01-02-2020');
+      expect(instance.displayValue).toBe('01-01-2020 ~ 01-02-2020');
+      instance.setDateValue('99-99-2020');
+      expect(instance.displayValue).toBe('01-01-2020 ~ 01-02-2020');
+    });
+
+    it('should update dateValidation', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      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 DateRange({
+        name: 'date',
+        component: 'DateRange',
+        displayFormat: 'DD/MM/YYYY',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      instance.setDateValue('28/02/2020 ~ 29/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 DateRange({ name: 'date', component: 'DateRange' });
+      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 DateRange({
+        name: 'date',
+        component: 'Date',
+        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();
+    });
+  });
+
+  describe('isoRangeValue', () => {
+    it('should return date in ISO format', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      instance.value = ['02-28-2020'];
+      expect(instance.isoRangeValue).toStrictEqual(['2020-02-28']);
+      instance.isoRangeValue = ['2020-02-28'];
+      expect(instance.value).toStrictEqual(['02-28-2020']);
+      expect(instance.dateValidation()).toBeTruthy();
+    });
+
+    it('should not call change event if the value is the same', () => {
+      const changeFn = jest.fn();
+      const instance = new DateRange({
+        name: 'date',
+        component: 'DateRange',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      instance.isoRangeValue = ['2020-02-28'];
+      expect(changeFn).toHaveBeenCalled();
+      changeFn.mockClear();
+      instance.isoRangeValue = ['2020-02-28'];
+      expect(changeFn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('formatISODateRangeValue()', () => {
+    it('should return parsed value from dateFormat to isoFormat', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+
+      expect(instance.formatISODateRangeValue('02-28-2020')).toStrictEqual(['2020-02-28']);
+      expect(instance.formatISODateRangeValue('')).toStrictEqual([]);
+      expect(instance.formatISODateRangeValue('02/31/2020')).toStrictEqual([]);
+    });
+  });
+
+  describe('parseISODateRangeValue()', () => {
+    it('should return parsed value from isoFormat to dateFormat', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      expect(instance.parseISODateRangeValue(['2020-02-28'])).toStrictEqual(['02-28-2020']);
+      expect(instance.parseISODateRangeValue([''])).toStrictEqual([]);
+      expect(instance.parseISODateRangeValue([])).toStrictEqual([]);
+      expect(instance.parseISODateRangeValue(['2020-02-31'])).toStrictEqual([]);
+    });
+
+    it('should return parsed ordened value from isoFormat to dateFormat', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      expect(instance.parseISODateRangeValue(['2020-02-28', '2020-02-25'])).toStrictEqual(['02-25-2020', '02-28-2020']);
+      expect(instance.parseISODateRangeValue(['2020-02-25', '2020-02-28'])).toStrictEqual(['02-25-2020', '02-28-2020']);
+    });
+  });
+
+  describe('dateValidation()', () => {
+    it('should return true when dateError is false', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      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 DateRange({ name: 'date', component: 'DateRange' });
+      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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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 DateRange({ name: 'date', component: 'DateRange' });
+      delete instance.events.click;
+      expect(() => { instance.click({} as Event, {}); }).not.toThrowError();
+    });
+
+    it('should toggle showDatePicker when event is not prevented', () => {
+      const instance = new DateRange({ name: 'date', component: 'DateRange' });
+      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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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).toStrictEqual(['01-01-2020']);
+      expect(instance.showDatePicker).toBeFalsy();
+
+      instance.events = {
+        blur: eventFn,
+      };
+      instance.blur(new Event('blur'), {});
+      instance.displayValue = '';
+      expect(eventFn).toHaveBeenCalled();
+      expect(instance.value).toStrictEqual([]);
+    });
+
+    it('should remove date mask if initial mask is set and value is valid', () => {
+      const eventFn = jest.fn();
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        mask: '## ## ####',
+      });
+
+      instance.value = ['12 21 2020', '12 22 2020'];
+      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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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('should change displayValue', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        mask: '## ## ####',
+      });
+
+      instance.value = [];
+      instance.focus(new Event('focus'), {});
+      jest.runAllTimers();
+      expect(instance.displayValue).toBe('');
+
+      instance.value = ['01-01-2022'];
+      instance.focus(new Event('focus'), {});
+      jest.runAllTimers();
+      expect(instance.displayValue).toBe('01-01-2022');
+
+      instance.value = ['01-01-2022', '02-02-2022'];
+      instance.focus(new Event('focus'), {});
+      jest.runAllTimers();
+      expect(instance.displayValue).toBe('01-01-2022 ~ 02-02-2022');
+    });
+
+    it('if initial mask or value is not set, should not assign initialMask to mask', () => {
+      const eventFn = jest.fn();
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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('ZdDateRange');
+      expect(formatterFn).toBeInstanceOf(Function);
+    });
+
+    it('should format date', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdDateRange');
+      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', ''])).toBe('20-12-2019');
+      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('ZdDateRange');
+
+      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('ZdDateRange');
+
+      const formatted = formatterFn(['20/12/2020'], {
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY-MM-DD',
+        mask: '##/##/#### ~ ##/##/####',
+        initialMask: '##/##/#### ~ ##/##/####',
+        unitMask: '##/##/####',
+        splitter: ' ~ ',
+      });
+
+      expect(formatted).toBe('20/12/2020');
+    });
+
+    it('should return parser function', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdDateRange');
+      expect(parserFn).toBeInstanceOf(Function);
+    });
+
+    it('when formatted value is masked, should remove mask and parse using displayFormat mask', () => {
+      const instance = new DateRange({
+        name: 'datePicker',
+        component: 'ZdDateRange',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY-MM-DD',
+        mask: '####/##/##',
+      });
+      const parsed = instance.parser('2019/12/20');
+
+      expect(parsed).toStrictEqual(['20/12/2019']);
+    });
+
+    it('when formatted value is masked and can\'t be masked using displayFmt mask, should parse using dateFmt mask', () => {
+      const instance = new DateRange({
+        name: 'datePicker',
+        component: 'ZdDateRange',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY MMMM, Do',
+        mask: '##-##-####',
+      });
+      const parsed = instance.parser('20-12-2019');
+
+      expect(parsed).toStrictEqual(['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('ZdDateRange');
+
+      const parsed = parserFn('20-12-2019', {
+        dateFormat: 'Do/MM/YYYY',
+        displayFormat: 'YYYY MMMM, Do',
+        mask: '##-##-####',
+      });
+
+      expect(parsed).toStrictEqual(['20-12-2019']);
+    });
+
+    it('should parse date', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdDateRange');
+      expect(parserFn('12-20-2019')).toStrictEqual(['12-20-2019']);
+      expect(parserFn('20-12-2019')).toStrictEqual(['20-12-2019']);
+      expect(parserFn('aaa')).toStrictEqual(['aaa']);
+      expect(parserFn('20-12-2019', {
+        dateFormat: 'Do/MM/YYYY',
+        mask: '##-##-#### ~ ##-##-####',
+        unitMask: '##-##-####',
+      })).toStrictEqual(['20-12-2019']);
+      expect(parserFn('2019-12-20', {
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY-MM-DD',
+      })).toStrictEqual(['20/12/2019']);
+    });
+  });
+
+  describe('togglePicker', () => {
+    it('should toggle showDatePicker value', () => {
+      const date = new DateRange({ name: 'date', component: 'ZdDateRange', 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 DateRange({ name: 'date', component: 'ZdDateRange', appendIcon: 'icon' });
+
+      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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        mask: '',
+      });
+
+      expect(date.mask).toEqual('');
+      expect(date.updateMask()).toEqual('');
+    });
+
+    it('when no mask is set, should get mask based on displayFormat', () => {
+      const date = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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 DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        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('updateHelperHint', () => {
+    beforeEach(() => {
+      I18n.init({});
+    });
+
+    it('should update hint for CURRENT_WEEK', () => {
+      I18n.instance.language = 'pt-BR'; // simula português
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        hint: 'hint',
+        persistentHint: false,
+      });
+
+      instance.updateHelperHint('CURRENT_WEEK');
+      expect(instance.hint).toBe('Semana Atual');
+      expect(instance.persistentHint).toBeTruthy();
+
+      instance.change();
+      expect(instance.hint).toBe('hint');
+      expect(instance.persistentHint).toBeFalsy();
+    });
+
+    it('should update hint for CURRENT_MONTH', () => {
+      I18n.instance.language = 'pt-BR'; // simula português
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        hint: 'hint',
+        persistentHint: false,
+      });
+
+      instance.updateHelperHint('CURRENT_MONTH');
+      expect(instance.hint).toBe('Mês Atual');
+      expect(instance.persistentHint).toBeTruthy();
+    });
+
+    it('should reset hint when helper is empty', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        hint: 'hint',
+        persistentHint: false,
+      });
+
+      instance.updateHelperHint('');
+      expect(instance.hint).toBe('hint');
+      expect(instance.persistentHint).toBeFalsy();
+    });
+  });
+
+  describe('getMaskValue', () => {
+    it('should return mask', () => {
+      const instance = new DateRange({
+        name: 'datePicker',
+        component: 'ZdDateRange',
+        dateFormat: 'DD/MM/YYYY',
+        displayFormat: 'YYYY-MM-DD',
+        mask: '####/##/##',
+      });
+
+      const maskValue = instance.getMaskValue();
+      expect(maskValue.length).toBe(23);
+      expect(maskValue[0]).toEqual(/\d/);
+
+      instance.mask = () => '##/##/## ~ ##/##/##';
+      const maskValue2 = instance.getMaskValue();
+      expect(maskValue2.length).toBe(19);
+      expect(maskValue2[0]).toEqual('#');
+
+      instance.value = ['01/01/2022', '02/02/2022'];
+      const maskValue21 = instance.getMaskValue();
+      expect(maskValue21.length).toBe(19);
+      expect(maskValue21[0]).toEqual('#');
+
+      instance.mask = '';
+      const maskValue3 = instance.getMaskValue();
+      expect(maskValue3.length).toBe(0);
+
+      instance.mask = [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, ' ~ ', /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/];
+      const maskValue4 = instance.getMaskValue();
+      expect(maskValue4.length).toBe(17);
+    });
+  });
+
+describe('DateRange Tests', () => {
+  let dateInput: DateRange;
+
+  beforeEach(() => {
+    dateInput = new DateRange({ name: 'date', component: 'DateInput' });
+  });
+
+  describe('setNativeDate', () => {
+    it('should handle one date', () => {
+      const testDate = new Date(2025, 0, 15); 
+      dateInput.dateFormat = 'YYYY-MM-DD';
+      dateInput.displayFormat = 'DD/MM/YYYY';
+      dateInput.setNativeDate([testDate]);
+
+      expect(dateInput.value).toEqual(['2025-01-15']);
+      expect(dateInput.displayValue).toBe('15/01/2025');
+    });
+
+    it('should handle two dates', () => {
+      const start = new Date(2025, 0, 1);
+      const end = new Date(2025, 0, 5);
+      dateInput.dateFormat = 'YYYY-MM-DD';
+      dateInput.displayFormat = 'DD/MM/YYYY';
+      dateInput.setNativeDate([start, end]);
+
+      expect(dateInput.value).toEqual(['2025-01-01', '2025-01-05']);
+      expect(dateInput.displayValue).toBe('01/01/2025 ~ 05/01/2025');
+    });
+  });
+
+  describe('getNativeDate', () => {
+    it('should return Date objects array for set value', () => {
+      const testDate = new Date(2025, 4, 22); 
+      dateInput.dateFormat = 'YYYY-MM-DD';
+      dateInput.setNativeDate([testDate]);
+
+      const nativeDates = dateInput.getNativeDate();
+      expect(nativeDates[0]).toEqual(testDate);
+    });
+
+    it('should return empty array when no value is set', () => {
+      dateInput.value = '';
+      const nativeDates = dateInput.getNativeDate();
+      expect(nativeDates).toEqual([]);
+    });
+  });
+});
+
+describe('DateRange edge cases', () => {
+  let dateInput: DateRange;
+
+  beforeEach(() => {
+    dateInput = new DateRange({ name: 'date', component: 'DateInput' });
+  });
+
+  it('should handle empty array and set value to empty', () => {
+    dateInput.setNativeDate([]);
+    expect(dateInput.value).toEqual([]);
+  });
+});
+
+
+dayjs.extend(utc);
+
+describe('DateRange map format line 493 coverage', () => {
+  it('should format dates and handle nulls internally', () => {
+    const dateInput = new DateRange({
+      name: 'date',
+      component: 'DateInput',
+      dateFormat: 'YYYY-MM-DD',
+    });
+
+    const start = new Date(2025, 0, 1); // local 1 Jan 2025
+    const end = new Date(2025, 0, 5);   // local 5 Jan 2025
+
+    dateInput.setNativeDate([start, end]);
+
+    expect(dateInput.value).toEqual([
+      dayjs(start).format('YYYY-MM-DD'),
+      dayjs(end).format('YYYY-MM-DD'),
+    ]);
+
+    // apenas uma data
+    dateInput.setNativeDate([start]);
+    expect(dateInput.value).toEqual([dayjs(start).format('YYYY-MM-DD')]);
+
+    // array vazio
+    dateInput.setNativeDate([]);
+    expect(dateInput.value).toEqual([]);
+  });
+});
+
+describe('DateRange map format line 494 coverage', () => {
+  it('should format dates and handle nulls internally', () => {
+    const dateInput = new DateRange({
+      name: 'date',
+      component: 'DateInput',
+      dateFormat: 'YYYY-MM-DD',
+    });
+
+    const start = new Date(2025, 0, 1);
+    const end = new Date(2025, 0, 5);
+
+    // Simula dateObject interno com null no meio
+    (dateInput as any).dateObject = [dayjs(start), null, dayjs(end)];
+
+    const formatted = (dateInput as any).dateObject.map(
+      (obj: any) => obj?.format('YYYY-MM-DD') || ''
+    );
+
+    expect(formatted).toEqual([
+      dayjs(start).format('YYYY-MM-DD'),
+      '',
+      dayjs(end).format('YYYY-MM-DD'),
+    ]);
+  });
+});
+
+describe('DateRange.getNativeDate', () => {
+  it('should return formatted dates for valid dayjs objects', () => {
+    const instance = new DateRange({ name: 'date', component: 'ZdDateRange' });
+    const dayjsArray = [dayjs('2025-01-01'), dayjs('2025-01-05')];
+    (instance as any).dateObject = dayjsArray;
+    const nativeDates = dayjsArray.map((date) => date.toDate());
+    expect(instance.getNativeDate()).toEqual(nativeDates);
+  });
+
+  it('should skip null values', () => {
+    const instance = new DateRange({ name: 'date', component: 'ZdDateRange' });
+    const dayjsArray = [dayjs('2025-01-01'), null, dayjs('2025-01-05')];
+    (instance as any).dateObject = dayjsArray;
+    const nativeDates = dayjsArray.filter((date) => (date !== null)).map((date) => date.toDate());
+    expect(instance.getNativeDate()).toEqual(nativeDates);
+  });
+
+  it('should return empty array if all values are null', () => {
+    const instance = new DateRange({ name: 'date', component: 'ZdDateRange' });
+    (instance as any).dateObject = [null, null];
+    expect(instance.getNativeDate()).toEqual([]);
+  });
+
+  it('should return empty array if dateObject is empty', () => {
+    const instance = new DateRange({ name: 'date', component: 'ZdDateRange' });
+    (instance as any).dateObject = [];
+    expect(instance.getNativeDate()).toEqual([]);
+  });
+});
+
+});