@xh/hoist 59.2.0 → 59.3.0

package/desktop/cmp/input/RadioInput.ts

@@ -9,7 +9,7 @@ import {hoistCmp, HoistProps, HSide} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {radio, radioGroup} from '@xh/hoist/kit/blueprint';
 import {computed, makeObservable} from '@xh/hoist/mobx';
-import {withDefault} from '@xh/hoist/utils/js';
+import {getTestId, TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {filter, isObject} from 'lodash';
 import './RadioInput.scss';
 
@@ -99,6 +99,7 @@ const cmp = hoistCmp.factory<RadioInputModel>(({model, className, ...props}, ref
             label: opt.label,
             value: opt.value,
             className: 'xh-radio-input-option',
+            [TEST_ID]: getTestId(props.testId, `${opt.label}`),
             onFocus: model.onFocus,
             onBlur: model.onBlur
         });
@@ -111,6 +112,7 @@ const cmp = hoistCmp.factory<RadioInputModel>(({model, className, ...props}, ref
         inline: props.inline,
         selectedValue: model.renderValue,
         onChange: model.onChange,
+        testId: props.testId,
         ref
     });
 });

package/desktop/cmp/input/Select.ts

@@ -7,14 +7,14 @@
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {box, div, fragment, hbox, span} from '@xh/hoist/cmp/layout';
 import {
+    Awaitable,
     createElement,
     hoistCmp,
     HoistProps,
     LayoutProps,
     PlainObject,
-    XH,
-    Awaitable,
-    SelectOption
+    SelectOption,
+    XH
 } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
@@ -28,7 +28,7 @@ import {
 } from '@xh/hoist/kit/react-select';
 import {action, bindable, makeObservable, observable, override} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
