diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx index 5b9b8865f6..d355958987 100644 --- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx +++ b/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx @@ -70,6 +70,38 @@ describe('ChipsSelect', () => { expect(within(dropdownLocator).getByRole('option', { name: 'Синий' })).toBeTruthy(); }); + it('should sort options by sortFn prop', async () => { + type Option = { label: string; value: number }; + const options: Option[] = [ + { label: '1', value: 1 }, + { label: '3', value: 3 }, + { label: '2', value: 2 }, + ]; + const byAsc = (a: Option, b: Option) => a.label.localeCompare(b.label); + const byDesc = (a: Option, b: Option) => b.label.localeCompare(a.label); + + const checkOptionsOrder = async (order: string[]) => { + await userEvent.click(screen.getByRole('combobox')); + const dropdownLocator = screen.getByTestId('dropdown'); + const optionsValues = within(dropdownLocator) + .getAllByRole('option') + .map((element) => element.textContent); + expect(optionsValues).toEqual(order); + }; + + // Сортируем по возрастанию + const { rerender } = render( + , + ); + await checkOptionsOrder(['1', '2', '3']); + + // Сортируем по убыванию + rerender( + , + ); + await checkOptionsOrder(['3', '2', '1']); + }); + it('shows spinner if fetching', async () => { const result = render(); await userEvent.click(result.getByRole('combobox')); diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx index 3556c88775..614e9d195c 100644 --- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx +++ b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx @@ -161,6 +161,7 @@ export const ChipsSelect =