@hedia/recommendation-screen 1.8.2 → 2.0.2

package/src/__tests__/utils.tsx

@@ -1,23 +1,31 @@
-import { IRecommendationParams } from "@hedia/recommendation-calculator";
-import { ActivityIntensity, IActivityParams } from "@hedia/recommendation-calculator/src/RecommendationCalculator";
-import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
+import { Activity, BloodGlucoseUnit, BloodKetonesUnit, Languages, UserSettings } from "@hedia/types";
 import { I18nProvider } from "@lingui/react";
 import React from "react";
 import { RenderAPI } from "react-native-testing-library";
+import { ReactTestInstance } from "react-test-renderer";
 import { i18n } from "../locale/i18nUtils";
 import { IRecommendationProps } from "../RecommendationScreen";
-import { ActivityEnum, InjectionMethod, Language } from "../types/enum";
+import { TestIdEnum } from "../types/enum";
+import { IActivityParams, IRecommendationParams, logbookEntry } from "../types/types";
+
+const ActivityEnum = Activity.Enums.ActivityEnum;
+const ActivityIntensity = Activity.Enums.ActivityIntensity;
+const InjectionMethod = UserSettings.Enums.InjectionMethod;
+
+const { Run } = ActivityEnum;
+const { moderate } = ActivityIntensity;
+const { PenHalf } = InjectionMethod;
 
 export function getRecommendationProps(partials?: Partial<IRecommendationProps>): IRecommendationProps {
 	return {
 		currentBKL: partials?.currentBKL ?? 0.1,
 		bloodKetoneUnit: partials?.bloodKetoneUnit ?? BloodKetonesUnit.MMOL_L,
 		bloodGlucoseUnit: partials?.bloodGlucoseUnit ?? BloodGlucoseUnit.MMOL_L,
-		language: partials?.language ?? Language.en,
+		language: partials?.language ?? Languages.en,
 		userReminder: partials?.userReminder ?? 1.5,
-		latestLogbookFrom6Hours: partials?.latestLogbookFrom6Hours,
+		latestLogbookFrom6Hours: partials?.latestLogbookFrom6Hours ?? generateDefaultLogbook(),
 		calculatorParams: partials?.calculatorParams ?? generateDefaultCalculatorParams(),
-		injectionMethod: partials?.injectionMethod ?? InjectionMethod.PenHalf,
+		injectionMethod: partials?.injectionMethod ?? PenHalf,
 		transferToLogbook: partials?.transferToLogbook ?? jest.fn(),
 		onError: partials?.onError ?? jest.fn(),
 		onRecentInsulinYes: partials?.onRecentInsulinYes ?? jest.fn(),
@@ -28,7 +36,7 @@ export function getRecommendationProps(partials?: Partial<IRecommendationProps>)
 		restartCalculation: partials?.restartCalculation ?? jest.fn(),
 		activityDisplayProps: partials?.activityDisplayProps ?? {
 			activityTitle: `Activity Title Test`,
-			activityType: ActivityEnum.Run,
+			activityType: Run,
 		},
 	};
 }
@@ -50,6 +58,7 @@ export function generateDefaultCalculatorParams(): IRecommendationParams {
 				secondsPassed: 10000,
 			},
 		],
+		activity: null,
 	};
 }
 
