test: for time pickervalue (#741)

Author: zombieJ

docs/examples/debug.tsx

@@ -149,13 +149,14 @@ export default () => {
       <SinglePicker
         // Shared
         {...sharedLocale}
-        disabledDate={(date) => date.isBefore(dayjs())}
+        // disabledDate={(date) => date.isBefore(dayjs())}
         // disabledTime={() => ({
         //   disabledHours: () => [0, 1, 2, 3, 4, 5],
         //   disabledMinutes: () => [0, 1, 2, 3, 4, 5],
         //   disabledSeconds: () => [0, 1, 2, 3, 4, 5],
         // })}
         open
+        picker="time"
         ref={singleRef}
         suffixIcon="🧶"
         // showTime={{
@@ -165,7 +166,7 @@ export default () => {
         //     disabledSeconds: () => [0, 1, 2, 3, 4, 5],
         //   }),
         // }}
-        showTime={{}}
+        // showTime={{}}
         onChange={(...args) => {
           console.log('🔥 Change:', ...args);
         }}

src/PickerInput/hooks/useRangePickerValue.ts

@@ -52,13 +52,21 @@ export default function useRangePickerValue<DateType extends object, ValueType e
   minDate?: DateType,
   maxDate?: DateType,
 ): [currentIndexPickerValue: DateType, setCurrentIndexPickerValue: (value: DateType) => void] {
+  const isTimePicker = pickerMode === 'time';
+
   // ======================== Active ========================
   // `activeIndex` must be valid to avoid getting empty `pickerValue`
   const mergedActiveIndex = activeIndex || 0;
 
   // ===================== Picker Value =====================
-  const getDefaultPickerValue = (index: number) =>
-    defaultPickerValue[index] || calendarValue[index] || generateConfig.getNow();
+  const getDefaultPickerValue = (index: number) => {
+    let now = generateConfig.getNow();
+    if (isTimePicker) {
+      now = fillTime(generateConfig, now);
+    }
+
+    return defaultPickerValue[index] || calendarValue[index] || now;
+  };
 
   // Align `pickerValue` with `showTime.defaultValue`
   const [startPickerValue, endPickerValue] = pickerValue;
@@ -80,11 +88,11 @@ export default function useRangePickerValue<DateType extends object, ValueType e
     const current = [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex];
 
     // Merge the `showTime.defaultValue` into `pickerValue`
-    return pickerMode === 'time'
+    return isTimePicker
       ? current
       : fillTime(generateConfig, current, timeDefaultValue[mergedActiveIndex]);
   }, [
-    pickerMode,
+    isTimePicker,
     mergedStartPickerValue,
     mergedEndPickerValue,
     mergedActiveIndex,
@@ -155,7 +163,7 @@ export default function useRangePickerValue<DateType extends object, ValueType e
   useLayoutEffect(() => {
     if (open) {
       if (!defaultPickerValue[mergedActiveIndex]) {
-        let nextPickerValue: DateType = generateConfig.getNow();
+        let nextPickerValue: DateType = isTimePicker ? null : generateConfig.getNow();
 
         /**
          * 1. If has prevActiveIndex, use it to avoid panel jump

tests/picker.spec.tsx

@@ -1376,4 +1376,18 @@ describe('Picker.Basic', () => {
       document.querySelector('.rc-picker-time-panel-column:first-child li').textContent,
     ).toEqual('01');
   });
+
+  it('time picker should align to 0', () => {
+    jest.useFakeTimers().setSystemTime(getDay('1990-09-03 01:03:05').valueOf());
+
+    const onCalendarChange = jest.fn();
+    render(<DayPicker picker="time" open showNow onCalendarChange={onCalendarChange} />);
+
+    selectCell('00');
+    expect(onCalendarChange).toHaveBeenCalledWith(expect.anything(), '00:00:00', expect.anything());
+    onCalendarChange.mockReset();
+
+    fireEvent.click(document.querySelector('.rc-picker-now-btn'));
+    expect(onCalendarChange).toHaveBeenCalledWith(expect.anything(), '01:03:05', expect.anything());
+  });
 });

tests/util/commonUtil.tsx

@@ -138,11 +138,20 @@ export function findCell(text: string | number, index = 0) {
 
   const table = document.querySelectorAll('table')[index];
 
-  Array.from(table.querySelectorAll('td')).forEach((td) => {
-    if (td.textContent === String(text) && td.className.includes('-in-view')) {
-      matchCell = td;
-    }
-  });
+  if (table) {
+    Array.from(table.querySelectorAll('td')).forEach((td) => {
+      if (td.textContent === String(text) && td.className.includes('-in-view')) {
+        matchCell = td;
+      }
+    });
+  } else {
+    const column = document.querySelectorAll('.rc-picker-time-panel-column')[index];
+    Array.from(column.querySelectorAll('li')).forEach((li) => {
+      if (li.textContent === String(text)) {
+        matchCell = li;
+      }
+    });
+  }
   if (!matchCell) {
     throw new Error('Cell not match in picker panel.');
   }