diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 1edcb2db8f..1adfece89f 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -278,6 +278,7 @@ export const Select = React.forwardRef(function renderFilter={renderFilter} popupId={popupId} activeIndex={activeIndex} + qa={qa} /> ); } @@ -306,6 +307,7 @@ export const Select = React.forwardRef(function id={popupId} activeIndex={activeIndex} onChangeActive={setActiveIndex} + qa={qa} /> ); } diff --git a/src/components/Select/__tests__/Select.base-actions.test.tsx b/src/components/Select/__tests__/Select.base-actions.test.tsx index 9fb9e1b981..bcec6f8dac 100644 --- a/src/components/Select/__tests__/Select.base-actions.test.tsx +++ b/src/components/Select/__tests__/Select.base-actions.test.tsx @@ -340,7 +340,7 @@ describe('Select base actions', () => { const user = userEvent.setup(); const selectControl = getByTestId(TEST_QA); await user.click(selectControl); - const selectList = getByTestId(SelectQa.LIST); + const selectList = getByTestId(`${TEST_QA}-list`); expect(selectList).not.toHaveClass(SELECT_LIST_VIRTUALIZED_CLASS); }, ); @@ -356,7 +356,7 @@ describe('Select base actions', () => { const user = userEvent.setup(); const selectControl = getByTestId(TEST_QA); await user.click(selectControl); - const selectList = getByTestId(SelectQa.LIST); + const selectList = getByTestId(`${TEST_QA}-list`); expect(selectList).toHaveClass(SELECT_LIST_VIRTUALIZED_CLASS); }); }); diff --git a/src/components/Select/__tests__/Select.clear.test.tsx b/src/components/Select/__tests__/Select.clear.test.tsx index f01d2d4f7f..5bd6d637cb 100644 --- a/src/components/Select/__tests__/Select.clear.test.tsx +++ b/src/components/Select/__tests__/Select.clear.test.tsx @@ -4,7 +4,7 @@ import {cleanup} from '../../../../test-utils/utils'; import {SelectQa} from '../constants'; import type {SelectProps} from '../types'; -import {DEFAULT_OPTIONS, renderControl, setup} from './utils'; +import {DEFAULT_OPTIONS, TEST_QA, renderControl, setup} from './utils'; afterEach(() => { cleanup(); @@ -27,7 +27,7 @@ describe('Select clear', () => { ['multiple', {hasClear: true, multiple: true}], ])('display clear icon with hasClear and with selected value', async () => { const {getByTestId} = setup({hasClear: true, value: [DEFAULT_OPTIONS[0].value]}); - getByTestId(SelectQa.CLEAR); + getByTestId(`${TEST_QA}-clear`); }); test.each<[string, Partial]>([ @@ -53,7 +53,7 @@ describe('Select clear', () => { }); const user = userEvent.setup(); - await user.click(getByTestId(SelectQa.CLEAR)); + await user.click(getByTestId(`${TEST_QA}-clear`)); expect(onUpdate).toHaveBeenCalledWith([]); }); diff --git a/src/components/Select/__tests__/Select.renderPopup.test.tsx b/src/components/Select/__tests__/Select.renderPopup.test.tsx index 9425aa42ba..265cca4384 100644 --- a/src/components/Select/__tests__/Select.renderPopup.test.tsx +++ b/src/components/Select/__tests__/Select.renderPopup.test.tsx @@ -2,8 +2,6 @@ import * as React from 'react'; import userEvent from '@testing-library/user-event'; -import {SelectQa} from '../constants'; - import {DEFAULT_OPTIONS, TEST_QA, setup} from './utils'; const QA = 'SELECT_RENDER_POPUP_TEST_QA'; @@ -29,10 +27,10 @@ describe('Select renderPopup', () => { // open select popup await user.click(selectControl); - const filterInput = getByTestId(SelectQa.FILTER_INPUT); + const filterInput = getByTestId(`${TEST_QA}-filter-input`); expect(filterInput).toBeVisible(); - const list = getByTestId(SelectQa.LIST); + const list = getByTestId(`${TEST_QA}-list`); expect(list).toBeVisible(); const customPopupDiv = getByTestId(QA); diff --git a/src/components/Select/components/SelectClear/SelectClear.tsx b/src/components/Select/components/SelectClear/SelectClear.tsx index f601e5fb13..f6550e7347 100644 --- a/src/components/Select/components/SelectClear/SelectClear.tsx +++ b/src/components/Select/components/SelectClear/SelectClear.tsx @@ -8,7 +8,7 @@ import type {SelectClearProps} from '../../types'; import './SelectClear.scss'; export const SelectClear = (props: SelectClearProps) => { - const {size, onClick, onMouseEnter, onMouseLeave, renderIcon} = props; + const {size, onClick, onMouseEnter, onMouseLeave, renderIcon, qa} = props; const {t} = i18n.useTranslation(); const icon = renderIcon ? ( renderIcon() @@ -22,7 +22,7 @@ export const SelectClear = (props: SelectClearProps) => { onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} - data-qa={SelectQa.CLEAR} + data-qa={qa ? `${qa}-clear` : SelectQa.CLEAR} type="button" > {icon} diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx index 73f0eb95ef..f1913e90b2 100644 --- a/src/components/Select/components/SelectControl/SelectControl.tsx +++ b/src/components/Select/components/SelectControl/SelectControl.tsx @@ -153,6 +153,7 @@ export const SelectControl = React.forwardRef(( onMouseEnter={disableButtonAnimation} onMouseLeave={enableButtonAnimation} renderIcon={args.renderIcon} + qa={qa} /> ); }; diff --git a/src/components/Select/components/SelectFilter/SelectFilter.tsx b/src/components/Select/components/SelectFilter/SelectFilter.tsx index 1be0c978a9..bf1903606c 100644 --- a/src/components/Select/components/SelectFilter/SelectFilter.tsx +++ b/src/components/Select/components/SelectFilter/SelectFilter.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import {TextInput} from '../../../controls'; +import type {QAProps} from '../../../types'; import {block} from '../../../utils/cn'; import {SelectQa} from '../../constants'; import i18n from '../../i18n'; @@ -22,14 +23,14 @@ type SelectFilterProps = { placeholder?: string; popupId: string; activeIndex?: number; -}; +} & QAProps; const style = { padding: '4px 4px 0', }; export const SelectFilter = React.forwardRef((props, ref) => { - const {onChange, onKeyDown, renderFilter, size, value, placeholder, popupId, activeIndex} = + const {onChange, onKeyDown, renderFilter, size, value, placeholder, popupId, activeIndex, qa} = props; const inputRef = React.useRef(null); @@ -77,7 +78,7 @@ export const SelectFilter = React.forwardRef placeholder={placeholder} onUpdate={onChange} onKeyDown={onKeyDown} - qa={SelectQa.FILTER_INPUT} + qa={qa ? `${qa}-filter-input` : SelectQa.FILTER_INPUT} /> ); diff --git a/src/components/Select/components/SelectList/SelectList.tsx b/src/components/Select/components/SelectList/SelectList.tsx index eadf6d6eaf..a00e4b729e 100644 --- a/src/components/Select/components/SelectList/SelectList.tsx +++ b/src/components/Select/components/SelectList/SelectList.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import {List} from '../../../List'; +import type {QAProps} from '../../../types'; import {SelectQa, selectListBlock} from '../../constants'; import type {SelectOption, SelectProps} from '../../types'; import {getOptionsHeight, getPopupItemHeight, scrollToItem} from '../../utils'; @@ -31,7 +32,7 @@ type SelectListProps = { id: string; activeIndex?: number; onChangeActive: (index?: number) => void; -}; +} & QAProps; const loadingOption = {value: '__SELECT_LIST_ITEM_LOADING__', disabled: true}; @@ -53,6 +54,7 @@ export const SelectList = React.forwardRef, SelectListProps> id, activeIndex, onChangeActive, + qa, } = props; const items = React.useMemo( () => (loading ? [...flattenOptions, loadingOption] : flattenOptions), @@ -139,7 +141,7 @@ export const SelectList = React.forwardRef, SelectListProps> ( virtualized, mobile, id, + qa, }, ref, ) => mobile ? ( ( ) : ( } placement={placement} open={open} diff --git a/src/components/Select/components/SelectPopup/types.ts b/src/components/Select/components/SelectPopup/types.ts index e4d71b65a3..0cde202ad9 100644 --- a/src/components/Select/components/SelectPopup/types.ts +++ b/src/components/Select/components/SelectPopup/types.ts @@ -1,6 +1,7 @@ import type * as React from 'react'; import type {PopupPlacement} from '../../../Popup'; +import type {QAProps} from '../../../types'; import type {SelectProps} from '../../types'; export type SelectPopupProps = { @@ -17,4 +18,4 @@ export type SelectPopupProps = { id?: string; onAfterOpen?: () => void; onAfterClose?: () => void; -}; +} & QAProps; diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts index 8a2929b58c..50394f1ba9 100644 --- a/src/components/Select/types.ts +++ b/src/components/Select/types.ts @@ -179,17 +179,18 @@ type SelectClearIconProps = { renderIcon: SelectRenderClearArgs['renderIcon']; }; -export type SelectClearProps = SelectClearIconProps & { - onClick: (e: React.MouseEvent) => void; - /** - * select control (button) has styles on focus, focus-in with animation on click event - * to prevent this on click by clear icon need to set class on button - * with disabling animation on button - * @param e - */ - onMouseEnter: (e: React.MouseEvent) => void; - onMouseLeave: (e: React.MouseEvent) => void; -}; +export type SelectClearProps = SelectClearIconProps & + QAProps & { + onClick: (e: React.MouseEvent) => void; + /** + * select control (button) has styles on focus, focus-in with animation on click event + * to prevent this on click by clear icon need to set class on button + * with disabling animation on button + * @param e + */ + onMouseEnter: (e: React.MouseEvent) => void; + onMouseLeave: (e: React.MouseEvent) => void; + }; export type SelectCounterProps = { /** amount of selected elements to show */