From 879319df3855f54b878fa511860e72bc6a9e3833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= Date: Tue, 19 Nov 2024 02:20:07 +0800 Subject: [PATCH 1/2] fix(Select): `collapsedItems`'s parameter `collapsedSelectedItems` --- src/select/base/Select.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx index d0a5fe988a..d4390f67a4 100644 --- a/src/select/base/Select.tsx +++ b/src/select/base/Select.tsx @@ -192,8 +192,8 @@ const Select = forwardRefWithStatics( return; } - const values = currentOptions.filter((option) => !option.checkAll && !option.disabled) - const selectableOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions) + const values = currentOptions.filter((option) => !option.checkAll && !option.disabled); + const selectableOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions); const checkAllValue = !checkAll && selectableOptions.length !== (props.value as Array)?.length ? selectableOptions : []; @@ -434,7 +434,7 @@ const Select = forwardRefWithStatics( allowInput={(filterable ?? local.filterable) || isFunction(filter)} multiple={multiple} value={selectedLabel} - options={props.options} + options={selectedOptions} valueDisplay={renderValueDisplay()} clearable={clearable} disabled={disabled} From b46402931f660e6477536db89e8ffc3bc4278392 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= Date: Thu, 21 Nov 2024 03:15:13 +0800 Subject: [PATCH 2/2] test: add test custom collapsedItems test and custom popup --- src/select/__tests__/select.test.tsx | 187 ++++++++++++++++++++++++++- 1 file changed, 185 insertions(+), 2 deletions(-) diff --git a/src/select/__tests__/select.test.tsx b/src/select/__tests__/select.test.tsx index dde2d4e870..0c0fdab144 100644 --- a/src/select/__tests__/select.test.tsx +++ b/src/select/__tests__/select.test.tsx @@ -1,9 +1,12 @@ /* eslint-disable */ -import { render, fireEvent, mockTimeout, act } from '@test/utils'; +import { render, fireEvent, mockTimeout, mockDelay, act } from '@test/utils'; import React, { useState } from 'react'; import userEvent from '@testing-library/user-event'; -import { Select } from '../index'; +import { Select, SelectProps } from '../index'; +import Popup from '../../popup'; +import Space from '../../space'; +import Tag from '../../tag'; const { Option, OptionGroup } = Select; @@ -332,4 +335,184 @@ describe('Select 组件测试', () => { expect(getByText(text)).toBeTruthy(); }); }); + + test('collapsedItems all select', async () => { + const minCollapsedNum = 1; + const renderCollapsedItems: SelectProps['collapsedItems'] = ({ collapsedSelectedItems, onClose }) => ( + + {collapsedSelectedItems.map((item, index) => ( + onClose({ e: context.e, index: minCollapsedNum + index })} + > + {item.label} + + ))} + + } + > + More({collapsedSelectedItems?.length}) + + ); + + const MultipleSelect = () => { + const selectAllValue = ['apple', 'banana', 'orange']; + + return ( + + ); + }; + const { getByText, container } = render(); + const tags0 = container.querySelectorAll('.t-tag'); + expect(tags0.length).toBe(0); + + // 检测第一次select value + expect(document.querySelectorAll(popupSelector).length).toBe(0); + fireEvent.click(document.querySelector('.t-input')); + fireEvent.click(getByText('Apple')); + const tags1 = container.querySelectorAll('.t-tag'); + expect(tags1.length).toBe(1); + expect(tags1[0]).toHaveTextContent('Apple'); + //input popup 消失 + fireEvent.click(document.querySelector('.t-input')); + expect(document.querySelectorAll(popupSelector).length).toBe(1); + await mockTimeout(() => { + expect(document.querySelector(popupSelector)).toHaveStyle({ + display: 'none', + }); + }); + + // 检测第二次 select value + fireEvent.click(document.querySelector('.t-input')); + await mockTimeout(() => { + expect(document.querySelector(popupSelector)).toHaveStyle({ + display: 'block', + }); + }); + fireEvent.click(getByText('Orange')); + const tags2 = container.querySelectorAll('.t-tag'); + expect(tags2.length).toBe(2); + expect(tags2[0]).toHaveTextContent('Apple'); + expect(tags2[1]).toHaveTextContent('More(1)'); + //input popup 消失 + fireEvent.click(document.querySelector('.t-input')); + await mockTimeout(() => { + expect(document.querySelectorAll(popupSelector).length).toBe(1); + expect(document.querySelector(popupSelector)).toHaveStyle({ + display: 'none', + }); + }); + // collapsedItems popup 展示 + fireEvent.mouseEnter(tags2[1]); + expect(document.querySelectorAll(popupSelector).length).toBe(2); + // 判断展示的tag + const collapsedTags2 = document.querySelectorAll('.collapsed-items-popup .t-tag'); + expect(collapsedTags2.length).toBe(1); + expect(collapsedTags2[0]).toHaveTextContent('Orange'); + + // 检测第三次 select value + fireEvent.click(document.querySelector('.t-input')); + await mockTimeout(() => { + expect(document.querySelector(popupSelector)).toHaveStyle({ + display: 'block', + }); + }); + fireEvent.click(getByText('Banana')); + const tags3 = container.querySelectorAll('.t-tag'); + expect(tags3.length).toBe(2); + expect(tags3[0]).toHaveTextContent('Apple'); + expect(tags3[1]).toHaveTextContent('More(2)'); + //input popup 消失 + fireEvent.click(document.querySelector('.t-input')); + await mockTimeout(() => { + expect(document.querySelectorAll(popupSelector).length).toBe(2); + expect(document.querySelector(popupSelector)).toHaveStyle({ + display: 'none', + }); + }); + // collapsedItems popup 展示 + fireEvent.mouseEnter(tags3[1]); + expect(document.querySelectorAll(popupSelector).length).toBe(2); + // 判断展示的tag + const collapsedTags3 = document.querySelectorAll('.collapsed-items-popup .t-tag'); + expect(collapsedTags3.length).toBe(2); + expect(collapsedTags3[0]).toHaveTextContent('Orange'); + expect(collapsedTags3[1]).toHaveTextContent('Banana'); + }); });