@magmamath/students-features 1.2.2-rc.1 → 1.2.2-rc.4

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/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/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
@@ -36,7 +37,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/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/shared/components/PlayButton.tsx

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