@magmamath/students-features 1.2.2-rc.2 → 1.2.2-rc.5

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/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

@@ -3,11 +3,12 @@ import { StyleSheet, Text, View } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
 import { BUENOS_AIRES_FONT } from '../constants'
 import { useText } from '../../../shared/translation'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 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

@@ -37,7 +37,7 @@ export const TeacherFeedbackButton = ({
     return (
       <Button
         id={TEACHER_FEEDBACK_BUTTON_ID}
-        testID={TEST_IDS.TEACHER_FEEDBACK_BUTTON}
+        testID={TEST_IDS.TEACHER_COMMENTS_BUTTON}
         onPress={onPress}
         size="large"
         variant="primary"
@@ -56,7 +56,7 @@ export const TeacherFeedbackButton = ({
   return (
     <Button
       id={TEACHER_FEEDBACK_BUTTON_ID}
-      testID={TEST_IDS.TEACHER_FEEDBACK_BUTTON}
+      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/TeacherFeedbackComments/TeacherFeedbackComments.tsx

@@ -4,7 +4,6 @@ import { TeacherComment } from './TeacherComment'
 import { EmptyComment } from '../EmptyComment'
 import { EMPTY_COMMENT_ID, FeedbackMode } from '../../constants'
 import { COLORS } from '@magmamath/react-native-ui'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { TeacherComment as TeacherCommentEntity } from '../../types'
 
 const TOOLBAR_HEIGHT = 140
@@ -32,10 +31,7 @@ export const TeacherFeedbackComments = ({
   }, [])
 
   return (
-    <View
-      testID={TEST_IDS.TEACHER_FEEDBACK_COMMENTS}
-      style={[styles.container, { maxHeight: MAX_HEIGHT - maxHeightOffset }]}
-    >
+    <View style={[styles.container, { maxHeight: MAX_HEIGHT - maxHeightOffset }]}>
       <ScrollView
         ref={ref}
         contentContainerStyle={styles.commentsList}

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

@@ -18,7 +18,7 @@ export const UnreadMessagesBadge = ({
 }: UnreadMessagesBadgeProps) => {
   return (
     <View
-      testID={TEST_IDS.UNREAD_MESSAGES_BADGE}
+      testID={TEST_IDS.UNREAD_COMMENTS_BADGE}
       style={[
         styles.container,
         style,

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

@@ -7,6 +7,7 @@ import { SelectedLayout } from './types'
 import { getMainKeyboardGroup } from '../../helpers'
 import { getSelectOptions } from './helpers'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const AlgebraLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
@@ -31,7 +32,7 @@ export const AlgebraLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayout
   const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.KEYBOARD_ALGEBRA_LAYOUT}>
       {isDesktop && (
         <SelectGroup
           numOfRows={2}

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,

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

@@ -4,6 +4,7 @@ import { IS_MOBILE, IS_WEB, SelectOptionColor } from '@magmamath/react-native-ui
 import { getLayoutByCharType, isBasicPlusPlusLayout } from '../../constants/keyboardLayouts'
 import { UnderlinedLayout } from '../UnderlinedLayout/UnderlinedLayout'
 import { KeyboardKey, KeyboardKeyValue, ResolvedKeyboard } from '../../types/types'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type LayoutProps = {
   keys: ResolvedKeyboard
@@ -57,7 +58,10 @@ export const MainLayout = ({
   }, [showUnderlinedKeys, animateFade])
 
   return (
-    <View style={[styles.container, IS_MOBILE && { flex: 1 }]}>
+    <View
+      style={[styles.container, IS_MOBILE && { flex: 1 }]}
+      testID={TEST_IDS.KEYBOARD_MAIN_LAYOUT}
+    >
       <Layout {...props} onLayoutChange={setIsSecondaryLayoutSelected} />
       {isUnderlinedLayoutVisible && (
         <Animated.View style={{ opacity: fadeAnim }}>

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

@@ -5,6 +5,7 @@ import { SPACING } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { useText } from '../../../../shared/translation'
 import { getMainKeyboardGroup } from '../../helpers'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type NumpadProps = {
   style?: StyleProp<ViewStyle>
@@ -15,7 +16,7 @@ export const Numpad = ({ style, keys, ...props }: NumpadProps) => {
   const keyboardGroup = getMainKeyboardGroup(keys, KeyboardType.Numpad)
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, style]} testID={TEST_IDS.KEYBOARD_NUMPAD}>
       <KeysList keys={keyboardGroup.keys} numOfRows={3} {...props} />
     </View>
   )

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

@@ -1,7 +1,9 @@
 import React from 'react'
+import { View } from 'react-native'
 import { KeysList } from '../KeysList/KeysList'
 import { KeyboardLayoutProps, KeyboardType, ResolvedKeyboard } from '../../types/types'
 import { getMainKeyboardGroup } from '../../helpers'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type UnderlinedLayoutProps = {
   keys: ResolvedKeyboard
@@ -13,6 +15,12 @@ export const UnderlinedLayout = ({ keys, ...props }: UnderlinedLayoutProps) => {
   const keysToShow = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
 
   return (
-    <KeysList keys={keysToShow} numOfRows={props.showSlashKey ? 2 : keysToShow.length} {...props} />
+    <View testID={TEST_IDS.KEYBOARD_UNDERLINED_LAYOUT}>
+      <KeysList
+        keys={keysToShow}
+        numOfRows={props.showSlashKey ? 2 : keysToShow.length}
+        {...props}
+      />
+    </View>
   )
 }

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

@@ -9,6 +9,7 @@ import { useUnitTabs } from './hooks/useUnitTabs'
 import { getMainKeyboardGroup } from '../../helpers'
 import { KeyboardUnitsGroupType, SelectedLayout } from './types'
 import { getSelectOptions } from './helpers'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const UnitsLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
@@ -28,7 +29,7 @@ export const UnitsLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutPr
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={TEST_IDS.KEYBOARD_UNITS_LAYOUT}>
       {isDesktop && (
         <SelectGroup
           numOfRows={2}

package/src/features/voice/recording/components/VoiceRecordButton.tsx

@@ -13,6 +13,7 @@ import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
 import { VoiceRecorderState } from '../../constants'
 import { useText } from '../../../../shared/translation'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type VoiceRecordButtonProps = {
   style?: ButtonStyle
@@ -45,6 +46,7 @@ export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
       pointerEvents={!availableInputs.length || isInitializing ? 'box-only' : 'auto'}
     >
       <Button
+        testID={TEST_IDS.VOICE_RECORD_BUTTON}
         disabled={isButtonDisabled || !availableInputs.length}
         onPressIn={() => model.recorderButtonHandler()}
         style={combinedStyles}

package/src/features/voice/recording/components/VoiceRecordDeleteButton.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, TouchableOpacity } from 'react-native'
 import { COLORS, TrashcanIcon } from '@magmamath/react-native-ui'
 import React from 'react'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type VoiceRecordDeleteProps = {
   onPress?: () => void
@@ -9,7 +10,7 @@ type VoiceRecordDeleteProps = {
 
 export const VoiceRecordDeleteButton = ({ onPress, isDisabled }: VoiceRecordDeleteProps) => {
   return (
-    <TouchableOpacity style={styles.container} onPress={onPress} disabled={isDisabled}>
+    <TouchableOpacity testID={TEST_IDS.VOICE_RECORD_DELETE_BUTTON} style={styles.container} onPress={onPress} disabled={isDisabled}>
       <TrashcanIcon size={20} color={isDisabled ? COLORS.NEUTRAL_5 : COLORS.NEUTRAL_9} />
     </TouchableOpacity>
   )

package/src/features/voice/recording/components/VoiceRecordTimer.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
 import { formatDuration } from '../../helpers'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type VoiceRecordTimerProps = {
   style?: StyleProp<ViewStyle>
@@ -20,7 +21,7 @@ export const VoiceRecordTimer = ({
   const displayDurationMs = recordingFileDurationMs || savedAudioFileDurationMs
 
   return (
-    <View style={[styles.container, style]}>
+    <View testID={TEST_IDS.VOICE_RECORD_TIMER} style={[styles.container, style]}>
       <Typography variant="h9" style={styles.text}>
         {displayDurationMs ? formatDuration(displayDurationMs) : '0:00'}
       </Typography>

package/src/features/voice/recording/modal/ModalFooterButtons.tsx

@@ -9,6 +9,8 @@ type ModalFooterButtonsProps = {
   onConfirm: () => void
   confirmLabel: TranslationKeys
   confirmColor?: ButtonColor
+  cancelTestID?: string
+  confirmTestID?: string
 }
 
 export const ModalFooterButtons = ({
@@ -16,12 +18,15 @@ export const ModalFooterButtons = ({
   onConfirm,
   confirmLabel,
   confirmColor = ButtonColor.BLUE,
+  cancelTestID,
+  confirmTestID,
 }: ModalFooterButtonsProps) => {
   const t = useText()
 
   return (
     <View style={styles.container}>
       <Button
+        testID={cancelTestID}
         style={{ text: styles.buttonLabel }}
         variant={ButtonVariant.TERTIARY}
         size={ButtonSize.LARGE}
@@ -30,6 +35,7 @@ export const ModalFooterButtons = ({
         {t('voice.cancel')}
       </Button>
       <Button
+        testID={confirmTestID}
         colorScheme={confirmColor}
         variant={ButtonVariant.PRIMARY}
         size={ButtonSize.LARGE}

package/src/features/voice/recording/modal/VoiceRecordDeleteModal.tsx

@@ -6,6 +6,7 @@ import { VoiceRecorderState } from '../../constants'
 import { useText } from '../../../../shared/translation'
 import { ModalFooterButtons } from './ModalFooterButtons'
 import { VoiceRecordModalParams } from '../../types'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type VoiceRecordDeleteModalComponentProps = {
   modal: {
@@ -57,6 +58,7 @@ export const VoiceRecordDeleteModal = ({
 
   return (
     <BaseModal
+      testID={TEST_IDS.VOICE_RECORD_DELETE_MODAL}
       style={{
         container: styles.modalContainer,
       }}
@@ -64,6 +66,8 @@ export const VoiceRecordDeleteModal = ({
       content={t('voice.youWontBeAbleToRecover')}
       footer={
         <ModalFooterButtons
+          cancelTestID={TEST_IDS.VOICE_RECORD_DELETE_CANCEL_BUTTON}
+          confirmTestID={TEST_IDS.VOICE_RECORD_DELETE_CONFIRM_BUTTON}
           onCancel={closeModal}
           onConfirm={handleDelete}
           confirmLabel="voice.delete"

package/src/features/voice/recording/modal/VoiceRecordUndoModal.tsx

@@ -4,6 +4,7 @@ import { StyleSheet } from 'react-native'
 import { useText } from '../../../../shared/translation'
 import { ModalFooterButtons } from './ModalFooterButtons'
 import { VoiceRecordModalParams } from '../../types'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type VoiceRecordUndoModalProps = {
   modal: {
@@ -26,6 +27,7 @@ export const VoiceRecordUndoModal = ({
 
   return (
     <BaseModal
+      testID={TEST_IDS.VOICE_RECORD_UNDO_MODAL}
       style={{
         container: styles.modalStyle,
       }}
@@ -33,6 +35,8 @@ export const VoiceRecordUndoModal = ({
       content={t('voice.thisWillRemoveRecording')}
       footer={
         <ModalFooterButtons
+          cancelTestID={TEST_IDS.VOICE_RECORD_UNDO_CANCEL_BUTTON}
+          confirmTestID={TEST_IDS.VOICE_RECORD_UNDO_CONFIRM_BUTTON}
           onCancel={closeModal}
           onConfirm={redoRecording}
           confirmLabel="voice.redo"

package/src/shared/components/PlayButton.tsx

@@ -52,6 +52,7 @@ type MessageTextToSpeechProps = {
   activityIndicatorColor?: string
   colorScheme?: ColorScheme
   onPress?: () => void
+  testID?: string
 }
 
 export const PlayButton = ({