@@ -57,14 +66,42 @@ export function generateActivityProps(): IActivityParams {
 	return {
 		activityDate: new Date(),
 		activityDuration: 30,
-		activityIntensity: ActivityIntensity.Moderate,
-		activitySettings: {
-			hard: { fromFortysix: null, fromThirty: 0.25, fromZero: 1 },
-			light: { fromFortysix: 0.5, fromThirty: 0.75, fromZero: 1 },
-			moderate: { fromFortysix: 0.25, fromThirty: 0.5, fromZero: 1 },
-			post: { fromFortysix: 0.5, fromThirty: 0.5, fromZero: 1 },
-			target: 9,
-		},
+		activityIntensity: moderate,
+		activitySettings: generateDefaultActivitySettings(),
+	};
+}
+
+export function generateDefaultActivitySettings(): IActivityParams["activitySettings"] {
+	return {
+		hard: { fromFortysix: null, fromThirty: 0.25, fromZero: 1 },
+		light: { fromFortysix: 0.5, fromThirty: 0.75, fromZero: 1 },
+		moderate: { fromFortysix: 0.25, fromThirty: 0.5, fromZero: 1 },
+		post: { fromFortysix: 0.5, fromThirty: 0.5, fromZero: 1 },
+		target: 9,
+	};
+}
+export function generateDefaultLogbook(): logbookEntry {
+	return {
+		blood_glucose_millimolar: 6,
+		carbohydrates_entered_grams: 25,
+		carbohydrates_suggested_grams: 25,
+		client_timestamp: `25`,
+		client_version: `25`,
+		entry_timestamp: `25`,
+		event_uuid: null,
+		insulin_entered_units: 25,
+		insulin_suggested_units: 25,
+		is_deleted: null,
+		mood: 2,
+		settings_uuid: `25`,
+		uuid: `aaa`,
+		device_and_os: `ios 12.1.2`,
+		overwritten_by_id: null,
+		server_timestamp: null,
+		server_version: null,
+		utc_timezone_offset: null,
+		blood_ketones_millimolar: null,
+		carbohydrates_modified_suggested_grams: null,
 	};
 }
 
@@ -78,6 +115,12 @@ export function expectTextExists(component: RenderAPI, text: string | RegExp): v
 	return expect(element).not.toBeNull();
 }
 
