@hedia/recommendation-screen 2.1.34-alpha.9 → 2.1.35-alpha.0

package/{src → dist/src}/RecommendationScreen.d.ts

@@ -141,7 +141,7 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
      * A reference to the screens scrollview allowing us to programmatically scroll the screen in the handleNoRecentInsulin() method.
      * The member is initiated without a value but will be set as soon as the component is being rendered.
      */
-    private scrollViewRef?;
+    private scrollView?;
     /**
      * A reference to the eventSubscription that'll be returned by AppState.addEventListener().
      * It'll allow us to later remove the subscription.
@@ -284,8 +284,8 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
      *
      * Steps:
      * 1. Set the isRecommendationDisplayed state variable to be true.
-     * 2. As a callback to the setState() method, define a new anonymous function that calls  the scrollToEnd() method
-     * 	  of the scrollView member, with the animated argument set to true.
+     * 2. As a callback to the setState() method, define a new anonymous function that calls setTimeout() with a duration of 0 milliseconds.
+     *    When the time expires, call the scrollToEnd() method of the scrollView member, with the animated argument set to true.
      *    This ensures that the scroll event happens after all other events that get queued to happen at the same time,
      *    so all relevant elements are visible on the screen and the scroll happens reliably.
      */

package/{src → dist/src}/RecommendationScreen.js

