@zeedhi/common 3.0.6 → 3.0.7

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

@@ -2,8 +2,9 @@ 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';
+import { mockI18n } from '../../__helpers__/mock-i18n';
 
+mockI18n();
 jest.useFakeTimers();
 
 describe('DateRange', () => {
@@ -175,6 +176,7 @@ describe('DateRange', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'DD MM YYYY',
       });
+      instance.focus(new Event('focus'), {});
       // set value directly
       instance.value = ['10/12/2020', '11/12/2020']; // DD/MM/YYYY
       expect(instance.value).toStrictEqual(['10/12/2020', '11/12/2020']);
@@ -207,69 +209,6 @@ describe('DateRange', () => {
       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',
@@ -278,6 +217,7 @@ describe('DateRange', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'MM/DD/YYYY',
       });
+      instance.focus(new Event('focus'), {});
       // set value directly
       instance.value = ['10/12/2020', '11/12/2020']; // DD/MM/YYYY
       expect(instance.value).toStrictEqual(['10/12/2020', '11/12/2020']);
@@ -304,6 +244,7 @@ describe('DateRange', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'MM/DD/YYYY',
       });
+      instance.focus(new Event('focus'), {});
       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');
@@ -609,97 +550,184 @@ describe('DateRange', () => {
       expect(eventFn).toHaveBeenCalled();
       expect(instance.value).toStrictEqual([]);
     });
+  });
 
-    it('should remove date mask if initial mask is set and value is valid', () => {
+  describe('focus()', () => {
+    it('should call super.focus', () => {
       const eventFn = jest.fn();
       const instance = new DateRange({
         name: 'date',
         component: 'ZdDateRange',
-        mask: '## ## ####',
+        events: {
+          focus: eventFn,
+        },
       });
 
-      instance.value = ['12 21 2020', '12 22 2020'];
-      expect(eventFn).not.toHaveBeenCalled();
-
-      instance.events = {
-        blur: eventFn,
-      };
-      instance.blur(new Event('blur'), {});
-
+      const event = new Event('focus');
+      instance.focus(event, {});
       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();
+    it('should not update displayValue when inputFormat is not set', () => {
       const instance = new DateRange({
         name: 'date',
         component: 'ZdDateRange',
-        mask: '## ## ####',
+        dateFormat: 'MM-DD-YYYY',
+        displayFormat: 'DD/MM/YYYY',
+        // No inputFormat
       });
 
-      instance.mask = '';
-      instance.setDateValue('02-28-2020');
+      instance.value = ['01-15-2020'];
+      const originalDisplayValue = instance.displayValue;
 
-      expect(eventFn).not.toHaveBeenCalled();
+      instance.focus(new Event('focus'), {});
+      
+      // Display value should not change since inputFormat is not set
+      expect(instance.displayValue).toBe(originalDisplayValue);
+    });
+
+    it('should not update displayValue when value is not set', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        dateFormat: 'MM-DD-YYYY',
+        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'YYYY-MM-DD',
+      });
+
+      // No value set
+      instance.value = [];
+      const originalDisplayValue = instance.displayValue;
 
-      instance.events = {
-        focus: eventFn,
-      };
       instance.focus(new Event('focus'), {});
+      
+      // Display value should not change since value is not set
+      expect(instance.displayValue).toBe(originalDisplayValue);
+    });
 
-      jest.runAllTimers();
+    it('should not update displayValue when first date is invalid', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        dateFormat: 'MM-DD-YYYY',
+        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'YYYY-MM-DD',
+      });
 
-      expect(eventFn).toHaveBeenCalled();
+      // Set invalid first date
+      instance.value = ['invalid-date'];
+      const originalDisplayValue = instance.displayValue;
 
-      expect(instance.mask).toBe('## ## #### ~ ## ## ####');
+      instance.focus(new Event('focus'), {});
+      
+      // Display value should not change since first date is invalid
+      expect(instance.displayValue).toBe(originalDisplayValue);
     });
 
