test: full coverage of new viewDate logic

Author: zombieJ

src/hooks/useRangeViewDates.ts

@@ -6,36 +6,42 @@ import {
   getClosingViewDate,
   isSameYear,
   isSameMonth,
-  isSameDate,
+  isSameDecade,
 } from '../utils/dateUtil';
 
-function isClosingViewDate<DateType>(
-  start: DateType | null,
-  end: DateType | null,
+function getStartEndDistance<DateType>(
+  startDate: DateType,
+  endDate: DateType,
   picker: PickerMode,
   generateConfig: GenerateConfig<DateType>,
-) {
-  // Skip when no compared
-  if (!start || !end) {
-    return true;
-  }
-
-  const startPrev = getClosingViewDate(start, picker, generateConfig, -1);
-  const startNext = getClosingViewDate(start, picker, generateConfig, 1);
-
-  function isSameCompare(compareFunc: (source: DateType | null) => boolean) {
-    return [startPrev, start, startNext].some(date => compareFunc(date));
+): 'same' | 'closing' | 'far' {
+  const startNext = getClosingViewDate(startDate, picker, generateConfig, 1);
+
+  function getDistance(
+    compareFunc: (start: DateType | null, end: DateType | null) => boolean,
+  ) {
+    if (compareFunc(startDate, endDate)) {
+      return 'same';
+    }
+    if (compareFunc(startNext, endDate)) {
+      return 'closing';
+    }
+    return 'far';
   }
 
   switch (picker) {
     case 'year':
-      return isSameCompare(source => isSameYear(generateConfig, source, end));
-
+      return getDistance((start, end) =>
+        isSameDecade(generateConfig, start, end),
+      );
     case 'month':
-      return isSameCompare(source => isSameMonth(generateConfig, source, end));
-
+      return getDistance((start, end) =>
+        isSameYear(generateConfig, start, end),
+      );
     default:
-      return isSameCompare(source => isSameDate(generateConfig, source, end));
+      return getDistance((start, end) =>
+        isSameMonth(generateConfig, start, end),
+      );
   }
 }
 
@@ -52,14 +58,24 @@ function getRangeViewDate<DateType>(
     return startDate;
   }
 
-  if (endDate) {
-    if (!isClosingViewDate(startDate, endDate, picker, generateConfig)) {
-      return getClosingViewDate(endDate, picker, generateConfig, -1);
+  if (startDate && endDate) {
+    const distance = getStartEndDistance(
+      startDate,
+      endDate,
+      picker,
+      generateConfig,
+    );
+    switch (distance) {
+      case 'same':
+        return startDate;
+      case 'closing':
+        return startDate;
+      default:
+        return getClosingViewDate(endDate, picker, generateConfig, -1);
     }
-    return endDate;
   }
 
-  return null;
+  return startDate;
 }
 
 export default function useRangeViewDates<DateType>({

src/utils/dateUtil.ts

@@ -14,6 +14,21 @@ export function isNullEqual<T>(value1: T, value2: T): boolean | undefined {
   return undefined;
 }
 
+export function isSameDecade<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  decade1: NullableDateType<DateType>,
+  decade2: NullableDateType<DateType>,
+) {
+  const equal = isNullEqual(decade1, decade2);
+  if (typeof equal === 'boolean') {
+    return equal;
+  }
+
+  const num1 = Math.floor(generateConfig.getYear(decade1!) / 10);
+  const num2 = Math.floor(generateConfig.getYear(decade2!) / 10);
+  return num1 === num2;
+}
+
 export function isSameYear<DateType>(
   generateConfig: GenerateConfig<DateType>,
   year1: NullableDateType<DateType>,

tests/range.spec.tsx

@@ -851,4 +851,122 @@ describe('Picker.Range', () => {
 
     jest.useRealTimers();
   });
+
+  describe('viewDate', () => {
+    function matchTitle(wrapper: Wrapper, title: string) {
+      expect(
+        wrapper
+          .find('.rc-picker-header-view')
+          .first()
+          .text(),
+      ).toEqual(title);
+    }
+
+    [
+      {
+        picker: 'year',
+        // Default picker value
+        defaultPickerValue: [getMoment('1990-09-03'), getMoment('2000-11-28')],
+        defaultPickerValueTitle: ['1990-1999', '2000-2009'],
+        // Closing value
+        closingValue: [getMoment('1989-09-03'), getMoment('1990-11-28')],
+        closingValueTitle: '1980-1989',
+        // Far away value
+        farValue: [getMoment('1989-09-03'), getMoment('2090-11-28')],
+        farValueTitle: ['1980-1989', '2080-2089'],
+      },
+      {
+        picker: 'month',
+        // Default picker value
+        defaultPickerValue: [getMoment('1990-09-03'), getMoment('2000-11-28')],
+        defaultPickerValueTitle: ['1990', '2000'],
+        // Closing value
+        closingValue: [getMoment('1989-09-03'), getMoment('1989-10-11')],
+        closingValueTitle: '1989',
+        // Far away value
+        farValue: [getMoment('1989-09-03'), getMoment('2000-10-11')],
+        farValueTitle: ['1989', '1999'],
+      },
+      {
+        picker: 'date',
+        // Default picker value
+        defaultPickerValue: [getMoment('1990-09-03'), getMoment('2000-11-28')],
+        defaultPickerValueTitle: ['Sep1990', 'Nov2000'],
+        // Closing value
+        closingValue: [getMoment('1989-09-03'), getMoment('1989-10-11')],
+        closingValueTitle: 'Sep1989',
+        // Far away value
+        farValue: [getMoment('1989-09-03'), getMoment('2000-10-11')],
+        farValueTitle: ['Sep1989', 'Sep2000'],
+      },
+    ].forEach(
+      ({
+        picker,
+        defaultPickerValue,
+        defaultPickerValueTitle,
+        closingValue,
+        closingValueTitle,
+        farValue,
+        farValueTitle,
+      }) => {
+        describe(picker, () => {
+          it('defaultPickerValue', () => {
+            const wrapper = mount(
+              <MomentRangePicker
+                picker={picker as any}
+                defaultPickerValue={defaultPickerValue as any}
+              />,
+            );
+
+            wrapper.openPicker();
+            matchTitle(wrapper, defaultPickerValueTitle[0]);
+            wrapper.openPicker(1);
+            matchTitle(wrapper, defaultPickerValueTitle[1]);
+          });
+
+          it('with closing value', () => {
+            const wrapper = mount(
+              <MomentRangePicker
+                picker={picker as any}
+                value={closingValue as any}
+              />,
+            );
+
+            wrapper.openPicker();
+            matchTitle(wrapper, closingValueTitle);
+            wrapper.openPicker(1);
+            matchTitle(wrapper, closingValueTitle);
+          });
+
+          it('with far value', () => {
+            const wrapper = mount(
+              <MomentRangePicker
+                picker={picker as any}
+                value={farValue as any}
+              />,
+            );
+
+            wrapper.openPicker();
+            matchTitle(wrapper, farValueTitle[0]);
+            wrapper.openPicker(1);
+            matchTitle(wrapper, farValueTitle[1]);
+          });
+
+          it('no end date', () => {
+            const wrapper = mount(
+              <MomentRangePicker
+                picker={picker as any}
+                value={[closingValue[0], null]}
+              />,
+            );
+
+            wrapper.openPicker();
+            matchTitle(wrapper, farValueTitle[0]);
+            wrapper.openPicker(1);
+            matchTitle(wrapper, farValueTitle[0]);
+          });
+        });
+      },
+    );
+  });
 });

tests/util.spec.tsx

@@ -1,6 +1,6 @@
 import momentGenerateConfig from '../src/generate/moment';
 import { toArray } from '../src/utils/miscUtil';
-import { isSameTime } from '../src/utils/dateUtil';
+import { isSameTime, isSameDecade } from '../src/utils/dateUtil';
 import { getMoment } from './util/commonUtil';
 
 describe('Picker.Util', () => {
@@ -27,4 +27,18 @@ describe('Picker.Util', () => {
 
     expect(isSameTime(momentGenerateConfig, null, null)).toBeTruthy();
   });
+
+  it('isSameDecade', () => {
+    expect(isSameDecade(momentGenerateConfig, null, null)).toBeTruthy();
+    expect(
+      isSameDecade(momentGenerateConfig, getMoment('2000-01-02'), null),
+    ).toBeFalsy();
+    expect(
+      isSameDecade(
+        momentGenerateConfig,
+        getMoment('1995-01-01'),
+        getMoment('1999-01-01'),
+      ),
+    ).toBeTruthy();
+  });
 });