From 26b8d331edbbc1b2a091ed9c0fd715812ca2b25d Mon Sep 17 00:00:00 2001 From: "Y T. Hy" <52711139+yhy-1@users.noreply.github.com> Date: Thu, 18 Jan 2024 16:21:27 -0500 Subject: [PATCH 1/8] WIP --- docs/examples/BasicMulti.tsx | 1 + docs/examples/BasicSingle.tsx | 1 + packages/react-select/src/Select.tsx | 33 ++++++++++--- .../src/__tests__/Select.test.tsx | 34 ++++++++++++-- .../src/components/LiveRegion.tsx | 2 +- .../src/components/indicators.tsx | 46 +++++++++++++++---- 6 files changed, 99 insertions(+), 18 deletions(-) diff --git a/docs/examples/BasicMulti.tsx b/docs/examples/BasicMulti.tsx index 9cc30d6d43..82cd028bb2 100644 --- a/docs/examples/BasicMulti.tsx +++ b/docs/examples/BasicMulti.tsx @@ -6,6 +6,7 @@ import { colourOptions } from '../data'; export default () => ( A11yTexts can be provided through ariaLiveMessages prop', keyCode: 13, key: 'Enter', }); - + debug(); expect(container.querySelector(liveRegionEventId)!.textContent).toMatch( 'CUSTOM: option 0 is selected.' ); @@ -2515,7 +2515,7 @@ test('accessibility > announces already selected values when focused', () => { }); test('accessibility > announces cleared values', () => { - let { container } = render( + let { container, debug } = render( ); + expect( + container.querySelector('div.react-select__clear-indicator') + ).toBeVisible(); +}); + +test.only('enableAccessibleClearIndicator is true render ', () => { + let props = { + ...BASIC_PROPS, + value: OPTIONS[0], + }; + let { container } = render( + A11yTexts can be provided through ariaLiveMessages prop', keyCode: 13, key: 'Enter', }); - debug(); expect(container.querySelector(liveRegionEventId)!.textContent).toMatch( 'CUSTOM: option 0 is selected.' ); @@ -2926,48 +2925,81 @@ cases( } ); -test('clear select by clicking on clear button > should not call onMenuOpen', () => { - let onChangeSpy = jest.fn(); - let props = { ...BASIC_PROPS, onChange: onChangeSpy }; - let { container } = render( - + ); - expect(container.querySelectorAll('.react-select__multi-value').length).toBe( - 1 - ); - fireEvent.mouseDown( - container.querySelector('.react-select__clear-indicator')!, - { button: 0 } - ); - expect(onChangeSpy).toBeCalledWith([], { - action: 'clear', - name: BASIC_PROPS.name, - removedValues: [{ label: '0', value: 'zero' }], - }); -}); + expect( + container.querySelectorAll('.react-select__multi-value').length + ).toBe(1); + fireEvent.mouseDown( + container.querySelector('.react-select__clear-indicator')!, + { button: 0 } + ); + expect(onChangeSpy).toBeCalledWith([], { + action: 'clear', + name: BASIC_PROPS.name, + removedValues: [{ label: '0', value: 'zero' }], + }); + }, + { + 'mouse only clear indicator': { + props: { + ...BASIC_PROPS, + isClearable: true, + }, + }, + 'clear indicator button': { + ...BASIC_PROPS, + isClearable: true, + enableAccessibleClearIndicator: true, + }, + } +); -test('clearing select using clear button to not call onMenuOpen or onMenuClose', () => { - let onMenuCloseSpy = jest.fn(); - let onMenuOpenSpy = jest.fn(); - let props = { - ...BASIC_PROPS, - onMenuClose: onMenuCloseSpy, - onMenuOpen: onMenuOpenSpy, - }; - let { container } = render( - + ); + expect( + container.querySelectorAll('.react-select__multi-value').length + ).toBe(1); + fireEvent.mouseDown( + container.querySelector('.react-select__clear-indicator')!, + { button: 0 } + ); + expect(onMenuOpenSpy).not.toHaveBeenCalled(); + expect(onMenuCloseSpy).not.toHaveBeenCalled(); + }, + { + 'mouse only clear indicator': { + props: { + ...BASIC_PROPS, + isClearable: true, + }, + }, + 'clear indicator button': { + ...BASIC_PROPS, + isClearable: true, + enableAccessibleClearIndicator: true, + }, + } +); test('multi select > calls onChange when option is selected and isSearchable is false', () => { let onChangeSpy = jest.fn(); @@ -3377,7 +3409,7 @@ cases( } ); -test('enableAccessibleClearIndicator is false render non-interactive clear indicator', () => { +test('enableAccessibleClearIndicator is false > render non-interactive clear indicator', () => { let props = { ...BASIC_PROPS, value: OPTIONS[0], @@ -3388,7 +3420,7 @@ test('enableAccessibleClearIndicator is false render non-interactive clear indic ).toBeVisible(); }); -test.only('enableAccessibleClearIndicator is true render ', () => { +test('enableAccessibleClearIndicator is true > clear indicator is focusable and clear value', () => { let props = { ...BASIC_PROPS, value: OPTIONS[0], @@ -3396,11 +3428,29 @@ test.only('enableAccessibleClearIndicator is true render ', () => { let { container } = render( { isSearchable={isSearchable} name="color" options={colourOptions} - enableAccessibleClearIndicator - onChange={(val) => console.log(val)} />
= (ref) => { this.inputRef = ref; }; - // clearIndicatorRef: HTMLButtonElement | null = null; - // getClearIndicatorRef: RefCallback = (ref) => { - // this.clearIndicatorRef = ref; - // }; + // Lifecycle // ------------------------------ From cfa5d912c8b3df31719faa71cc781f4c76c859be Mon Sep 17 00:00:00 2001 From: "Y T. Hy" <52711139+yhy-1@users.noreply.github.com> Date: Fri, 19 Jan 2024 09:39:32 -0500 Subject: [PATCH 5/8] Update Select.test.tsx --- packages/react-select/src/__tests__/Select.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx index 9fb946f643..14feaff045 100644 --- a/packages/react-select/src/__tests__/Select.test.tsx +++ b/packages/react-select/src/__tests__/Select.test.tsx @@ -2514,7 +2514,7 @@ test('accessibility > announces already selected values when focused', () => { }); test('accessibility > announces cleared values', () => { - let { container, debug } = render( + let { container } = render( - ); - const liveRegionSelectionId = '#aria-selection'; - /** - * announce deselected value - */ - fireEvent.focus(container.querySelector('input.react-select__input')!); - fireEvent.mouseDown( - container.querySelector('.react-select__clear-indicator')! - ); - expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch( - 'All selected options have been cleared.' - ); -}); +cases( + 'accessibility > announces cleared values', + ({ props = BASIC_PROPS }) => { + let { container } = render( + - ); +cases( + 'hitting escape does not call onChange if menu is Open', + ({ props = BASIC_PROPS }) => { + let onChangeSpy = jest.fn(); + let finalProps = { ...props, onChange: onChangeSpy }; + let { container } = render( + - ); - fireEvent.keyDown(container.querySelector('.react-select')!, { - keyCode: 27, - key: 'Escape', - }); - expect( - container.querySelector('.react-select__single-value')!.textContent - ).toEqual('0'); +cases( + 'close menu on hitting escape and clear input value if menu is open even if escapeClearsValue and isClearable are true', + ({ props = BASIC_PROPS }) => { + let onMenuCloseSpy = jest.fn(); + let onInputChangeSpy = jest.fn(); - expect(onMenuCloseSpy).toHaveBeenCalled(); - // once by onMenuClose and other is direct - expect(onInputChangeSpy).toHaveBeenCalledTimes(2); - expect(onInputChangeSpy).toHaveBeenCalledWith('', { - action: 'menu-close', - prevInputValue: '', - }); - expect(onInputChangeSpy).toHaveBeenLastCalledWith('', { - action: 'menu-close', - prevInputValue: '', - }); -}); + let finalProps = { + ...props, + onInputChange: onInputChangeSpy, + onMenuClose: onMenuCloseSpy, + value: OPTIONS[0], + }; + let { container } = render( + ); +cases( + 'to not clear value when hitting escape if escapeClearsValue is false (default) and isClearable is true', + ({ props = BASIC_PROPS }) => { + let onChangeSpy = jest.fn(); + let finalProps = { ...props, onChange: onChangeSpy, value: OPTIONS[0] }; + let { container } = render( - ); +cases( + 'to clear value when hitting escape if escapeClearsValue and isClearable are true', + ({ props = BASIC_PROPS }) => { + let onInputChangeSpy = jest.fn(); + let finalProps = { + ...props, + onChange: onInputChangeSpy, + value: OPTIONS[0], + }; + let { container } = render( + ); - - const clearIndicator = container.querySelector( - 'button.react-select__clear-indicator' - )!; - expect(clearIndicator).toBeVisible(); + expect( + container.querySelector('button.react-select__clear-indicator')! + ).toBeVisible(); userEvent.click(container.querySelector('.react-select__input')!); userEvent.tab(); @@ -3440,17 +3523,11 @@ test('enableAccessibleClearIndicator is true > clear indicator is focusable and container.querySelector('button.react-select__clear-indicator')! ).toHaveFocus(); - fireEvent.keyDown( - container.querySelector('button.react-select__clear-indicator')!, - { - key: 'Enter', - keyCode: 13, - } - ); - expect( - container.querySelector('button.react-select__clear-indicator') - ).not.toBeInTheDocument(); - expect( - container.querySelector('.react-select__single-value')!.textContent - ).toEqual('0'); + fireEvent.click(container.querySelector('.react-select__clear-indicator')!); + + expect(onChangeSpy).toHaveBeenCalledWith(null, { + action: 'clear', + name: BASIC_PROPS.name, + removedValues: [{ label: '0', value: 'zero' }], + }); }); From ced2a2a8dfb25fd714334ce5ecb04f58442f2b05 Mon Sep 17 00:00:00 2001 From: "Y T. Hy" <52711139+yhy-1@users.noreply.github.com> Date: Mon, 22 Jan 2024 14:03:33 -0500 Subject: [PATCH 8/8] Update Select.test.tsx --- packages/react-select/src/__tests__/Select.test.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx index 900c4147d5..0e640944f2 100644 --- a/packages/react-select/src/__tests__/Select.test.tsx +++ b/packages/react-select/src/__tests__/Select.test.tsx @@ -1,11 +1,5 @@ import React, { KeyboardEvent } from 'react'; -import { - render, - fireEvent, - EventType, - waitFor, - act, -} from '@testing-library/react'; +import { render, fireEvent, EventType } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import cases from 'jest-in-case';