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());
});
});