test(cascader): add test for cascader

Tencent#1280

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 (
+        <>
+          <button onClick={() => setStrict(!strict)}>{btnText}</button>
+          <Cascader options={options} checkStrictly={strict} />
+        </>
+      );
+    };
+    const { getByText } = render(<TestComponent />);
+    // 默认值为 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(<Cascader options={options} selectInputProps={selectInputProps} filterable />);
+    // 模拟用户键盘输入 "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 (
+        <Cascader
+          options={options}
+          value={value}
+          onChange={onChange}
+          selectInputProps={props.selectInputProps}
+          multiple
+        />
+      );
+    };
+
+    const spy = vi.spyOn(selectInputProps, 'onTagChange');
+    const { container } = render(<TextComponent selectInputProps={selectInputProps} />);
+    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(<Cascader options={options} onBlur={option.onBlur} filterable />);
+    // 模拟 blur 时触发 onBlur
+    fireEvent.blur(document.querySelector('input'));
+    await mockTimeout(() => expect(spy).toHaveBeenCalled());
   });
 });