@onehat/ui 0.3.268 → 0.3.270

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.268",
+	"version": "0.3.270",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Editor/Editor.js

@@ -1,6 +1,7 @@
 import {
 	EDITOR_MODE__VIEW,
 } from '../../Constants/Editor.js';
+import testProps from '../../Functions/testProps.js';
 import withComponent from '../Hoc/withComponent.js';
 import Form from '../Form/Form.js';
 import Viewer from '../Viewer/Viewer.js';
@@ -45,6 +46,7 @@ function Editor(props) {
 			return null;
 		}
 		return <Viewer
+					{...testProps(self)}
 					{...propsToPass}
 					{..._viewer}
 					record={record}
@@ -57,6 +59,7 @@ function Editor(props) {
 	}
 
 	return <Form
+				{...testProps(self)}
 				{...propsToPass}
 				{..._form}
 				record={selection}

package/src/Components/Filter/DateRange.js

@@ -4,6 +4,7 @@ import {
 	Text,
 } from 'native-base';
 import Date from '../Form/Field/Date.js';
+import testProps from '../../Functions/testProps.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import withValue from '../Hoc/withValue.js';
 import _ from 'lodash';
@@ -21,6 +22,7 @@ const
 
 				minValue = 0,
 				maxValue,
+				...propsToPass
 			} = props,
 			[low, setLow] = useState(''),
 			[high, setHigh] = useState(''),
@@ -75,8 +77,10 @@ const
 					alignItems="center"
 					flex={1}
 					px={1}
+					{...propsToPass}
 				>
 					<Date
+						{...testProps('low')}
 						value={low}
 						onChangeValue={onChangeLow}
 						mode={mode}
@@ -86,6 +90,7 @@ const
 					/>
 					<Text px={2} userSelect="none">to</Text>
 					<Date
+						{...testProps('high')}
 						value={high}
 						onChangeValue={onChangeHigh}
 						mode={mode}

package/src/Components/Filter/NumberRange.js

@@ -6,6 +6,7 @@ import {
 import Number from '../Form/Field/Number.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import withValue from '../Hoc/withValue.js';
+import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
 	const
@@ -20,6 +21,7 @@ import _ from 'lodash';
 
 					minValue = 0,
 					maxValue,
+					...propsToPass
 				} = props,
 				[low, setLow] = useState(''),
 				[high, setHigh] = useState(''),
@@ -66,8 +68,10 @@ import _ from 'lodash';
 						alignItems="center"
 						flex={1}
 						px={1}
+						{...propsToPass}
 					>
 						<Number
+							{...testProps('low')}
 							value={low}
 							onChangeValue={onChangeLow}
 							startingValue={null}
@@ -78,6 +82,7 @@ import _ from 'lodash';
 						/>
 						<Text px={2} userSelect="none">to</Text>
 						<Number
+							{...testProps('high')}
 							value={high}
 							onChangeValue={onChangeHigh}
 							startingValue={null}

package/src/Components/Form/Field/Checkbox/Checkbox.js

@@ -8,12 +8,14 @@ const
 		const {
 				value,
 				setValue,
+				testID = '',
 			} = props,
 			onToggle = () => {
 				setValue(!value);
 			};
 
 		return <CheckboxButton
