@magmamath/students-features 1.3.16 → 1.3.17

package/src/features/chatbot/components/ChatMessage/MessageLoader.tsx

@@ -1,7 +1,8 @@
-import React, { PropsWithChildren } from 'react'
+import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { BORDER_RADIUS, COLORS, Loader, LoaderColor } from '@magmamath/react-native-ui'
 import { SPACING } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type MessageLoaderProps = {
   isLoading?: boolean
@@ -11,7 +12,7 @@ export const MessageLoader = ({ isLoading }: MessageLoaderProps) => {
   if (!isLoading) return null
 
   return (
-    <View style={styles.loader}>
+    <View style={styles.loader} testID={TEST_IDS.CHAT_MESSAGE_LOADER}>
       <Loader color={LoaderColor.GRAY} />
     </View>
   )

package/src/features/chatbot/components/ChatMessage/MessageTextToSpeech.tsx

@@ -6,6 +6,7 @@ import { ConversationMessage } from '../../types/units.types'
 import { MessageVariant } from '../../types/model.types'
 import { ColorScheme } from '../../types/style.types'
 import { MESSAGE_COLORS_MAP } from '../../constants'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type MessageTextToSpeechProps = {
   state: T2SState
@@ -34,6 +35,7 @@ export const MessageTextToSpeech = ({
       colorScheme={MESSAGE_COLORS_MAP[colorScheme][variant].icon}
       state={state}
       onPress={play}
+      testID={TEST_IDS.CHAT_TTS_BUTTON}
     />
   )
 }

package/src/features/chatbot/components/ChatMessage/ReceivedMessage.tsx

@@ -7,6 +7,7 @@ import { ColorScheme } from '../../types/style.types'
 import { MessageVariant } from '../../types/model.types'
 import { VariantProps } from './ChatMessage'
 import { MessageContent } from './MessageContent'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const ReceivedMessage = ({
   message,
@@ -21,7 +22,7 @@ export const ReceivedMessage = ({
   const text = isTranslated ? message.translatedMessage : message.message
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.CHAT_MESSAGE_RECEIVED}>
       <View style={[styles.iconWrapper, { opacity: withIcon ? 1 : 0 }]}>
         <ChatbotIcon width={CHATBOT_ICON_SIZE.width} height={CHATBOT_ICON_SIZE.height} />
       </View>

package/src/features/chatbot/components/ChatMessage/SentMessage.tsx

@@ -7,6 +7,7 @@ import { VariantProps } from './ChatMessage'
 import { MESSAGE_COLORS_MAP } from '../../constants'
 import { ColorScheme } from '../../types/style.types'
 import { MessageVariant } from '../../types/model.types'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const SentMessage = React.memo(
   ({ message, isTranslated, colorScheme = ColorScheme.Blue }: VariantProps) => {
@@ -14,6 +15,7 @@ export const SentMessage = React.memo(
 
     return (
       <View
+        testID={TEST_IDS.CHAT_MESSAGE_SENT}
         style={[
           styles.container,
           { backgroundColor: MESSAGE_COLORS_MAP[colorScheme][MessageVariant.SENT].background },

package/src/features/chatbot/errorSpotting/ErrorSpottingButton.tsx

@@ -5,6 +5,7 @@ import { useStoreMap, useUnit } from 'effector-react'
 import { StyleSheet } from 'react-native'
 import { HighlighterIcon } from '../../../shared/icons/HighlighterIcon'
 import { ConversationMessage } from '../types/units.types'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 import { useText } from '../../../i18n/i18n'
 
 type ErrorSpottingButtonProps = {
@@ -32,6 +33,7 @@ export const ErrorSpottingButton = ({ contextMessage }: ErrorSpottingButtonProps
       variant={'secondary'}
       colorScheme={'blue'}
       size={'small'}
+      testID={TEST_IDS.CHAT_ERROR_SPOTTING_BUTTON}
       onPress={() => {
         model.errorSpotting.errorSpottingPressed({ message: contextMessage })
       }}

package/src/features/endOfAssignment/components/CheatDetected/CheatDetected.tsx

@@ -13,6 +13,7 @@ import {
 import { EOAModalContentProps } from '../../types'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const CheatDetected = ({ textContent, model }: EOAModalContentProps) => {
   useKeyBoard({
@@ -24,7 +25,7 @@ export const CheatDetected = ({ textContent, model }: EOAModalContentProps) => {
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.EOA_CHEAT_DETECTED}>
       <Typography variant="h2" style={styles.title}>
         {textContent.title}
       </Typography>
@@ -39,6 +40,7 @@ export const CheatDetected = ({ textContent, model }: EOAModalContentProps) => {
         size={ButtonSize.LARGE}
         style={{ text: styles.buttonText }}
         onPress={model.hidePopUpAndLeave}
+        testID={TEST_IDS.EOA_LEAVE_BUTTON}
       >
         {textContent.leftButtonText}
       </Button>

package/src/features/endOfAssignment/components/CorrectAnswer/CorrectAnswer.tsx

@@ -12,6 +12,7 @@ import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
 import { getEoaButtonColor } from '../../helpers'
 import { AssessmentScoreCard } from '../AssessmentScoreCard/AssessmentScoreCard'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -59,6 +60,7 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
 
   return (
     <View
+      testID={TEST_IDS.EOA_WITH_CORRECT_ANSWER}
       style={[
         styles.wrapper,
         modalVariant !== EOAModalVariant.HAS_GOOD_DRAWING && { alignItems: 'center' },

package/src/features/endOfAssignment/components/ExamLeave/ExamLeave.tsx

@@ -13,6 +13,7 @@ import {
 import { EOAModalContentProps } from '../../types'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const ExamLeave = ({ textContent, model }: EOAModalContentProps) => {
   const handleDismiss = () => model.hidePopUp()
@@ -26,7 +27,7 @@ export const ExamLeave = ({ textContent, model }: EOAModalContentProps) => {
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.EOA_EXAM_LEAVE}>
       <Typography variant="h1" style={styles.description}>
         {textContent.description}
       </Typography>
@@ -37,6 +38,7 @@ export const ExamLeave = ({ textContent, model }: EOAModalContentProps) => {
           size={ButtonSize.LARGE}
           style={{ text: styles.buttonText }}
           onPress={handleDismiss}
+          testID={TEST_IDS.EOA_EXAM_STAY_BUTTON}
         >
           {textContent.leftButtonText}
         </Button>
@@ -47,6 +49,7 @@ export const ExamLeave = ({ textContent, model }: EOAModalContentProps) => {
           size={ButtonSize.LARGE}
           style={{ text: styles.buttonText }}
           onPress={model.hidePopUpAndLeave}
+          testID={TEST_IDS.EOA_LEAVE_BUTTON}
         >
           {textContent.rightButtonText}
         </Button>

package/src/features/endOfAssignment/components/ExamPaused/ExamPaused.tsx

@@ -15,6 +15,7 @@ import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
 import { getEoaButtonColor } from '../../helpers'
 import { useUnit } from 'effector-react'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -28,7 +29,7 @@ export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.EOA_EXAM_PAUSED}>
       <Typography variant="h2" style={styles.title}>
         {textContent.title}
       </Typography>
@@ -43,6 +44,7 @@ export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
         size={ButtonSize.LARGE}
         style={{ text: styles.buttonText }}
         onPress={model.hidePopUpAndLeave}
+        testID={TEST_IDS.EOA_LEAVE_BUTTON}
       >
         {textContent.leftButtonText}
       </Button>

package/src/features/endOfAssignment/components/ExamSubmit/ExamSubmit.tsx

@@ -18,6 +18,7 @@ import { PracticeButton } from '../../ui/PracticeButton'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
 import { getEoaButtonColor } from '../../helpers'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -41,7 +42,7 @@ export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalCont
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.EOA_EXAM}>
       <View style={styles.contentBackground}>
         {IS_MOBILE ? (
           <Image source={require('./blurred-card.png')} />
@@ -63,6 +64,7 @@ export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalCont
           colorScheme={getEoaButtonColor(popUpData)}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={model.hidePopUpAndLeave}
+          testID={TEST_IDS.EOA_LEAVE_BUTTON}
         >
           {textContent.leftButtonText ?? ''}
         </Button>

package/src/features/endOfAssignment/components/Modal/Modal.tsx

@@ -23,6 +23,7 @@ import {
 
 import { ModalModel } from './model'
 import { ModalBackground } from './ModalBackground'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 const stopPropagation = {
   onTouchStart: (event: GestureResponderEvent) => {
@@ -71,7 +72,10 @@ export const Modal = ({
   if (!isVisible) return null
   return (
     <TouchableWithoutFeedback onPress={() => isDismissable && onClose?.()}>
-      <Animated.View style={[styles.overlay, style?.overlay, modalModel.animatedStyle]}>
+      <Animated.View
+        style={[styles.overlay, style?.overlay, modalModel.animatedStyle]}
+        testID={TEST_IDS.EOA_MODAL}
+      >
         <TouchableWithoutFeedback {...stopPropagation}>
           <View style={[styles.container, style?.container]}>
             {withBackground && <View style={styles.backgroundWrapper}>{<ModalBackground />}</View>}
@@ -81,6 +85,7 @@ export const Modal = ({
                   variant={ButtonVariant.TERTIARY}
                   icon={<CrossIcon size={18} color={COLORS.NEUTRAL_7} />}
                   onPress={onClose}
+                  testID={TEST_IDS.EOA_MODAL_CLOSE_BUTTON}
                 />
               </View>
             )}

package/src/features/endOfAssignment/components/NoAnswer/NoAnswer.tsx

@@ -18,6 +18,7 @@ import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
 import { getEoaButtonColor } from '../../helpers'
 import { AssessmentScoreCard } from '../AssessmentScoreCard/AssessmentScoreCard'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -30,6 +31,7 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
         text: textContent.leftButtonText ?? '',
         colorScheme: getEoaButtonColor(popUpData),
         onPress: () => model.hidePopUpAndLeave(),
+        testID: TEST_IDS.EOA_LEAVE_BUTTON as string | undefined,
       },
     ]
 
@@ -41,6 +43,7 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
           model.goToFirstProblemPressed()
           model.hidePopUp()
         },
+        testID: TEST_IDS.EOA_GO_TO_PROBLEM_ONE_BUTTON,
       })
       return buttons
     }
@@ -55,6 +58,7 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
           onPracticePress?.()
           model.hidePopUp()
         },
+        testID: TEST_IDS.EOA_PRACTICE_BUTTON,
       })
     }
 
@@ -73,7 +77,7 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.EOA_WITH_NO_CORRECT_ANSWER}>
       <View style={styles.textContainer}>
         {!!textContent.title && (
           <Typography variant="h2" style={styles.title}>
@@ -108,6 +112,7 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
             colorScheme={button.colorScheme}
             style={{ text: { textTransform: 'uppercase' } }}
             onPress={button.onPress}
+            testID={button.testID}
           >
             {button.text}
           </Button>

package/src/features/endOfAssignment/ui/PracticeButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Button, ButtonColor } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type PracticeButtonProps = {
   onPress: () => void
@@ -20,6 +21,7 @@ export const PracticeButton = ({
       size="large"
       style={{ text: { textTransform: 'uppercase' } }}
       onPress={onPress}
+      testID={TEST_IDS.EOA_PRACTICE_BUTTON}
     >
       {text}
     </Button>

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -11,6 +11,7 @@ import Animated, {
 import { ButtonVariant, SPACING, Button, ButtonSize, ButtonColor } from '@magmamath/react-native-ui'
 
 import { PracticeButton } from './PracticeButton'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type PracticeButtonGroupProps = {
   textContent: { leftButtonText?: string; rightButtonText?: string }
@@ -50,6 +51,7 @@ export const PracticeButtonGroup = ({
           colorScheme={buttonColor}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={onLeftButtonPress}
+          testID={TEST_IDS.EOA_LEAVE_BUTTON}
         >
           {textContent.leftButtonText}
         </Button>

package/src/features/exampleSolution/components/ExampleSolutionModalContent.tsx

@@ -5,6 +5,7 @@ import { ExampleSolutionModalParams } from '../types'
 import { QuestionSection } from './QuestionSection'
 import { SolutionSection } from './SolutionSection'
 import { useExampleSolution } from '../hooks/useExampleSolution'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 import { useText } from '../../../i18n/i18n'
 
 type ExampleSolutionModalContentProps = {
@@ -21,6 +22,7 @@ export const ExampleSolutionModalContent = ({
 
   return (
     <View
+      testID={TEST_IDS.EXAMPLE_SOLUTION_MODAL}
       style={[
         styles.container,
         IS_WEB ? { maxHeight: CONTAINER_HEIGHT } : { height: CONTAINER_HEIGHT },

package/src/features/exampleSolution/components/QuestionSection.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { COLORS, Loader, LoaderColor, SPACING } from '@magmamath/react-native-ui'
 import Animated, { FadeOut } from 'react-native-reanimated'
 import { ExampleSolutionStatuses } from '../constants'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type QuestionSectionProps = {
   question?: string
@@ -16,7 +17,7 @@ export const QuestionSection = ({
   renderKatexComponent,
 }: QuestionSectionProps) => {
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.EXAMPLE_SOLUTION_QUESTION_SECTION}>
       {question && <View style={styles.katexContainer}>{renderKatexComponent(question)}</View>}
       {status === ExampleSolutionStatuses.LOADING && (
         <Animated.View exiting={FadeOut} style={styles.loaderContainer}>

package/src/features/exampleSolution/components/SolutionSection.tsx

@@ -11,6 +11,7 @@ import { COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
 import Animated, { FadeIn } from 'react-native-reanimated'
 import { ExampleSolutionStatuses } from '../constants'
 import gridImage from '../assets/grid.webp'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type SolutionSectionProps = {
   answer?: string
@@ -34,7 +35,10 @@ export const SolutionSection = ({ answer, status }: SolutionSectionProps) => {
     (status === ExampleSolutionStatuses.DONE_DATA || status === ExampleSolutionStatuses.CACHE)
 
   return (
-    <View style={[styles.container, IS_WEB && { maxHeight: height - CONTAINER_HEIGHT_OFFSET }]}>
+    <View
+      style={[styles.container, IS_WEB && { maxHeight: height - CONTAINER_HEIGHT_OFFSET }]}
+      testID={TEST_IDS.EXAMPLE_SOLUTION_SOLUTION_SECTION}
+    >
       <ScrollView
         style={styles.solutionScroll}
         contentContainerStyle={styles.solutionScrollContent}

package/src/features/feedback/components/EmptyComment.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
 import { BUENOS_AIRES_FONT } from '../constants'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 import { useText } from '../../../i18n/i18n'
 
 export const EmptyComment = () => {
   const t = useText()
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.NO_COMMENTS_PLACEHOLDER}>
       <Text style={styles.text}>{t('teacherFeedback.noComments')}</Text>
     </View>
   )

package/src/features/feedback/components/ListCardCommentsCount.tsx

@@ -3,6 +3,7 @@ import { Text, View, StyleSheet } from 'react-native'
 import { MessageBubbleIcon } from '../../../shared/icons/MessageBubbleIcon'
 import { COLORS } from '@magmamath/react-native-ui'
 import { BUENOS_AIRES_FONT } from '../constants'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type ListCardCommentsCountProps = {
   count: number
@@ -10,7 +11,7 @@ type ListCardCommentsCountProps = {
 
 export const ListCardCommentsCount = ({ count }: ListCardCommentsCountProps) => {
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.EXERCISE_CARD_COMMENTS_COUNT}>
       <MessageBubbleIcon size={23} color={COLORS.NEUTRAL_7} />
       <Text style={styles.text}>{count}</Text>
     </View>

package/src/features/feedback/components/TeacherFeedbackButton.tsx

@@ -5,6 +5,7 @@ import { UnreadMessagesBadge } from './UnreadMessagesBadge'
 import { MessageBubbleIcon } from '../../../shared/icons/MessageBubbleIcon'
 import { XCloseIcon } from '../../../shared/icons/XCloseIcon'
 import { FeedbackButtonSize, TEACHER_FEEDBACK_BUTTON_ID } from '../constants'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 const ICON_SIZES = {
   [FeedbackButtonSize.LARGE]: 37,
@@ -36,6 +37,7 @@ export const TeacherFeedbackButton = ({
     return (
       <Button
         id={TEACHER_FEEDBACK_BUTTON_ID}
+        testID={TEST_IDS.TEACHER_COMMENTS_BUTTON}
         onPress={onPress}
         size="large"
         variant="primary"
@@ -54,6 +56,7 @@ export const TeacherFeedbackButton = ({
   return (
     <Button
       id={TEACHER_FEEDBACK_BUTTON_ID}
+      testID={TEST_IDS.TEACHER_COMMENTS_BUTTON}
       onPress={onPress}
       size="large"
       variant="primary"

package/src/features/feedback/components/TeacherFeedbackComments/TeacherComment.tsx

@@ -4,6 +4,7 @@ import { COLORS } from '@magmamath/react-native-ui'
 import { BUENOS_AIRES_FONT } from '../../constants'
 import { getRelativeTimeText } from '../../../../lib/helpers/helpers'
 import { TeacherComment as TeacherCommentEntity } from '../../types'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type TeacherCommentProps = {
   comment: TeacherCommentEntity
@@ -12,7 +13,7 @@ type TeacherCommentProps = {
 
 export const TeacherComment = ({ comment, style }: TeacherCommentProps) => {
   return (
-    <View style={style}>
+    <View style={style} testID={TEST_IDS.TEACHER_COMMENT}>
       <View style={styles.authorInfo}>
         <Text style={styles.teacherName} numberOfLines={1}>
           {comment.teacherName}

package/src/features/feedback/components/UnreadMessagesBadge.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Text, View, StyleSheet, Platform, StyleProp, ViewStyle, TextStyle } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type UnreadMessagesBadgeProps = {
   badgeContent?: number
@@ -17,6 +18,7 @@ export const UnreadMessagesBadge = ({
 }: UnreadMessagesBadgeProps) => {
   return (
     <View
+      testID={TEST_IDS.UNREAD_COMMENTS_BADGE}
       style={[
         styles.container,
         style,

package/src/features/formulaSheet/components/FormulaSheet.tsx

@@ -13,6 +13,7 @@ import {
 } from '@magmamath/react-native-ui'
 import { FormulaSheetModel } from '../model/model'
 import { FormulaSheetModal } from './FormulaSheetModal'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type FormulaSheetProps = {
   model: FormulaSheetModel
@@ -56,6 +57,7 @@ export const FormulaSheet = forwardRef<ButtonRef | null, FormulaSheetProps>(
       <>
         <Button
           ref={ref}
+          testID={TEST_IDS.FORMULA_SHEET_BUTTON}
           size={buttonSize}
           variant={ButtonVariant.SECONDARY}
           colorScheme={buttonColor}

package/src/features/formulaSheet/components/FormulaSheetModal.tsx

@@ -10,6 +10,7 @@ import {
   LoaderType,
   SPACING,
 } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type FormulaSheetModalProps = {
   isLoading: boolean
@@ -39,7 +40,7 @@ export const FormulaSheetModal = ({
       <TouchableWithoutFeedback onPress={onClose}>
         <View style={styles.container}>
           <TouchableWithoutFeedback onPress={(event) => event.stopPropagation()}>
-            <View style={styles.content}>
+            <View testID={TEST_IDS.FORMULA_SHEET_MODAL} style={styles.content}>
               {isLoading ? (
                 <Loader type={LoaderType.PRIMARY} color={loaderColor} size={LoaderSize.LARGE} />
               ) : (

package/src/features/keyboard/components/BasicLayout/BasicLayout.tsx

@@ -5,6 +5,7 @@ import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 import { getMainKeyboardGroup } from '../../helpers'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const BasicLayout = ({ keys, ...props }: KeyboardLayoutProps & PropsWithChildren) => {
   const keysByLocale = getMainKeyboardGroup(keys, KeyboardType.Basic)
@@ -18,7 +19,7 @@ export const BasicLayout = ({ keys, ...props }: KeyboardLayoutProps & PropsWithC
   }
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.KEYBOARD_BASIC_LAYOUT}>
       <KeysList keys={keysToShow} numOfRows={2} {...props} />
       {props.children || null}
     </View>

package/src/features/keyboard/components/BasicLayout/CurrencyBasicLayout.tsx

@@ -1,15 +1,19 @@
 import React from 'react'
+import { View } from 'react-native'
 import { KeysList } from '../KeysList/KeysList'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { getMainKeyboardGroup } from '../../helpers'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const CurrencyBasicLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const keysGroup = getMainKeyboardGroup(keys, KeyboardType.BasicCurrency)
 
   return (
     <BasicLayout keys={keys} {...props}>
-      <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
+      <View testID={TEST_IDS.KEYBOARD_CURRENCY_KEYS}>
+        <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
+      </View>
     </BasicLayout>
   )
 }

package/src/features/keyboard/components/BasicLayout/TimeBasicLayout.tsx

@@ -1,28 +1,31 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { getMainKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const TimeBasicLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const keysGroup = getMainKeyboardGroup(keys, KeyboardType.BasicTime)
 
   return (
     <BasicLayout keys={keys} {...props}>
-      <KeysList
-        keys={keysGroup.keys}
-        numOfRows={keysGroup.numOfRows || keysGroup.keys.length}
-        style={{
-          option: {
-            text: styles.text,
-            button: styles.button,
-            container: styles.container,
-          },
-        }}
-        {...props}
-      />
+      <View testID={TEST_IDS.KEYBOARD_TIME_KEYS}>
+        <KeysList
+          keys={keysGroup.keys}
+          numOfRows={keysGroup.numOfRows || keysGroup.keys.length}
+          style={{
+            option: {
+              text: styles.text,
+              button: styles.button,
+              container: styles.container,
+            },
+          }}
+          {...props}
+        />
+      </View>
     </BasicLayout>
   )
 }

package/src/features/keyboard/components/BasicPlusLayout/BasicPlusLayout.tsx

@@ -5,6 +5,7 @@ import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { getMainKeyboardGroup } from '../../helpers'
 import { MOBILE_LAYOUT_WIDTH } from '../../constants/keyboard.constants'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const BasicPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
@@ -16,7 +17,7 @@ export const BasicPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   )
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.KEYBOARD_BASIC_PLUS_LAYOUT}>
       <KeysList keys={keysGroup.keys} numOfRows={3} {...props} />
     </View>
   )

package/src/features/keyboard/components/BasicPlusPlusLayout/BasicPlusPlusLayout.tsx

@@ -5,6 +5,7 @@ import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { getMainKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const BasicPlusPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
@@ -18,7 +19,7 @@ export const BasicPlusPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) =>
   )
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.KEYBOARD_BASIC_PLUS_PLUS_LAYOUT}>
       <KeysList keys={keysGroup.keys} numOfRows={3} {...props} />
     </View>
   )

package/src/features/keyboard/components/Keyboard.tsx

@@ -12,6 +12,7 @@ import { isMobileWidth } from '../helpers'
 import { KeyboardConfig } from '@magmamath/frontend-config'
 import { KeyboardKey, KeyboardKeyValue } from '../types/types'
 import { resolveKeyboard } from '../constants/keyboard.helpers'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -56,6 +57,7 @@ export const Keyboard = ({
 
   return (
     <Animated.View
+      testID={TEST_IDS.KEYBOARD}
       style={[
         styles.container,
         style,