From d1fde90717594553569b63cb8520e8ae80581f6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= Date: Mon, 25 Nov 2024 16:09:02 +0800 Subject: [PATCH] fix(Select): `collapsedItems`'s parameter `collapsedSelectedItems` (#3214) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(Select): `collapsedItems`'s parameter `collapsedSelectedItems` * test: add test custom collapsedItems test and custom popup --------- Co-authored-by: wū yāng --- src/select/__tests__/select.test.tsx | 187 ++++++++++++++++++++++++++- src/select/base/Select.tsx | 4 +- 2 files changed, 188 insertions(+), 3 deletions(-) diff --git a/src/select/__tests__/select.test.tsx b/src/select/__tests__/select.test.tsx index f382849d45..1f801e50c5 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; @@ -365,4 +368,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'); + }); }); diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx index f7d002756f..8da32842c7 100644 --- a/src/select/base/Select.tsx +++ b/src/select/base/Select.tsx @@ -192,9 +192,11 @@ const Select = forwardRefWithStatics( return; } + const values = currentOptions .filter((option) => !option.checkAll && !option.disabled) .map((option) => option[keys?.value || 'value']); + const selectableOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions); const checkAllValue = @@ -436,7 +438,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}