test: part of test

Author: zombieJ

tests/Select.checkable.spec.tsx

@@ -3,6 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { mount } from 'enzyme';
 import React from 'react';
 import TreeSelect, { SHOW_ALL, SHOW_PARENT, TreeNode } from '../src';
+import { clearSelection, search, selectNode } from './util';
 
 describe('TreeSelect.checkable', () => {
   it('allow clear when controlled', () => {
@@ -209,7 +210,7 @@ describe('TreeSelect.checkable', () => {
     expect(wrapper.getSelection()).toHaveLength(0);
   });
 
-  it('clear selected value and input value', () => {
+  it('clear selected value and input value', async () => {
     const treeData = [
       {
         key: '0',
@@ -218,7 +219,7 @@ describe('TreeSelect.checkable', () => {
       },
     ];
 
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         treeData={treeData}
         treeCheckable
@@ -382,7 +383,7 @@ describe('TreeSelect.checkable', () => {
       },
     ];
 
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         treeCheckable
         treeData={treeData}
@@ -393,8 +394,8 @@ describe('TreeSelect.checkable', () => {
       />,
     );
 
-    wrapper.search('0-0');
-    wrapper.selectNode(0);
+    search(container, '0-0');
+    selectNode(0);
     expect(onChange).toHaveBeenCalledWith(['0-1-0', '0-1-2'], expect.anything(), expect.anything());
   });
 
@@ -420,7 +421,7 @@ describe('TreeSelect.checkable', () => {
     it('uncontrolled', () => {
       const onChange = jest.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <TreeSelect
           treeCheckable
           treeData={treeData}
@@ -430,15 +431,14 @@ describe('TreeSelect.checkable', () => {
         />,
       );
 
-      wrapper.search('0-0-1');
-      wrapper.selectNode(1);
+      search(container, '0-0-1');
+      selectNode(1);
       expect(onChange).toHaveBeenCalledWith(['0-0-1'], expect.anything(), expect.anything());
 
       expect(
-        wrapper
-          .find('.rc-tree-select-tree-checkbox')
-          .at(0)
-          .hasClass('rc-tree-select-tree-checkbox-indeterminate'),
+        container
+          .querySelectorAll('.rc-tree-select-tree-checkbox')[0]
+          .classList.contains('rc-tree-select-tree-checkbox-indeterminate'),
       ).toBeTruthy();
     });
 
@@ -471,25 +471,29 @@ describe('TreeSelect.checkable', () => {
         }
       }
 
-      const wrapper = mount(<Test />);
+      const { container } = render(<Test />);
 
-      wrapper.search('0-0-1');
-      wrapper.selectNode(1);
+      search(container, '0-0-1');
+      selectNode(1);
       expect(onChange).toHaveBeenCalled();
 
       expect(
-        wrapper
-          .find('.rc-tree-select-tree-checkbox')
-          .at(0)
-          .hasClass('rc-tree-select-tree-checkbox-indeterminate'),
+        container
+          .querySelectorAll('.rc-tree-select-tree-checkbox')[0]
+          .classList.contains('rc-tree-select-tree-checkbox-indeterminate'),
       ).toBe(true);
     });
   });
 
   describe('labelInValue', () => {
     it('basic', () => {
       const wrapper = mount(
-        <TreeSelect treeCheckable showCheckedStrategy="SHOW_PARENT" labelInValue value={[{ value: '0-0' }]}>
+        <TreeSelect
+          treeCheckable
+          showCheckedStrategy="SHOW_PARENT"
+          labelInValue
+          value={[{ value: '0-0' }]}
+        >
           <TreeNode key="0-0" value="0-0" title="0-0">
             <TreeNode key="0-0-0" value="0-0-0" title="0-0-0" />
           </TreeNode>
@@ -540,26 +544,26 @@ describe('TreeSelect.checkable', () => {
   it('extra.allCheckedNodes', () => {
     const onChange = jest.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect open multiple treeCheckable onChange={onChange}>
         <TreeNode key="0-0" value="0-0" title="0-0" />
       </TreeSelect>,
     );
 
     // Just click
-    wrapper.selectNode();
+    selectNode();
     expect(onChange.mock.calls[0][2].allCheckedNodes).toEqual([
       expect.objectContaining({
         pos: '0-0',
       }),
     ]);
 
-    wrapper.clearSelection(0);
+    clearSelection(container, 0);
     onChange.mockReset();
 
     // By search
-    wrapper.search('0');
-    wrapper.selectNode();
+    search(container, '0');
+    selectNode();
     expect(onChange.mock.calls[0][2].allCheckedNodes).toEqual([
       expect.objectContaining({
         pos: '0-0',
@@ -608,7 +612,7 @@ describe('TreeSelect.checkable', () => {
 
     const onChange = jest.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         open
         defaultValue={[{ value: '0-1' }]}
@@ -620,8 +624,8 @@ describe('TreeSelect.checkable', () => {
       />,
     );
 
-    wrapper.search('0-0-0');
-    wrapper.selectNode(1);
+    search(container, '0-0-0');
+    selectNode(1);
 
     expect(onChange.mock.calls[0][0]).toEqual([
       { label: 'Node2', value: '0-1' },
@@ -639,15 +643,17 @@ describe('TreeSelect.checkable', () => {
       },
     ];
 
-    const wrapper = mount(<TreeSelect defaultValue={['0-0']} treeData={treeData} treeCheckable />);
+    const { container } = render(
+      <TreeSelect defaultValue={['0-0']} treeData={treeData} treeCheckable />,
+    );
 
-    expect(wrapper.getSelection().length).toBeTruthy();
-    expect(wrapper.find('.rc-tree-select-selection-item-remove').length).toBeFalsy();
+    expect(container.querySelectorAll('.rc-tree-select-selection-item').length).toBeTruthy();
+    expect(container.querySelectorAll('.rc-tree-select-selection-item-remove').length).toBeFalsy();
   });
 
   it('treeCheckStrictly can set halfChecked', () => {
     const onChange = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         treeCheckStrictly
         treeCheckable
@@ -662,17 +668,19 @@ describe('TreeSelect.checkable', () => {
     );
 
     function getTreeNode(index) {
-      return wrapper.find('.rc-tree-select-tree-treenode').not('[aria-hidden]').at(index);
+      const treeNodes = container.querySelectorAll('.rc-tree-select-tree-treenode');
+      const visibleNodes = Array.from(treeNodes).filter(node => !node.hasAttribute('aria-hidden'));
+      return visibleNodes[index];
     }
 
     expect(
-      getTreeNode(0).hasClass('rc-tree-select-tree-treenode-checkbox-indeterminate'),
+      getTreeNode(0).classList.contains('rc-tree-select-tree-treenode-checkbox-indeterminate'),
     ).toBeTruthy();
     expect(
-      getTreeNode(1).hasClass('rc-tree-select-tree-treenode-checkbox-indeterminate'),
+      getTreeNode(1).classList.contains('rc-tree-select-tree-treenode-checkbox-indeterminate'),
     ).toBeFalsy();
 
-    wrapper.selectNode(1);
+    selectNode(1);
     expect(onChange).toHaveBeenCalledWith(
       [
         {

tests/util.tsx

@@ -36,3 +36,8 @@ export function search(element: HTMLElement, value: string) {
     jest.advanceTimersByTime(10000);
   });
 }
+
+export function clearSelection(element: HTMLElement, index = 0) {
+  const removeButton = element.querySelectorAll('.rc-tree-select-selection-item-remove')[index];
+  fireEvent.click(removeButton);
+}