-    it('should change displayValue', () => {
+    it('should not update displayValue when second date is invalid', () => {
       const instance = new DateRange({
         name: 'date',
         component: 'ZdDateRange',
-        mask: '## ## ####',
+        dateFormat: 'MM-DD-YYYY',
+        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'YYYY-MM-DD',
       });
 
-      instance.value = [];
+      // Set valid first date but invalid second date
+      instance.value = ['01-15-2020', 'invalid-date'];
+      const originalDisplayValue = instance.displayValue;
+
       instance.focus(new Event('focus'), {});
-      jest.runAllTimers();
-      expect(instance.displayValue).toBe('');
+      
+      // Display value should not change since second date is invalid
+      expect(instance.displayValue).toBe(originalDisplayValue);
+    });
+
+    it('should update displayValue with only first date when second date is not present', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        dateFormat: 'MM-DD-YYYY',
+        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'YYYY-MM-DD',
+      });
+
+      instance.value = ['01-15-2020'];
 
-      instance.value = ['01-01-2022'];
       instance.focus(new Event('focus'), {});
-      jest.runAllTimers();
-      expect(instance.displayValue).toBe('01-01-2022');
+      
+      // Display value should be formatted with inputFormat (only first date)
+      expect(instance.displayValue).toBe('2020-01-15');
+    });
+
+    it('should update displayValue with both dates when both are present', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        dateFormat: 'MM-DD-YYYY',
+        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'YYYY-MM-DD',
+      });
+
+      instance.value = ['01-15-2020', '01-20-2020'];
 
-      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');
+      
+      // Display value should be formatted with inputFormat (both dates)
+      expect(instance.displayValue).toBe('2020-01-15 ~ 2020-01-20');
     });
 
-    it('if initial mask or value is not set, should not assign initialMask to mask', () => {
-      const eventFn = jest.fn();
+    it('should use displayFormat as fallback when inputFormat is set but format is needed', () => {
       const instance = new DateRange({
         name: 'date',
         component: 'ZdDateRange',
+        dateFormat: 'MM-DD-YYYY',
         displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'YYYY-MM-DD',
       });
 
-      instance.setDateValue('21-12-2020');
+      instance.value = ['01-15-2020', '01-20-2020'];
 
-      expect(eventFn).not.toHaveBeenCalled();
+      instance.focus(new Event('focus'), {});
+      
+      // The format used should be inputFormat (since it's set)
+      expect(instance.displayValue).toBe('2020-01-15 ~ 2020-01-20');
+    });
+
+    it('should handle empty second value in array', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        dateFormat: 'MM-DD-YYYY',
+        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'YYYY-MM-DD',
+      });
+
+      // First date is set, second is empty string
+      instance.value = ['01-15-2020', ''];
 
-      instance.events = {
-        focus: eventFn,
-      };
       instance.focus(new Event('focus'), {});
+      
+      // Display value should show only first date
+      expect(instance.displayValue).toBe('2020-01-15');
+    });
 
-      expect(eventFn).toHaveBeenCalled();
-      expect(instance.updateMask()).toBe<string>('##/##/#### ~ ##/##/####');
-      expect(instance.mask).toBe<string>('##/##/#### ~ ##/##/####');
+    it('should preserve splitter character when updating displayValue', () => {
+      const instance = new DateRange({
+        name: 'date',
+        component: 'ZdDateRange',
+        dateFormat: 'MM-DD-YYYY',
+        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'YYYY-MM-DD',
+        splitter: ' <-> ',
+      });
+
+      instance.value = ['01-15-2020', '01-20-2020'];
+
+      instance.focus(new Event('focus'), {});
+      
+      // Display value should use custom splitter
+      expect(instance.displayValue).toBe('2020-01-15 <-> 2020-01-20');
     });
   });
 
@@ -721,9 +749,12 @@ describe('DateRange', () => {
   });
 
   describe('FormatterParserProvider', () => {
+    const formatterFn = FormatterParserProvider.getFormatter('ZdDateRange');
+    const parserFn = FormatterParserProvider.getParser('ZdDateRange');
+
     it('should return formatter function', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateRange');
       expect(formatterFn).toBeInstanceOf(Function);
+      expect(parserFn).toBeInstanceOf(Function);
     });
 
     it('should format date', () => {
@@ -748,66 +779,12 @@ describe('DateRange', () => {
       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']);
@@ -820,6 +797,15 @@ describe('DateRange', () => {
         dateFormat: 'DD/MM/YYYY',
         displayFormat: 'YYYY-MM-DD',
       })).toStrictEqual(['20/12/2019']);
+      expect(parserFn('06-06-2019 ~ ')).toStrictEqual(['06-06-2019']);
+    });
+
+    it('when value is not following inputFormat, should not parse it', () => {
+      expect(parserFn('December 06, 2020', { inputFormat: 'DD MM YYYY', isFocused: true })).toEqual(['December 06, 2020'])
+    });
+
+    it('when value is invalid, should not parse it', () => {
+      expect(parserFn('99 99 9999', { inputFormat: 'DD MM YYYY', isFocused: true })).toEqual(['99 99 9999'])
     });
   });
 
