@zeedhi/common 1.111.1 → 3.0.0

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

@@ -0,0 +1,450 @@
+import { Config, FormatterParserProvider } from '@zeedhi/core';
+import times from 'lodash.times';
+import { Month } from '../../../../src';
+
+const originalConfig = { ...Config };
+
+describe('Month', () => {
+  let instance: Month;
+  beforeEach(() => {
+    instance = new Month({ name: 'month', component: 'ZdMonth' });
+  });
+
+  describe('constructor()', () => {
+    it('should create new motnh picker with default values', () => {
+      expect(instance.dateFormat).toBe('MM-YYYY');
+      expect(instance.displayFormat).toBe('MM-YYYY');
+    });
+
+    it('should create new month picker replacing default values', () => {
+      instance = new Month({
+        name: 'month',
+        component: 'ZdMonth',
+        dateFormat: 'MMMM-YYYY',
+        displayFormat: 'MMMM-YYYY',
+      });
+      expect(instance.name).toBe('month');
+      expect(instance.component).toBe('ZdMonth');
+      expect(instance.dateFormat).toBe('MMMM-YYYY');
+      expect(instance.displayFormat).toBe('MMMM-YYYY');
+    });
+
+    it('should not change pickerType property', () => {
+      instance = new Month({
+        name: 'month',
+        component: 'ZdMonth',
+        pickerType: 'date',
+      });
+      expect(instance.name).toBe('month');
+      expect(instance.component).toBe('ZdMonth');
+    });
+  });
+
+  describe('formatter()', () => {
+    it('should return valor do display', () => {
+      instance.displayFormat = 'MM/YYYY';
+      expect(instance.formatter('01-2020')).toBe('01/2020');
+    });
+
+    it('should return \'\' when value is empty', () => {
+      expect(instance.formatter('')).toBe('');
+    });
+
+    it('should return same value when date is invalid', () => {
+      expect(instance.formatter('99-9999')).toBe('99-9999');
+    });
+
+    it('when value is invalid and mask is set, should get same value', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdMonth');
+
+      const formatted = formatterFn('01/20', {
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'YYYY-MM',
+        mask: '####/##',
+        initialMask: '####/##',
+      });
+
+      expect(formatted).toBe('01/20');
+    });
+
+    it('when value is valid and mask is set, should get masked value', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdMonth');
+
+      const formatted = formatterFn('12/2020', {
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'YYYY-MM',
+        mask: '##//####',
+        initialMask: '##//####',
+      });
+
+      expect(formatted).toBe('12//2020');
+    });
+  });
+
+  describe('displayValue', () => {
+    it('should return month formatted', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        displayFormat: 'MM/YYYY',
+      });
+      month.value = '02-2020';
+      expect(month.displayValue).toBe('02/2020');
+      month.displayValue = '02/2020';
+      expect(month.value).toBe('02-2020');
+      expect(month.dateValidation()).toBeTruthy();
+    });
+
+    it('should return month formatted when both day and month are less than 12', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        displayFormat: 'MM/YYYY',
+      });
+      month.value = '02-2020'; // MM-DD-YYYY
+      expect(month.displayValue).toBe('02/2020');
+      month.displayValue = '02/2020';
+      expect(month.value).toBe('02-2020');
+      expect(month.dateValidation()).toBeTruthy();
+
+      month.value = '02-2020'; // MM-DD-YYYY
+      expect(month.displayValue).toBe('02/2020');
+      month.displayValue = '02/2020';
+      expect(month.value).toBe('02-2020');
+      expect(month.dateValidation()).toBeTruthy();
+    });
+
+    it('when initial mask and complex displayFormat, should use mask on focus and use displayFormat on blur', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'MMMM YYYY',
+        inputFormat: 'MM YYYY',
+      });
+      // set value directly
+      month.value = '12/2020'; // MM/YYYY
+      expect(month.value).toBe('12/2020');
+      expect(month.displayValue).toBe('12 2020');
+
+      // multiple blur/focus calls should not change behavior
+      times(2, () => {
+        month.blur(new Event('blur'), {});
+        expect(month.value).toBe('12/2020');
+        expect(month.displayValue).toBe('December 2020');
+
+        month.focus(new Event('focus'), {});
+        expect(month.value).toBe('12/2020');
+        expect(month.displayValue).toBe('December 2020');
+      });
+    });
+
+    it('when initial mask and complex displayFormat, should behave the same when setting via value/displayValue', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'MMMM YYYY',
+        mask: '## ####',
+      });
+      month.value = '12/2020'; // MM/YYYY
+      expect(month.value).toBe('12/2020');
+      expect(month.displayValue).toBe('12 2020');
+
+      month.displayValue = '12 2020'; // DD MM YYYY
+      expect(month.value).toBe('12/2020');
+      expect(month.displayValue).toBe('12 2020');
+
+      month.blur(new Event('blur'), {});
+      expect(month.value).toBe('12/2020');
+      expect(month.displayValue).toBe('December 2020');
+    });
+
+    it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'MM/YYYY',
+        mask: '## ####',
+      });
+      month.value = '12/2020'; // MM/YYYY
+      expect(month.value).toBe('12/2020');
+      expect(month.displayValue).toBe('12 2020');
+
+      month.displayValue = '09 2020'; // MM YYYY
+      expect(month.value).toBe('09/2020');
+      expect(month.displayValue).toBe('09 2020');
+
+      month.blur(new Event('blur'), {});
+      expect(month.value).toBe('09/2020');
+      expect(month.displayValue).toBe('09/2020');
+    });
+
+    it('should display value with no delimiters', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'MMYYYY',
+        mask: '## ####',
+      });
+      month.value = '12/2020'; // MM/YYYY
+      expect(month.value).toBe('12/2020');
+      expect(month.displayValue).toBe('12 2020');
+
+      month.displayValue = '09 2020'; // MM YYYY
+      expect(month.value).toBe('09/2020');
+      expect(month.displayValue).toBe('09 2020');
+
+      month.blur(new Event('blur'), {});
+      expect(month.value).toBe('09/2020');
+      expect(month.displayValue).toBe('092020');
+    });
+
+    it('should not call change event if the value is the same', () => {
+      const changeFn = jest.fn();
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        displayFormat: 'DD/YYYY',
+        events: {
+          change: changeFn,
+        },
+      });
+
+      expect(changeFn).not.toHaveBeenCalled();
+      month.setDateValue('02/2020');
+      expect(changeFn).toHaveBeenCalled();
+      changeFn.mockClear();
+      month.setDateValue('02/2020');
+      expect(changeFn).not.toHaveBeenCalled();
+    });
+
+    it('should use inputFormat on focus and use displayFormat on blur', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'MMMM YYYY',
+        inputFormat: 'MM/YY',
+      });
+      // set value directly
+      month.value = '12/2020'; // MM/YYYY
+      expect(month.value).toBe('12/2020');
+      expect(month.displayValue).toBe('12/20');
+
+      // multiple blur/focus calls should not change behavior
+      times(2, () => {
+        month.blur(new Event('blur'), {});
+        expect(month.value).toBe('12/2020');
+        expect(month.displayValue).toBe('December 2020');
+
+        month.focus(new Event('focus'), {});
+        expect(month.value).toBe('12/2020');
+        expect(month.displayValue).toBe('December 2020');
+      });
+    });
+
+    it('using inputFormat should behave the same when setting via value/displayValue', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'MMMM YYYY',
+        inputFormat: 'MM/YYYY',
+      });
+      month.value = '12/2020'; // MM/YYYY
+      expect(month.value).toBe('12/2020');
+      expect(month.displayValue).toBe('12/2020');
+
+      month.displayValue = '09/2020'; // MM/YYYY
+      expect(month.value).toBe('09/2020');
+      expect(month.displayValue).toBe('09/2020');
+
+      month.blur(new Event('blur'), {});
+      expect(month.value).toBe('09/2020');
+      expect(month.displayValue).toBe('September 2020');
+    });
+
+    it('using inputFormat, should not parse when value is invalid', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'MMMM YYYY',
+        inputFormat: 'DD/YYYY',
+      });
+      month.displayValue = '09/1'; // MM/DD/YYYY
+      expect(month.value).toBe('09/1');
+      expect(month.displayValue).toBe('09/1');
+    });
+  });
+
+  describe('parser()', () => {
+    it('should return valor da row', () => {
+      instance.displayFormat = 'MM/YYYY';
+      expect(instance.parser('01/2020')).toBe('01-2020');
+    });
+
+    it('should return null when value is empty', () => {
+      expect(instance.parser('')).toBeNull();
+    });
+
+    it('should return same value when date is invalid', () => {
+      expect(instance.parser('99/9999')).toBe('99/9999');
+    });
+
+    it('when formatted value is masked, should remove mask and parse using displayFormat mask', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'ZdMonth',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'YYYY-MM',
+        mask: '####//##',
+      });
+
+      month.displayValue = '2019//12';
+
+      expect(month.value).toBe('12/2019');
+    });
+
+    it('when formatted value is masked and can\'t be masked using displayFmt mask, should parse using dateFmt mask', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'ZdMonth',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'YYYY MMMM',
+        mask: '##-####',
+      });
+
+      month.displayValue = '12-2019';
+
+      expect(month.value).toBe('12/2019');
+    });
+
+    it('when formatted value is masked and can\'t use neither displayFmt or dateFmt mask, should not parse', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'ZdMonth',
+        dateFormat: 'MMMM/YYYY',
+        displayFormat: 'YYYY MMMM',
+        mask: '##-####',
+      });
+
+      month.displayValue = '12-2019';
+
+      expect(month.value).toBe('12-2019');
+    });
+
+    it('should use inputFormat', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'ZdMonth',
+        dateFormat: 'MMMM/YYYY',
+        displayFormat: 'YYYY MMMM',
+        inputFormat: 'MM-YYYY',
+      });
+      // set value directly
+      month.value = 'December/2020'; // MMMM/YYYY
+      expect(month.value).toBe('December/2020');
+      expect(month.displayValue).toBe('12-2020');
+
+      // set via displayValue
+      month.displayValue = '12-2020'; // MMMM/YYYY
+      expect(month.value).toBe('December/2020');
+      expect(month.displayValue).toBe('12-2020');
+
+      // set via displayValue
+      month.displayValue = '11-202'; // MMMM/YYYY
+      expect(month.value).toBe('11-202');
+      expect(month.displayValue).toBe('11-202');
+    });
+  });
+
+  it('formatter and parser should use Config by default', () => {
+    const formatterFn = FormatterParserProvider.getFormatter('ZdMonth');
+    const parserFn = FormatterParserProvider.getParser('ZdMonth');
+    Config.set({
+      monthFormat: 'YYYY MM',
+      monthDisplayFormat: 'YYYY MMM',
+    });
+
+    expect(formatterFn('2020 01')).toBe('2020 Jan');
+    expect(parserFn('2020 Jan')).toBe('2020 01');
+
+    Config.set(originalConfig);
+  });
+
+  it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
+    const month = new Month({
+      name: 'month',
+      component: 'month',
+      dateFormat: 'MM/YYYY',
+      displayFormat: 'MM/YYYY',
+      mask: '## ####',
+    });
+    month.value = '12/2020'; // MM/YYYY
+    expect(month.value).toBe('12/2020');
+    expect(month.displayValue).toBe('12 2020');
+
+    month.displayValue = '09 2020'; // DD MM YYYY
+    expect(month.value).toBe('09/2020');
+    expect(month.displayValue).toBe('09 2020');
+
+    month.blur(new Event('blur'), {});
+    expect(month.value).toBe('09/2020');
+    expect(month.displayValue).toBe('09/2020');
+  });
+
+  describe('updateMask', () => {
+    it('should use month mask', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'ZdMonth',
+        displayFormat: 'MMM-YYYY',
+      });
+
+      expect(month.updateMask()).toEqual('###-####');
+    });
+
+    it('should not replace string if displayFormat doesn\'t have MMM', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'ZdMonth',
+        displayFormat: 'MM-YYYY',
+      });
+
+      expect(month.updateMask()).toEqual('##-####');
+    });
+  });
+
+  describe('coverage for blur with MMMM', () => {
+    it('should set displayValue to long month name on blur when displayFormat is MMMM YYYY', () => {
+      const month = new Month({
+        name: 'month',
+        component: 'Month',
+        dateFormat: 'MM/YYYY',
+        displayFormat: 'MMMM YYYY',
+      });
+      month.value = '12/2020';
+      month.blur(new Event('blur'), {});
+      expect(month.displayValue).toBe('December 2020');
+    });
+  });
+
+it('should set displayValue on focus when inputFormat and valid value are set', () => {
+  const month = new Month({
+    name: 'month',
+    component: 'Month',
+    dateFormat: 'MM/YYYY',
+    inputFormat: 'MM-YYYY',
+  });
+
+  month.value = '12/2020';
+  month.focus(new Event('focus'), {});
+  expect(month.displayValue).toBe('12-2020');
+});
+
+
+});