@magmamath/students-features 1.3.16 → 1.3.17

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 '../../../../i18n/i18n'
 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()
@@ -42,7 +43,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/openEnded/components/OpenEndedAttemptsLimit.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { View, StyleSheet, Text } from 'react-native'
 import { SPACING, BORDER_RADIUS, COLORS } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type OEAttemptsLimitProps = {
   text: string
 }
 
 export const OpenEndedAttemptsLimit = ({ text }: OEAttemptsLimitProps) => (
-  <View style={styles.container}>
+  <View testID={TEST_IDS.OPEN_ENDED_ATTEMPTS_LIMIT} style={styles.container}>
     <Text style={styles.text}>{text}</Text>
   </View>
 )

package/src/features/openEnded/components/OpenEndedScoreLabel.tsx

@@ -10,6 +10,7 @@ import {
 import { getScoreLabelColor } from '../oe.helpers'
 import { OpenEndedScoreLabelVariant } from '../oe.types'
 import { isWeb } from '../../../shared/common.constants'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type OpenEndedScoreLabelProps = {
   label: string
@@ -38,7 +39,7 @@ export const OpenEndedScoreLabel = ({
     score !== null && score >= 10 ? SCORE_WIDTH.LARGE : SCORE_WIDTH.DEFAULT
 
   return (
-    <View style={styles.container}>
+    <View testID={TEST_IDS.OPEN_ENDED_SCORE_LABEL} style={styles.container}>
       <View style={[styles.score, { width: scoreContainerWidth }]}>
         <Typography
           variant={HeadingVariants.H3}

package/src/features/pmProgress/components/header/NextUp.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native'
 import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
 import { SketchArrowRight } from '../../../../shared/icons/SketchArrowRight'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { useUnit } from 'effector-react'
 import { usePmProgress } from '../../context/PmProgressContext'
 import { OpeningLoaderId, SolvingFlow } from '../../shared/pmProgress.constants'
@@ -32,7 +33,7 @@ export const NextUp = () => {
               </Typography>
             </View>
             <View style={[styles.row, styles.tilted]}>
-              <Typography variant={HeadingVariants.H7} style={styles.muted}>
+              <Typography variant={HeadingVariants.H7} style={styles.muted} testID={TEST_IDS.PM_PROGRESS_NEXT_UP_DOMAIN_NAME}>
                 {nextUp.domain.title}
               </Typography>
               <View style={styles.diamond}>

package/src/features/pmProgress/components/header/PmProgressHeader.tsx

@@ -18,6 +18,7 @@ import { useStoreMap, useUnit } from 'effector-react'
 import { usePmProgress } from '../../context/PmProgressContext'
 import { formatGradeLabel } from '../../shared/pmProgress.helpers'
 import { MenuIcon } from '../../../../shared/icons/MenuIcon'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { NextUp } from './NextUp'
 import { BURGER_MENU_BREAKPOINT, MENU_MAX_HEIGHT } from '@magmamath/students-features'
 import { useText } from '../../../../i18n/i18n'
@@ -44,6 +45,7 @@ export const PmProgressHeader = () => {
         key: grade.value,
         title: formatGradeLabel(grade.value, customGradeLabels),
         disabled: grade.isLocked,
+        testID: TEST_IDS.PM_PROGRESS_GRADE_ITEM(grade.value),
         ...menuItemProps,
       })),
   })
@@ -57,6 +59,7 @@ export const PmProgressHeader = () => {
               onPress={onMenuPress}
               variant={ButtonVariant.TERTIARY}
               icon={<MenuIcon size={24} />}
+              testID={TEST_IDS.PM_PROGRESS_BURGER_MENU_BUTTON}
             />
           </View>
         )}
@@ -71,6 +74,7 @@ export const PmProgressHeader = () => {
             <Button
               variant={ButtonVariant.TERTIARY}
               onPress={() => setIsDropdownOpen((prev) => !prev)}
+              testID={TEST_IDS.PM_PROGRESS_GRADE_DROPDOWN_BUTTON}
             >
               <Typography variant={HeadingVariants.H8} style={styles.dark}>
                 {grade !== null

package/src/features/pmProgress/components/header/StartButton.tsx

@@ -11,6 +11,7 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { useText } from '../../../../i18n/i18n'
 
 const PULSATION_COLOR = '#FFBE4E66'
@@ -131,6 +132,7 @@ export const StartButton = ({
         colorScheme={ButtonColor.YELLOW}
         raiseLevel={6}
         style={{ container: styles.startButton }}
+        testID={TEST_IDS.PM_PROGRESS_START_BUTTON}
       >
         <Typography variant={HeadingVariants.H6} style={styles.startButtonText}>
           {t('pmProgress.startButton')}

package/src/features/pmProgress/components/insights/PmTimeframeStats.tsx

@@ -17,6 +17,7 @@ import { useUnit } from 'effector-react'
 import { formatTime } from '../../shared/pmProgress.helpers'
 import { InsightsTimeframe, STATS_MAX_HEIGHT } from '../../shared/pmProgress.constants'
 import { usePmProgress } from '../../context/PmProgressContext'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { useText } from '../../../../i18n/i18n'
 
 const optionStyle: SelectOptionProps['style'] = {
@@ -34,9 +35,9 @@ export const PmTimeframeStats = () => {
   const insights = useUnit(model.insights.$insights)
 
   const OPTIONS: SelectOptionProps[] = [
-    { key: InsightsTimeframe.WEEK, title: t('pmProgress.thisWeek'), style: optionStyle },
-    { key: InsightsTimeframe.LAST_WEEK, title: t('pmProgress.lastWeek'), style: optionStyle },
-    { key: InsightsTimeframe.ALL, title: t('pmProgress.allTime'), style: optionStyle },
+    { key: InsightsTimeframe.WEEK, title: t('pmProgress.thisWeek'), style: optionStyle, testID: TEST_IDS.PM_PROGRESS_TIMEFRAME_TAB(InsightsTimeframe.WEEK) },
+    { key: InsightsTimeframe.LAST_WEEK, title: t('pmProgress.lastWeek'), style: optionStyle, testID: TEST_IDS.PM_PROGRESS_TIMEFRAME_TAB(InsightsTimeframe.LAST_WEEK) },
+    { key: InsightsTimeframe.ALL, title: t('pmProgress.allTime'), style: optionStyle, testID: TEST_IDS.PM_PROGRESS_TIMEFRAME_TAB(InsightsTimeframe.ALL) },
   ]
 
   return (
@@ -48,6 +49,7 @@ export const PmTimeframeStats = () => {
             label={t('pmProgress.stars')}
             color={COLORS.PRIMARY_YELLOW}
             icon={<StarIcon />}
+            testID={TEST_IDS.PM_PROGRESS_STARS_CARD}
           />
           <StatsCard
             value={formatTime(insights?.timeInPracticeMs ?? 0)}
@@ -55,6 +57,7 @@ export const PmTimeframeStats = () => {
             color={COLORS.PRIMARY_PURPLE}
             iconStyle={styles.timeIcon}
             icon={<TimerIcon />}
+            testID={TEST_IDS.PM_PROGRESS_TIME_CARD}
           />
         </View>
 

package/src/features/pmProgress/components/insights/StatsCard.tsx

@@ -8,11 +8,12 @@ type StatsCardProps = {
   color: string
   icon: ReactNode
   iconStyle?: ViewStyle
+  testID?: string
 }
 
-export const StatsCard = ({ value, label, color, icon, iconStyle }: StatsCardProps) => {
+export const StatsCard = ({ value, label, color, icon, iconStyle, testID }: StatsCardProps) => {
   return (
-    <View style={[styles.card, { borderColor: color }]}>
+    <View style={[styles.card, { borderColor: color }]} testID={testID}>
       <View style={[styles.iconContainer, { backgroundColor: color }, iconStyle]}>{icon}</View>
       <View>
         <Text style={[styles.value, { color }]}>{value}</Text>

package/src/features/pmProgress/components/list/ListCard.tsx

@@ -22,6 +22,7 @@ export type ListCardItem = {
   subtitle: string
   isCompleted: boolean
   skillsLeft: number
+  testID?: string
 }
 
 function getVisibleItems<T>(items: T[], maxItems?: number) {
@@ -49,6 +50,7 @@ type ListCardProps<T extends ListCardItem> = {
   isSkillsLeftHidden?: boolean
   isHighlighted?: boolean
   loadingItemId?: string | null
+  testID?: string
 }
 
 export const ListCard = <T extends ListCardItem>({
@@ -70,6 +72,7 @@ export const ListCard = <T extends ListCardItem>({
   expandedColor = COLORS.NEUTRAL_3,
   isSkillsLeftHidden = false,
   loadingItemId = null,
+  testID,
 }: ListCardProps<T>) => {
   const t = useText()
   const [isHovered, setIsHovered] = useState(false)
@@ -96,6 +99,7 @@ export const ListCard = <T extends ListCardItem>({
           isLast && !isExpanded && styles.headerLast,
           withHighlight && { backgroundColor: expandedColor },
         ]}
+        testID={testID}
         onPress={onPress}
         onHoverIn={() => {
           setIsHovered(true)
@@ -138,6 +142,7 @@ export const ListCard = <T extends ListCardItem>({
               isFinished={standard.isCompleted}
               isLoading={loadingItemId === standard.id}
               isSkillsLeftHidden={isSkillsLeftHidden}
+              testID={standard.testID}
               onPress={() => onItemPress?.(standard)}
             />
           ))}

package/src/features/pmProgress/components/list/ListItem.tsx

@@ -26,6 +26,7 @@ export type ListItemProps = {
   isLoading?: boolean
   onPress?: () => void
   isSkillsLeftHidden?: boolean
+  testID?: string
 }
 
 export const ListItem = ({
@@ -36,6 +37,7 @@ export const ListItem = ({
   isLoading = false,
   onPress,
   isSkillsLeftHidden = false,
+  testID,
 }: ListItemProps) => {
   const t = useText()
   const [isHovered, setIsHovered] = useState(false)
@@ -46,6 +48,7 @@ export const ListItem = ({
     <Pressable
       onPress={onPress}
       disabled={isLoading}
+      testID={testID}
       style={[
         styles.card,
         isFinished && styles.finished,

package/src/features/pmProgress/components/list/PmDomainList.tsx

@@ -8,6 +8,7 @@ import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
 import { usePmProgress } from '../../context/PmProgressContext'
 import { isFluencyDomain } from '../../shared/pmProgress.helpers'
 import { SolvingFlow } from '../../shared/pmProgress.constants'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const PmDomainList = () => {
   const { model, onStandardPress } = usePmProgress()
@@ -31,7 +32,12 @@ export const PmDomainList = () => {
         renderItem={({ item, index }) => (
           <ListCard
             title={item.title}
-            items={item.standards.map((standard) => ({ ...standard, id: standard.standardId }))}
+            testID={TEST_IDS.PM_PROGRESS_DOMAIN_CARD(item.domainId)}
+            items={item.standards.map((standard) => ({
+              ...standard,
+              id: standard.standardId,
+              testID: TEST_IDS.PM_PROGRESS_STANDARD_ITEM(standard.standardId),
+            }))}
             progress={item.scorePercentage}
             color={item.color}
             onPress={() => model.highlight.expand(item.domainId)}

package/src/features/pmProgress/components/recs/PmTeacherRecs.tsx

@@ -14,6 +14,7 @@ import {
 import { useStoreMap, useUnit } from 'effector-react'
 import { CustomDomain, OpeningLoaderId, SolvingFlow } from '../../shared/pmProgress.constants'
 import { usePmProgress } from '../../context/PmProgressContext'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { useText } from '../../../../i18n/i18n'
 
 export const PmTeacherRecs = () => {
@@ -33,6 +34,7 @@ export const PmTeacherRecs = () => {
         subtitle: skill.shortDescriptionTranslations,
         isCompleted: false,
         skillsLeft: 0,
+        testID: TEST_IDS.PM_PROGRESS_TEACHER_REC_ITEM(skill._id),
       })),
     }),
   )
@@ -48,6 +50,7 @@ export const PmTeacherRecs = () => {
           maxItems={3}
           color={COLORS.PRIMARY_YELLOW}
           expandedColor={COLORS.YELLOW_1}
+          testID={TEST_IDS.PM_PROGRESS_TEACHER_RECS_CARD}
           onPress={() => model.highlight.expand(CustomDomain.TEACHER)}
           onItemPress={async (item) => {
             try {
@@ -83,6 +86,7 @@ export const PmTeacherRecs = () => {
               isLoading={loaderOpeningId === OpeningLoaderId.PRACTICE_BUTTON}
               size={ButtonSize.SMALL}
               variant={ButtonVariant.SECONDARY}
+              testID={TEST_IDS.PM_PROGRESS_TEACHER_REC_PRACTICE_BUTTON}
             >
               {t('pmProgress.practiceButton')}
             </Button>

package/src/features/problemSelector/components/ProblemSelectorButton.tsx

@@ -13,6 +13,7 @@ import {
 } from '@magmamath/react-native-ui'
 
 import { BADGE_COORDINATES, BUTTON_BORDER_WIDTH, BUTTON_SIZE, COLOR_SCHEME_MAP } from '../constants'
+import { TEST_IDS } from '../../../config/dataTestIDs'
 
 import { ProblemSelectorButtonProps } from '../types'
 
@@ -28,6 +29,7 @@ export const ProblemSelectorButton = ({
   return (
     <View style={styles.wrapper}>
       <Button
+        testID={TEST_IDS.PROBLEM_SELECTOR_BUTTON(text)}
         variant={ButtonVariant.PRIMARY}
         size={ButtonSize.MEDIUM}
         customColorScheme={customColorScheme}

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

@@ -15,6 +15,7 @@ import {
 import { Pressable, StyleSheet } from 'react-native'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
+import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { VOICE_RECORD_SHADOWS, VoiceRecorderState } from '../../constants'
 import { RecordButtonVariant } from '../../types'
 import { useText } from '../../../../i18n/i18n'
@@ -105,6 +106,7 @@ export const VoiceRecordButton = ({ model, buttonVariant }: VoiceRecordButtonPro
         />
       ) : (
         <Button
+          testID={TEST_IDS.VOICE_RECORD_BUTTON}
           disabled={isButtonDisabled}
           onPressIn={() => model.recorderButtonHandler()}
           style={defaultButtonStyles}

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

@@ -8,6 +8,8 @@ type ModalFooterButtonsProps = {
   onConfirm: () => void
   confirmLabel: TranslationKey
   confirmColor?: ButtonColor
+  cancelTestID?: string
+  confirmTestID?: string
 }
 
 export const ModalFooterButtons = ({
@@ -15,12 +17,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}
@@ -29,6 +34,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 '../../../../i18n/i18n'
 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 '../../../../i18n/i18n'
 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/index.ts

@@ -1,3 +1,4 @@
+export { TEST_IDS as FEATURES_TEST_IDS } from './config/dataTestIDs'
 export { generateRandomId } from './lib/helpers/helpers'
 export * from './features/chatbot'
 export * from './features/feedback'

package/src/shared/components/PlayButton.tsx

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

package/src/i18n/.generated/schema.json

@@ -1,90 +0,0 @@
-{
-  "chat": {
-    "anotherHint": "Give me another hint",
-    "answerAgain": "Answer again to get another hint!",
-    "errorMessage": "Something went wrong! Try again",
-    "getHint": "Get a hint",
-    "giveHint": "I need a hint",
-    "giveHintOpenChat": "I need a hint",
-    "howCanIHelp": "Hi! Do you want help?",
-    "inputPlaceholder": "Type...",
-    "needHint": "I need a hint",
-    "showError": "Show error"
-  },
-  "exampleSolution": {
-    "aha": "Aha!",
-    "errorMessage": "Something went wrong with generating an example solution",
-    "exampleSolution": "Example solution",
-    "letMeThink": "Let me think..."
-  },
-  "gifCelebrations": {
-    "almostThere": "Almost there",
-    "greatStart": "Great start!",
-    "onTheWay": "On the way!"
-  },
-  "keyboard": {
-    "area": "Area",
-    "length": "Length",
-    "time": "Time",
-    "volume": "Volume",
-    "weight": "Weight"
-  },
-  "locale": "en-SE",
-  "pmProgress": {
-    "allLockedSubtitle": "Your teacher has locked all grades.\nAsk them to unlock grades so you can start practicing.",
-    "allLockedTitle": "All grades are locked",
-    "allTime": "All time",
-    "andMore": "and '{{'count'}}' more...",
-    "fluency": "Fluency",
-    "grade": "Grade",
-    "gradeK": "K",
-    "gradeOther": "Other",
-    "initErrorSubtitle": "We couldn't load your progress.\nPlease try again later.",
-    "initErrorTitle": "Something went wrong",
-    "lastWeek": "Last week",
-    "loading": "Loading...",
-    "nextUp": "Next up!",
-    "practiceButton": "PRACTICE",
-    "skillLeft": "skill left",
-    "skillsLeft": "skills left",
-    "stars": "Practice stars",
-    "startButton": "START",
-    "teacherRecs": "Teacher recommendations",
-    "thisWeek": "This week",
-    "time": "Practice time",
-    "title": "Practice & Progress"
-  },
-  "teacherFeedback": {
-    "noComments": "No comments yet"
-  },
-  "time": {
-    "dayAgo": "day ago",
-    "daysAgo": "{{count}} days ago",
-    "hourAgo": "hour ago",
-    "hoursAgo": "{{count}} hours ago",
-    "justNow": "just now",
-    "minuteAgo": "minute ago",
-    "minutesAgo": "{{count}} minutes ago",
-    "monthAgo": "month ago",
-    "monthsAgo": "{{count}} months ago",
-    "yearAgo": "year ago",
-    "yearsAgo": "{{count}} years ago"
-  },
-  "voice": {
-    "attempt": "Attempt {{ number }}",
-    "cancel": "Cancel",
-    "delete": "Delete",
-    "deleteRecording": "Delete recording?",
-    "noMicrophoneAccess": "No microphone access.",
-    "noMicrophoneAccessBySystem": "Microphone access denied by system settings.",
-    "noMicrophoneFound": "No microphone found.",
-    "recordingDeleted": "Recording successfully deleted.",
-    "redo": "Redo",
-    "redoRecording": "Redo recording?",
-    "thisWillRemoveRecording": "This will remove your previous recording.",
-    "transcriptions": "Transcriptions",
-    "transcriptNotAvailable": "Transcript not available",
-    "uploadFailed": "Upload failed. Please try again.",
-    "youWontBeAbleToRecover": "You won't be able to recover this file once it's gone."
-  }
-}