@@ -191,15 +191,15 @@ export default class RecommendationScreen extends React.Component {
          *
          * Steps:
          * 1. Set the isRecommendationDisplayed state variable to be true.
-         * 2. As a callback to the setState() method, define a new anonymous function that calls  the scrollToEnd() method
-         * 	  of the scrollView member, with the animated argument set to true.
+         * 2. As a callback to the setState() method, define a new anonymous function that calls setTimeout() with a duration of 0 milliseconds.
+         *    When the time expires, call the scrollToEnd() method of the scrollView member, with the animated argument set to true.
          *    This ensures that the scroll event happens after all other events that get queued to happen at the same time,
          *    so all relevant elements are visible on the screen and the scroll happens reliably.
          */
         this.handleNoRecentInsulin = () => {
             this.setState({ isRecommendationDisplayed: true }, () => {
                 setTimeout(() => {
-                    this.scrollViewRef?.scrollToEnd({ animated: false });
+                    this.scrollView?.scrollToEnd({ animated: true });
                 }, 0);
             });
         };
@@ -311,7 +311,7 @@ export default class RecommendationScreen extends React.Component {
          * 	- Set the recommendationDate argument to the recommendationDate member variable.
          */
         this.handleTransfer = () => {
-            const { enteredCarbs, enteredInsulin, insulinRecommendation, remeasureTime, showExitModal, selectedMood, } = this.state;
+            const { enteredCarbs, enteredInsulin, insulinRecommendation, remeasureTime, showExitModal, selectedMood } = this.state;
             const carbs = { suggested: this.suggestedCarbs, entered: enteredCarbs };
             const insulin = { suggested: insulinRecommendation, entered: enteredInsulin };
             showExitModal ? this.hideExitModal() : this.hideTimeoutModal();
@@ -368,7 +368,7 @@ export default class RecommendationScreen extends React.Component {
             this.recommendationDate = new Date(global.Date.now());
             changeLanguage(props.language);
             const { recentBoluses } = props.calculatorParams;
-            const { bolus, carbRecommendation, activityReduction, wasLimited, activeInsulin, } = Calculator.calculateRecommendation(props.calculatorParams);
+            const { bolus, carbRecommendation, activityReduction, wasLimited, activeInsulin } = Calculator.calculateRecommendation(props.calculatorParams);
             this.suggestedCarbs = carbRecommendation;
             this.state = {
                 remeasureTime: this.getBGLevelRemeasurementReminder(),
@@ -439,7 +439,7 @@ export default class RecommendationScreen extends React.Component {
         return (<I18nProvider language={this.props.language} i18n={i18n}>
 				<ScrollView testID={RecommendationScreenTestIds.RecommendationScrollView} style={containerStyles.container} ref={(view) => {
             if (view !== null) {
-                this.scrollViewRef = view;
+                this.scrollView = view;
             }
         }}>
 					<Header exitCallback={this.onExit}/>

package/{src → dist/src}/components/Header.js

@@ -15,14 +15,14 @@ export default class Header extends React.Component {
 					<View style={headerStyles.margin}>
 						<View style={headerStyles.exitButtonContainer}>
 							<View style={headerStyles.exitButton}>
-								<TouchableOpacity testID={Testing.Id.HeaderTestIds.ExitCalculation} accessibilityLabel="exitButton" style={headerStyles.exitButton} onPress={this.props.exitCallback}>
+								<TouchableOpacity testID={Testing.Id.HeaderTestIds.ExitCalculation} style={headerStyles.exitButton} onPress={this.props.exitCallback}>
 									<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={headerStyles.iconStyle}/>
 								</TouchableOpacity>
 								<View style={headerStyles.headerFiller}/>
 							</View>
 						</View>
 						<View style={headerStyles.headerTextContainer}>
-							<Text style={headerStyles.headerText} testID="headerText">
+							<Text style={headerStyles.headerText} testID={Testing.Id.HeaderTestIds.HeaderText}>
 								{i18n._(t `INSULIN${`\n`}RECOMMENDATION`)}
 							</Text>
 						</View>

package/{src → dist/src}/components/InvisibleNumberInput.js

@@ -100,7 +100,7 @@ export default class InvisibleNumberInput extends React.Component {
      */
     render() {
         const { testID } = this.props;
-        return (<TextInput testID={testID} accessibilityLabel={`InvisibleNumberInput`} value={`${this.state.value}`} ref={(textInput) => {
+        return (<TextInput testID={testID} value={`${this.state.value}`} ref={(textInput) => {
             if (textInput !== null) {
                 this.textInput = textInput;
             }

package/{src → dist/src}/components/LimitationMessage.js

@@ -21,7 +21,7 @@ export default class LimitationMessage extends React.Component {
 					<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
 				</View>
 				<View style={stylesModal.containerAcceptButton}>
-					<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} accessibilityLabel="nextButtonModal" style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
+					<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
 						<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
 					</TouchableOpacity>
 				</View>

package/{src → dist/src}/components/RecommendationModal.js

@@ -44,10 +44,10 @@ export default class RecommendationModal extends React.Component {
          */
         this.recommendationButtons = () => {
             return (<View style={stylesModal.recommendationButtonsContainer}>
-				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} accessibilityLabel="yesButtonModal" style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
+				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
 					<Text style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</Text>
 				</TouchableOpacity>
-				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} accessibilityLabel="noButtonModal" style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
+				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
 					<Text style={stylesModal.negativeCarbsText}>{i18n._(t `NO`)}</Text>
 				</TouchableOpacity>
 			</View>);
@@ -99,7 +99,7 @@ export default class RecommendationModal extends React.Component {
 					{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}>
+						<TouchableOpacity testID={RecommendationModalTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
 							<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
 						</TouchableOpacity>
 					</View>)}

package/{src → dist/src}/components/RecommendedCarbs.js

@@ -88,7 +88,7 @@ export default class RecommendedCarbs extends React.Component {
 				<LineSeparator color={BORDER_COLOUR_GREY}/>
 				<View style={calculationStyles.borderContainer}>
 					<View style={calculationStyles.recommendedContainer}>
-						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} accessibilityLabel="removeRecommendedCarbs" style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
+						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
 							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={calculationStyles.removeRecommendedIcon}/>
 						</TouchableOpacity>
 						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</Text>
@@ -99,7 +99,7 @@ export default class RecommendedCarbs extends React.Component {
 						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Additional`)}</Text>
 					</View>
 					<View style={calculationStyles.valueUnitContainer}>
-						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} accessibilityLabel="editRecommendedCarbsButton" onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
+						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
 							<View style={calculationStyles.valueContainer}>
 								<Text testID={RecommendedCarbsTestIds.RecommendedCarbs} style={[calculationStyles.value, { color: BORDER_COLOUR_TEAL }]}>
 									{shownCarbs}

package/{src → dist/src}/components/RecommendedInsulin.js

@@ -86,7 +86,7 @@ export default class RecommendedInsulin extends React.Component {
             const paddingBottom = Platform.OS === `ios` ? `3%` : `1%`;
             const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
             return (<React.Fragment>
-				<TouchableOpacity accessibilityLabel="editRecommendedInsulin" testID={RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
+				<TouchableOpacity testID={RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
 					<LinearGradient style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
 						<View style={recommendedInsulinStyles.recommendedTextContainer}>
 							<Text style={recommendedInsulinStyles.recommendedText}>
@@ -100,7 +100,7 @@ export default class RecommendedInsulin extends React.Component {
 								</Text>
 								<Text style={recommendedInsulinStyles.units}>{i18n._(t `Units`)}</Text>
 							</View>
-							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`}/>
+							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`} testID={RecommendedInsulinTestIds.EditRecommendedInsulinIcon}/>
 						</View>
 					</LinearGradient>
 				</TouchableOpacity>

package/{src → dist/src}/components/Remeasure.js

@@ -65,7 +65,9 @@ export default class Remeasure extends React.Component {
 					</View>
 					<View style={remeasureStyles.valueUnitContainer}>
 						<View style={valueContainer}>
-							<Text style={remeasureStyles.value}>{measure ? limited : i18n._(t `OFF`)}</Text>
+							<Text style={remeasureStyles.value} testID={Testing.Id.RemeasureTestIds.RemeasureHours}>
+								{measure ? limited : i18n._(t `OFF`)}
+							</Text>
 						</View>
 						{measure ? (<View style={remeasureStyles.unitContainer}>
 								<Text style={remeasureStyles.units}>{i18n._(t `hours`)}</Text>
@@ -76,7 +78,7 @@ export default class Remeasure extends React.Component {
             if (slider !== null) {
                 this.slider = slider;
             }
-        }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} accessibilityLabel="remeasureSlider" maximumTrackTintColor={BORDER_COLOUR_GREY} minimumTrackTintColor={BORDER_COLOUR_TEAL} thumbTintColor={BORDER_COLOUR_TEAL} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
+        }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} maximumTrackTintColor={BORDER_COLOUR_GREY} minimumTrackTintColor={BORDER_COLOUR_TEAL} thumbTintColor={BORDER_COLOUR_TEAL} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
 			</View>);
     }
 }

package/{src → dist/src}/components/TransferToLogbook.js

@@ -39,7 +39,7 @@ export default class TransferToLogbook extends React.Component {
         if (!this.props.visible) {
             return <View style={addToLogbookStyles.marginContainer}/>;
         }
-        return (<TouchableOpacity testID={Testing.Id.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container} accessibilityLabel="transferToLogbook">
+        return (<TouchableOpacity testID={Testing.Id.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container}>
 				{!this.state.pressed ? (<View style={addToLogbookStyles.textContainer}>
 						<Text style={addToLogbookStyles.transferText}>{i18n._(t `Transfer to logbook`)}</Text>
 					</View>) : (<View style={addToLogbookStyles.textContainerActive}>

package/{src → dist/src}/components/TwoOptionModal.js

@@ -14,7 +14,7 @@ export default class TwoOptionModal extends React.Component {
 				<StatusBar backgroundColor={`rgba(0, 0, 0, 1)`}/>
 				<View style={modalStyle.modalContainer}>
 					{isCancelable ? (<TouchableOpacity onPress={this.props.onClose} testID={TwoOptionModalTestIds.ExitButton} style={modalStyle.iconWrapper}>
-							<Icon accessibilityLabel="ModalExitIcon" iconIdentifier={`Ionicons/ios-close-circle-outline`} style={modalStyle.icon}/>
+							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={modalStyle.icon}/>
 						</TouchableOpacity>) : null}
 
 					<View style={isCancelable ? modalStyle.textContainer : modalStyle.textContainerNotCancelable}>
@@ -24,12 +24,12 @@ export default class TwoOptionModal extends React.Component {
 						<Text style={modalStyle.message}>{this.props.message}</Text>
 					</View>
 					<View style={rowAsButtonLayout ? modalStyle.buttonContainerRow : modalStyle.buttonContainerColumn}>
-						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} accessibilityLabel="firstOptionButton" onPress={this.props.firstOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.firstButtonColumn}>
+						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} onPress={this.props.firstOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.firstButtonColumn}>
 							<Text style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textFirstButtonColumn}>
 								{this.props.textFirstOption}
 							</Text>
 						</TouchableOpacity>
-						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} accessibilityLabel="secondOptionButton" onPress={this.props.secondOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.secondButtonColumn}>
+						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} onPress={this.props.secondOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.secondButtonColumn}>
 							<Text style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textSecondButtonColumn}>
 								{this.props.textSecondOption}
 							</Text>

package/{src → dist/src}/components/activity/Activity.js

@@ -33,7 +33,9 @@ export default class Activity extends React.Component {
 							</View>
 							<View style={infoStyles.valueUnitContainer}>
 								<View style={infoStyles.valueContainer}>
-									<Text style={infoStyles.value}>{activity.activityDuration}</Text>
+									<Text style={infoStyles.value} testID={Testing.Id.ActivityTestIds.ActivityDuration}>
+										{activity.activityDuration}
+									</Text>
 								</View>
 								<View style={infoStyles.unitContainer}>
 									<Text style={infoStyles.units}>{i18n._(t `min`)}</Text>

package/{src → dist/src}/components/activity/ActivityIcon.d.ts

@@ -13,9 +13,9 @@ export default class ActivityIcon extends React.Component<IActivityDisplayProps>
     /**
      * Steps:
      * 1. Unpack activityType and activityTitle from props.
-     * 2. Create an accessibility label string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
+     * 2. Create a testID string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
      * @returns A JSX element including the following:
-     * 1. An image component with the generated accessibility label displaying the icon from getActivityIcon().
+     * 1. An image component with the generated testID displaying the icon from getActivityIcon().
      * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
      */
     render(): JSX.Element | null;

package/{src → dist/src}/components/activity/ActivityIcon.js

@@ -26,16 +26,16 @@ export default class ActivityIcon extends React.Component {
     /**
      * Steps:
      * 1. Unpack activityType and activityTitle from props.
-     * 2. Create an accessibility label string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
+     * 2. Create a testID string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
      * @returns A JSX element including the following:
-     * 1. An image component with the generated accessibility label displaying the icon from getActivityIcon().
+     * 1. An image component with the generated testID displaying the icon from getActivityIcon().
      * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
      */
     render() {
         const { activityType, activityTitle } = this.props;
-        const label = `${Activity.Enums.ActivityEnum[activityType ?? Other]}_activity`;
+        const testID = `${Activity.Enums.ActivityEnum[activityType ?? Other]}_activity`;
         return (<View style={activityIconStyles.container}>
-				<Image style={activityIconStyles.activityIcon} source={this.getActivityIcon()} accessibilityLabel={label}/>
+				<Image style={activityIconStyles.activityIcon} source={this.getActivityIcon()} testID={testID}/>
 				<Text style={activityIconStyles.activityTitle}>{activityTitle || i18n._(t `Untitled Activity`)}</Text>
 			</View>);
     }

package/{src → dist/src}/components/activity/ActivityIntensity.js

@@ -19,7 +19,9 @@ export default class ActivityIntensity extends React.Component {
             return (<View style={[infoStyles.margin, activityIntensityStyles.row]}>
 				<View style={activityIntensityStyles.intensityContainer}>
 					<View style={[activityIntensityStyles.intensityTextContainer, style]}>
-						<Text style={activityIntensityStyles.bold}>{ActivityIntensityTranslations[intensity]()}</Text>
+						<Text style={activityIntensityStyles.bold} testID={intensity}>
+							{ActivityIntensityTranslations[intensity]()}
+						</Text>
 					</View>
 				</View>
 				<View style={activityIntensityStyles.intensityContainerOffset}/>

package/{src → dist/src}/components/mood/MoodIcon.js

@@ -49,8 +49,8 @@ export default class MoodIcon extends React.Component {
     /** JSX element to display the mood icon retrieved using the getMoodIcon() method. */
     render() {
         const { mood, active } = this.props;
-        const label = `${MoodEnum[mood]}_${active}`;
-        return (<TouchableOpacity style={moodIconStyles.container} onPress={this.handleOnPress} accessibilityLabel={label}>
+        const testID = `${MoodEnum[mood]}-${active}`;
+        return (<TouchableOpacity style={moodIconStyles.container} onPress={this.handleOnPress} testID={testID}>
 				<Image style={moodIconStyles.icon} source={this.getMoodIcon()}/>
 			</TouchableOpacity>);
     }