@@ -870,98 +856,8 @@ describe('DateRange', () => {
     });
   });
 
-  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',
@@ -970,7 +866,7 @@ describe('DateRange', () => {
       });
 
       instance.updateHelperHint('CURRENT_WEEK');
-      expect(instance.hint).toBe('Semana Atual');
+      expect(instance.hint).toBe('DATE_HELPERVALUE_CURRENT_WEEK');
       expect(instance.persistentHint).toBeTruthy();
 
       instance.change();
@@ -979,7 +875,6 @@ describe('DateRange', () => {
     });
 
     it('should update hint for CURRENT_MONTH', () => {
-      I18n.instance.language = 'pt-BR'; // simula português
       const instance = new DateRange({
         name: 'date',
         component: 'ZdDateRange',
@@ -988,7 +883,7 @@ describe('DateRange', () => {
       });
 
       instance.updateHelperHint('CURRENT_MONTH');
-      expect(instance.hint).toBe('Mês Atual');
+      expect(instance.hint).toBe('DATE_HELPERVALUE_CURRENT_MONTH');
       expect(instance.persistentHint).toBeTruthy();
     });
 
@@ -1006,286 +901,288 @@ describe('DateRange', () => {
     });
   });
 
-  describe('getMaskValue', () => {
-    it('should return mask', () => {
-      const instance = new DateRange({
-        name: 'datePicker',
-        component: 'ZdDateRange',
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'YYYY-MM-DD',
-        mask: '####/##/##',
-      });
+  describe('DateRange Tests', () => {
+    let dateInput: DateRange;
 
-      const maskValue = instance.getMaskValue();
-      expect(maskValue.length).toBe(23);
-      expect(maskValue[0]).toEqual(/\d/);
+    beforeEach(() => {
+      dateInput = new DateRange({ name: 'date', component: 'DateInput' });
+    });
 
-      instance.mask = () => '##/##/## ~ ##/##/##';
-      const maskValue2 = instance.getMaskValue();
-      expect(maskValue2.length).toBe(19);
-      expect(maskValue2[0]).toEqual('#');
+    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]);
 
-      instance.value = ['01/01/2022', '02/02/2022'];
-      const maskValue21 = instance.getMaskValue();
-      expect(maskValue21.length).toBe(19);
-      expect(maskValue21[0]).toEqual('#');
+        expect(dateInput.value).toEqual(['2025-01-15']);
+        expect(dateInput.displayValue).toBe('15/01/2025');
+      });
 
-      instance.mask = '';
-      const maskValue3 = instance.getMaskValue();
-      expect(maskValue3.length).toBe(0);
+      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]);
 
-      instance.mask = [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, ' ~ ', /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/];
-      const maskValue4 = instance.getMaskValue();
-      expect(maskValue4.length).toBe(17);
-    });
-  });
+        expect(dateInput.value).toEqual(['2025-01-01', '2025-01-05']);
+        expect(dateInput.displayValue).toBe('01/01/2025 ~ 05/01/2025');
+      });
 
-describe('DateRange Tests', () => {
-  let dateInput: DateRange;
+      it('should handle more than two dates, using extremities', () => {
+        const start = new Date(2025, 0, 1);
+        const middle = new Date(2025, 0, 3);
+        const end = new Date(2025, 0, 5);
+        dateInput.dateFormat = 'YYYY-MM-DD';
+        dateInput.displayFormat = 'DD/MM/YYYY';
+        dateInput.setNativeDate([start, middle, end]);
 
-  beforeEach(() => {
-    dateInput = new DateRange({ name: 'date', component: 'DateInput' });
-  });
+        expect(dateInput.value).toEqual(['2025-01-01', '2025-01-05']);
+      });
 
-  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]);
+      it('should handle an empty array', () => {
+        dateInput.value = ['2024-12-31'];
+        dateInput.setNativeDate([]);
+        expect(dateInput.value).toEqual([]);
+      });
 
-      expect(dateInput.value).toEqual(['2025-01-15']);
-      expect(dateInput.displayValue).toBe('15/01/2025');
-    });
+      it('should handle a single date without an end date', () => {
+        const start = new Date(2025, 0, 1);
+        dateInput.dateFormat = 'YYYY-MM-DD';
+        dateInput.displayFormat = 'DD/MM/YYYY';
+        dateInput.allowedDates = (date) => date === '2025-01-01';
 
-    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]);
+        dateInput.setNativeDate([start]);
 
