-
Notifications
You must be signed in to change notification settings - Fork 319
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(time-picker): add tests (#1912)
* test(time-picker): add tests * fix(timepicker): oninput not trigger * test(timepicker): add tests * chore: sync master * test(timepicker): update coverage * test(timepicker): update snapshot
- Loading branch information
1 parent
ec43ccd
commit ee9b25a
Showing
4 changed files
with
206 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.