+					testID={testID}
 					isChecked={value}
 					onPress={onToggle}
 					_icon={{

package/src/Components/Form/Field/Checkbox/CheckboxGroup.js

@@ -4,6 +4,7 @@ import {
 	Checkbox,
 	Row,
 } from 'native-base';
+import testProps from '../../../../Functions/testProps.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';
 import withTooltip from '../../../Hoc/withTooltip.js';
@@ -32,6 +33,7 @@ const
 				const entities = Repository.getEntitiesOnPage();
 				checkboxes = _.map(entities, (entity, ix) => {
 					return <Checkbox
+								{...testProps('checkbox-' + entity.id)}
 								key={ix}
 								value={entity.id}
 								{...checkboxProps}
@@ -40,6 +42,7 @@ const
 			} else {
 				checkboxes = _.map(data, (datum, ix) => {
 					return <Checkbox
+								{...testProps('checkbox-' + datum[idIx])}
 								key={ix}
 								value={datum[idIx]}
 								{...checkboxProps}

package/src/Components/Form/Field/Combo/Combo.js

@@ -22,6 +22,7 @@ import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';
 import emptyFn from '../../../../Functions/emptyFn.js';
+import testProps from '../../../../Functions/testProps.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import CaretDown from '../../../Icons/CaretDown.js';
@@ -495,6 +496,7 @@ export function ComboComponent(props) {
 	
 	if (showXButton && !_.isNil(value)) {
 		xButton = <IconButton
+						{...testProps('xBtn')}
 						_icon={{
 							as: Xmark,
 							color: 'trueGray.600',
@@ -512,6 +514,7 @@ export function ComboComponent(props) {
 	}
 	if (showEyeButton && Editor && !_.isNil(value)) {
 		eyeButton = <IconButton
+						{...testProps('eyeBtn')}
 						_icon={{
 							as: Eye,
 							color: 'trueGray.600',
@@ -532,6 +535,7 @@ export function ComboComponent(props) {
 		inputAndTrigger = <>
 							{disableDirectEntry ?
 								<Pressable
+									{...testProps('toggleMenuBtn')}
 									onPress={toggleMenu}
 									flex={1}
 									h="100%"
@@ -558,6 +562,7 @@ export function ComboComponent(props) {
 									>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
 								</Pressable> :
 								<Input
+									{...testProps('input')}
 									ref={inputRef}
 									reference="ComboInput"
 									value={textInputValue}
@@ -583,6 +588,7 @@ export function ComboComponent(props) {
 									{..._input}
 								/>}
 							<IconButton
+								{...testProps('trigger')}
 								ref={triggerRef}
 								_icon={{
 									as: CaretDown,
@@ -612,6 +618,7 @@ export function ComboComponent(props) {
 		const displayValue = getDisplayValue();
 		inputAndTrigger = <>
 							<Pressable
+								{...testProps('showMenuBtn')}
 								onPress={showMenu}
 								flex={1}
 								flexDirection="row"
@@ -637,6 +644,7 @@ export function ComboComponent(props) {
 								>{_.isEmpty(displayValue) ? placeholder : displayValue}</Text>
 							</Pressable>
 							<IconButton
+								{...testProps('trigger')}
 								ref={triggerRef}
 								_icon={{
 									as: CaretDown,
@@ -837,6 +845,7 @@ export function ComboComponent(props) {
 			if (isEditor) {
 				// in RN, an editor has no way to accept the selection of the grid, so we need to add a check button to do this
 				checkButton = <IconButton
+								{...testProps('checkBtn')}
 								_icon={{
 									as: Check,
 									color: 'trueGray.600',
@@ -878,6 +887,7 @@ export function ComboComponent(props) {
 							}}
 						>{textInputValue}</Text> :
 						<Input
+							{...testProps('input')}
 							ref={inputRef}
 							reference="ComboInput"
 							value={textInputValue}
@@ -903,6 +913,7 @@ export function ComboComponent(props) {
 							{..._input}
 						/>}
 					<IconButton
+						{...testProps('hideMenuBtn')}
 						_icon={{
 							as: CaretDown,
 							color: 'primary.800',

package/src/Components/Form/Field/Date.js

@@ -27,8 +27,9 @@ import Xmark from '../../Icons/Xmark.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
 import emptyFn from '../../../Functions/emptyFn.js';
-import Calendar from '../../Icons/Calendar.js';
+import testProps from '../../../Functions/testProps.js';
 import getComponentFromType from '../../../Functions/getComponentFromType.js';
+import Calendar from '../../Icons/Calendar.js';
 import moment from 'moment';
 import _ from 'lodash';
 
@@ -288,6 +289,7 @@ export function DateElement(props) {
 
 	if (showXButton && !_.isNil(value)) {
 		xButton = <IconButton
+						{...testProps('xBtn')}
 						_icon={{
 							as: Xmark,
 							color: 'trueGray.600',
@@ -306,6 +308,7 @@ export function DateElement(props) {
 	if (UiGlobals.mode === UI_MODE_WEB) {
 		inputAndTrigger = <>
 							<IconButton
+								{...testProps('trigger')}
 								ref={triggerRef}
 								_icon={{
 									as: Calendar,
@@ -328,6 +331,7 @@ export function DateElement(props) {
 							/>
 							{disableDirectEntry ?
 								<Pressable
+									{...testProps('togglePickerBtn')}
 									onPress={togglePicker}
 									flex={1}
 									h="100%"
@@ -354,6 +358,7 @@ export function DateElement(props) {
 									>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
 								</Pressable> :
 								<Input
+									{...testProps('input')}
 									ref={inputRef}
 									value={textInputValue}
 									// setValue={onInputSetValue}
@@ -394,6 +399,7 @@ export function DateElement(props) {
 		// The just show the current value and open the menu
 		inputAndTrigger = <>
 							<IconButton
+								{...testProps('trigger')}
 								ref={triggerRef}
 								_icon={{
 									as: Calendar,
@@ -416,6 +422,7 @@ export function DateElement(props) {
 								}}
 							/>
 							<Pressable
+								{...testProps('togglePickerBtn')}
 								onPress={togglePicker}
 								flex={1}
 							>
@@ -488,6 +495,7 @@ export function DateElement(props) {
 										p={0}
 									>
 										<Datetime
+											{...testProps('picker')}
 											open={true}
 											input={false}
 											closeOnClickOutside={false}
@@ -504,6 +512,7 @@ export function DateElement(props) {
 			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
 				<Row h={10}>
 					<IconButton
+						{...testProps('hidePickerBtn')}
 						_icon={{
 							as: Calendar,
 							color: styles.FORM_DATE_ICON_COLOR,
@@ -545,6 +554,7 @@ export function DateElement(props) {
 							}}
 						>{textInputValue}</Text> :
 						<Input
+							{...testProps('input')}
 							ref={inputRef}
 							value={textInputValue}
 							autoSubmit={true}
@@ -592,6 +602,7 @@ export function DateElement(props) {
 								/> */}
 								<Box bg="#fff">
 									<Datetime
+										{...testProps('picker')}
 										initialDate={moment(value).toDate()}
 										selectedStartDate={moment(value).toDate()}
 										onDateChange={onPickerChange}

package/src/Components/Form/Field/Number.js

@@ -7,6 +7,7 @@ import {
 } from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
+import testProps from '../../../Functions/testProps.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
@@ -120,6 +121,7 @@ function NumberElement(props) {
 
 	return <Row flex={1} h="100%" p={0} borderWidth={1} borderColor="trueGray.400" borderRadius={6} {...props}>
 				<IconButton
+					{...testProps('decrementBtn')}
 					icon={<Icon as={Minus} color={(isDecrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
 					onPress={onDecrement}
 					isDisabled={isDecrementDisabled || isDisabled}
@@ -133,6 +135,7 @@ function NumberElement(props) {
 					zIndex={10}
 				/>
 				<InputWithTooltip
+					{...testProps('input')}
 					value={inputValue}
 					onChangeText={onChangeText}
 					onKeyPress={onInputKeyPress}
@@ -150,6 +153,7 @@ function NumberElement(props) {
 					{...props._input}
 				/>
 				<IconButton
+					{...testProps('incrementBtn')}
 					icon={<Icon as={Plus} color={(isIncrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
 					onPress={onIncrement}
 					isDisabled={isIncrementDisabled || isDisabled}

package/src/Components/Form/Field/RadioGroup/RadioGroup.js

@@ -4,6 +4,7 @@ import {
 	Radio,
 	Row,
 } from 'native-base';
+import testProps from '../../../../Functions/testProps.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';
@@ -34,6 +35,7 @@ const
 				const entities = Repository.getEntitiesOnPage();
 				radios = _.map(entities, (entity, ix) => {
 					return <Radio
+								{...testProps('radio-' + entity.id)}
 								key={ix}
 								value={entity.id}
 								{...radioProps}
@@ -42,6 +44,7 @@ const
 			} else {
 				radios = _.map(data, (datum, ix) => {
 					return <Radio
+								{...testProps('radio-' + datum[idIx])}
 								key={ix}
 								value={datum[idIx]}
 								{...radioProps}

package/src/Components/Form/Field/Tag/Tag.js

@@ -16,8 +16,6 @@ import Combo, { ComboEditor } from '../Combo/Combo.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import _ from 'lodash';
 
-
-
 function TagComponent(props) {
 
 	const {

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -2,6 +2,7 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import testProps from '../../../../Functions/testProps.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import Eye from '../../../Icons/Eye.js';
 import Xmark from '../../../Icons/Xmark.js';
@@ -16,6 +17,7 @@ export default function ValueBox(props) {
 		} = props,
 		styles = UiGlobals.styles;
 	return <Row
+				{...testProps('valueBox-' + text)}
 				borderWidth={1}
 				borderColor="trueGray.400"
 				borderRadius="md"
@@ -25,6 +27,7 @@ export default function ValueBox(props) {
 				maxWidth="100%"
 			>
 				<IconButton
+					{...testProps('eyeBtn')}
 					_icon={{
 						as: Eye,
 						color: 'trueGray.600',
@@ -40,6 +43,7 @@ export default function ValueBox(props) {
 				>{text}</Text>
 				{onDelete &&
 					<IconButton
+						{...testProps('xBtn')}
 						_icon={{
 							as: Xmark,
 							color: 'trueGray.600',

package/src/Components/Form/Field/Toggle.js

@@ -9,6 +9,7 @@ import {
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import Na from '../../Icons/Na.js';
+import testProps from '../../../Functions/testProps.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
@@ -43,6 +44,7 @@ const
 
 		if (_.isNil(value)) {
 			return <IconButton
+						{...testProps('naBtn')}
 						ref={props.outerRef}
 						icon={<Icon as={Na} color="trueGray.400" />}
 						onPress={onToggle}
@@ -52,7 +54,10 @@ const
 		}
 
 		return <Row alignItems="center">
-					<Pressable onPress={onNullify}>
+					<Pressable
+						{...testProps('nullifyBtn')}
+						onPress={onNullify}
+					>
 						<Switch
 							ref={props.outerRef}
 							onToggle={onToggle}
@@ -68,8 +73,15 @@ const
 							{...propsToPass}
 						/>
 					</Pressable>
-					<Pressable onPress={onToggle}>
-						<Text ml={2} fontSize={styles.FORM_TOGGLE_FONTSIZE}>{_.isNil(value) ? 'N/A' : (!!value ? 'Yes' : 'No')}</Text>
+					<Pressable
+						{...testProps('readoutBtn')}
+						onPress={onToggle}
+					>
+						<Text
+							{...testProps('readout')}
+							ml={2}
+							fontSize={styles.FORM_TOGGLE_FONTSIZE}
+						>{_.isNil(value) ? 'N/A' : (!!value ? 'Yes' : 'No')}</Text>
 					</Pressable>
 				</Row>;
 	},

package/src/Components/Form/FieldSet.js

@@ -7,6 +7,7 @@ import {
 } from 'native-base';
 import FieldSetContext from '../../Contexts/FieldSetContext.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import testProps from '../../Functions/testProps.js';
 import UiGlobals from '../../UiGlobals.js';
 import IconButton from '../Buttons/IconButton.js';
 import CheckboxButton from '../Buttons/CheckboxButton.js';
@@ -111,6 +112,7 @@ export default function FieldSet(props) {
 															numberOfLines={1}
 														>Toggle All?</Text>
 														<CheckboxButton
+															{...testProps('toggleAllBtn')}
 															isChecked={getIsAllChecked()}
 															onPress={onToggleAllChecked}
 															_icon={{
@@ -119,6 +121,7 @@ export default function FieldSet(props) {
 														/>
 													</Row>}
 						{isCollapsible && <IconButton
+												{...testProps('toggleCollapseBtn')}
 												_icon={{
 													as: isLocalCollapsed ? <CaretDown /> : <CaretUp />,
 													size: 'sm',

package/src/Components/Form/FiltersForm.js

@@ -1,12 +1,3 @@
-import { useState, useEffect, } from 'react';
-import {
-	Button,
-	Column,
-	Icon,
-	Row,
-	ScrollView,
-	Text,
-} from 'native-base';
 import Form from './Form.js';
 import _ from 'lodash';
 

package/src/Components/Form/Form.js

@@ -30,6 +30,7 @@ import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
+import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
@@ -286,6 +287,7 @@ function Form(props) {
 					}
 
 					let element = <Element
+										{...testProps('field-' + fieldName)}
 										value={value}
 										parent={self}
 										reference={fieldName}
@@ -345,6 +347,7 @@ function Form(props) {
 										}
 
 										let element = <Element
+															{...testProps('field-' + name)}
 															name={name}
 															value={value}
 															onChangeValue={(newValue) => {
@@ -499,6 +502,7 @@ function Form(props) {
 				}
 		
 				let element = <Element
+									{...testProps('field-' + name)}
 									value={value}
 									parent={self}
 									reference={name}
@@ -582,6 +586,7 @@ function Form(props) {
 								dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
 							}
 							let element = <Element
+												{...testProps('field-' + name)}
 												name={name}
 												value={value}
 												onChangeValue={(newValue) => {
@@ -700,6 +705,7 @@ function Form(props) {
 					const
 						Element = getComponentFromType(type),
 						element = <Element
+										{...testProps('ancillary-' + type)}
 										selectorId={selectorId}
 										selectorSelected={selectorSelected || record}
 										flex={1}
@@ -885,6 +891,7 @@ function Form(props) {
 			formButtons.push(<Row key="buttonsRow" px={4} pt={4} alignItems="center" justifyContent="flex-end">
 								{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
 									<Button
+										{...testProps('backBtn')}
 										key="backBtn"
 										onPress={onBack}
 										leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
@@ -892,6 +899,7 @@ function Form(props) {
 									>Back</Button>}
 								{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && !disableView &&
 									<Button
+										{...testProps('viewBtn')}
 										key="viewBtn"
 										onPress={onViewMode}
 										leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
@@ -985,6 +993,7 @@ function Form(props) {
 
 							<Row flex={1} justifyContent="flex-start">
 								<Button
+									{...testProps('deleteBtn')}
 									key="deleteBtn"
 									onPress={onDelete}
 									bg="warning"
@@ -997,6 +1006,7 @@ function Form(props) {
 
 						{showResetBtn && 
 							<IconButton
+								{...testProps('resetBtn')}
 								key="resetBtn"
 								onPress={() => doReset()}
 								icon={Rotate}
@@ -1009,6 +1019,7 @@ function Form(props) {
 
 						{showCancelBtn &&
 							<Button
+								{...testProps('cancelBtn')}
 								key="cancelBtn"
 								variant="ghost"
 								onPress={onCancel}
@@ -1017,6 +1028,7 @@ function Form(props) {
 							
 						{showCloseBtn && 
 							<Button
+								{...testProps('closeBtn')}
 								key="closeBtn"
 								variant="ghost"
 								onPress={onClose}
@@ -1025,6 +1037,7 @@ function Form(props) {
 
 						{showSaveBtn && 
 							<Button
+								{...testProps('saveBtn')}
 								key="saveBtn"
 								onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 								isDisabled={isSaveDisabled}
@@ -1033,6 +1046,7 @@ function Form(props) {
 						
 						{showSubmitBtn && 
 							<Button
+								{...testProps('submitBtn')}
 								key="submitBtn"
 								onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
 								isDisabled={isSubmitDisabled}
@@ -1041,6 +1055,7 @@ function Form(props) {
 					
 						{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
 							return <Button
+										{...testProps('additionalFooterBtn-' + props.key)}
 										{...props}
 										onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
 									>{props.text}</Button>;

package/src/Components/Grid/Grid.js

@@ -45,8 +45,8 @@ import withInlineEditor from '../Hoc/withInlineEditor.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
-import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
+import testProps from '../../Functions/testProps.js';
 import Loading from '../Messages/Loading.js';
 import GridHeaderRow from './GridHeaderRow.js';
 import GridRow, { DragSourceDropTargetGridRow, DragSourceGridRow, DropTargetGridRow } from './GridRow.js';
@@ -336,7 +336,7 @@ function GridComponent(props) {
 
 			let rowComponent =
 				<Pressable
-					// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
+					{...testProps((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id)}
 					onPress={(e) => {
 						if (e.preventDefault && e.cancelable) {
 							e.preventDefault();
@@ -979,7 +979,7 @@ function GridComponent(props) {
 	}
 
 	let grid = <FlatList
-					testID="flatlist"
+					{...testProps('flatlist')}
 					ref={gridRef}
 					scrollEnabled={CURRENT_MODE === UI_MODE_WEB}
 					nestedScrollEnabled={true}
@@ -1019,7 +1019,7 @@ function GridComponent(props) {
 		if (Repository?.isLoading) {
 			grid = <Loading isScreen={true} />;
 		} else {
-			grid = <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} />;
+			grid = <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} testID="NoRecordsFound" />;
 		}
 	}
 
@@ -1060,8 +1060,8 @@ function GridComponent(props) {
 	}
 
 	grid = <Column
-				{...testProps('Grid')}
-				testID="outerContainer"
+				{...testProps(self)}
+				// testID="outerContainer"
 				ref={containerRef}
 				tabIndex={0}
 				onKeyDown={onGridKeyDown}
@@ -1075,7 +1075,7 @@ function GridComponent(props) {
 				{topToolbar}
 
 				<Column
-					testID="gridContainer"
+					{...testProps('gridContainer')}
 					ref={gridContainerRef}
 					w="100%"
 					flex={1}
@@ -1098,6 +1098,7 @@ function GridComponent(props) {
 
 	if (isDropTarget) {
 		grid = <Box
+					{...testProps('dropTarget')}
 					ref={dropTargetRef}
 					borderWidth={canDrop && isOver ? 4 : 0}
 					borderColor="#0ff"

package/src/Components/Grid/GridHeaderRow.js

@@ -18,6 +18,7 @@ import {
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
 import useBlocking from '../../Hooks/useBlocking.js';
+import testProps from '../../Functions/testProps.js';
 import AngleRight from '../Icons/AngleRight.js';
 import HeaderReorderHandle from './HeaderReorderHandle.js';
 import HeaderResizeHandle from './HeaderResizeHandle.js';
@@ -342,6 +343,7 @@ export default function GridHeaderRow(props) {
 						textProps.textOverflow = 'ellipsis';
 					}
 					return <Pressable
+								{...testProps('Header-' + fieldName)}
 								key={ix}
 								onPress={(e) => {
 									if (e.preventDefault) {

package/src/Components/Grid/GridRow.js

@@ -10,6 +10,7 @@ import {
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
 import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
+import testProps from '../../Functions/testProps.js';
 import AngleRight from '../Icons/AngleRight.js';
 import RowDragHandle from './RowDragHandle.js';
 import _ from 'lodash';
@@ -102,7 +103,12 @@ function GridRow(props) {
 								userSelect: 'none',
 							};
 
-							return <Row key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</Row>;
+							return <Row
+										key={key}
+										{...testProps('rendererCol-' + key)}
+										{...propsToPass}
+										{...extraProps}
+									>{config.renderer(item)}</Row>;
 						}
 						if (config.fieldName) {
 							if (item?.properties && item.properties[config.fieldName]) {
@@ -120,6 +126,7 @@ function GridRow(props) {
 										elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
 									}
 									return <Element
+												{...testProps('fieldname-' + config.fieldName)}
 												value={value}
 												key={key}
 												overflow="hidden"
@@ -160,6 +167,7 @@ function GridRow(props) {
 						elementProps.textOverflow = 'ellipsis';
 					}
 					return <Text
+								{...testProps('fieldname-' + config.fieldName)}
 								key={key}
 								overflow="hidden"
 								alignSelf="center"

package/src/Components/Hoc/withContextMenu.js

@@ -14,6 +14,7 @@ import {
 	UI_MODE_WEB,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
+import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
 const CONTEXT_MENU_WIDTH = 180;
@@ -104,6 +105,7 @@ export default function withContextMenu(WrappedComponent) {
 				// </div>
 
 				return <Pressable
+							{...testProps('contextMenuBtn-' + text)}
 							key={ix}
 							onPress={() => {
 								setIsContextMenuShown(false);

package/src/Components/Hoc/withFilters.js

@@ -14,6 +14,7 @@ import {
 } from '../../Constants/Filters.js';
 import Inflector from 'inflector-js';
 import inArray from '../../Functions/inArray.js';
+import testProps from '../../Functions/testProps.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import IconButton from '../Buttons/IconButton.js';
 import FormPanel from '../Panel/FormPanel.js';
@@ -299,7 +300,6 @@ export default function withFilters(WrappedComponent) {
 							}
 						}
 						if (!Element) {
-							debugger;
 							return; // to protect against errors
 						}
 						if (field === 'q') {
@@ -309,6 +309,7 @@ export default function withFilters(WrappedComponent) {
 
 						const tooltip = filter.tooltip || title;
 						let filterElement = <Element
+												{...testProps('filter-' + field)}
 												key={'filter-' + field}
 												tooltip={tooltip}
 												placeholder={tooltip}
@@ -434,30 +435,34 @@ export default function withFilters(WrappedComponent) {
 								</ScrollView>
 							</Row>
 							<Row flex={hasFilters ? null : 1} alignItems="center" alignSelf="flex-end">
-								{showClearFiltersButton && <IconButton
-									key="clearFiltersBtn"
-									_icon={{
-										as: Ban,
-									}}
-									ml={1}
-									onPress={onClearFilters}
-									tooltip="Clear all filters"
-								/>}
-								{showFilterSelector && !isUsingCustomFilters && <IconButton
-									key="gear"
-									_icon={{
-										as: Gear,
-									}}
-									ml={1}
-									onPress={() => {
-										const f = filters;
-										const s = slots;
-										setModalFilters(filters);
-										setModalSlots(slots);
-										setIsFilterSelectorShown(true);
-									}}
-									tooltip="Swap filters"
-								/>}
+								{showClearFiltersButton && 
+									<IconButton
+										{...testProps('clearFiltersBtn')}
+										key="clearFiltersBtn"
+										_icon={{
+											as: Ban,
+										}}
+										ml={1}
+										onPress={onClearFilters}
+										tooltip="Clear all filters"
+									/>}
+								{showFilterSelector && !isUsingCustomFilters && 
+									<IconButton
+										{...testProps('swapFiltersBtn')}
+										key="swapFiltersBtn"
+										_icon={{
+											as: Gear,
+										}}
+										ml={1}
+										onPress={() => {
+											const f = filters;
+											const s = slots;
+											setModalFilters(filters);
+											setModalSlots(slots);
+											setIsFilterSelectorShown(true);
+										}}
+										tooltip="Swap filters"
+									/>}
 							</Row>
 						</Toolbar>;
 

package/src/Components/Hoc/withInlineEditor.js

@@ -14,6 +14,7 @@ import {
 	UI_MODE_REACT_NATIVE,
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
+import testProps from '../../Functions/testProps.js';
 import Form from '../Form/Form.js';
 import withEditor from './withEditor.js';
 import _ from 'lodash';
@@ -115,7 +116,6 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 			inlineEditor = <>
 								{isEditorShown && <Box
 													ref={maskRef}
-													testID="mask"
 													position="fixed"
 													w="100vw"
 													h="100vh"
@@ -140,7 +140,7 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 									ref={inlineEditorRef}
 									position="absolute"
 									zIndex={10}
-									testID="inline-editor"
+									{...testProps('inlineEditor')}
 									h={isEditorShown ? '100px' : 0}
 									minWidth="100%"
 									display="inline-block"

package/src/Components/Tree/Tree.js

@@ -808,7 +808,7 @@ function TreeComponent(props) {
 			let nodeProps = getNodeProps ? getNodeProps(item) : {},
 				isSelected = isInSelection(item);
 			return <Pressable
-						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
+						{...testProps((Repository ? Repository.schema.name : 'TreeNode') + '-' + item?.id)}
 						key={item.hash}
 						onPress={(e) => {
 							if (e.preventDefault && e.cancelable) {
@@ -818,6 +818,7 @@ function TreeComponent(props) {
 								return
 							}
 							switch (e.detail) {
+								case 0: // simulated click
 								case 1: // single click
 									onNodeClick(item, e); // sets selection
 									break;
@@ -1175,7 +1176,7 @@ function TreeComponent(props) {
 
 	return <>
 				<Column
-					{...testProps('Tree')}
+					{...testProps(self)}
 					flex={1}
 					w="100%"
 				>

package/src/Components/Tree/TreeNode.js

@@ -9,6 +9,7 @@ import {
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
+import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
 // This was broken out from Tree simply so we can memoize it
@@ -53,7 +54,7 @@ export default function TreeNode(props) {
 					
 					{isLoading ? 
 						<Spinner px={2} /> : 
-						(hasChildren && !isDragMode ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} px={2} />)}
+						(hasChildren && !isDragMode ? <IconButton icon={icon} onPress={() => onToggle(datum)} {...testProps('TreeNodeExpandBtn-' + item?.id)} /> : <Icon as={icon} px={2} />)}
 
 					<Text
 						overflow="hidden"

package/src/Components/Viewer/Viewer.js

@@ -15,6 +15,7 @@ import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
+import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';
 import Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
@@ -152,6 +153,7 @@ function Viewer(props) {
 			}
 			
 			let element = <Element
+								{...testProps('field-' + name)}
 								value={value}
 								isEditable={false}
 								parent={self}
@@ -195,6 +197,7 @@ function Viewer(props) {
 					const
 						Element = getComponentFromType(type),
 						element = <Element
+										{...testProps('ancillary-' + type)}
 										selectorId={selectorId}
 										selectorSelected={selectorSelected || record}
 										flex={1}
@@ -253,6 +256,7 @@ function Viewer(props) {
 						{canEdit && onEditMode &&
 							<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
 								<Button
+									{...testProps('editBtn')}
 									key="editBtn"
 									onPress={onEditMode}
 									leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
@@ -274,6 +278,7 @@ function Viewer(props) {
 							{showDeleteBtn && 
 								<Row flex={1} justifyContent="flex-start">
 									<Button
+										{...testProps('deleteBtn')}
 										key="deleteBtn"
 										onPress={onDelete}
 										bg="warning"
@@ -285,6 +290,7 @@ function Viewer(props) {
 								</Row>}
 							{onClose && showCloseBtn &&
 								<Button
+									{...testProps('closeBtn')}
 									key="closeBtn"
 									onPress={onClose}
 									color="#fff"

package/src/Functions/buildAdditionalButtons.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 } from 'native-base';
 import Button from '../Components/Buttons/Button.js';
+import testProps from './testProps.js';
 import _ from 'lodash';
 
 export default function buildAdditionalButtons(configs, self, handlerArgs = {}) {
@@ -30,6 +31,7 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 		}
 		
 		const button = <Button
+							{...testProps('btn-' + key)}
 							color={color}
 							ml={2}
 							// mb={2}

package/src/Functions/testProps.js

@@ -1,8 +1,18 @@
 import { Platform } from "react-native";
 
+// This adds a data-testid attribute to the DOM node,
+// which can be quried in Cypress by: document.querySelector(`[data-testid='MyTestId']`);
+
 export default function testProps(id) {
-	if (typeof __DEV__ !== 'undefined' && !__DEV__) {
-		return {};
+	if (typeof __DEV__ === 'undefined' || !__DEV__) {
+		return {}; // don't add test props in production
+	}
+	if (id?.reference) {
+		// id is actually 'self' object
+		id = id.reference;
+	}
+	if (id.match(/\s/g)) {
+		id = id.replace(/\s/g, '_'); // convert any spaces to underscores
 	}
 	if (!window && Platform.OS === 'android') {
 		return {