-      expect(dateInput.value).toEqual(['2025-01-01', '2025-01-05']);
-      expect(dateInput.displayValue).toBe('01/01/2025 ~ 05/01/2025');
-    });
+        expect(dateInput.value).toEqual(['2025-01-01']);
+      });
 
-    it('should handle more than two dates, using extremities', () => {
-      const start = new Date(2025, 0, 1);
-      const middle = new Date(2025, 0, 3);
-      const end = new Date(2025, 0, 5);
-      dateInput.dateFormat = 'YYYY-MM-DD';
-      dateInput.displayFormat = 'DD/MM/YYYY';
-      dateInput.setNativeDate([start, middle, end]);
+      it('should not set date if any date in range is not allowed', () => {
+        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.allowedDates = (date) => date !== '2025-01-03';
 
-      expect(dateInput.value).toEqual(['2025-01-01', '2025-01-05']);
-    });
+        dateInput.value = ['2024-12-31'];
+        dateInput.setNativeDate([start, end]);
 
-    it('should handle an empty array', () => {
-      dateInput.value = ['2024-12-31'];
-      dateInput.setNativeDate([]);
-      expect(dateInput.value).toEqual([]);
-    });
+        // Value should not change
+        expect(dateInput.value).toEqual(['2024-12-31']);
+      });
 
-    it('should handle a single date without an end date', () => {
-      const start = new Date(2025, 0, 1);
-      dateInput.dateFormat = 'YYYY-MM-DD';
-      dateInput.displayFormat = 'DD/MM/YYYY';
-      dateInput.allowedDates = (date) => date === '2025-01-01';
+      it('should handle null or undefined dates to cover fallback', () => {
+        dateInput.value = ['2025-01-01'];
 
-      dateInput.setNativeDate([start]);
+        // Test with null to cover `(dates || [])`
+        dateInput.setNativeDate(null as any);
+        expect(dateInput.value).toEqual([]);
 
-      expect(dateInput.value).toEqual(['2025-01-01']);
+        // Reset and test with undefined
+        dateInput.value = ['2025-01-01'];
+        dateInput.setNativeDate(undefined as any);
+        expect(dateInput.value).toEqual([]);
+      });
     });
 
-    it('should not set date if any date in range is not allowed', () => {
-      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.allowedDates = (date) => date !== '2025-01-03';
+    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]);
 
-      dateInput.value = ['2024-12-31'];
-      dateInput.setNativeDate([start, end]);
+        const nativeDates = dateInput.getNativeDate();
+        expect(nativeDates[0]).toEqual(testDate);
+      });
 
-      // Value should not change
-      expect(dateInput.value).toEqual(['2024-12-31']);
+      it('should return empty array when no value is set', () => {
+        dateInput.value = '';
+        const nativeDates = dateInput.getNativeDate();
+        expect(nativeDates).toEqual([]);
+      });
     });
 
-    it('should handle null or undefined dates to cover fallback', () => {
-      dateInput.value = ['2025-01-01'];
+    describe('getAllowedDates', () => {
+      it('should return true if allowedDates is not set', () => {
+        const instance = new DateRange({ name: 'date', component: 'ZdDateRange' });
+        expect(instance.getAllowedDates(new Date(2025, 0, 1))).toBe(true);
+      });
 
-      // Test with null to cover `(dates || [])`
-      dateInput.setNativeDate(null as any);
-      expect(dateInput.value).toEqual([]);
+      it('should return false if allowedDates is an empty array', () => {
+        const instance = new DateRange({ name: 'date', component: 'ZdDateRange', allowedDates: [] });
+        expect(instance.getAllowedDates(new Date(2025, 0, 1))).toBe(false);
+      });
 
-      // Reset and test with undefined
-      dateInput.value = ['2025-01-01'];
-      dateInput.setNativeDate(undefined as any);
-      expect(dateInput.value).toEqual([]);
+      it('should return true for allowed date with function', () => {
+        const instance = new DateRange({
+          name: 'date',
+          component: 'ZdDateRange',
+          dateFormat: 'YYYY-MM-DD',
+          allowedDates: (date) => date === '2025-01-01',
+        });
+        expect(instance.getAllowedDates(new Date(2025, 0, 1))).toBe(true);
+        expect(instance.getAllowedDates(new Date(2025, 0, 2))).toBe(false);
+      });
+
+      it('should return true for allowed date with array', () => {
+        const instance = new DateRange({
+          name: 'date',
+          component: 'ZdDateRange',
+          dateFormat: 'YYYY-MM-DD',
+          allowedDates: ['2025-01-01'],
+        });
+        expect(instance.getAllowedDates(new Date(2025, 0, 1))).toBe(true);
+        expect(instance.getAllowedDates(new Date(2025, 0, 2))).toBe(false);
+      });
     });
   });
 
