@hedia/recommendation-screen 1.8.2 → 2.0.2

package/src/components/RecommendedCarbs.jsx

@@ -7,6 +7,7 @@ const macro_1 = require("@lingui/macro");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const i18nUtils_1 = require("../locale/i18nUtils");
+const enum_1 = require("../types/enum");
 const Constants_1 = require("../utils/Constants");
 const RecommendationError_1 = require("../utils/RecommendationError");
 const Icon_1 = __importDefault(require("./Icon"));
@@ -17,7 +18,7 @@ class RecommendedCarbs extends react_1.default.Component {
     constructor() {
         super(...arguments);
         this.state = {
-            partialInput: null,
+            partialInput: undefined,
         };
         this.showTextInput = () => {
             this.callbackInput?.();
@@ -47,7 +48,7 @@ class RecommendedCarbs extends react_1.default.Component {
 				<LineSeparator_1.default color={Constants_1.BORDER_COLOUR_GREY}/>
 				<react_native_1.View style={calculationStyles.borderContainer}>
 					<react_native_1.View style={calculationStyles.recommendedContainer}>
-						<react_native_1.TouchableOpacity accessibilityLabel="removeRecommendedCarbs" style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
+						<react_native_1.TouchableOpacity testID={enum_1.RecommendedCarbsTestIds.RemoveRecommendation} accessibilityLabel="removeRecommendedCarbs" style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
 							<Icon_1.default iconIdentifier={`Ionicons/ios-close-circle-outline`} style={calculationStyles.removeRecommendedIcon}/>
 						</react_native_1.TouchableOpacity>
 						<react_native_1.Text style={calculationStyles.recommendedLabel}>{i18nUtils_1.i18n._(macro_1.t `Recommended`)}</react_native_1.Text>
@@ -58,9 +59,9 @@ class RecommendedCarbs extends react_1.default.Component {
 						<react_native_1.Text style={calculationStyles.recommendedLabel}>{i18nUtils_1.i18n._(macro_1.t `Additional`)}</react_native_1.Text>
 					</react_native_1.View>
 					<react_native_1.View style={calculationStyles.valueUnitContainer}>
-						<react_native_1.TouchableOpacity accessibilityLabel="editRecommendedCarbsButton" onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
+						<react_native_1.TouchableOpacity testID={enum_1.RecommendedCarbsTestIds.EditRecommendedCarbs} accessibilityLabel="editRecommendedCarbsButton" onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
 							<react_native_1.View style={calculationStyles.valueContainer}>
-								<react_native_1.Text style={[calculationStyles.value, { color: Constants_1.BORDER_COLOUR_TEAL }]}>
+								<react_native_1.Text testID={enum_1.RecommendedCarbsTestIds.RecommendedCarbs} style={[calculationStyles.value, { color: Constants_1.BORDER_COLOUR_TEAL }]}>
 									{shownCarbs}
 								</react_native_1.Text>
 							</react_native_1.View>
@@ -80,18 +81,20 @@ class RecommendedCarbs extends react_1.default.Component {
                 label: i18nUtils_1.i18n._(macro_1.t `Total`),
                 value: totalCarbs.toString(),
                 units: i18nUtils_1.i18n._(macro_1.t `grams`),
-            })}
-				<InvisibleNumberInput_1.default negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
+            }, enum_1.RecommendedCarbsTestIds.TotalCarbs)}
+				<InvisibleNumberInput_1.default testID={enum_1.RecommendedCarbsTestIds.InvisibleCarbInput} negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
 			</react_1.default.Fragment>);
         };
-        this.renderRow = (row) => {
+        this.renderRow = (row, testID) => {
             return (<react_native_1.View style={[calculationStyles.borderContainer, { paddingVertical: `1%` }]}>
 				<react_native_1.View style={calculationStyles.rowContainer}>
 					<react_native_1.Text style={calculationStyles.rowLabel}>{row.label}</react_native_1.Text>
 				</react_native_1.View>
 				<react_native_1.View style={calculationStyles.valueUnitContainer}>
 					<react_native_1.View style={calculationStyles.valueContainer}>
-						<react_native_1.Text style={calculationStyles.value}>{row.value}</react_native_1.Text>
+						<react_native_1.Text testID={testID} style={calculationStyles.value}>
+							{row.value}
+						</react_native_1.Text>
 					</react_native_1.View>
 					<react_native_1.View style={calculationStyles.unitContainer}>
 						<react_native_1.Text style={calculationStyles.units}>{row.units}</react_native_1.Text>
@@ -111,7 +114,7 @@ class RecommendedCarbs extends react_1.default.Component {
             label: i18nUtils_1.i18n._(macro_1.t `Entered`),
             value: this.props.enteredCarbs,
             units: i18nUtils_1.i18n._(macro_1.t `grams`),
-        })}
+        }, enum_1.RecommendedCarbsTestIds.EnteredCarbs)}
 				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
 			</react_1.default.Fragment>);
     }

