test: add maxCount test cases

Author: aojunhao123

tests/Select.multiple.spec.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render } from '@testing-library/react';
+import { render, fireEvent, within } from '@testing-library/react';
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
@@ -32,7 +32,10 @@ describe('TreeSelect.multiple', () => {
 
   it('remove by backspace key', () => {
     const wrapper = mount(createSelect({ defaultValue: ['0', '1'] }));
-    wrapper.find('input').first().simulate('keyDown', { which: KeyCode.BACKSPACE, key: 'Backspace' });
+    wrapper
+      .find('input')
+      .first()
+      .simulate('keyDown', { which: KeyCode.BACKSPACE, key: 'Backspace' });
     expect(wrapper.getSelection()).toHaveLength(1);
     expect(wrapper.getSelection(0).text()).toBe('label0');
   });
@@ -59,9 +62,15 @@ describe('TreeSelect.multiple', () => {
       }
     }
     const wrapper = mount(<App />);
-    wrapper.find('input').first().simulate('keyDown', { which: KeyCode.BACKSPACE, key: 'Backspace' });
+    wrapper
+      .find('input')
+      .first()
+      .simulate('keyDown', { which: KeyCode.BACKSPACE, key: 'Backspace' });
     wrapper.selectNode(1);
-    wrapper.find('input').first().simulate('keyDown', { which: KeyCode.BACKSPACE, key: 'Backspace' });
+    wrapper
+      .find('input')
+      .first()
+      .simulate('keyDown', { which: KeyCode.BACKSPACE, key: 'Backspace' });
     expect(wrapper.getSelection()).toHaveLength(1);
     expect(wrapper.getSelection(0).text()).toBe('label0');
   });
@@ -337,9 +346,7 @@ describe('TreeSelect.multiple', () => {
       />,
     );
 
-    const values = Array.from(
-      container.querySelectorAll('.rc-tree-select-selection-item-content'),
-    ); //.map(ele => ele.textContent);
+    const values = Array.from(container.querySelectorAll('.rc-tree-select-selection-item-content')); //.map(ele => ele.textContent);
 
     expect(values).toHaveLength(0);
 
@@ -348,4 +355,103 @@ describe('TreeSelect.multiple', () => {
     expect(placeholder.textContent).toBe('Fake placeholder');
   });
 
+  describe('TreeSelect.maxCount', () => {
+    const treeData = [
+      { key: '0', value: '0', title: '0 label' },
+      { key: '1', value: '1', title: '1 label' },
+      { key: '2', value: '2', title: '2 label' },
+      { key: '3', value: '3', title: '3 label' },
+    ];
+
+    const renderTreeSelect = props => {
+      return render(<TreeSelect multiple maxCount={2} treeData={treeData} open {...props} />);
+    };
+
+    const selectOptions = (container, optionTexts) => {
+      const dropdownList = container.querySelector('.rc-tree-select-dropdown');
+      optionTexts.forEach(text => {
+        fireEvent.click(within(dropdownList).getByText(text));
+      });
+    };
+
+    it('should disable unselected options when selection reaches maxCount', () => {
+      const { container } = renderTreeSelect();
+
+      selectOptions(container, ['0 label', '1 label']);
+
+      // Check if third and fourth options are disabled
+      const dropdownList = container.querySelector('.rc-tree-select-dropdown');
+      const option3 = within(dropdownList).getByText('2 label');
+      const option4 = within(dropdownList).getByText('3 label');
+
+      expect(option3.closest('div')).toHaveClass('rc-tree-select-tree-treenode-disabled');
+      expect(option4.closest('div')).toHaveClass('rc-tree-select-tree-treenode-disabled');
+    });
+
+    it('should allow deselecting options after reaching maxCount', () => {
+      const { container } = renderTreeSelect();
+      const dropdownList = container.querySelector('.rc-tree-select-dropdown');
+
+      selectOptions(container, ['0 label', '1 label']);
+
+      // Try selecting third option, should be disabled
+      const option3 = within(dropdownList).getByText('2 label');
+      fireEvent.click(option3);
+      expect(option3.closest('div')).toHaveClass('rc-tree-select-tree-treenode-disabled');
+
+      // Deselect first option
+      fireEvent.click(within(dropdownList).getByText('0 label'));
+      expect(within(dropdownList).queryByText('0 label')).toBeInTheDocument();
+
+      // Now should be able to select third option
+      fireEvent.click(option3);
+      expect(option3.closest('div')).not.toHaveClass('rc-tree-select-tree-treenode-disabled');
+    });
+
+    it('should not trigger onChange when trying to select beyond maxCount', () => {
+      const handleChange = jest.fn();
+      const { container } = renderTreeSelect({ onChange: handleChange });
+
+      selectOptions(container, ['0 label', '1 label']);
+      expect(handleChange).toHaveBeenCalledTimes(2);
+
+      // Try selecting third option
+      const dropdownList = container.querySelector('.rc-tree-select-dropdown');
+      fireEvent.click(within(dropdownList).getByText('2 label'));
+      expect(handleChange).toHaveBeenCalledTimes(2); // Should not increase
+    });
+
+    it('should not affect deselection operations when maxCount is reached', () => {
+      const handleChange = jest.fn();
+      const { container } = renderTreeSelect({ onChange: handleChange });
+
+      selectOptions(container, ['0 label', '1 label']);
+      expect(handleChange).toHaveBeenCalledTimes(2);
+
+      // Deselect first option
+      const dropdownList = container.querySelector('.rc-tree-select-dropdown');
+      fireEvent.click(within(dropdownList).getByText('0 label'));
+      expect(handleChange).toHaveBeenCalledTimes(3);
+
+      // Should be able to select third option
+      fireEvent.click(within(dropdownList).getByText('2 label'));
+      expect(handleChange).toHaveBeenCalledTimes(4);
+    });
+
+    it('should not allow any selection when maxCount is 0', () => {
+      const handleChange = jest.fn();
+      const { container } = renderTreeSelect({ maxCount: 0, onChange: handleChange });
+
+      selectOptions(container, ['0 label', '1 label']);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('should not limit selection when maxCount is greater than number of options', () => {
+      const handleChange = jest.fn();
+      const { container } = renderTreeSelect({ maxCount: 5, onChange: handleChange });
+
+      selectOptions(container, ['0 label', '1 label', '2 label', '3 label']);
+      expect(handleChange).toHaveBeenCalledTimes(4);
+    });
+  });
 });