-import {throwIf, withDefault} from '@xh/hoist/utils/js';
+import {elemWithin, getTestId, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef, getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import debouncePromise from 'debounce-promise';
@@ -591,6 +591,21 @@ class SelectInputModel extends HoistInputModel {
         return this._valueContainerCmp;
     }
 
+    _menuCmp = null;
+    getMenuCmp() {
+        if (!this._menuCmp) {
+            const testId = getTestId(this.componentProps, 'menu');
+            this._menuCmp = testId
+                ? props =>
+                      createElement(components.Menu, {
+                          ...props,
+                          innerProps: {[TEST_ID]: testId, ...props.innerProps}
+                      })
+                : components.Menu;
+        }
+        return this._menuCmp;
+    }
+
     getDropdownIndicatorCmp() {
         return this.hideDropdownIndicator
             ? () => null
@@ -604,6 +619,7 @@ class SelectInputModel extends HoistInputModel {
             return div({
                 ...restInnerProps,
                 ref,
+                [TEST_ID]: getTestId(this.componentProps, 'clear-btn'),
                 item: Icon.x({className: 'xh-select__indicator'})
             });
         };
@@ -701,6 +717,7 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
             components: {
                 DropdownIndicator: model.getDropdownIndicatorCmp(),
                 ClearIndicator: model.getClearIndicatorCmp(),
+                Menu: model.getMenuCmp(),
                 IndicatorSeparator: () => null,
                 ValueContainer: model.getValueContainerCmp(),
                 MultiValueLabel: model.getMultiValueLabelCmp(),
@@ -772,6 +789,16 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
                 e.stopPropagation();
             }
         },
+        onMouseDown: e => {
+            // Some internal elements, like the dropdown indicator and the rendered single value,
+            // fire 'mousedown' events. These can bubble and inadvertently close Popovers that
+            // contain Selects.
+            const target = e?.target as HTMLElement;
+            if (target && elemWithin(target, 'bp4-popover')) {
+                e.stopPropagation();
+            }
+        },
+        testId: props.testId,
         ...layoutProps,
         width: withDefault(width, 200),
         height: height,

package/desktop/cmp/input/SwitchInput.ts

@@ -8,7 +8,7 @@ import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cm
 import {hoistCmp, HoistProps, HSide, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {switchControl} from '@xh/hoist/kit/blueprint';
-import {withDefault} from '@xh/hoist/utils/js';
+import {TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {ReactNode} from 'react';
 import './SwitchInput.scss';
 
@@ -62,6 +62,7 @@ const cmp = hoistCmp.factory<SwitchInputModel>(({model, className, ...props}, re
         id: props.id,
         className,
 
+        [TEST_ID]: props.testId,
         onBlur: model.onBlur,
         onFocus: model.onFocus,
         onChange: e => model.noteValueChange(e.target.checked),

package/desktop/cmp/input/TextArea.ts

@@ -6,10 +6,10 @@
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hoistCmp, LayoutProps, HoistProps, StyleProps} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {textArea as bpTextarea} from '@xh/hoist/kit/blueprint';
-import {apiRemoved, withDefault} from '@xh/hoist/utils/js';
+import {apiRemoved, TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import {Ref} from 'react';
 import './TextArea.scss';
@@ -91,7 +91,7 @@ const cmp = hoistCmp.factory<TextAreaInputModel>(({model, className, ...props},
         placeholder: props.placeholder,
         spellCheck: withDefault(props.spellCheck, false),
         tabIndex: props.tabIndex,
-
+        [TEST_ID]: props.testId,
         id: props.id,
         className,
         style: {

package/desktop/cmp/input/TextInput.ts

@@ -12,10 +12,10 @@ import {button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {inputGroup} from '@xh/hoist/kit/blueprint';
-import {withDefault} from '@xh/hoist/utils/js';
+import {getTestId, TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
-import {ReactElement, ReactNode, Ref, FocusEvent} from 'react';
+import {FocusEvent, ReactElement, ReactNode, Ref} from 'react';
 
 export interface TextInputProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
     value?: string;
@@ -114,63 +114,67 @@ export class TextInputModel extends HoistInputModel {
     };
 }
 
-const cmp = hoistCmp.factory<TextInputModel>(({model, className, ...props}, ref) => {
-    const {width, flex, ...layoutProps} = getLayoutProps(props);
-
-    const isClearable = !isEmpty(model.internalValue);
-
-    return div({
-        item: inputGroup({
-            value: model.renderValue || '',
-
-            autoComplete: withDefault(
-                props.autoComplete,
-                props.type === 'password' ? 'new-password' : 'off'
-            ),
-            autoFocus: props.autoFocus,
-            disabled: props.disabled,
-            inputRef: composeRefs(model.inputRef, props.inputRef),
-            leftIcon: props.leftIcon,
-            placeholder: props.placeholder,
-            rightElement:
-                props.rightElement ||
-                (props.enableClear && !props.disabled && isClearable ? clearButton() : null),
-            round: withDefault(props.round, false),
-            spellCheck: withDefault(props.spellCheck, false),
-            tabIndex: props.tabIndex,
-            type: props.type,
-
-            id: props.id,
+const cmp = hoistCmp.factory<TextInputProps & {model: TextInputModel}>(
+    ({model, className, ...props}, ref) => {
+        const {width, flex, ...layoutProps} = getLayoutProps(props);
+
+        const isClearable = !isEmpty(model.internalValue);
+
+        return div({
+            item: inputGroup({
+                value: model.renderValue || '',
+
+                autoComplete: withDefault(
+                    props.autoComplete,
+                    props.type === 'password' ? 'new-password' : 'off'
+                ),
+                autoFocus: props.autoFocus,
+                disabled: props.disabled,
+                inputRef: composeRefs(model.inputRef, props.inputRef),
+                leftIcon: props.leftIcon,
+                placeholder: props.placeholder,
+                rightElement:
+                    props.rightElement ||
+                    (props.enableClear && !props.disabled && isClearable ? clearButton() : null),
+                round: withDefault(props.round, false),
+                spellCheck: withDefault(props.spellCheck, false),
+                tabIndex: props.tabIndex,
+                type: props.type,
+
+                id: props.id,
+                style: {
+                    ...props.style,
+                    ...layoutProps,
+                    textAlign: withDefault(props.textAlign, 'left')
+                },
+                [TEST_ID]: props.testId,
+                onChange: model.onChange,
+                onKeyDown: model.onKeyDown
+            }),
+
+            className,
             style: {
-                ...props.style,
-                ...layoutProps,
-                textAlign: withDefault(props.textAlign, 'left')
+                width: withDefault(width, 200),
+                flex: withDefault(flex, null)
             },
 
-            onChange: model.onChange,
-            onKeyDown: model.onKeyDown
-        }),
-
-        className,
-        style: {
-            width: withDefault(width, 200),
-            flex: withDefault(flex, null)
-        },
-
-        onBlur: model.onBlur,
-        onFocus: model.onFocus,
-        ref
-    });
-});
+            onBlur: model.onBlur,
+            onFocus: model.onFocus,
+            ref
+        });
+    }
+);
 
 const clearButton = hoistCmp.factory<TextInputModel>(({model}) =>
     button({
         icon: Icon.cross(),
         tabIndex: -1,
         minimal: true,
+        testId: getTestId(model.componentProps, 'clear-btn'),
         onClick: () => {
             model.noteValueChange(null);
             model.doCommit();
+            model.focus();
         }
     })
 );

package/desktop/cmp/panel/Panel.ts

@@ -4,34 +4,34 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {box, frame, vbox, vframe} from '@xh/hoist/cmp/layout';
 import {
     BoxProps,
+    hoistCmp,
+    HoistModel,
     HoistProps,
     refreshContextView,
     Some,
     TaskObserver,
     useContextModel,
-    uses,
-    hoistCmp,
-    HoistModel
+    uses
 } from '@xh/hoist/core';
 import {loadingIndicator} from '@xh/hoist/desktop/cmp/loadingindicator';
 import {mask} from '@xh/hoist/desktop/cmp/mask';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import '@xh/hoist/desktop/register';
+import {HotkeyConfig} from '@xh/hoist/kit/blueprint';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import {castArray, omitBy} from 'lodash';
 import {Children, isValidElement, ReactElement, ReactNode, useLayoutEffect, useRef} from 'react';
+import {ContextMenuSpec} from '../contextmenu/ContextMenu';
 import {modalSupport} from '../modalsupport/ModalSupport';
 import {panelHeader} from './impl/PanelHeader';
 import {resizeContainer} from './impl/ResizeContainer';
 import './Panel.scss';
 import {PanelModel} from './PanelModel';
-import {HotkeyConfig} from '@xh/hoist/kit/blueprint';
-import {ContextMenuSpec} from '../contextmenu/ContextMenu';
-import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 
 export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'title'> {
     /** True to style panel header (if displayed) with reduced padding and font-size. */
@@ -113,7 +113,7 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
     }),
     className: 'xh-panel',
 
-    render({model, className, ...props}, ref) {
+    render({model, className, testId, ...props}, ref) {
         const contextModel = useContextModel('*');
 
         let wasDisplayed = useRef(false),
@@ -224,24 +224,26 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
             item = refreshContextView({model: refreshContextModel, item});
         }
 
+        // 5) Return wrapped in resizable + modal affordances if needed, or equivalent layout box
+
+        const useResizeContainer = resizable || collapsible || showSplitter;
+
+        // 5a) For modalSupport, className + testId need additional frame that will follow content
         if (modalSupportModel) {
             item = modalSupport({
                 model: modalSupportModel,
-                item: frame({
-                    // Frame ensures className is still present when rendered in Dialog
-                    item,
-                    className: model.isModal ? className : undefined
-                })
+                item: frame({item, className, testId})
             });
-        }
 
-        // 5) Return wrapped in resizable affordances if needed, or equivalent layout box
-        item =
-            resizable || collapsible || showSplitter
-                ? resizeContainer({ref, item, className})
-                : box({ref, item, className, ...layoutProps});
+            return useResizeContainer
+                ? resizeContainer({ref, item})
+                : box({ref, item, ...layoutProps});
+        }
 
-        return item;
+        // 5b) No modalSupport, className + testId applied directly to parent
+        return useResizeContainer
+            ? resizeContainer({ref, item, className, testId})
+            : box({ref, item, className, testId, ...layoutProps});
     }
 });
 

package/desktop/cmp/panel/impl/ResizeContainer.ts

@@ -7,8 +7,8 @@
 import composeRefs from '@seznam/compose-react-refs';
 import {box, hbox, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, useContextModel} from '@xh/hoist/core';
-import {Children} from 'react';
 import {isString} from 'lodash';
+import {Children} from 'react';
 import {PanelModel} from '../PanelModel';
 import {dragger} from './dragger/Dragger';
 import {splitter} from './Splitter';
@@ -18,7 +18,7 @@ export const resizeContainer = hoistCmp.factory({
     model: false,
     className: 'xh-resizable',
 
-    render({className, children}, ref) {
+    render({className, children, testId}, ref) {
         const panelModel = useContextModel(PanelModel),
             {size, resizable, collapsed, vertical, contentFirst, showSplitter} = panelModel,
             dim = vertical ? 'height' : 'width',
@@ -54,6 +54,7 @@ export const resizeContainer = hoistCmp.factory({
             [dim]: cmpSize,
             [maxDim]: '100%',
             [minDim]: dragBarWidth,
+            testId,
             items
         });
     }

package/desktop/cmp/pinpad/impl/PinPad.ts

@@ -6,6 +6,7 @@
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {div, frame, h1, hbox, p, span, vbox, vframe} from '@xh/hoist/cmp/layout';
+import {PinPadModel} from '@xh/hoist/cmp/pinpad';
 import {hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
@@ -13,19 +14,19 @@ import {Icon} from '@xh/hoist/icon/Icon';
 import {isNumber} from 'lodash';
 
 import './PinPad.scss';
-import {PinPadModel} from '@xh/hoist/cmp/pinpad';
 
 /**
  * Desktop Implementation of PinPad.
  *
  * @internal
  */
-export function pinPadImpl({model}, ref) {
+export function pinPadImpl({model, testId}, ref) {
     return frame({
         ref: composeRefs(model.ref, ref),
         item: vframe({
             className: 'xh-pinpad__frame',
-            items: [header(), display(), errorDisplay(), keypad()]
+            items: [header(), display(), errorDisplay(), keypad()],
+            testId
         })
     });
 }

package/desktop/cmp/record/RecordActionBar.ts

@@ -7,7 +7,7 @@
 
 import {Column, GridModel} from '@xh/hoist/cmp/grid';
 import {hoistCmp} from '@xh/hoist/core';
-import {RecordActionSpec, RecordAction, StoreRecord, StoreSelectionModel} from '@xh/hoist/data';
+import {RecordAction, RecordActionSpec, StoreRecord, StoreSelectionModel} from '@xh/hoist/data';
 import {buttonGroup, ButtonGroupProps} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {throwIf} from '@xh/hoist/utils/js';
@@ -52,8 +52,17 @@ export const [RecordActionBar, recordActionBar] = hoistCmp.withFactory<RecordAct
     className: 'xh-record-action-bar',
 
     render(props) {
-        const {actions, record, selModel, gridModel, column, buttonProps, vertical, ...rest} =
-            props;
+        const {
+            actions,
+            record,
+            selModel,
+            gridModel,
+            column,
+            buttonProps,
+            vertical,
+            testId,
+            ...rest
+        } = props;
 
         throwIf(
             !record && !selModel,

package/desktop/cmp/record/impl/RecordActionButton.ts

@@ -74,6 +74,7 @@ export const [RecordActionButton, recordActionButton] =
                 intent,
                 title,
                 disabled,
+                testId: action.testId,
                 onClick: () => action.call({record, selectedRecords, gridModel, column}),
                 ...rest
             });

package/desktop/cmp/rest/Actions.ts

@@ -14,7 +14,8 @@ export const addAction: RecordActionSpec = {
     icon: Icon.add(),
     intent: 'success',
     actionFn: ({gridModel}) => gridModel.appData.restGridModel.addRecord(),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly})
+    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    testId: 'add-action-button'
 };
 
 export const editAction: RecordActionSpec = {
@@ -23,14 +24,16 @@ export const editAction: RecordActionSpec = {
     intent: 'primary',
     recordsRequired: 1,
     actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.editRecord(record),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly})
+    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    testId: 'edit-action-button'
 };
 
 export const viewAction: RecordActionSpec = {
     text: 'View',
     icon: Icon.search(),
     recordsRequired: 1,
-    actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.viewRecord(record)
+    actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.viewRecord(record),
+    testId: 'view-action-button'
 };
 
 export const cloneAction: RecordActionSpec = {
@@ -38,7 +41,8 @@ export const cloneAction: RecordActionSpec = {
     icon: Icon.copy(),
     recordsRequired: 1,
     actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.cloneRecord(record),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly})
+    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    testId: 'clone-action-button'
 };
 
 export const deleteAction: RecordActionSpec = {
@@ -49,5 +53,6 @@ export const deleteAction: RecordActionSpec = {
     displayFn: ({gridModel, record}) => ({
         hidden: (record && record.id === null) || gridModel.appData.restGridModel.readonly // Hide this action if we are acting on a "new" record
     }),
-    actionFn: ({gridModel}) => gridModel.appData.restGridModel.confirmDeleteRecords()
+    actionFn: ({gridModel}) => gridModel.appData.restGridModel.confirmDeleteRecords(),
+    testId: 'delete-action-button'
 };

package/desktop/cmp/rest/RestGrid.ts

@@ -11,6 +11,7 @@ import {hoistCmp, HoistProps, PlainObject, Some, uses} from '@xh/hoist/core';
 import {MaskProps} from '@xh/hoist/desktop/cmp/mask';
 import {panel, PanelProps} from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
+import {getTestId} from '@xh/hoist/utils/js';
 import {cloneElement, isValidElement, ReactElement, ReactNode} from 'react';
 
 import {restForm} from './impl/RestForm';
@@ -46,18 +47,31 @@ export const [RestGrid, restGrid] = hoistCmp.withFactory<RestGridProps>({
     model: uses(RestGridModel, {publishMode: 'limited'}),
     className: 'xh-rest-grid',
 
-    render({model, extraToolbarItems, mask = true, agOptions, formClassName, ...props}, ref) {
-        const {formModel, gridModel} = model;
+    render(props, ref) {
+        const {
+                model,
+                extraToolbarItems,
+                mask = true,
+                agOptions,
+                formClassName,
+                testId,
+                ...restProps
+            } = props,
+            {formModel, gridModel} = model;
 
         return fragment(
             panel({
                 ref,
-                ...props,
-                tbar: restGridToolbar({model, extraToolbarItems}),
-                item: grid({model: gridModel, agOptions}),
+                ...restProps,
+                tbar: restGridToolbar({model, extraToolbarItems, testId}),
+                item: grid({model: gridModel, agOptions, testId: getTestId(testId, 'grid')}),
                 mask: getMaskFromProp(model, mask)
             }),
-            restForm({model: formModel, className: formClassName})
+            restForm({
+                model: formModel,
+                className: formClassName,
+                testId: getTestId(testId, 'form')
+            })
         );
     }
 });

package/desktop/cmp/rest/impl/RestForm.ts

@@ -25,7 +25,7 @@ export const restForm = hoistCmp.factory({
     model: uses(RestFormModel),
     className: 'xh-rest-form',
 
-    render({model, className}) {
+    render({model, className, testId}) {
         const {isAdd, readonly, isOpen, dialogRef} = model;
         if (!isOpen) return null;
 
@@ -36,7 +36,7 @@ export const restForm = hoistCmp.factory({
             isOpen: true,
             isCloseButtonShown: false,
             item: panel({
-                item: formDisplay(),
+                item: formDisplay({testId}),
                 bbar: tbar(),
                 ref: dialogRef,
                 mask: 'onLoad'
@@ -45,7 +45,7 @@ export const restForm = hoistCmp.factory({
     }
 });
 
-const formDisplay = hoistCmp.factory<RestFormModel>(({model}) => {
+const formDisplay = hoistCmp.factory<RestFormModel>(({model, testId}) => {
     const formFields = model.editors.map(editor => restFormField({editor}));
 
     return form({
@@ -59,7 +59,8 @@ const formDisplay = hoistCmp.factory<RestFormModel>(({model}) => {
         item: div({
             className: 'xh-rest-form__body',
             items: formFields
-        })
+        }),
+        testId
     });
 });
 

package/desktop/cmp/rest/impl/RestGridToolbar.ts

@@ -20,7 +20,7 @@ import {RestGridModel} from '../RestGridModel';
 export const restGridToolbar = hoistCmp.factory({
     model: uses(RestGridModel, {publishMode: 'limited'}),
 
-    render({model, extraToolbarItems}) {
+    render({model, extraToolbarItems, testId}) {
         const {unit, toolbarActions: actions, gridModel, readonly} = model;
 
         let extraItems = extraToolbarItems;
@@ -31,7 +31,8 @@ export const restGridToolbar = hoistCmp.factory({
             recordActionBar({
                 actions,
                 gridModel,
-                selModel: gridModel.selModel
+                selModel: gridModel.selModel,
+                testId
             }),
             toolbarSep({
                 omit: isEmpty(extraItems) || readonly

package/desktop/cmp/tab/TabSwitcher.ts

@@ -19,8 +19,8 @@ import {
     tabs as bpTabs,
     tooltip as bpTooltip
 } from '@xh/hoist/kit/blueprint';
-import {makeObservable, bindable} from '@xh/hoist/mobx';
-import {consumeEvent, debounced, isDisplayed, throwIf} from '@xh/hoist/utils/js';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {consumeEvent, debounced, getTestId, isDisplayed, throwIf} from '@xh/hoist/utils/js';
 import {
     createObservableRef,
     getLayoutProps,
@@ -90,7 +90,9 @@ export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>
         if (!vertical && isFinite(tabMaxWidth)) tabStyle.maxWidth = tabMaxWidth + 'px';
 
         const items = tabs.map(tab => {
-            const {id, title, icon, disabled, tooltip, showRemoveAction, excludeFromSwitcher} = tab;
+            const {id, title, icon, disabled, tooltip, showRemoveAction, excludeFromSwitcher} = tab,
+                testId = getTestId(props, id);
+
             if (excludeFromSwitcher) return null;
             return bpTab({
                 id,
@@ -105,10 +107,12 @@ export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>
                     item: hframe({
                         className: 'xh-tab-switcher__tab',
                         tabIndex: -1,
+                        testId,
                         items: [
                             icon,
                             span(title),
                             button({
+                                testId: getTestId(testId, 'remove-btn'),
                                 omit: !showRemoveAction,
                                 tabIndex: -1,
                                 icon: Icon.x(),
@@ -122,6 +126,7 @@ export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>
 
         return box({
             ...layoutProps,
+            testId: props.testId,
             className: classNames(
                 className,
                 `xh-tab-switcher--${orientation}`,