feat(Select): add custom qa

src/components/Select/Select.tsx

@@ -278,6 +278,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                     renderFilter={renderFilter}
                     popupId={popupId}
                     activeIndex={activeIndex}
+                    qa={qa}
                 />
             );
         }
@@ -306,6 +307,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                     id={popupId}
                     activeIndex={activeIndex}
                     onChangeActive={setActiveIndex}
+                    qa={qa}
                 />
             );
         }

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);
     });
 });

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<SelectProps>]>([
@@ -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([]);
     });
 

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);

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}

src/components/Select/components/SelectControl/SelectControl.tsx

@@ -153,6 +153,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                 onMouseEnter={disableButtonAnimation}
                 onMouseLeave={enableButtonAnimation}
                 renderIcon={args.renderIcon}
+                qa={qa}
             />
         );
     };

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<SelectFilterRef, SelectFilterProps>((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<HTMLInputElement>(null);
 
@@ -77,7 +78,7 @@ export const SelectFilter = React.forwardRef<SelectFilterRef, SelectFilterProps>
                 placeholder={placeholder}
                 onUpdate={onChange}
                 onKeyDown={onKeyDown}
-                qa={SelectQa.FILTER_INPUT}
+                qa={qa ? `${qa}-filter-input` : SelectQa.FILTER_INPUT}
             />
         </div>
     );

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<List<FlattenOption>, SelectListProps>
         id,
         activeIndex,
         onChangeActive,
+        qa,
     } = props;
     const items = React.useMemo(
         () => (loading ? [...flattenOptions, loadingOption] : flattenOptions),
@@ -139,7 +141,7 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
         <List
             ref={ref}
             className={selectListBlock({size, virtualized, mobile})}
-            qa={SelectQa.LIST}
+            qa={qa ? `${qa}-list` : SelectQa.LIST}
             itemClassName={selectListBlock('item')}
             itemHeight={getItemHeight}
             itemsHeight={virtualized ? optionsHeight : undefined}

src/components/Select/components/SelectPopup/SelectPopup.tsx

@@ -33,12 +33,13 @@ export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
             virtualized,
             mobile,
             id,
+            qa,
         },
         ref,
     ) =>
         mobile ? (
             <Sheet
-                qa={SelectQa.SHEET}
+                qa={qa ? `${qa}-sheet` : SelectQa.SHEET}
                 className={className}
                 visible={Boolean(open)}
                 onClose={handleClose}
@@ -48,7 +49,7 @@ export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
         ) : (
             <Popup
                 className={b(null, className)}
-                qa={SelectQa.POPUP}
+                qa={qa ? `${qa}-popup` : SelectQa.POPUP}
                 anchorRef={ref as React.RefObject<HTMLDivElement>}
                 placement={placement}
                 open={open}

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;

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 */