package/src/components/RecommendedCarbs.tsx

@@ -2,6 +2,7 @@ import { t } from "@lingui/macro";
 import React from "react";
 import { Alert, Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
+import { RecommendedCarbsTestIds } from "../types/enum";
 import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
 import { CarbohydrateLimitError } from "../utils/RecommendationError";
 import Icon from "./Icon";
@@ -26,15 +27,15 @@ interface IProps {
 }
 
 interface IState {
-	partialInput: string;
+	partialInput?: string;
 }
 
 export default class RecommendedCarbs extends React.Component<IProps, IState> {
 	public state: IState = {
-		partialInput: null,
+		partialInput: undefined,
 	};
 
-	public callbackInput: () => void;
+	public callbackInput?: () => void;
 
 	public showTextInput = (): void => {
 		this.callbackInput?.();
@@ -69,6 +70,7 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 				<View style={calculationStyles.borderContainer}>
 					<View style={calculationStyles.recommendedContainer}>
 						<TouchableOpacity
+							testID={RecommendedCarbsTestIds.RemoveRecommendation}
 							accessibilityLabel="removeRecommendedCarbs"
 							style={calculationStyles.removeRecommended}
 							onPress={this.props.removeRecommendedCarbs}
@@ -87,12 +89,16 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 					</View>
 					<View style={calculationStyles.valueUnitContainer}>
 						<TouchableOpacity
+							testID={RecommendedCarbsTestIds.EditRecommendedCarbs}
 							accessibilityLabel="editRecommendedCarbsButton"
 							onPress={this.showTextInput}
 							style={[calculationStyles.valueUnitContainer]}
 						>
 							<View style={calculationStyles.valueContainer}>
-								<Text style={[calculationStyles.value, { color: BORDER_COLOUR_TEAL }]}>
+								<Text
+									testID={RecommendedCarbsTestIds.RecommendedCarbs}
+									style={[calculationStyles.value, { color: BORDER_COLOUR_TEAL }]}
+								>
 									{shownCarbs}
 								</Text>
 							</View>
@@ -108,12 +114,16 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 					</View>
 				</View>
 				<LineSeparator color={BORDER_COLOUR_TEAL} />
-				{this.renderRow({
-					label: i18n._(t`Total`),
-					value: totalCarbs.toString(),
-					units: i18n._(t`grams`),
-				})}
+				{this.renderRow(
+					{
+						label: i18n._(t`Total`),
+						value: totalCarbs.toString(),
+						units: i18n._(t`grams`),
+					},
+					RecommendedCarbsTestIds.TotalCarbs,
+				)}
 				<InvisibleNumberInput
+					testID={RecommendedCarbsTestIds.InvisibleCarbInput}
 					negativeAllowed={false}
 					cleanPartialInput={true}
 					decimalPlaces={0}
@@ -127,7 +137,7 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 		);
 	};
 
-	public renderRow = (row: ICalculationRow): JSX.Element => {
+	public renderRow = (row: ICalculationRow, testID: RecommendedCarbsTestIds): JSX.Element => {
 		return (
 			<View style={[calculationStyles.borderContainer, { paddingVertical: `1%` }]}>
 				<View style={calculationStyles.rowContainer}>
@@ -135,7 +145,9 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 				</View>
 				<View style={calculationStyles.valueUnitContainer}>
 					<View style={calculationStyles.valueContainer}>
-						<Text style={calculationStyles.value}>{row.value}</Text>
+						<Text testID={testID} style={calculationStyles.value}>
+							{row.value}
+						</Text>
 					</View>
 					<View style={calculationStyles.unitContainer}>
 						<Text style={calculationStyles.units}>{row.units}</Text>
@@ -153,11 +165,14 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 					<Text style={infoStyles.label}>{i18n._(t`Food`)}</Text>
 					<Text style={calculationStyles.foodUnitsLabel}>{`(${i18n._(t`Carbohydrates`)})`}</Text>
 				</View>
-				{this.renderRow({
-					label: i18n._(t`Entered`),
-					value: this.props.enteredCarbs,
-					units: i18n._(t`grams`),
-				})}
+				{this.renderRow(
+					{
+						label: i18n._(t`Entered`),
+						value: this.props.enteredCarbs,
+						units: i18n._(t`grams`),
+					},
+					RecommendedCarbsTestIds.EnteredCarbs,
+				)}
 				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
 			</React.Fragment>
 		);

package/src/components/RecommendedInsulin.d.ts

@@ -1,17 +1,17 @@
+import { UserSettings } from "@hedia/types";
 import React from "react";
-import { InjectionMethod } from "../types/enum";
 interface IProps {
-    insulinRecommendation?: number;
-    enteredInsulin?: number;
-    activityReduction?: number;
-    injectionMethod: InjectionMethod;
+    insulinRecommendation: number;
+    enteredInsulin: number | null;
+    activityReduction: number | null;
+    injectionMethod: UserSettings.Enums.InjectionMethod;
     updateRecommendedInsulin(value: number): void;
 }
 interface IState {
-    partialInput: string;
+    partialInput?: string;
 }
 export default class RecommendedInsulin extends React.Component<IProps, IState> {
-    callbackInput: () => void;
+    callbackInput?: () => void;
     constructor(props: IProps);
     componentDidUpdate(prevProps: IProps): void;
     handleOnPress: () => void;

package/src/components/RecommendedInsulin.jsx

@@ -3,17 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const recommendation_calculator_1 = require("@hedia/recommendation-calculator");
+const types_1 = require("@hedia/types");
 const macro_1 = require("@lingui/macro");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
 const i18nUtils_1 = require("../locale/i18nUtils");
+const enum_1 = require("../types/enum");
 const AttentionMessages_1 = require("../utils/AttentionMessages");
 const Utils_1 = require("../utils/Utils");
 const Icon_1 = __importDefault(require("./Icon"));
 const InfoBars_1 = require("./InfoBars");
 const InvisibleNumberInput_1 = __importDefault(require("./InvisibleNumberInput"));
+const SAFETY_INSULIN_LIMIT = types_1.BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
 class RecommendedInsulin extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -30,9 +32,9 @@ class RecommendedInsulin extends react_1.default.Component {
         this.handleUpdatedInsulin = (value) => {
             const rounded = Utils_1.Utils.roundValue(value, this.props.injectionMethod);
             // https://hedia.atlassian.net/browse/HDA-795
-            const limited = (1 - (this.props.activityReduction ?? 0)) * recommendation_calculator_1.SAFETY_INSULIN_LIMIT;
+            const limited = (1 - (this.props.activityReduction ?? 0)) * SAFETY_INSULIN_LIMIT;
             if (rounded > limited) {
-                this.setState({ partialInput: this.props.insulinRecommendation?.toString() });
+                this.setState({ partialInput: this.props.insulinRecommendation?.toString() ?? null });
                 this.props.updateRecommendedInsulin(this.props.insulinRecommendation);
                 return react_native_1.Alert.alert(i18nUtils_1.i18n._(macro_1.t `Attention`), AttentionMessages_1.Messages.InsulinInputWasLimited(this.props.activityReduction), [
                     {
@@ -47,7 +49,7 @@ class RecommendedInsulin extends react_1.default.Component {
             const paddingBottom = react_native_1.Platform.OS === `ios` ? `3%` : `1%`;
             const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
             return (<react_1.default.Fragment>
-				<react_native_1.TouchableOpacity accessibilityLabel="editRecommendedInsulin" onPress={this.handleOnPress}>
+				<react_native_1.TouchableOpacity accessibilityLabel="editRecommendedInsulin" testID={enum_1.RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
 					<react_native_linear_gradient_1.default style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
 						<react_native_1.View style={recommendedInsulinStyles.recommendedTextContainer}>
 							<react_native_1.Text style={recommendedInsulinStyles.recommendedText}>
@@ -56,18 +58,20 @@ class RecommendedInsulin extends react_1.default.Component {
 						</react_native_1.View>
 						<react_native_1.View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
 							<react_native_1.View style={recommendedInsulinStyles.valueContainer}>
-								<react_native_1.Text style={recommendedInsulinStyles.value}>{shownInsulin}</react_native_1.Text>
+								<react_native_1.Text style={recommendedInsulinStyles.value} testID={enum_1.RecommendedInsulinTestIds.ShownInsulinText}>
+									{shownInsulin}
+								</react_native_1.Text>
 								<react_native_1.Text style={recommendedInsulinStyles.units}>{i18nUtils_1.i18n._(macro_1.t `Units`)}</react_native_1.Text>
 							</react_native_1.View>
 							<Icon_1.default style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`}/>
 						</react_native_1.View>
 					</react_native_linear_gradient_1.default>
 				</react_native_1.TouchableOpacity>
-				<InvisibleNumberInput_1.default decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
+				<InvisibleNumberInput_1.default testID={enum_1.RecommendedInsulinTestIds.InvisibleInsulinInput} decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
 			</react_1.default.Fragment>);
         };
         this.state = {
-            partialInput: null,
+            partialInput: undefined,
         };
     }
     componentDidUpdate(prevProps) {

package/src/components/RecommendedInsulin.tsx

@@ -1,10 +1,10 @@
-import { SAFETY_INSULIN_LIMIT } from "@hedia/recommendation-calculator";
+import { BolusCalculator, UserSettings } from "@hedia/types";
 import { t } from "@lingui/macro";
 import React from "react";
 import { Alert, Dimensions, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import { i18n } from "../locale/i18nUtils";
-import { InjectionMethod } from "../types/enum";
+import { RecommendedInsulinTestIds } from "../types/enum";
 import { Messages } from "../utils/AttentionMessages";
 import { Utils } from "../utils/Utils";
 import Icon from "./Icon";
@@ -13,27 +13,29 @@ import InvisibleNumberInput from "./InvisibleNumberInput";
 
 interface IProps {
 	// Values
-	insulinRecommendation?: number;
-	enteredInsulin?: number;
-	activityReduction?: number;
-	injectionMethod: InjectionMethod;
+	insulinRecommendation: number;
+	enteredInsulin: number | null;
+	activityReduction: number | null;
+	injectionMethod: UserSettings.Enums.InjectionMethod;
 
 	// Callbacks
 	updateRecommendedInsulin(value: number): void;
 }
 
 interface IState {
-	partialInput: string;
+	partialInput?: string;
 }
 
+const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
+
 export default class RecommendedInsulin extends React.Component<IProps, IState> {
-	public callbackInput: () => void;
+	public callbackInput?: () => void;
 
 	constructor(props: IProps) {
 		super(props);
 
 		this.state = {
-			partialInput: null,
+			partialInput: undefined,
 		};
 	}
 
@@ -64,7 +66,7 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 		const limited = (1 - (this.props.activityReduction ?? 0)) * SAFETY_INSULIN_LIMIT;
 
 		if (rounded > limited) {
-			this.setState({ partialInput: this.props.insulinRecommendation?.toString() });
+			this.setState({ partialInput: this.props.insulinRecommendation?.toString() ?? null });
 			this.props.updateRecommendedInsulin(this.props.insulinRecommendation);
 			return Alert.alert(i18n._(t`Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
 				{
@@ -81,7 +83,11 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 		const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
 		return (
 			<React.Fragment>
-				<TouchableOpacity accessibilityLabel="editRecommendedInsulin" onPress={this.handleOnPress}>
+				<TouchableOpacity
+					accessibilityLabel="editRecommendedInsulin"
+					testID={RecommendedInsulinTestIds.EditRecommendedInsulin}
+					onPress={this.handleOnPress}
+				>
 					<LinearGradient
 						style={recommendedInsulinStyles.container}
 						colors={[`#a200ff`, `#578aff`]}
@@ -95,7 +101,12 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 						</View>
 						<View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
 							<View style={recommendedInsulinStyles.valueContainer}>
-								<Text style={recommendedInsulinStyles.value}>{shownInsulin}</Text>
+								<Text
+									style={recommendedInsulinStyles.value}
+									testID={RecommendedInsulinTestIds.ShownInsulinText}
+								>
+									{shownInsulin}
+								</Text>
 								<Text style={recommendedInsulinStyles.units}>{i18n._(t`Units`)}</Text>
 							</View>
 							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`} />
@@ -103,6 +114,7 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 					</LinearGradient>
 				</TouchableOpacity>
 				<InvisibleNumberInput
+					testID={RecommendedInsulinTestIds.InvisibleInsulinInput}
 					decimalPlaces={3}
 					negativeAllowed={false}
 					cleanPartialInput={false}

package/src/components/Remeasure.d.ts

@@ -3,8 +3,8 @@ interface IProps {
     remeasureTime: number;
     onSliderChange(value: number): void;
 }
-export default class Remeasure extends React.Component<IProps, null> {
-    private slider;
+export default class Remeasure extends React.Component<IProps> {
+    private slider?;
     componentDidMount(): void;
     handleSliderChange: (remeasureTime: number) => void;
     limitTime: (remeasureTime: number) => number;

package/src/components/Remeasure.jsx

@@ -8,6 +8,7 @@ const slider_1 = __importDefault(require("@react-native-community/slider"));
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const i18nUtils_1 = require("../locale/i18nUtils");
+const enum_1 = require("../types/enum");
 const Constants_1 = require("../utils/Constants");
 const InfoBars_1 = require("./InfoBars");
 class Remeasure extends react_1.default.Component {
@@ -22,7 +23,7 @@ class Remeasure extends react_1.default.Component {
         };
     }
     componentDidMount() {
-        this.slider.setNativeProps({
+        this.slider?.setNativeProps({
             value: this.props.remeasureTime,
         });
     }
@@ -45,7 +46,11 @@ class Remeasure extends react_1.default.Component {
 							</react_native_1.View>) : null}
 					</react_native_1.View>
 				</react_native_1.View>
-				<slider_1.default ref={(slider) => (this.slider = slider)} accessibilityLabel="remeasureSlider" maximumTrackTintColor={Constants_1.BORDER_COLOUR_GREY} minimumTrackTintColor={Constants_1.BORDER_COLOUR_TEAL} thumbTintColor={Constants_1.BORDER_COLOUR_TEAL} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
+				<slider_1.default ref={(slider) => {
+            if (slider !== null) {
+                this.slider = slider;
+            }
+        }} testID={enum_1.RemeasureTestIds.RemeasureSlider} accessibilityLabel="remeasureSlider" maximumTrackTintColor={Constants_1.BORDER_COLOUR_GREY} minimumTrackTintColor={Constants_1.BORDER_COLOUR_TEAL} thumbTintColor={Constants_1.BORDER_COLOUR_TEAL} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
 			</react_native_1.View>);
     }
 }

package/src/components/Remeasure.tsx

@@ -3,6 +3,7 @@ import Slider from "@react-native-community/slider";
 import React from "react";
 import { Dimensions, Platform, StyleSheet, Text, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
+import { RemeasureTestIds } from "../types/enum";
 import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
 import { infoStyles } from "./InfoBars";
 
@@ -11,11 +12,11 @@ interface IProps {
 	onSliderChange(value: number): void;
 }
 
-export default class Remeasure extends React.Component<IProps, null> {
-	private slider: Slider;
+export default class Remeasure extends React.Component<IProps> {
+	private slider?: Slider;
 
 	public componentDidMount(): void {
-		this.slider.setNativeProps({
+		this.slider?.setNativeProps({
 			value: this.props.remeasureTime,
 		});
 	}
@@ -52,7 +53,12 @@ export default class Remeasure extends React.Component<IProps, null> {
 					</View>
 				</View>
 				<Slider
-					ref={(slider): Slider => (this.slider = slider)}
+					ref={(slider): void => {
+						if (slider !== null) {
+							this.slider = slider;
+						}
+					}}
+					testID={RemeasureTestIds.RemeasureSlider}
 					accessibilityLabel="remeasureSlider"
 					maximumTrackTintColor={BORDER_COLOUR_GREY}
 					minimumTrackTintColor={BORDER_COLOUR_TEAL}

package/src/components/TransferToLogbook.jsx

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const macro_1 = require("@lingui/macro");
 const i18nUtils_1 = require("../locale/i18nUtils");
+const enum_1 = require("../types/enum");
 const Icon_1 = __importDefault(require("./Icon"));
 class TransferToLogbook extends react_1.default.Component {
     constructor() {
@@ -25,7 +26,7 @@ class TransferToLogbook extends react_1.default.Component {
         if (!this.props.visible) {
             return <react_native_1.View style={addToLogbookStyles.marginContainer}/>;
         }
-        return (<react_native_1.TouchableOpacity onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container} accessibilityLabel="transferToLogbook">
+        return (<react_native_1.TouchableOpacity testID={enum_1.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container} accessibilityLabel="transferToLogbook">
 				{!this.state.pressed ? (<react_native_1.View style={addToLogbookStyles.textContainer}>
 						<react_native_1.Text style={addToLogbookStyles.transferText}>{i18nUtils_1.i18n._(macro_1.t `Transfer to logbook`)}</react_native_1.Text>
 					</react_native_1.View>) : (<react_native_1.View style={addToLogbookStyles.textContainerActive}>

package/src/components/TransferToLogbook.tsx

@@ -3,6 +3,7 @@ import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-nati
 
 import { t } from "@lingui/macro";
 import { i18n } from "../locale/i18nUtils";
+import { TransferToLogbookTestIds } from "../types/enum";
 import Icon from "./Icon";
 
 interface IProps {
@@ -33,6 +34,7 @@ export default class TransferToLogbook extends React.Component<IProps, IState> {
 
 		return (
 			<TouchableOpacity
+				testID={TransferToLogbookTestIds.TransferButton}
 				onPress={this.handlePress}
 				disabled={this.state.pressed}
 				style={addToLogbookStyles.container}

package/src/components/TwoOptionModal.d.ts

@@ -29,12 +29,14 @@ export declare const modalStyle: {
         backgroundColor: string;
         borderRadius: number;
     };
+    iconWrapper: {
+        alignSelf: "flex-end";
+        marginRight: string;
+        marginTop: string;
+    };
     icon: {
         color: string;
         fontSize: number;
-        textAlign: "right";
-        marginRight: string;
-        marginTop: string;
     };
     textContainer: {
         marginHorizontal: string;

package/src/components/TwoOptionModal.jsx

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.modalStyle = void 0;
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const enum_1 = require("../types/enum");
 const Constants_1 = require("../utils/Constants");
 const Icon_1 = __importDefault(require("./Icon"));
 const RecommendationModal_1 = require("./RecommendationModal");
@@ -37,7 +38,9 @@ class TwoOptionModal extends React.Component {
         return (<react_native_1.View style={exports.modalStyle.container}>
 				<react_native_1.StatusBar backgroundColor={`rgba(0, 0, 0, 1)`}/>
 				<react_native_1.View style={exports.modalStyle.modalContainer}>
-					{isCancelable ? (<Icon_1.default accessibilityLabel="ModalExitIcon" iconIdentifier={`Ionicons/ios-close-circle-outline`} style={exports.modalStyle.icon} onPress={this.props.onClose}/>) : null}
+					{isCancelable ? (<react_native_1.TouchableOpacity onPress={this.props.onClose} testID={enum_1.TwoOptionModalTestIds.ExitButton} style={exports.modalStyle.iconWrapper}>
+							<Icon_1.default accessibilityLabel="ModalExitIcon" iconIdentifier={`Ionicons/ios-close-circle-outline`} style={exports.modalStyle.icon}/>
+						</react_native_1.TouchableOpacity>) : null}
 
 					<react_native_1.View style={isCancelable ? exports.modalStyle.textContainer : exports.modalStyle.textContainerNotCancelable}>
 						<react_native_1.Text style={rowAsButtonLayout ? exports.modalStyle.titleRowLayout : exports.modalStyle.titleColumnLayout}>
@@ -46,12 +49,12 @@ class TwoOptionModal extends React.Component {
 						<react_native_1.Text style={exports.modalStyle.message}>{this.props.message}</react_native_1.Text>
 					</react_native_1.View>
 					<react_native_1.View style={rowAsButtonLayout ? exports.modalStyle.buttonContainerRow : exports.modalStyle.buttonContainerColumn}>
-						<react_native_1.TouchableOpacity accessibilityLabel="firstOptionButton" onPress={this.props.firstOption} style={rowAsButtonLayout ? exports.modalStyle.buttonRow : exports.modalStyle.firstButtonColumn}>
+						<react_native_1.TouchableOpacity testID={enum_1.TwoOptionModalTestIds.FirstOption} accessibilityLabel="firstOptionButton" onPress={this.props.firstOption} style={rowAsButtonLayout ? exports.modalStyle.buttonRow : exports.modalStyle.firstButtonColumn}>
 							<react_native_1.Text style={rowAsButtonLayout ? exports.modalStyle.textButtonRow : exports.modalStyle.textFirstButtonColumn}>
 								{this.props.textFirstOption}
 							</react_native_1.Text>
 						</react_native_1.TouchableOpacity>
-						<react_native_1.TouchableOpacity accessibilityLabel="secondOptionButton" onPress={this.props.secondOption} style={rowAsButtonLayout ? exports.modalStyle.buttonRow : exports.modalStyle.secondButtonColumn}>
+						<react_native_1.TouchableOpacity testID={enum_1.TwoOptionModalTestIds.SecondOption} accessibilityLabel="secondOptionButton" onPress={this.props.secondOption} style={rowAsButtonLayout ? exports.modalStyle.buttonRow : exports.modalStyle.secondButtonColumn}>
 							<react_native_1.Text style={rowAsButtonLayout ? exports.modalStyle.textButtonRow : exports.modalStyle.textSecondButtonColumn}>
 								{this.props.textSecondOption}
 							</react_native_1.Text>
@@ -64,17 +67,36 @@ class TwoOptionModal extends React.Component {
 exports.default = TwoOptionModal;
 const { height, width } = react_native_1.Dimensions.get(`screen`);
 exports.modalStyle = react_native_1.StyleSheet.create({
-    container: { ...react_native_1.StyleSheet.absoluteFillObject, justifyContent: `center`, backgroundColor: `rgba(0, 0, 0, 0.9)` },
-    modalContainer: { margin: `4%`, backgroundColor: Constants_1.BACKGROUND_COLOUR_PURPLE, borderRadius: width / 25 },
+    container: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        justifyContent: `center`,
+        backgroundColor: `rgba(0, 0, 0, 0.9)`,
+    },
+    modalContainer: {
+        margin: `4%`,
+        backgroundColor: Constants_1.BACKGROUND_COLOUR_PURPLE,
+        borderRadius: width / 25,
+    },
+    iconWrapper: {
+        alignSelf: `flex-end`,
+        marginRight: `4%`,
+        marginTop: `3%`,
+    },
     icon: {
         color: Constants_1.BORDER_COLOUR_GREY,
         fontSize: width / 12,
-        textAlign: `right`,
-        marginRight: `4%`,
-        marginTop: `3%`,
     },
-    textContainer: { marginHorizontal: `4%`, marginBottom: `5%`, marginTop: `2%`, alignSelf: `flex-start` },
-    textContainerNotCancelable: { marginHorizontal: `4%`, marginVertical: `5%`, alignSelf: `flex-start` },
+    textContainer: {
+        marginHorizontal: `4%`,
+        marginBottom: `5%`,
+        marginTop: `2%`,
+        alignSelf: `flex-start`,
+    },
+    textContainerNotCancelable: {
+        marginHorizontal: `4%`,
+        marginVertical: `5%`,
+        alignSelf: `flex-start`,
+    },
     titleRowLayout: {
         fontFamily: `Roboto-Regular`,
         color: `rgba(139, 144, 196, 1)`,
@@ -108,7 +130,11 @@ exports.modalStyle = react_native_1.StyleSheet.create({
         justifyContent: `space-around`,
         margin: `4%`,
     },
-    buttonRow: { ...RecommendationModal_1.stylesModal.okButton, height: height / 16, marginTop: 0 },
+    buttonRow: {
+        ...RecommendationModal_1.stylesModal.okButton,
+        height: height / 16,
+        marginTop: 0,
+    },
     firstButtonColumn: {
         ...RecommendationModal_1.stylesModal.okButton,
         height: height / 18,
@@ -123,7 +149,12 @@ exports.modalStyle = react_native_1.StyleSheet.create({
         width: width / 1.5,
         marginTop: `2%`,
     },
-    textButtonRow: { fontFamily: `Roboto-Regular`, textAlign: `center`, fontSize: width / 24, color: `white` },
+    textButtonRow: {
+        fontFamily: `Roboto-Regular`,
+        textAlign: `center`,
+        fontSize: width / 24,
+        color: `white`,
+    },
     textFirstButtonColumn: {
         fontFamily: `Roboto-Regular`,
         textAlign: `center`,