✅ add more test cases for Tree (#25115)

components/tree/DirectoryTree.tsx

@@ -184,7 +184,12 @@ const DirectoryTree: React.FC<DirectoryTreeProps> = ({
       newSelectedKeys = Array.from(
         new Set([
           ...(cachedSelectedKeys.current || []),
-          ...calcRangeKeys(treeData, expandedKeys, key, lastSelectedKey.current),
+          ...calcRangeKeys({
+            treeData,
+            expandedKeys,
+            startKey: key,
+            endKey: lastSelectedKey.current,
+          }),
         ]),
       );
       newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);

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

@@ -212,3 +212,147 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
   </div>
 </div>
 `;
+
+exports[`Tree switcherIcon should be loading icon when loadData 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 ant-tree-treenode-loading"
+        >
+          <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_open"
+          >
+            <span
+              aria-label="loading"
+              class="anticon anticon-loading ant-tree-switcher-loading-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class="anticon-spin"
+                data-icon="loading"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+            title="node1"
+          >
+            <span
+              class="ant-tree-iconEle ant-tree-icon__open ant-tree-icon_loading"
+            />
+            <span
+              class="ant-tree-title"
+            >
+              node1
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-loading"
+        >
+          <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_open"
+          >
+            <span
+              aria-label="loading"
+              class="anticon anticon-loading ant-tree-switcher-loading-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class="anticon-spin"
+                data-icon="loading"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+            title="node2"
+          >
+            <span
+              class="ant-tree-iconEle ant-tree-icon__open ant-tree-icon_loading"
+            />
+            <span
+              class="ant-tree-title"
+            >
+              node2
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/tree/__tests__/directory.test.js

@@ -197,4 +197,57 @@ describe('Directory Tree', () => {
     wrapper.find(TreeNode).find('.ant-tree-node-content-wrapper').at(0).simulate('doubleclick');
     expect(onDoubleClick).toBeCalled();
   });
+
+  it('should not expand tree now when pressing ctrl', () => {
+    const onExpand = jest.fn();
+    const onSelect = jest.fn();
+    const wrapper = mount(createTree({ onExpand, onSelect }));
+    wrapper
+      .find(TreeNode)
+      .find('.ant-tree-node-content-wrapper')
+      .at(0)
+      .simulate('click', { ctrlKey: true });
+    expect(onExpand).not.toHaveBeenCalled();
+    expect(onSelect).toHaveBeenCalledWith(
+      ['0-0'],
+      expect.objectContaining({ event: 'select', nativeEvent: expect.anything() }),
+    );
+  });
+
+  it('should not expand tree now when click leaf node', () => {
+    const onExpand = jest.fn();
+    const onSelect = jest.fn();
+    const wrapper = mount(
+      createTree({
+        onExpand,
+        onSelect,
+        defaultExpandAll: true,
+        treeData: [
+          {
+            key: '0-0-0',
+            title: 'Folder',
+            children: [
+              {
+                title: 'Folder2',
+                key: '0-0-1',
+                children: [
+                  {
+                    title: 'File',
+                    key: '0-0-2',
+                    isLeaf: true,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      }),
+    );
+    wrapper.find(TreeNode).last().find('.ant-tree-node-content-wrapper').at(0).simulate('click');
+    expect(onExpand).not.toHaveBeenCalled();
+    expect(onSelect).toHaveBeenCalledWith(
+      ['0-0-2'],
+      expect.objectContaining({ event: 'select', nativeEvent: expect.anything() }),
+    );
+  });
 });

components/tree/__tests__/index.test.js

@@ -54,4 +54,23 @@ describe('Tree', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('switcherIcon should be loading icon when loadData', () => {
+    function onLoadData() {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve();
+        }, 1000);
+      });
+    }
+    const wrapper = mount(
+      <Tree switcherIcon="switcherIcon" defaultExpandAll loadData={onLoadData}>
+        <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();
+  });
 });

components/tree/__tests__/util.test.js

@@ -1,7 +1,7 @@
 import { calcRangeKeys } from '../utils/dictUtil';
 
 describe('Tree util', () => {
-  it('calc range keys', () => {
+  describe('calcRangeKeys', () => {
     const treeData = [
       { key: '0-0', children: [{ key: '0-0-0' }, { key: '0-0-1' }] },
       { key: '0-1', children: [{ key: '0-1-0' }, { key: '0-1-1' }] },
@@ -13,8 +13,33 @@ describe('Tree util', () => {
       },
     ];
 
-    const keys = calcRangeKeys(treeData, ['0-0', '0-2', '0-2-0'], '0-2-0-1', '0-0-0');
-    const target = ['0-0-0', '0-0-1', '0-1', '0-2', '0-2-0', '0-2-0-0', '0-2-0-1'];
-    expect(keys.sort()).toEqual(target.sort());
+    it('calc range keys', () => {
+      const keys = calcRangeKeys({
+        treeData,
+        expandedKeys: ['0-0', '0-2', '0-2-0'],
+        startKey: '0-2-0-1',
+        endKey: '0-0-0',
+      });
+      const target = ['0-0-0', '0-0-1', '0-1', '0-2', '0-2-0', '0-2-0-0', '0-2-0-1'];
+      expect(keys.sort()).toEqual(target.sort());
+    });
+
+    it('return startKey when startKey === endKey', () => {
+      const keys = calcRangeKeys({
+        treeData,
+        expandedKeys: ['0-0', '0-2', '0-2-0'],
+        startKey: '0-0-0',
+        endKey: '0-0-0',
+      });
+      expect(keys).toEqual(['0-0-0']);
+    });
+
+    it('return empty array without startKey and endKey', () => {
+      const keys = calcRangeKeys({
+        treeData,
+        expandedKeys: ['0-0', '0-2', '0-2-0'],
+      });
+      expect(keys).toEqual([]);
+    });
   });
 });

components/tree/utils/dictUtil.ts

@@ -21,12 +21,17 @@ function traverseNodesKey(
 }
 
 /** 计算选中范围，只考虑expanded情况以优化性能 */
-export function calcRangeKeys(
-  treeData: DataNode[],
-  expandedKeys: Key[],
-  startKey?: Key,
-  endKey?: Key,
-): Key[] {
+export function calcRangeKeys({
+  treeData,
+  expandedKeys,
+  startKey,
+  endKey,
+}: {
+  treeData: DataNode[];
+  expandedKeys: Key[];
+  startKey?: Key;
+  endKey?: Key;
+}): Key[] {
   const keys: Key[] = [];
   let record: Record = Record.None;