+export function queryTextFromComponent(wrapper: RenderAPI, testID: TestIdEnum): string {
+	const component = wrapper.getByTestId(testID);
+	const values = component.children;
+	return values.join(``);
+}
+
 export function expectTextNotExists(component: RenderAPI, text: string | RegExp): void {
 	const element = component.queryByText(text);
 	/*
@@ -95,3 +138,7 @@ export function i18nProvided(element: JSX.Element): JSX.Element {
 		</I18nProvider>
 	);
 }
+
+export function getIcon(wrapper: RenderAPI, name: string, active: boolean): ReactTestInstance | null {
+	return wrapper.queryByA11yLabel(`${name}_${active}`);
+}

package/src/components/Header.jsx

@@ -8,6 +8,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 Icon_1 = __importDefault(require("./Icon"));
 class Header extends react_1.default.Component {
@@ -18,7 +19,7 @@ class Header extends react_1.default.Component {
 					<react_native_1.View style={exports.headerStyles.margin}>
 						<react_native_1.View style={exports.headerStyles.exitButtonContainer}>
 							<react_native_1.View style={exports.headerStyles.exitButton}>
-								<react_native_1.TouchableOpacity testID="closeCalc" accessibilityLabel="exitButton" style={exports.headerStyles.exitButton} onPress={this.props.exitCallback}>
+								<react_native_1.TouchableOpacity testID={enum_1.HeaderTestIds.ExitCalculation} accessibilityLabel="exitButton" style={exports.headerStyles.exitButton} onPress={this.props.exitCallback}>
 									<Icon_1.default iconIdentifier={`Ionicons/ios-close-circle-outline`} style={exports.headerStyles.iconStyle}/>
 								</react_native_1.TouchableOpacity>
 								<react_native_1.View style={exports.headerStyles.headerFiller}/>

package/src/components/Header.tsx

@@ -2,6 +2,7 @@ import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
+import { HeaderTestIds } from "../types/enum";
 import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
 import Icon from "./Icon";
 
@@ -19,7 +20,7 @@ export default class Header extends React.Component<IProps> {
 						<View style={headerStyles.exitButtonContainer}>
 							<View style={headerStyles.exitButton}>
 								<TouchableOpacity
-									testID="closeCalc"
+									testID={HeaderTestIds.ExitCalculation}
 									accessibilityLabel="exitButton"
 									style={headerStyles.exitButton}
 									onPress={this.props.exitCallback}

package/src/components/InfoBars.d.ts

@@ -2,7 +2,7 @@ import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
 import React from "react";
 export interface IProps {
     label: string;
-    value?: string;
+    value: string | null;
     unit: string | BloodGlucoseUnit | BloodKetonesUnit;
     showNullAsDash: boolean;
 }

package/src/components/InfoBars.tsx

@@ -8,7 +8,7 @@ import { Utils } from "../utils/Utils";
 
 export interface IProps {
 	label: string;
-	value?: string;
+	value: string | null;
 	unit: string | BloodGlucoseUnit | BloodKetonesUnit;
 	showNullAsDash: boolean;
 }

package/src/components/InvisibleNumberInput.d.ts

@@ -6,6 +6,7 @@ interface IProps {
     cleanPartialInput: boolean;
     negativeAllowed: boolean;
     maxLength?: number;
+    testID: string;
     visible(toggle: () => void): void;
     onEnd?(value: number): void;
     partialInput?(value: string): void;
@@ -14,7 +15,7 @@ interface IState {
     value: string;
 }
 export default class InvisibleNumberInput extends React.Component<IProps, IState> {
-    textInput: TextInput;
+    textInput?: TextInput;
     state: IState;
     componentDidMount(): void;
     cleanInput: (text: string) => string;

package/src/components/InvisibleNumberInput.jsx

@@ -47,11 +47,16 @@ class InvisibleNumberInput extends react_1.default.Component {
             this.setState({
                 value: this.props.startValue ?? `0`,
             });
-            return this.textInput.focus();
+            return this.textInput?.focus();
         });
     }
     render() {
-        return (<react_native_1.TextInput accessibilityLabel="InvisibleNumberInput" value={`${this.state.value}`} ref={(textInput) => (this.textInput = textInput)} style={inputStyles.textInput} keyboardType="numeric" onChangeText={this.handleOnChangeText} onEndEditing={this.onEndEdit} maxLength={this.props.maxLength} selectTextOnFocus/>);
+        const { testID } = this.props;
+        return (<react_native_1.TextInput testID={testID} accessibilityLabel="InvisibleNumberInput" value={`${this.state.value}`} ref={(textInput) => {
+            if (textInput !== null) {
+                this.textInput = textInput;
+            }
+        }} style={inputStyles.textInput} keyboardType="numeric" onChangeText={this.handleOnChangeText} onEndEditing={this.onEndEdit} maxLength={this.props.maxLength} selectTextOnFocus/>);
     }
 }
 exports.default = InvisibleNumberInput;

package/src/components/InvisibleNumberInput.tsx

@@ -7,6 +7,7 @@ interface IProps {
 	cleanPartialInput: boolean;
 	negativeAllowed: boolean;
 	maxLength?: number;
+	testID: string;
 	visible(toggle: () => void): void;
 	onEnd?(value: number): void;
 	partialInput?(value: string): void;
@@ -17,7 +18,7 @@ interface IState {
 }
 
 export default class InvisibleNumberInput extends React.Component<IProps, IState> {
-	public textInput: TextInput;
+	public textInput?: TextInput;
 
 	public state: IState = {
 		value: `0`,
@@ -31,7 +32,7 @@ export default class InvisibleNumberInput extends React.Component<IProps, IState
 			this.setState({
 				value: this.props.startValue ?? `0`,
 			});
-			return this.textInput.focus();
+			return this.textInput?.focus();
 		});
 	}
 
@@ -66,11 +67,17 @@ export default class InvisibleNumberInput extends React.Component<IProps, IState
 	};
 
 	public render(): JSX.Element {
+		const { testID } = this.props;
 		return (
 			<TextInput
+				testID={testID}
 				accessibilityLabel="InvisibleNumberInput"
 				value={`${this.state.value}`}
-				ref={(textInput): TextInput => (this.textInput = textInput)}
+				ref={(textInput): void => {
+					if (textInput !== null) {
+						this.textInput = textInput;
+					}
+				}}
 				style={inputStyles.textInput}
 				keyboardType="numeric"
 				onChangeText={this.handleOnChangeText}

package/src/components/LimitationMessage.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AttentionMessage } from "../utils/AttentionMessages";
 export interface ILimitationMessageProps {
-    limitationMessage: AttentionMessage;
+    limitationMessage: AttentionMessage | null;
     onPressNextButton(): void;
 }
 export default class LimitationMessage extends React.Component<ILimitationMessageProps> {

package/src/components/LimitationMessage.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;
 };
@@ -23,6 +23,7 @@ const macro_1 = require("@lingui/macro");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const i18nUtils_1 = require("../locale/i18nUtils");
+const enum_1 = require("../types/enum");
 const RecommendationModal_1 = require("./RecommendationModal");
 class LimitationMessage extends React.Component {
     constructor() {
@@ -37,7 +38,7 @@ class LimitationMessage extends React.Component {
 					<react_native_1.Text style={RecommendationModal_1.stylesModal.textMessage}>{limitationMessage}</react_native_1.Text>
 				</react_native_1.View>
 				<react_native_1.View style={RecommendationModal_1.stylesModal.containerAcceptButton}>
-					<react_native_1.TouchableOpacity accessibilityLabel="nextButtonModal" style={RecommendationModal_1.stylesModal.okButton} onPress={this.props.onPressNextButton}>
+					<react_native_1.TouchableOpacity testID={enum_1.LimitationMessageTestIds.OkButton} accessibilityLabel="nextButtonModal" style={RecommendationModal_1.stylesModal.okButton} onPress={this.props.onPressNextButton}>
 						<react_native_1.Text style={RecommendationModal_1.stylesModal.buttonText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
 					</react_native_1.TouchableOpacity>
 				</react_native_1.View>

package/src/components/LimitationMessage.tsx

@@ -2,11 +2,12 @@ import { t } from "@lingui/macro";
 import * as React from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
+import { LimitationMessageTestIds } from "../types/enum";
 import { AttentionMessage } from "../utils/AttentionMessages";
 import { stylesModal } from "./RecommendationModal";
 
 export interface ILimitationMessageProps {
-	limitationMessage: AttentionMessage;
+	limitationMessage: AttentionMessage | null;
 	onPressNextButton(): void;
 }
 
@@ -23,6 +24,7 @@ export default class LimitationMessage extends React.Component<ILimitationMessag
 				</View>
 				<View style={stylesModal.containerAcceptButton}>
 					<TouchableOpacity
+						testID={LimitationMessageTestIds.OkButton}
 						accessibilityLabel="nextButtonModal"
 						style={stylesModal.okButton}
 						onPress={this.props.onPressNextButton}

package/src/components/RecentInsulin.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 InfoBars_1 = require("./InfoBars");
 class RecentInsulin extends react_1.default.Component {
     constructor() {
@@ -23,10 +24,10 @@ class RecentInsulin extends react_1.default.Component {
 				</react_native_1.View>
 				<react_native_1.View style={recentInsulinStyles.buttonContainer}>
 					<react_native_1.View style={recentInsulinStyles.filler}/>
-					<react_native_1.TouchableOpacity onPress={this.props.onRecentInsulinYes} style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}>
+					<react_native_1.TouchableOpacity testID={enum_1.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}>
 						<react_native_1.Text style={recentInsulinStyles.yesNoText}>{i18nUtils_1.i18n._(macro_1.t `Yes`)}</react_native_1.Text>
 					</react_native_1.TouchableOpacity>
-					<react_native_1.TouchableOpacity onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
+					<react_native_1.TouchableOpacity testID={enum_1.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
 						<react_native_1.Text style={recentInsulinStyles.yesNoText}>{i18nUtils_1.i18n._(macro_1.t `No`)}</react_native_1.Text>
 					</react_native_1.TouchableOpacity>
 					<react_native_1.View style={recentInsulinStyles.filler}/>

package/src/components/RecentInsulin.tsx

@@ -2,6 +2,7 @@ import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
+import { RecentInsulinTestIds } from "../types/enum";
 import { infoStyles } from "./InfoBars";
 
 interface IProps {
@@ -24,12 +25,14 @@ export default class RecentInsulin extends React.Component<IProps> {
 				<View style={recentInsulinStyles.buttonContainer}>
 					<View style={recentInsulinStyles.filler} />
 					<TouchableOpacity
+						testID={RecentInsulinTestIds.Yes}
 						onPress={this.props.onRecentInsulinYes}
 						style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}
 					>
 						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t`Yes`)}</Text>
 					</TouchableOpacity>
 					<TouchableOpacity
+						testID={RecentInsulinTestIds.No}
 						onPress={this.props.onRecentInsulinNo}
 						style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}
 					>

package/src/components/RecommendationModal.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { AttentionMessage } from "../utils/AttentionMessages";
 interface IModalProps {
     isVisible: boolean;
-    suggestedCarbohydrates?: number;
-    attentionMessage: AttentionMessage;
-    limitationMessage: AttentionMessage;
+    suggestedCarbohydrates: number | null;
+    attentionMessage: AttentionMessage | null;
+    limitationMessage: AttentionMessage | null;
     onClickOkButton(): void;
     onAcceptCarbohydrates(): void;
     onDeclineCarbohydrates(): void;
@@ -16,7 +16,7 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
     constructor(props: IModalProps);
     onPressNextButton: () => void;
     recommendationButtons: () => JSX.Element;
-    recommendCarbohydrates: () => JSX.Element;
+    recommendCarbohydrates: (suggestedCarbohydrates: number) => JSX.Element;
     secondPage: () => JSX.Element;
     firstPage: () => JSX.Element;
     render(): JSX.Element;

package/src/components/RecommendationModal.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;
 };
@@ -28,6 +28,7 @@ const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_modal_1 = __importDefault(require("react-native-modal"));
 const i18nUtils_1 = require("../locale/i18nUtils");
+const enum_1 = require("../types/enum");
 const Constants_1 = require("../utils/Constants");
 const LimitationMessage_1 = __importDefault(require("./LimitationMessage"));
 class RecommendationModal extends React.Component {
@@ -40,16 +41,16 @@ class RecommendationModal extends React.Component {
         };
         this.recommendationButtons = () => {
             return (<react_native_1.View style={exports.stylesModal.recommendationButtonsContainer}>
-				<react_native_1.TouchableOpacity accessibilityLabel="yesButtonModal" style={exports.stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
+				<react_native_1.TouchableOpacity testID={enum_1.RecommendationModalTestIds.AcceptCarbs} accessibilityLabel="yesButtonModal" style={exports.stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
 					<react_native_1.Text style={exports.stylesModal.affirmativeCarbsText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
 				</react_native_1.TouchableOpacity>
-				<react_native_1.TouchableOpacity accessibilityLabel="noButtonModal" style={exports.stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
+				<react_native_1.TouchableOpacity testID={enum_1.RecommendationModalTestIds.DeclineCarbs} accessibilityLabel="noButtonModal" style={exports.stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
 					<react_native_1.Text style={exports.stylesModal.negativeCarbsText}>{i18nUtils_1.i18n._(macro_1.t `NO`)}</react_native_1.Text>
 				</react_native_1.TouchableOpacity>
 			</react_native_1.View>);
         };
-        this.recommendCarbohydrates = () => {
-            const { suggestedCarbohydrates } = this.props;
+        this.recommendCarbohydrates = (suggestedCarbohydrates) => {
+            const displayCarbs = Math.round(suggestedCarbohydrates);
             return (<React.Fragment>
 				<react_native_1.View style={exports.stylesModal.innerView}>
 					<react_native_1.View style={exports.stylesModal.recommendationRow}>
@@ -59,7 +60,7 @@ class RecommendationModal extends React.Component {
 					</react_native_1.View>
 					<react_native_1.View style={exports.stylesModal.suggestedContainer}>
 						<react_native_1.Text style={exports.stylesModal.textCenter}>
-							<react_native_1.Text style={exports.stylesModal.suggestedCarbs}>{`${Math.round(suggestedCarbohydrates)} `}</react_native_1.Text>
+							<react_native_1.Text style={exports.stylesModal.suggestedCarbs} testID={enum_1.RecommendationModalTestIds.SuggestedCarbs}>{`${displayCarbs} `}</react_native_1.Text>
 							<react_native_1.Text style={exports.stylesModal.carbohydrateText}>{i18nUtils_1.i18n._(macro_1.t `grams of carbohydrates`)}</react_native_1.Text>
 						</react_native_1.Text>
 					</react_native_1.View>
@@ -77,17 +78,17 @@ class RecommendationModal extends React.Component {
         };
         this.secondPage = () => {
             const { attentionMessage, suggestedCarbohydrates } = this.props;
-            const willRecommendCarbs = suggestedCarbohydrates && suggestedCarbohydrates > 0;
+            const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
             return (<React.Fragment>
 				<react_native_1.View style={exports.stylesModal.container}>
 					<react_native_1.View style={exports.stylesModal.titleContainer}>
 						<react_native_1.Text style={exports.stylesModal.textTittleMessage}>{i18nUtils_1.i18n._(macro_1.t `Attention`)}</react_native_1.Text>
 					</react_native_1.View>
 					<react_native_1.Text style={exports.stylesModal.textMessage}>{attentionMessage}</react_native_1.Text>
-					{willRecommendCarbs ? this.recommendCarbohydrates() : null}
+					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates) : null}
 				</react_native_1.View>
 				{willRecommendCarbs ? null : (<react_native_1.View style={exports.stylesModal.containerAcceptButton}>
-						<react_native_1.TouchableOpacity accessibilityLabel="okayButtonModal" style={exports.stylesModal.okButton} onPress={this.props.onClickOkButton}>
+						<react_native_1.TouchableOpacity testID={enum_1.RecommendationModalTestIds.OkButton} accessibilityLabel="okayButtonModal" style={exports.stylesModal.okButton} onPress={this.props.onClickOkButton}>
 							<react_native_1.Text style={exports.stylesModal.buttonText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
 						</react_native_1.TouchableOpacity>
 					</react_native_1.View>)}

package/src/components/RecommendationModal.tsx

@@ -3,15 +3,16 @@ import * as React from "react";
 import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import ReactNativeModal from "react-native-modal";
 import { i18n } from "../locale/i18nUtils";
+import { RecommendationModalTestIds } from "../types/enum";
 import { AttentionMessage } from "../utils/AttentionMessages";
 import { BORDER_COLOUR_TEAL } from "../utils/Constants";
 import LimitationMessage from "./LimitationMessage";
 
 interface IModalProps {
 	isVisible: boolean;
-	suggestedCarbohydrates?: number;
-	attentionMessage: AttentionMessage;
-	limitationMessage: AttentionMessage;
+	suggestedCarbohydrates: number | null;
+	attentionMessage: AttentionMessage | null;
+	limitationMessage: AttentionMessage | null;
 	onClickOkButton(): void;
 	onAcceptCarbohydrates(): void;
 	onDeclineCarbohydrates(): void;
@@ -26,15 +27,18 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 			firstPageVisible: !!this.props.limitationMessage,
 		};
 	}
+
 	public onPressNextButton = (): void => {
 		const { attentionMessage, suggestedCarbohydrates } = this.props;
 		const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
 		return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
 	};
+
 	public recommendationButtons = (): JSX.Element => {
 		return (
 			<View style={stylesModal.recommendationButtonsContainer}>
 				<TouchableOpacity
+					testID={RecommendationModalTestIds.AcceptCarbs}
 					accessibilityLabel="yesButtonModal"
 					style={stylesModal.affirmativeCarbsButton}
 					onPress={this.props.onAcceptCarbohydrates}
@@ -42,6 +46,7 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 					<Text style={stylesModal.affirmativeCarbsText}>{i18n._(t`OK`)}</Text>
 				</TouchableOpacity>
 				<TouchableOpacity
+					testID={RecommendationModalTestIds.DeclineCarbs}
 					accessibilityLabel="noButtonModal"
 					style={stylesModal.negativeCarbsButton}
 					onPress={this.props.onDeclineCarbohydrates}
@@ -52,8 +57,9 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 		);
 	};
 
-	public recommendCarbohydrates = (): JSX.Element => {
-		const { suggestedCarbohydrates } = this.props;
+	public recommendCarbohydrates = (suggestedCarbohydrates: number): JSX.Element => {
+		const displayCarbs = Math.round(suggestedCarbohydrates);
+
 		return (
 			<React.Fragment>
 				<View style={stylesModal.innerView}>
@@ -64,7 +70,10 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 					</View>
 					<View style={stylesModal.suggestedContainer}>
 						<Text style={stylesModal.textCenter}>
-							<Text style={stylesModal.suggestedCarbs}>{`${Math.round(suggestedCarbohydrates)} `}</Text>
+							<Text
+								style={stylesModal.suggestedCarbs}
+								testID={RecommendationModalTestIds.SuggestedCarbs}
+							>{`${displayCarbs} `}</Text>
 							<Text style={stylesModal.carbohydrateText}>{i18n._(t`grams of carbohydrates`)}</Text>
 						</Text>
 					</View>
@@ -84,7 +93,7 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 
 	public secondPage = (): JSX.Element => {
 		const { attentionMessage, suggestedCarbohydrates } = this.props;
-		const willRecommendCarbs = suggestedCarbohydrates && suggestedCarbohydrates > 0;
+		const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
 
 		return (
 			<React.Fragment>
@@ -93,11 +102,12 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 						<Text style={stylesModal.textTittleMessage}>{i18n._(t`Attention`)}</Text>
 					</View>
 					<Text style={stylesModal.textMessage}>{attentionMessage}</Text>
-					{willRecommendCarbs ? this.recommendCarbohydrates() : null}
+					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates!) : null}
 				</View>
 				{willRecommendCarbs ? null : (
 					<View style={stylesModal.containerAcceptButton}>
 						<TouchableOpacity
+							testID={RecommendationModalTestIds.OkButton}
 							accessibilityLabel="okayButtonModal"
 							style={stylesModal.okButton}
 							onPress={this.props.onClickOkButton}
@@ -109,6 +119,7 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 			</React.Fragment>
 		);
 	};
+
 	public firstPage = (): JSX.Element => {
 		return (
 			<LimitationMessage

package/src/components/RecommendedCarbs.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { RecommendedCarbsTestIds } from "../types/enum";
 interface ICalculationRow {
     label: string;
     value: string;
@@ -11,16 +12,16 @@ interface IProps {
     changedRecommendedCarbs(value: number): void;
 }
 interface IState {
-    partialInput: string;
+    partialInput?: string;
 }
 export default class RecommendedCarbs extends React.Component<IProps, IState> {
     state: IState;
-    callbackInput: () => void;
+    callbackInput?: () => void;
     showTextInput: () => void;
     handlePartialInput: (partialInput: string) => void;
     handleChangedCarbs: (carbs: number) => void;
     renderRecommendedCarbs: () => JSX.Element;
-    renderRow: (row: ICalculationRow) => JSX.Element;
+    renderRow: (row: ICalculationRow, testID: RecommendedCarbsTestIds) => JSX.Element;
     render(): JSX.Element;
 }
 export {};