diff --git a/src/cascader/__tests__/cascader.test.tsx b/src/cascader/__tests__/cascader.test.tsx index 8a92ac2772..47ca3f4def 100644 --- a/src/cascader/__tests__/cascader.test.tsx +++ b/src/cascader/__tests__/cascader.test.tsx @@ -1,10 +1,119 @@ -// import { render } from '@test/utils'; -// import React from 'react'; -// import Cascader from '../index'; +import { render, fireEvent, mockTimeout, vi, userEvent } from '@test/utils'; +import React, { useState } from 'react'; +import Cascader from '../index'; + +const options = [ + { + children: [ + { + label: '子选项一', + value: '1.1', + }, + { + label: '子选项二', + value: '1.2', + }, + ], + label: '选项一', + value: '1', + }, + { + children: [ + { + label: '子选项一', + value: '2.1', + }, + { + label: '子选项二', + value: '2.2', + }, + ], + label: '选项二', + value: '2', + }, +]; // TODO describe('Cascader 组件测试', () => { - test('dom', () => { - expect(true).toBe(true); + test('设置 checkStrictly 时每项应该可各自选中或取消', async () => { + const btnText = 'change'; + const TestComponent = () => { + const [strict, setStrict] = useState(false); + return ( + <> + + + + ); + }; + const { getByText } = render(); + // 默认值为 false + fireEvent.click(document.querySelector('input')); + fireEvent.click(getByText('选项一')); + expect(getByText('子选项一')).toHaveTextContent('子选项一'); + fireEvent.click(getByText('子选项一')); + expect(document.querySelector('.t-input__inner')).toHaveValue('选项一 / 子选项一'); + // 设置值为 true,可直接选择选项一 + await mockTimeout(() => fireEvent.click(getByText(btnText))); + fireEvent.click(document.querySelector('input')); + fireEvent.click(getByText('选项一')); + expect(document.querySelector('.t-input__inner')).toHaveValue('选项一'); + }); + + test('selectInputProps.onInputChange 测试,应该正常触发', async () => { + const selectInputProps = { + onInputChange: () => 1, + }; + const enterText = 'test'; + const spy = vi.spyOn(selectInputProps, 'onInputChange'); + render(); + // 模拟用户键盘输入 "test" ,一共会触发四次 onInputChange + userEvent.type(document.querySelector('input'), enterText); + await mockTimeout(() => expect(spy).toHaveBeenCalledTimes(enterText.length)); + }); + + test('selectInputProps.onTagChange 测试,应该正常触发', () => { + const selectInputProps = { + onTagChange: () => 1, + }; + const TextComponent = (props) => { + const [value, setValue] = useState(['1.1', '1.2']); + const onChange = (val) => { + setValue(val); + }; + + return ( + + ); + }; + + const spy = vi.spyOn(selectInputProps, 'onTagChange'); + const { container } = render(); + const wrapper = container.querySelector('.t-input__prefix'); + // 初始时有两个 tag + expect(wrapper.querySelectorAll('.t-tag').length).toBe(2); + fireEvent.click(container.querySelector('.t-icon-close')); + expect(spy).toHaveBeenCalledTimes(1); + fireEvent.click(container.querySelector('.t-icon-close')); + // 删除两次后清空全部 tag,触发两次 onTagChange + expect(wrapper.querySelectorAll('.t-tag').length).toBe(0); + expect(spy).toHaveBeenCalledTimes(2); + }); + + test('onBlur 测试,应该正常触发', async () => { + const option = { + onBlur: () => 1, + }; + const spy = vi.spyOn(option, 'onBlur'); + render(); + // 模拟 blur 时触发 onBlur + fireEvent.blur(document.querySelector('input')); + await mockTimeout(() => expect(spy).toHaveBeenCalled()); }); });