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

package/src/features/chatbot/components/ChatInput/FreeText/ChatTextInput.tsx

@@ -14,7 +14,6 @@ import { useKeyBoard } from '../../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../../lib/constants'
 
 import { SendMessageButton } from './SendMessageButton'
-import { TEST_IDS } from '../../../../../config/dataTestIDs'
 
 const MAX_AVAILABLE_MESSAGE_LENGTH = 500
 const COMPACT_WIDTH = 134
@@ -111,7 +110,6 @@ export const ChatTextInput = ({
         placeholder={placeholder}
         placeholderTextColor={COLORS.NEUTRAL_5}
         style={styles.input}
-        testID={TEST_IDS.OPEN_CHAT_TEXT_INPUT}
       />
       <SendMessageButton
         onPress={handleSendMessage}

package/src/features/chatbot/components/ChatInput/FreeText/FreeTextInputBlock.tsx

@@ -6,7 +6,6 @@ import { HintButtonVariant, RequestHintButton } from '../RequestHintButton'
 import { useChatModel } from '../../../context/ChatBotModelContext'
 import { t } from '../../../../../shared/translation'
 import { ChatTextInput } from './ChatTextInput'
-import { TEST_IDS } from '../../../../../config/dataTestIDs'
 
 type FreeTextInputBlockProps = {
   optionLabel: string
@@ -39,7 +38,7 @@ export const FreeTextInputBlock = ({
   const handleOnChangeText = (text: string) => model.textInput.setValue(text)
 
   return (
-    <View style={styles.container} testID={TEST_IDS.OPEN_CHAT_INPUT_FIELD}>
+    <View style={styles.container}>
       <ChatTextInput
         value={inputValue}
         onSubmit={handleOnSubmit}

package/src/features/chatbot/components/ChatInput/FreeText/SendMessageButton.tsx

@@ -9,7 +9,6 @@ import Animated, {
 import { ArrowUpIcon, COLORS, IS_MOBILE } from '@magmamath/react-native-ui'
 import { ColorScheme } from '@magmamath/students-features'
 import { MESSAGE_COLORS_MAP } from '../../../constants'
-import { TEST_IDS } from '../../../../../config/dataTestIDs'
 
 type SendMessageButtonProps = {
   onPress: () => void
@@ -55,7 +54,6 @@ export const SendMessageButton = ({
       disabled={disabled}
       accessibilityState={{ disabled }}
       accessibilityRole="button"
-      testID={TEST_IDS.OPEN_CHAT_SEND_MESSAGE_BUTTON}
     >
       {IS_MOBILE ? (
         <Animated.View

package/src/features/chatbot/components/ChatInput/RequestHintButton.tsx

@@ -14,7 +14,6 @@ import {
   SPACING,
 } from '@magmamath/react-native-ui'
 import { ColorScheme } from '@magmamath/students-features'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { INPUT_WIDTH, MESSAGE_COLORS_MAP } from '../../constants'
 
 export enum HintButtonVariant {
@@ -104,7 +103,6 @@ export const RequestHintButton = memo(
         disabled={disabled}
         accessibilityState={{ disabled }}
         accessibilityRole="button"
-        testID={TEST_IDS.CHAT_NEED_A_HINT_BUTTON}
       >
         <Animated.View style={[styles.content, animatedTextContainerStyle]}>
           <Animated.Text numberOfLines={1} style={[styles.text, animatedTextStyle, { fontSize }]}>

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

@@ -1,8 +1,7 @@
-import React from 'react'
+import React, { PropsWithChildren } 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
@@ -12,7 +11,7 @@ export const MessageLoader = ({ isLoading }: MessageLoaderProps) => {
   if (!isLoading) return null
 
   return (
-    <View style={styles.loader} testID={TEST_IDS.CHAT_MESSAGE_LOADER}>
+    <View style={styles.loader}>
       <Loader color={LoaderColor.GRAY} />
     </View>
   )

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

@@ -6,7 +6,6 @@ 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
@@ -35,7 +34,6 @@ 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,7 +7,6 @@ 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,
@@ -22,7 +21,7 @@ export const ReceivedMessage = ({
   const text = isTranslated ? message.translatedMessage : message.message
 
   return (
-    <View style={styles.container} testID={TEST_IDS.CHAT_MESSAGE_RECEIVED}>
+    <View style={styles.container}>
       <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,7 +7,6 @@ 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) => {
@@ -15,7 +14,6 @@ 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

@@ -6,7 +6,6 @@ import { StyleSheet } from 'react-native'
 import { HighlighterIcon } from '../../../shared/icons/HighlighterIcon'
 import { ConversationMessage } from '../types/units.types'
 import { useText } from '../../../shared/translation'
-import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type ErrorSpottingButtonProps = {
   contextMessage: ConversationMessage
@@ -33,7 +32,6 @@ 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/chatbot/errorSpotting/ErrorSpottingModel.ts

@@ -1,5 +1,5 @@
 import { createEvent, createStore, sample, Store, restore } from 'effector'
-import { ChatItem, ConversationMessage } from '../types/units.types'
+import { ChatItem, ConversationMessage, ErrorChar } from '../types/units.types'
 
 type ErrorSpottingProps = {
   $currentChatData: Store<ChatItem>
@@ -10,6 +10,7 @@ type ActiveErrorSpottingData = {
   isDisabled: boolean
   strokesIds: string[]
   validationKey: null | string
+  errorChars: ErrorChar[] | null
 }
 
 const AUTO_CLOSE_TIMEOUT = 5000
@@ -62,6 +63,7 @@ export class ErrorSpottingModel {
         return {
           validationKey: key,
           strokesIds: chatData.currentThread.errorStrokesIds,
+          errorChars: chatData.currentThread.errorChars,
           isActive: source.isEnabled && !isDisabled && isKeyChanged,
           isDisabled,
         }

package/src/features/chatbot/helpers.ts

@@ -103,6 +103,7 @@ export function prepareChatRequestPayload(
       ...(imageCdnId && { imageCdnId }),
       ...(imageAltText && { altText: imageAltText }),
       ...(!!problemStandards?.length && { problemStandards }),
+      ...(!!answerOptions?.length && { answerOptions }),
     },
   }
 }

package/src/features/chatbot/model/ChatBotThreadManager.ts

@@ -56,24 +56,44 @@ export class ChatBotThreadManager {
     const key = this.currentKey
     const existingThreadItem = this.threads.get(key)
     if (existingThreadItem) return existingThreadItem
+
     const threadItem = new ThreadItem()
     this.threads.set(key, threadItem)
-    if (!this.drawBoardAdapter) return threadItem
+    await this.setDrawBoardContent(threadItem)
+    return threadItem
+  }
+
+  private async setDrawBoardContent(threadItem: ThreadItem) {
+    if (!this.drawBoardAdapter) return
     try {
       const content = await this.drawBoardAdapter.getContent()
-      if (!content) return threadItem
-      threadItem.setValidationKey(content.validationKey)
-      if (content.text) return threadItem.setText(content.text)
-      if (content.strokes?.length) return threadItem.setStrokes(content.strokes)
-    } catch {}
+      if (!content) return
 
-    return threadItem
+      threadItem.setValidationKey(content.validationKey)
+      threadItem.setStudentInput(content.studentInput)
+
+      if (content.strokes?.length) {
+        threadItem.setStrokes(content.strokes)
+      }
+      if (content.spreadSheetContent?.length) {
+        threadItem.setSpreadSheetContent(content.spreadSheetContent)
+      }
+      if (content.equationContent?.length) {
+        threadItem.setEquationContent(content.equationContent)
+      }
+      if (content.drawBoardImage) {
+        threadItem.setDrawBoardImage(content.drawBoardImage)
+      }
+    } catch (e) {
+      console.error('Failed to load draw board content', e)
+    }
   }
 
   public setDrawBoardAdapter(adapter: IChatDrawBoardAdapter) {
     this.drawBoardAdapter = adapter
   }
 
+  // TODO: simplify this method, split it into smaller methods
   public readonly postMessage = async (
     payload: PostMessagePayload,
     requestConfig?: RequestOptionalConfig,
@@ -91,10 +111,25 @@ export class ChatBotThreadManager {
         ? await this.api.sendMessage(data, requestConfig)
         : await this.api.getHint(data, requestConfig)
 
+    const isFirstHint = threadItem.hintsHistory.length === 0
     threadItem.history.push(result.message)
 
-    if ('errorStrokeIds' in result && result?.errorStrokeIds) {
-      threadItem.setErrorStrokesIds(result.errorStrokeIds)
+    if (type === ChatRequestType.HINT) {
+      threadItem.hintsHistory.push(result.message)
+    }
+
+    if (isFirstHint) {
+      if ('errorChars' in result && result.errorChars?.length) {
+        const errorStrokeIds = result.errorChars.map((c) => c.id)
+        threadItem.setErrorStrokesIds(errorStrokeIds)
+        threadItem.setErrorChars(result.errorChars)
+      }
+      if ('errorCellIds' in result && result.errorCellIds?.length) {
+        threadItem.setErrorStrokesIds(result.errorCellIds)
+      }
+      if ('errorStrokeIds' in result && result?.errorStrokeIds) {
+        threadItem.setErrorStrokesIds(result.errorStrokeIds)
+      }
     }
 
     const nextOptions =

package/src/features/chatbot/model/ThreadItem.ts

@@ -1,24 +1,44 @@
-import { FullStrokeData, IThreadItem } from '../types/units.types'
+import {
+  ErrorChar,
+  EquationItem,
+  FullStrokeData,
+  IThreadItem,
+  SpreadsheetItem,
+} from '../types/units.types'
 import { generateRandomId } from '../../../lib/helpers/helpers'
 
 type ThreadItemProps = {
   strokes?: FullStrokeData[]
-  text?: string
   key: string
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  studentInput?: string
 }
 
+const DEFAULT_STUDENT_INPUT = 'none'
+
+// TODO: move drawboard content to separate class and make ThreadItem responsible only for history and hints
 export class ThreadItem implements IThreadItem {
   public readonly id = generateRandomId()
   public readonly history: string[] = []
+  public readonly hintsHistory: string[] = []
   public strokesValidationKey: string | null = null
   public strokes: FullStrokeData[] | null
-  public text: string | null = null
   public errorStrokesIds: string[] | null = null
+  public errorChars: ErrorChar[] | null = null
+  public spreadSheetContent?: SpreadsheetItem[]
+  public equationContent?: EquationItem[]
+  public drawBoardImage?: string
+  public studentInput: string
 
   public constructor(props?: ThreadItemProps | null) {
     this.strokes = props?.strokes ?? null
-    this.text = props?.text ?? null
     this.strokesValidationKey = props?.key ?? null
+    this.spreadSheetContent = props?.spreadSheetContent
+    this.equationContent = props?.equationContent
+    this.drawBoardImage = props?.drawBoardImage
+    this.studentInput = props?.studentInput ?? DEFAULT_STUDENT_INPUT
   }
 
   public setStrokes(strokes: FullStrokeData[]) {
@@ -26,11 +46,6 @@ export class ThreadItem implements IThreadItem {
     return this
   }
 
-  public setText(text: string) {
-    this.text = text
-    return this
-  }
-
   public setValidationKey(key: string) {
     this.strokesValidationKey = key
     return this
@@ -41,19 +56,53 @@ export class ThreadItem implements IThreadItem {
     return this
   }
 
-  public getNextHintProps() {
-    if (this.history.length) {
-      return {
-        previousHint: this.history[this.history.length - 1],
-      }
-    }
+  public setErrorChars(chars: ErrorChar[]) {
+    this.errorChars = chars
+    return this
+  }
 
-    if (this.text) {
-      return { drawBoardText: this.text }
-    }
+  public setSpreadSheetContent(content: SpreadsheetItem[]) {
+    this.spreadSheetContent = content
+    return this
+  }
+
+  public setEquationContent(content: EquationItem[]) {
+    this.equationContent = content
+    return this
+  }
 
-    if (this.strokes && this.strokes.length > 0) {
+  public setDrawBoardImage(image: string) {
+    this.drawBoardImage = image
+    return this
+  }
+
+  public setStudentInput(studentInput: string) {
+    this.studentInput = studentInput
+    return this
+  }
+
+  private getContentProps() {
+    if (this.strokes?.length) {
       return { stroke: this.strokes }
     }
+    if (this.spreadSheetContent?.length) {
+      return { spreadSheetContent: this.spreadSheetContent }
+    }
+    if (this.equationContent?.length) {
+      return { equationContent: this.equationContent }
+    }
+    return {}
+  }
+
+  public getNextHintProps() {
+    const hintNumber = this.hintsHistory.length
+
+    return {
+      hintNumber,
+      studentInput: this.studentInput,
+      ...(this.drawBoardImage && { drawBoardImage: this.drawBoardImage }),
+      ...(hintNumber === 0 && this.getContentProps()),
+      ...(this.hintsHistory.length && { previousHints: [...this.hintsHistory] }),
+    }
   }
 }

package/src/features/chatbot/types/api.types.ts

@@ -1,4 +1,11 @@
-import { ChatAnswer, FullStrokeData, Stroke } from './units.types'
+import {
+  ChatAnswer,
+  FullStrokeData,
+  Stroke,
+  EquationItem,
+  SpreadsheetItem,
+  ErrorChar,
+} from './units.types'
 import { ProblemStandard } from './model.types'
 
 export type GetAlternativesPayload = {
@@ -107,17 +114,25 @@ export type ChatHintPayload = {
   correctAnswer: string[]
   userAnswer?: string | string[]
   stroke?: Stroke[]
-  previousHint?: string
+  previousHints?: string[]
   language: string
   imageAltText?: string
   imageCdnId?: string
   drawBoardText?: string
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  hintNumber: number
+  studentInput: string
+  answerOptions?: string[]
 }
 
 export type ChatHintResponse = {
   message: string
   conversationId?: string | null
   errorStrokeIds?: string[]
+  errorCellIds?: string[]
+  errorChars?: ErrorChar[]
 }
 export type ErrorSpottingPayload = {
   strokes: FullStrokeData[]

package/src/features/chatbot/types/model.types.ts

@@ -16,7 +16,14 @@ import {
   SendMessageResponse,
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
-import { ChatAnswer, ChatItem, ConversationMessage, FullStrokeData } from './units.types'
+import {
+  EquationItem,
+  ChatAnswer,
+  ChatItem,
+  ConversationMessage,
+  FullStrokeData,
+  SpreadsheetItem,
+} from './units.types'
 import { WithAbortSignal } from '../../../lib/types/requests'
 import { RequestOptionalConfig } from '../../../lib/effector/createControllerEffect'
 
@@ -117,8 +124,11 @@ type GetVisibleStrokesResponse = {
 
 type GetBoardContentResponse = {
   strokes?: FullStrokeData[]
-  text?: string
   validationKey: string
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  studentInput: string
 }
 
 export type IChatDrawBoardAdapter = {

package/src/features/chatbot/types/units.types.ts

@@ -2,16 +2,42 @@ export type Stroke = {
   x: number[]
   y: number[]
 }
+
 export type FullStrokeData = Stroke & {
   id: string
 }
 
+export type EquationItem = {
+  id: string
+  value?: string
+}
+
+export type SpreadsheetItem = {
+  id: string
+  value?: string
+  point: {
+    x: number
+    y: number
+  }
+}
+
+export type ErrorChar = {
+  id: string
+  value: string
+}
+
 export type IThreadItem = {
   id: string
   strokesValidationKey: string | null
   strokes: FullStrokeData[] | null
   history: string[]
+  hintsHistory: string[]
   errorStrokesIds: string[] | null
+  errorChars: ErrorChar[] | null
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  studentInput: string
 }
 
 export type ChatAnswer = {

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

@@ -13,7 +13,6 @@ 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({
@@ -25,7 +24,7 @@ export const CheatDetected = ({ textContent, model }: EOAModalContentProps) => {
   })
 
   return (
-    <View style={styles.container} testID={TEST_IDS.EOA_CHEAT_DETECTED}>
+    <View style={styles.container}>
       <Typography variant="h2" style={styles.title}>
         {textContent.title}
       </Typography>
@@ -40,7 +39,6 @@ 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,7 +12,6 @@ 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)
@@ -60,7 +59,6 @@ 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,7 +13,6 @@ 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()
@@ -27,7 +26,7 @@ export const ExamLeave = ({ textContent, model }: EOAModalContentProps) => {
   })
 
   return (
-    <View style={styles.container} testID={TEST_IDS.EOA_EXAM_LEAVE}>
+    <View style={styles.container}>
       <Typography variant="h1" style={styles.description}>
         {textContent.description}
       </Typography>
@@ -48,7 +47,6 @@ 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,7 +15,6 @@ 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)
@@ -29,7 +28,7 @@ export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
   })
 
   return (
-    <View style={styles.container} testID={TEST_IDS.EOA_EXAM_PAUSED}>
+    <View style={styles.container}>
       <Typography variant="h2" style={styles.title}>
         {textContent.title}
       </Typography>
@@ -44,7 +43,6 @@ 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,7 +18,6 @@ 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)
@@ -42,7 +41,7 @@ export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalCont
   })
 
   return (
-    <View style={styles.container} testID={TEST_IDS.EOA_EXAM}>
+    <View style={styles.container}>
       <View style={styles.contentBackground}>
         {IS_MOBILE ? (
           <Image source={require('./blurred-card.png')} />
@@ -64,7 +63,6 @@ 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,7 +23,6 @@ import {
 
 import { ModalModel } from './model'
 import { ModalBackground } from './ModalBackground'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 const stopPropagation = {
   onTouchStart: (event: GestureResponderEvent) => {
@@ -72,10 +71,7 @@ export const Modal = ({
   if (!isVisible) return null
   return (
     <TouchableWithoutFeedback onPress={() => isDismissable && onClose?.()}>
-      <Animated.View
-        style={[styles.overlay, style?.overlay, modalModel.animatedStyle]}
-        testID={TEST_IDS.EOA_MODAL}
-      >
+      <Animated.View style={[styles.overlay, style?.overlay, modalModel.animatedStyle]}>
         <TouchableWithoutFeedback {...stopPropagation}>
           <View style={[styles.container, style?.container]}>
             {withBackground && <View style={styles.backgroundWrapper}>{<ModalBackground />}</View>}
@@ -85,7 +81,6 @@ export const Modal = ({
                   variant={ButtonVariant.TERTIARY}
                   icon={<CrossIcon size={18} color={COLORS.NEUTRAL_7} />}
                   onPress={onClose}
-                  testID={TEST_IDS.EOA_MODAL_CLOSE_BUTTON}
                 />
               </View>
             )}