test: increase test case coverage (#24430)

* test: increase test case of Cascader

* test: increase test case of Grid and Tree

components/_util/responsiveObserve.ts

@@ -26,15 +26,10 @@ const responsiveObserve = {
   matchHandlers: {},
   dispatch(pointMap: ScreenMap) {
     screens = pointMap;
-    if (subscribers.length < 1) {
-      return false;
-    }
-
     subscribers.forEach(item => {
       item.func(screens);
     });
-
-    return true;
+    return subscribers.length >= 1;
   },
   subscribe(func: SubscribeFunc) {
     if (subscribers.length === 0) {

components/cascader/__tests__/index.test.js

@@ -492,4 +492,20 @@ describe('Cascader', () => {
     const wrapper = mount(<Cascader options={options} defaultValue={['options1', 'options2']} />);
     expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('options1 / options2');
   });
+
+  it('can be selected when showSearch', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(<Cascader options={options} onChange={onChange} showSearch />);
+    wrapper.find('input').simulate('click');
+    wrapper.find('input').simulate('change', { target: { value: 'Zh' } });
+    const popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
+    expect(popupWrapper.find('.ant-cascader-menu').length).toBe(1);
+    popupWrapper
+      .find('.ant-cascader-menu')
+      .at(0)
+      .find('.ant-cascader-menu-item')
+      .at(0)
+      .simulate('click');
+    expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
+  });
 });

components/cascader/index.tsx

@@ -3,7 +3,6 @@ import RcCascader from 'rc-cascader';
 import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import isEqual from 'lodash/isEqual';
 import KeyCode from 'rc-util/lib/KeyCode';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import DownOutlined from '@ant-design/icons/DownOutlined';
@@ -333,9 +332,6 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     // Prevent `Trigger` behaviour.
     if (inputFocused || popupVisible) {
       e.stopPropagation();
-      if (e.nativeEvent.stopImmediatePropagation) {
-        e.nativeEvent.stopImmediatePropagation();
-      }
     }
   };
 
@@ -352,9 +348,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
   };
 
   clearSelection = (e: React.MouseEvent<HTMLElement>) => {
+    const { inputValue } = this.state;
     e.preventDefault();
     e.stopPropagation();
-    if (!this.state.inputValue) {
+    if (!inputValue) {
       this.setValue([]);
       this.handlePopupVisibleChange(false);
     } else {
@@ -397,7 +394,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
       filtered = flattenOptions.filter(path => filter(this.state.inputValue, path, names));
     }
 
-    filtered.sort((a, b) => sort(a, b, inputValue, names));
+    filtered = filtered.sort((a, b) => sort(a, b, inputValue, names));
 
     if (filtered.length > 0) {
       return filtered.map((path: CascaderOptionType[]) => {
@@ -527,10 +524,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         const names: FilledFieldNamesType = getFilledFieldNames(this.props);
         if (options && options.length > 0) {
           if (state.inputValue) {
-            const filteredOptions = this.generateFilteredOptions(prefixCls, renderEmpty);
-            options = isEqual(filteredOptions, this.cachedOptions)
-              ? this.cachedOptions
-              : filteredOptions;
+            options = this.generateFilteredOptions(prefixCls, renderEmpty);
           }
         } else {
           options = [

components/tree/__tests__/__snapshots__/index.test.js.snap

@@ -116,3 +116,99 @@ exports[`Tree icon and switcherIcon of Tree with showLine should render correctl
   </div>
 </div>
 `;
+
+exports[`Tree switcherIcon in Tree could be string 1`] = `
+<div
+  class="ant-tree ant-tree-icon-hide"
+>
+  <div
+    role="tree"
+  >
+    <input
+      style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+      tabindex="0"
+      value=""
+    />
+  </div>
+  <div
+    class="ant-tree-list"
+  >
+    <div>
+      <div
+        class="ant-tree-list-holder-inner"
+        style="display: flex; flex-direction: column;"
+      >
+        <div
+          class="ant-tree-treenode ant-tree-treenode-switcher-open"
+        >
+          <span
+            class="ant-tree-switcher ant-tree-switcher_open"
+          >
+            switcherIcon
+          </span>
+          <span
+            class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+            title="---"
+          >
+            <span
+              class="ant-tree-title"
+            >
+              ---
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-tree-treenode ant-tree-treenode-switcher-open"
+        >
+          <span
+            aria-hidden="true"
+            class="ant-tree-indent"
+          >
+            <span
+              class="ant-tree-indent-unit ant-tree-indent-unit-start"
+            />
+          </span>
+          <span
+            class="ant-tree-switcher ant-tree-switcher-noop"
+          />
+          <span
+            class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
+            title="node1"
+          >
+            <span
+              class="ant-tree-title"
+            >
+              node1
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-tree-treenode ant-tree-treenode-switcher-open"
+        >
+          <span
+            aria-hidden="true"
+            class="ant-tree-indent"
+          >
+            <span
+              class="ant-tree-indent-unit ant-tree-indent-unit-end"
+            />
+          </span>
+          <span
+            class="ant-tree-switcher ant-tree-switcher-noop"
+          />
+          <span
+            class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
+            title="node2"
+          >
+            <span
+              class="ant-tree-title"
+            >
+              node2
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/tree/__tests__/index.test.js

@@ -42,4 +42,16 @@ describe('Tree', () => {
     );
     expect(wrapper.find('.switcherIcon').length).toBe(1);
   });
+
+  it('switcherIcon in Tree could be string', () => {
+    const wrapper = mount(
+      <Tree switcherIcon="switcherIcon" defaultExpandAll>
+        <TreeNode icon="icon">
+          <TreeNode id="node1" title="node1" icon="icon" key="0-0-2" />
+          <TreeNode id="node2" title="node2" key="0-0-3" />
+        </TreeNode>
+      </Tree>,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

tests/setup.js

@@ -16,8 +16,8 @@ if (typeof window !== 'undefined') {
     Object.defineProperty(global.window, 'matchMedia', {
       value: jest.fn(query => ({
         matches: query.includes('max-width'),
-        addListener: () => {},
-        removeListener: () => {},
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
       })),
     });
   }