-  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]);
+  describe('DateRange edge cases', () => {
+    let dateInput: DateRange;
 
-      const nativeDates = dateInput.getNativeDate();
-      expect(nativeDates[0]).toEqual(testDate);
+    beforeEach(() => {
+      dateInput = new DateRange({ name: 'date', component: 'DateInput' });
     });
 
-    it('should return empty array when no value is set', () => {
-      dateInput.value = '';
-      const nativeDates = dateInput.getNativeDate();
-      expect(nativeDates).toEqual([]);
+    it('should handle empty array and set value to empty', () => {
+      dateInput.setNativeDate([]);
+      expect(dateInput.value).toEqual([]);
     });
   });
 
-  describe('getAllowedDates', () => {
-    it('should return true if allowedDates is not set', () => {
-      const instance = new DateRange({ name: 'date', component: 'ZdDateRange' });
-      expect(instance.getAllowedDates(new Date(2025, 0, 1))).toBe(true);
-    });
+  describe('DateRange getExtremities coverage', () => {
+    it('should cover empty array case in getExtremities by setting value', () => {
+      const dateInput = new DateRange({ name: 'date', component: 'DateInput' });
+      dateInput.value = ['2025-01-01']; // Define um valor inicial
 
-    it('should return false if allowedDates is an empty array', () => {
-      const instance = new DateRange({ name: 'date', component: 'ZdDateRange', allowedDates: [] });
-      expect(instance.getAllowedDates(new Date(2025, 0, 1))).toBe(false);
-    });
+      // Atribuir um array vazio ao 'value' aciona o setter,
+      // que indiretamente causa a chamada de 'getExtremities' com um array vazio.
+      dateInput.value = [];
 
-    it('should return true for allowed date with function', () => {
-      const instance = new DateRange({
-        name: 'date',
-        component: 'ZdDateRange',
-        dateFormat: 'YYYY-MM-DD',
-        allowedDates: (date) => date === '2025-01-01',
-      });
-      expect(instance.getAllowedDates(new Date(2025, 0, 1))).toBe(true);
-      expect(instance.getAllowedDates(new Date(2025, 0, 2))).toBe(false);
+      expect(dateInput.value).toEqual([]);
     });
+  });
 
-    it('should return true for allowed date with array', () => {
-      const instance = new DateRange({
+  describe('DateRange map format line 494 coverage', () => {
+    it('should format dates and handle nulls internally', () => {
+      const dateInput = new DateRange({
         name: 'date',
-        component: 'ZdDateRange',
+        component: 'DateInput',
         dateFormat: 'YYYY-MM-DD',
-        allowedDates: ['2025-01-01'],
       });
-      expect(instance.getAllowedDates(new Date(2025, 0, 1))).toBe(true);
-      expect(instance.getAllowedDates(new Date(2025, 0, 2))).toBe(false);
-    });
-  });
-});
 
-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);
+      const start = new Date(2025, 0, 1);
+      const end = new Date(2025, 0, 5);
 
-describe('DateRange getExtremities coverage', () => {
-  it('should cover empty array case in getExtremities by setting value', () => {
-    const dateInput = new DateRange({ name: 'date', component: 'DateInput' });
-    dateInput.value = ['2025-01-01']; // Define um valor inicial
+      // Simula dateObject interno com null no meio
+      (dateInput as any).dateObject = [dayjs(start), null, dayjs(end)];
 
-    // Atribuir um array vazio ao 'value' aciona o setter,
-    // que indiretamente causa a chamada de 'getExtremities' com um array vazio.
-    dateInput.value = [];
+      const formatted = (dateInput as any).dateObject.map(
+        (obj: any) => obj?.format('YYYY-MM-DD') || ''
+      );
 
-    expect(dateInput.value).toEqual([]);
+      expect(formatted).toEqual([
+        dayjs(start).format('YYYY-MM-DD'),
+        '',
+        dayjs(end).format('YYYY-MM-DD'),
+      ]);
+    });
   });
-});
 
-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',
+  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);
     });
 
-    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)];
+    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);
+    });
 
