test(time-picker): add tests

site/test-coverage.js

@@ -1,9 +1,9 @@
 module.exports = {
   "Util": {
-    "statements": "41.74%",
-    "branches": "28.57%",
-    "functions": "50.83%",
-    "lines": "43.03%"
+    "statements": "50.4%",
+    "branches": "38.29%",
+    "functions": "60.17%",
+    "lines": "51.73%"
   },
   "affix": {
     "statements": "87.3%",
@@ -84,10 +84,10 @@ module.exports = {
     "lines": "96.05%"
   },
   "colorPicker": {
-    "statements": "93.33%",
+    "statements": "100%",
     "branches": "100%",
-    "functions": "60%",
-    "lines": "93.1%"
+    "functions": "100%",
+    "lines": "100%"
   },
   "comment": {
     "statements": "100%",
@@ -114,10 +114,10 @@ module.exports = {
     "lines": "28.64%"
   },
   "dialog": {
-    "statements": "85.9%",
-    "branches": "72.91%",
+    "statements": "85.43%",
+    "branches": "70.21%",
     "functions": "84.21%",
-    "lines": "88.32%"
+    "lines": "88.4%"
   },
   "divider": {
     "statements": "100%",
@@ -144,28 +144,34 @@ module.exports = {
     "lines": "47.94%"
   },
   "grid": {
-    "statements": "61.05%",
+    "statements": "61.85%",
     "branches": "28.78%",
     "functions": "80%",
-    "lines": "61.05%"
+    "lines": "61.85%"
+  },
+  "guide": {
+    "statements": "100%",
+    "branches": "94.11%",
+    "functions": "100%",
+    "lines": "100%"
   },
   "hooks": {
-    "statements": "51.29%",
+    "statements": "47.5%",
     "branches": "27.41%",
-    "functions": "62.16%",
-    "lines": "52.14%"
+    "functions": "55.26%",
+    "lines": "47.91%"
   },
   "image": {
-    "statements": "87.23%",
+    "statements": "87.5%",
     "branches": "86.2%",
     "functions": "83.33%",
-    "lines": "86.36%"
+    "lines": "86.66%"
   },
   "imageViewer": {
-    "statements": "75%",
+    "statements": "75.53%",
     "branches": "77.19%",
     "functions": "65.71%",
-    "lines": "75.38%"
+    "lines": "75.93%"
   },
   "input": {
     "statements": "93.63%",
@@ -204,10 +210,10 @@ module.exports = {
     "lines": "89.47%"
   },
   "locale": {
-    "statements": "73.07%",
-    "branches": "72.22%",
+    "statements": "80.76%",
+    "branches": "77.77%",
     "functions": "83.33%",
-    "lines": "73.91%"
+    "lines": "82.6%"
   },
   "message": {
     "statements": "88.43%",
@@ -252,10 +258,10 @@ module.exports = {
     "lines": "81.66%"
   },
   "rangeInput": {
-    "statements": "74.02%",
-    "branches": "61.9%",
-    "functions": "46.15%",
-    "lines": "73.68%"
+    "statements": "76.62%",
+    "branches": "66.66%",
+    "functions": "50%",
+    "lines": "76.31%"
   },
   "rate": {
     "statements": "64.15%",
@@ -270,10 +276,10 @@ module.exports = {
     "lines": "100%"
   },
   "selectInput": {
-    "statements": "83.83%",
-    "branches": "72.83%",
-    "functions": "69.56%",
-    "lines": "86.95%"
+    "statements": "97%",
+    "branches": "89.28%",
+    "functions": "100%",
+    "lines": "98.92%"
   },
   "slider": {
     "statements": "89.47%",
@@ -306,10 +312,10 @@ module.exports = {
     "lines": "96.15%"
   },
   "table": {
-    "statements": "48.69%",
-    "branches": "34.26%",
+    "statements": "48.8%",
+    "branches": "34.32%",
     "functions": "45.56%",
-    "lines": "49.6%"
+    "lines": "49.67%"
   },
   "tabs": {
     "statements": "90.85%",
@@ -325,7 +331,7 @@ module.exports = {
   },
   "tagInput": {
     "statements": "85.97%",
-    "branches": "81.69%",
+    "branches": "83.09%",
     "functions": "83.78%",
     "lines": "87.74%"
   },
@@ -336,10 +342,16 @@ module.exports = {
     "lines": "86.36%"
   },
   "timePicker": {
-    "statements": "14.28%",
-    "branches": "0%",
-    "functions": "0%",
-    "lines": "14.94%"
+    "statements": "80.64%",
+    "branches": "67.16%",
+    "functions": "72.22%",
+    "lines": "82.02%"
+  },
+  "timeline": {
+    "statements": "98.38%",
+    "branches": "88.13%",
+    "functions": "100%",
+    "lines": "98.33%"
   },
   "tooltip": {
     "statements": "88.88%",
@@ -354,16 +366,22 @@ module.exports = {
     "lines": "87.77%"
   },
   "tree": {
-    "statements": "22.45%",
-    "branches": "4.23%",
-    "functions": "20.51%",
-    "lines": "22.9%"
+    "statements": "51.87%",
+    "branches": "34.16%",
+    "functions": "51.28%",
+    "lines": "52.79%"
+  },
+  "treeSelect": {
+    "statements": "95.17%",
+    "branches": "86.44%",
+    "functions": "97.43%",
+    "lines": "95.62%"
   },
   "upload": {
-    "statements": "14.28%",
-    "branches": "0%",
-    "functions": "0%",
-    "lines": "14.81%"
+    "statements": "96.55%",
+    "branches": "100%",
+    "functions": "88.88%",
+    "lines": "100%"
   },
   "watermark": {
     "statements": "54.76%",
@@ -372,9 +390,9 @@ module.exports = {
     "lines": "57.5%"
   },
   "utils": {
-    "statements": "72.41%",
-    "branches": "63.63%",
+    "statements": "80%",
+    "branches": "75%",
     "functions": "100%",
-    "lines": "70.37%"
+    "lines": "79.54%"
   }
 };

src/time-picker/TimePicker.tsx

@@ -10,7 +10,7 @@ import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import noop from '../_util/noop';
 
-import SelectInput from '../select-input';
+import SelectInput, { SelectInputValueChangeContext } from '../select-input';
 import TimeRangePicker from './TimeRangePicker';
 import TimePickerPanel from './panel/TimePickerPanel';
 
@@ -45,6 +45,7 @@ const TimePicker = forwardRefWithStatics(
       onClose = noop,
       onFocus = noop,
       onOpen = noop,
+      onInput = noop,
     } = props;
 
     const [value, onChange] = useControlled(props, 'value', props.onChange);
@@ -73,8 +74,11 @@ const TimePicker = forwardRefWithStatics(
       onChange(null);
     };
 
-    const handleInputChange = (value: string) => {
+    const handleInputChange = (value: string, context: SelectInputValueChangeContext) => {
       setCurrentValue(value);
+      if (allowInput) {
+        onInput({ value, e: context.e as React.FocusEvent<HTMLInputElement> });
+      }
     };
 
     const handleInputBlur = (value: string, { e }: { e: React.FocusEvent<HTMLInputElement> }) => {

src/time-picker/__tests__/time-picker.test.tsx

@@ -1,14 +1,135 @@
 import MockDate from 'mockdate';
-// import { render } from '@test/utils';
-// import React from 'react';
-// import TimePicker from '../index';
+import { fireEvent, render, waitFor, vi } from '@test/utils';
+import React from 'react';
+import TimePicker from '../index';
 
 // 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate
 MockDate.set('2022-08-27');
 
 // TODO
-describe('Cascader 组件测试', () => {
-  test('dom', () => {
-    expect(true).toBe(true);
+describe('Timepicker 组件测试', () => {
+  it('props.disabled works fine', () => {
+    // disabled default value is
+    const wrapper1 = render(<TimePicker></TimePicker>);
+    const container1 = wrapper1.container.querySelector('.t-time-picker');
+    expect(container1.querySelector('.t-is-disabled')).toBeFalsy();
+    // disabled = true
+    const wrapper2 = render(<TimePicker disabled={true}></TimePicker>);
+    const container2 = wrapper2.container.querySelector('.t-time-picker .t-input');
+    expect(container2).toHaveClass('t-is-disabled');
+    // disabled = false
+    const wrapper3 = render(<TimePicker disabled={false}></TimePicker>);
+    const container3 = wrapper3.container.querySelector('.t-time-picker');
+    expect(container3.querySelector('.t-is-disabled')).toBeFalsy();
+  });
+
+  it('trigger panel works fine', async () => {
+    const { container } = render(<TimePicker></TimePicker>);
+    expect(container.querySelectorAll('input').length).toBe(1);
+    fireEvent.click(document.querySelector('input'));
+    await waitFor(() => {
+      expect(document.querySelector('.t-time-picker__panel')).not.toBeNull();
+      expect(document.querySelector('.t-time-picker__panel')).toHaveStyle({
+        display: 'block',
+      });
+      expect(document.querySelectorAll('.t-time-picker__panel-body-scroll').length).toBe(3);
+    });
+  });
+
+  it('props.defaultValue works fine', async () => {
+    const { container } = render(<TimePicker defaultValue="00:10:20"></TimePicker>);
+    expect(container.querySelectorAll('input').length).toBe(1);
+    expect(container.querySelectorAll('input').item(0)).toHaveValue('00:10:20');
+    fireEvent.click(document.querySelector('input'));
+    await waitFor(() => {
+      const scrollPanels = document.querySelectorAll('.t-time-picker__panel-body-scroll');
+      expect(scrollPanels.item(0).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('00');
+      expect(scrollPanels.item(1).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('10');
+      expect(scrollPanels.item(2).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('20');
+    });
+  });
+
+  it('props.defaultValue for TimePicker works fine', async () => {
+    const { container } = render(<TimePicker defaultValue="00:10:20"></TimePicker>);
+    expect(container.querySelectorAll('input').length).toBe(1);
+    expect(container.querySelectorAll('input').item(0)).toHaveValue('00:10:20');
+    fireEvent.click(document.querySelector('input'));
+    await waitFor(() => {
+      const scrollPanels = document.querySelectorAll('.t-time-picker__panel-body-scroll');
+      expect(scrollPanels.item(0).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('00');
+      expect(scrollPanels.item(1).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('10');
+      expect(scrollPanels.item(2).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('20');
+    });
+  });
+
+  it('props.defaultValue for TimeRangePicker works fine', async () => {
+    const { container } = render(<TimePicker.TimeRangePicker defaultValue={['00:00:00', '00:10:20']} />);
+    const inputs = container.querySelectorAll('input');
+    expect(inputs.length).toBe(2);
+    expect(inputs.item(0)).toHaveValue('00:00:00');
+    expect(inputs.item(1)).toHaveValue('00:10:20');
+    fireEvent.click(inputs.item(1));
+    await waitFor(() => {
+      const scrollPanels = document.querySelectorAll('.t-time-picker__panel-body-scroll');
+      expect(scrollPanels.item(0).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('00');
+      expect(scrollPanels.item(1).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('10');
+      expect(scrollPanels.item(2).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('20');
+    });
+  });
+
+  it('props.value for TimePickerPanel works fine', () => {
+    const onChange = vi.fn();
+    const { container } = render(<TimePicker.TimePickerPanel value={'00:10:20'} onChange={onChange} />);
+    const scrollPanels = container.querySelectorAll('.t-time-picker__panel-body-scroll');
+    expect(scrollPanels.item(0).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('00');
+    expect(scrollPanels.item(1).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('10');
+    expect(scrollPanels.item(2).querySelectorAll('.t-is-current').item(0)).toHaveTextContent('20');
+  });
+
+  it('props.allowInput works fine', async () => {
+    const handleBlur = vi.fn();
+    const handleInput = vi.fn();
+    const handleFocus = vi.fn();
+    const { container } = render(
+      <TimePicker onBlur={handleBlur} onFocus={handleFocus} onInput={handleInput} allowInput />,
+    );
+    const InputDom = container.querySelector('.t-input__inner');
+    fireEvent.focus(InputDom);
+    expect(handleFocus).toBeCalledTimes(1);
+    expect(handleInput).toBeCalledTimes(1);
+    fireEvent.blur(InputDom);
+    expect(handleBlur).toBeCalledTimes(1);
+  });
+
+  it('props.onInput&onBlur&onForus works fine', async () => {
+    const handleBlur = vi.fn();
+    const handleInput = vi.fn();
+    const handleFocus = vi.fn();
+    const { container } = render(
+      <TimePicker.TimeRangePicker allowInput onInput={handleInput} onBlur={handleBlur} onFocus={handleFocus} />,
+    );
+    const inputs = container.querySelectorAll('input');
+    fireEvent.focus(inputs[0]);
+    expect(handleFocus).toBeCalledTimes(1);
+    fireEvent.change(inputs[0], { target: { value: '00:10:20' } });
+    expect(handleInput).toBeCalledTimes(1);
+    fireEvent.blur(inputs[0]);
+    expect(handleBlur).toBeCalledTimes(1);
+  });
+
+  it('click to pick', async () => {
+    const handleChange = vi.fn();
+    const { container } = render(<TimePicker defaultValue="00:00:00" onChange={handleChange}></TimePicker>);
+    fireEvent.click(document.querySelector('input'));
+    await waitFor(async () => {
+      const confirmBtn = document.querySelectorAll('.t-time-picker__panel button').item(0);
+      expect(confirmBtn).toBeInTheDocument();
+      const panelItem1 = document.querySelectorAll('.t-time-picker__panel-body-scroll').item(0);
+      // await fireEvent.scroll(panelItem1, { target: { scrollY: 24 } });
+      fireEvent.click(panelItem1.querySelectorAll('.t-time-picker__panel-body-scroll-item').item(1));
+      fireEvent.click(confirmBtn);
+      expect(container.querySelectorAll('input').item(0)).toHaveValue('01:00:00');
+      expect(handleChange).toHaveBeenCalled(1);
+    });
   });
 });