From dd01e0b3d002da8684b84ddfc9fe42e91733a585 Mon Sep 17 00:00:00 2001
From: Okechi Jones-Williams <okechi.williams@gmail.com>
Date: Wed, 4 Mar 2026 01:30:41 +0000
Subject: [PATCH] Finished up the onboarding flow suite Added compatibility
 question tests and verifications Updated tests to cover Keywords and Headline
 changes recently made Updated tests to cover all of the big5 personality
 traits

---
 tests/e2e/web/utils/accountInformation.ts          |  2 +-
 .../answer-compatibility-question-content.tsx      | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/web/utils/accountInformation.ts b/tests/e2e/web/utils/accountInformation.ts
index 2d2c4134..97281ab9 100644
--- a/tests/e2e/web/utils/accountInformation.ts
+++ b/tests/e2e/web/utils/accountInformation.ts
@@ -252,4 +252,4 @@ export const testAccounts: AccountConfig = {
       },
     }
   },
-}
+}
\ No newline at end of file
diff --git a/web/components/answers/answer-compatibility-question-content.tsx b/web/components/answers/answer-compatibility-question-content.tsx
index 24e65326..e1c43f9d 100644
--- a/web/components/answers/answer-compatibility-question-content.tsx
+++ b/web/components/answers/answer-compatibility-question-content.tsx
@@ -34,6 +34,7 @@ export const IMPORTANCE_CHOICES = {
   Important: 2,
   'Very Important': 3,
 } as const
+} as const
 
 type ImportanceColorsType = {
   [key: number]: string
@@ -165,6 +166,9 @@ export function AnswerCompatibilityQuestionContent(props: {
         <Row className={'gap-2'}>
           <PinQuestionButton questionId={question.id} />
           {shortenedPopularity && (
+        <div data-testid="compatibility-question">{compatibilityQuestion.question}</div>
+        {shortenedPopularity && (
+          <Row className="text-ink-500 select-none items-center text-sm">
             <Tooltip
               text={t(
                 'answers.content.people_answered',
@@ -231,6 +235,7 @@ export function AnswerCompatibilityQuestionContent(props: {
           <ExpandingInput
             className={'w-full'}
             data-testid="compatibility-question-thoughts"
+            data-testid="compatibility-question-thoughts"
             rows={3}
             value={answer.explanation ?? ''}
             onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
@@ -298,6 +303,7 @@ export const SelectAnswer = (props: {
   const {value, setValue, options} = props
   return (
     <RadioGroup
+      data-testid="compatibility-question-your-answer"
       data-testid="compatibility-question-your-answer"
       className={
         'border-ink-300 text-ink-400 bg-canvas-50 inline-flex flex-col gap-2 rounded-md border p-1 text-sm shadow-sm'
@@ -310,6 +316,7 @@ export const SelectAnswer = (props: {
           key={i}
           value={i}
           data-testid={`compatibility-your-answer-${i}`}
+          data-testid={`compatibility-your-answer-${i}`}
           className={({disabled}) =>
             clsx(
               disabled
@@ -336,6 +343,7 @@ export const MultiSelectAnswers = (props: {
 
   return (
     <Col
+      data-testid="compatibility-answers-you-accept"
       data-testid="compatibility-answers-you-accept"
       className={
         'border-ink-300 text-ink-400 bg-canvas-50 inline-flex flex-col gap-2 rounded-md border p-1 text-sm shadow-sm main-font'
@@ -345,6 +353,7 @@ export const MultiSelectAnswers = (props: {
         <button
           key={i}
           data-testid={`compatibility-answers-you-accept-${i}`}
+          data-testid={`compatibility-answers-you-accept-${i}`}
           className={clsx(
             values.includes(i)
               ? 'text-primary-700 bg-primary-100 hover:bg-primary-50'
@@ -366,3 +375,8 @@ export const MultiSelectAnswers = (props: {
 export type ImportanceTuple = {
   [K in keyof typeof IMPORTANCE_CHOICES]: [K, (typeof IMPORTANCE_CHOICES)[K]]
 }[keyof typeof IMPORTANCE_CHOICES]
+
+//Exported types for test files to use when referencing the keys of the choices objects
+export type ImportanceTuple = {
+  [K in keyof typeof IMPORTANCE_CHOICES]: [K, (typeof IMPORTANCE_CHOICES)[K]]
+}[keyof typeof IMPORTANCE_CHOICES]