-    const formatted = (dateInput as any).dateObject.map(
-      (obj: any) => obj?.format('YYYY-MM-DD') || ''
-    );
+    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([]);
+    });
 
-    expect(formatted).toEqual([
-      dayjs(start).format('YYYY-MM-DD'),
-      '',
-      dayjs(end).format('YYYY-MM-DD'),
-    ]);
+    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([]);
+    });
   });
-});
 
-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);
-  });
+  describe('DateRange value setter edge cases', () => {
+    it('should handle null and undefined values correctly', () => {
+      const dateInput = new DateRange({ name: 'date', component: 'DateInput' });
+      dateInput.value = ['2025-01-01'];
 
-  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);
-  });
+      dateInput.value = null;
+      expect(dateInput.value).toEqual([]);
 
-  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([]);
+      dateInput.value = undefined;
+      expect(dateInput.value).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([]);
+  describe('DateRange getExtremities coverage', () => {
+    it('should cover empty array case in getExtremities by setting value to empty array', () => {
+      const dateInput = new DateRange({ name: 'date', component: 'DateInput' });
+      // Define um valor inicial para garantir que a mudança seja detectada
+      dateInput.value = ['2025-01-01'];
+
+      // Atribui um array vazio diretamente ao 'value'.
+      // Isso aciona o setter que define 'dateObject' como [], cobrindo o caso de borda em 'getExtremities'.
+      dateInput.value = [];
+
+      expect(dateInput.value).toEqual([]);
+    });
   });
-});
 
-describe('DateRange value setter edge cases', () => {
-  it('should handle null and undefined values correctly', () => {
-    const dateInput = new DateRange({ name: 'date', component: 'DateInput' });
-    dateInput.value = ['2025-01-01'];
+  describe('getMask()', () => {
+    let dateRangeInstance!: DateRange;
 
-    dateInput.value = null;
-    expect(dateInput.value).toEqual([]);
+    beforeEach(() => {
+      dateRangeInstance = new DateRange({
+        name: 'date-range',
+        component: 'DateRange',
+      });
+    });
 
-    dateInput.value = undefined;
-    expect(dateInput.value).toEqual([]);
-  });
-});
+    it('should return an empty string if isFocused is false, regardless of format properties', () => {
+      dateRangeInstance.isFocused = false;
+      dateRangeInstance.inputFormat = 'YYYY-MM-DD';
+      dateRangeInstance.displayFormat = 'DD/MM/YYYY';
+      expect(dateRangeInstance.getMask()).toBe('');
+    });
 
-describe('DateRange getExtremities coverage', () => {
-  it('should cover empty array case in getExtremities by setting value to empty array', () => {
-    const dateInput = new DateRange({ name: 'date', component: 'DateInput' });
-    // Define um valor inicial para garantir que a mudança seja detectada
-    dateInput.value = ['2025-01-01'];
+    it('when isFocused is true, should return masked inputFormat if inputFormat is a non-empty string', () => {
+      dateRangeInstance.isFocused = true;
+      dateRangeInstance.inputFormat = 'YYYY-MM-DD';
+      dateRangeInstance.displayFormat = 'MM/DD/YY'; // This should be ignored
+      expect(dateRangeInstance.getMask()).toBe('####-##-## ~ ####-##-##');
+    });
 
-    // Atribui um array vazio diretamente ao 'value'.
-    // Isso aciona o setter que define 'dateObject' como [], cobrindo o caso de borda em 'getExtremities'.
-    dateInput.value = [];
+    it('when isFocused is true, should return masked displayFormat if inputFormat is undefined and displayFormat is a non-empty string', () => {
+      dateRangeInstance.isFocused = true;
+      dateRangeInstance.inputFormat = undefined;
+      dateRangeInstance.displayFormat = 'DD.MM.YYYY';
+      expect(dateRangeInstance.getMask()).toBe('##.##.#### ~ ##.##.####');
+    });
 
-    expect(dateInput.value).toEqual([]);
+    it('when isFocused is true, should return an empty string if both inputFormat and displayFormat are undefined', () => {
+      dateRangeInstance.isFocused = true;
+      dateRangeInstance.inputFormat = undefined;
+      dateRangeInstance.displayFormat = '';
+      expect(dateRangeInstance.getMask()).toBe('');
+    });
   });
 });
-
-});