Adding onboarding E2E foundations and first tests (#30)

* . * Centralizing config details * Added data-testId attributes where necessary and started the onboarding flow scaffolding * Continued onboarding test scaffolding * Continued work on tests for the Onboarding flow * . * Updated "Want kids" options to be less flaky Updated playwright.config so that expect timeout matching test timeout * Continued updating front-end scaffolding * . * . * . * . * Updated fixture function deleteUser: to also remove the database user information * Rm * Fix * Fixes --------- Co-authored-by: MartinBraquet <martin.braquet@gmail.com>
2026-02-28 21:06:40 -05:00 · 2026-02-20 15:56:26 +00:00
parent 1c26b6381e
commit 1994697fa1
27 changed files with 3729 additions and 2304 deletions
--- a/web/components/bio/profile-bio-block.tsx
+++ b/web/components/bio/profile-bio-block.tsx
@@ -30,7 +30,7 @@ export function BioBlock(props: {
        !edit && 'px-3 py-2'
      )}
    >
-      <Row className="w-full">
+      <Row className="w-full" data-testid="profile-bio">
        {!edit && profile.bio && (
          <Col className="flex w-full flex-grow">
            <Content className="w-full" content={profile.bio as JSONContent} />
@@ -47,7 +47,7 @@ export function BioBlock(props: {
          />
        )}
        {isCurrentUser && !edit && (
-          <Tooltip text={t('more_options_user.edit_bio', 'Bio options')} noTap>
+          <Tooltip text={t('more_options_user.edit_bio', 'Bio options')} noTap testId='profile-bio-options'>
          <DropdownMenu
            items={[
              {
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -108,6 +108,7 @@ export const SignUpButton = (props: {

  return (
    <Button
+      data-testid='side-bar-sign-up-button'
      color={color ?? 'gradient'}
      size={size ?? 'xl'}
      onClick={signupRedirect}
--- a/web/components/optional-profile-form.tsx
+++ b/web/components/optional-profile-form.tsx
@@ -402,6 +402,7 @@ export const OptionalProfileUserForm = (props: {
              <span>{t('profile.optional.feet', 'Feet')}</span>
              <Input
                type="number"
+                data-testid='height-feet'
                onChange={(e) => {
                  if (e.target.value === '') {
                    setHeightFeet(undefined)
@@ -423,6 +424,7 @@ export const OptionalProfileUserForm = (props: {
              <span>{t('profile.optional.inches', 'Inches')}</span>
              <Input
                type="number"
+                data-testid='height-inches'
                onChange={(e) => {
                  if (e.target.value === '') {
                    setHeightInches(undefined)
@@ -449,6 +451,7 @@ export const OptionalProfileUserForm = (props: {
              <span>{t('profile.optional.centimeters', 'Centimeters')}</span>
              <Input
                type="number"
+                data-testid='height-centimeters'
                onChange={(e) => {
                  if (e.target.value === '') {
                    setHeightFeet(undefined)
@@ -520,6 +523,7 @@ export const OptionalProfileUserForm = (props: {
            <Col>
              <span>{t('common.min', 'Min')}</span>
              <Select
+                data-testid='pref-age-min'
                value={profile['pref_age_min'] ?? ''}
                onChange={(e) => {
                  const newMin = e.target.value ? Number(e.target.value) : 18
@@ -539,6 +543,7 @@ export const OptionalProfileUserForm = (props: {
            <Col>
              <span>{t('common.max', 'Max')}</span>
              <Select
+                data-testid='pref-age-max'
                value={profile['pref_age_max'] ?? ''}
                onChange={(e) => {
                  const newMax = e.target.value ? Number(e.target.value) : 100
@@ -607,22 +612,23 @@ export const OptionalProfileUserForm = (props: {

            <Category title={t('profile.optional.category.family', 'Family')}/>

-            <Col className={clsx(colClassName)}>
-              <label className={clsx(labelClassName)}>
-                {t('profile.optional.num_kids', 'Current number of kids')}
-              </label>
-              <Input
-                type="number"
-                onChange={(e) => {
-                  const value =
-                    e.target.value === '' ? null : Number(e.target.value)
-                  setProfile('has_kids', value)
-                }}
-                className={'w-20'}
-                min={0}
-                value={profile['has_kids'] ?? undefined}
-              />
-            </Col>
+          <Col className={clsx(colClassName)}>
+            <label className={clsx(labelClassName)}>
+              {t('profile.optional.num_kids', 'Current number of kids')}
+            </label>
+            <Input
+              data-testid='current-number-of-kids'
+              type="number"
+              onChange={(e) => {
+                const value =
+                  e.target.value === '' ? null : Number(e.target.value)
+                setProfile('has_kids', value)
+              }}
+              className={'w-20'}
+              min={0}
+              value={profile['has_kids'] ?? undefined}
+            />
+          </Col>

            <Col className={clsx(colClassName)}>
              <label className={clsx(labelClassName)}>
@@ -695,6 +701,7 @@ export const OptionalProfileUserForm = (props: {
            {t('profile.optional.university', 'University')}
          </label>
          <Input
+            data-testid='university'
            type="text"
            onChange={(e) => setProfile('university', e.target.value)}
            className={'w-52'}
@@ -715,6 +722,7 @@ export const OptionalProfileUserForm = (props: {
              : t('profile.optional.job_title', 'Job title')}
          </label>
          <Input
+            data-testid='job-title'
            type="text"
            onChange={(e) => setProfile('occupation_title', e.target.value)}
            className={'w-52'}
@@ -727,6 +735,7 @@ export const OptionalProfileUserForm = (props: {
            {t('profile.optional.company', 'Company')}
          </label>
          <Input
+            data-testid='company'
            type="text"
            onChange={(e) => setProfile('company', e.target.value)}
            className={'w-52'}
@@ -759,6 +768,7 @@ export const OptionalProfileUserForm = (props: {
          />
          <p>{t('profile.optional.details', 'Details')}</p>
          <Input
+            data-testid='political-belief-details'
            type="text"
            onChange={(e) => setProfile('political_details', e.target.value)}
            className={'w-full sm:w-96'}
@@ -782,6 +792,7 @@ export const OptionalProfileUserForm = (props: {
          />
          <p>{t('profile.optional.details', 'Details')}</p>
          <Input
+            data-testid='religious-belief-details'
            type="text"
            onChange={(e) => setProfile('religious_beliefs', e.target.value)}
            className={'w-full sm:w-96'}
@@ -886,6 +897,7 @@ export const OptionalProfileUserForm = (props: {
            )}
          </label>
          <Input
+            data-testid='alcohol-consumed-per-month'
            type="number"
            onChange={(e) => {
              const value =
@@ -1123,7 +1135,7 @@ const Big5Slider = (props: {
    <div>
      <div className="mb-1 flex items-center justify-between text-sm text-ink-600">
        <span>{label}</span>
-        <span className="font-semibold text-ink-700">{Math.round(value)}</span>
+        <span className="font-semibold text-ink-700" data-testid={`${label.toLowerCase()}-value`}>{Math.round(value)}</span>
      </div>
      <Slider
        amount={value}
--- a/web/components/profile-about.tsx
+++ b/web/components/profile-about.tsx
@@ -42,8 +42,9 @@ export function AboutRow(props: {
  text?: string | null | string[]
  preText?: string
  suffix?: string | null
+  testId?: string
 }) {
-  const {icon, text, preText, suffix} = props
+  const {icon, text, preText, suffix, testId} = props
  const t = useT()
  if (!text?.length && !preText && !suffix) {
    return <></>
@@ -65,7 +66,7 @@ export function AboutRow(props: {
    formattedText += formattedText ? ` (${suffix})` : suffix
  }
  return (
-    <Row className="items-center gap-2">
+    <Row className="items-center gap-2" data-testid={testId}>
      <div className="text-ink-600 w-5">{icon}</div>
      <div>{formattedText}</div>
    </Row>
@@ -101,6 +102,7 @@ export default function ProfileAbout(props: {
            .filter(Boolean)
            .sort((a, b) => a.localeCompare(b, locale)) as string[]
        }
+        testId='profile-about-work-area'
      />
      <AboutRow
        icon={<RiScales3Line className="h-5 w-5"/>}
@@ -108,6 +110,7 @@ export default function ProfileAbout(props: {
          t(`profile.political.${belief}`, INVERTED_POLITICAL_CHOICES[belief])
        )}
        suffix={profile.political_details}
+        testId='profile-about-political'
      />
      <AboutRow
        icon={<PiHandsPrayingBold className="h-5 w-5"/>}
@@ -115,6 +118,7 @@ export default function ProfileAbout(props: {
          t(`profile.religion.${belief}`, INVERTED_RELIGION_CHOICES[belief])
        )}
        suffix={profile.religious_beliefs}
+        testId='profile-about-religious'
      />
      <AboutRow
        icon={<FaStar className="h-5 w-5"/>}
@@ -124,6 +128,7 @@ export default function ProfileAbout(props: {
            .filter(Boolean)
            .sort((a, b) => a.localeCompare(b, locale)) as string[]
        }
+        testId='profile-about-interests'
      />
      <AboutRow
        icon={<FaHandsHelping className="h-5 w-5"/>}
@@ -133,10 +138,12 @@ export default function ProfileAbout(props: {
            .filter(Boolean)
            .sort((a, b) => a.localeCompare(b, locale)) as string[]
        }
+        testId='profile-about-causes'
      />
      <AboutRow
        icon={<BsPersonVcard className="h-5 w-5"/>}
        text={profile.mbti ? INVERTED_MBTI_CHOICES[profile.mbti] : null}
+        testId='profile-about-personality'
      />
      <Big5Traits profile={profile}/>
      <AboutRow
@@ -144,6 +151,7 @@ export default function ProfileAbout(props: {
        text={profile.ethnicity
          ?.filter((r) => r !== 'other')
          ?.map((r: any) => t(`profile.race.${r}`, convertRace(r)))}
+        testId='profile-about-ethnicity'
      />
      <Smoker profile={profile}/>
      <Drinks profile={profile}/>
@@ -152,12 +160,14 @@ export default function ProfileAbout(props: {
        text={profile.diet?.map((e) =>
          t(`profile.diet.${e}`, INVERTED_DIET_CHOICES[e])
        )}
+        testId='profile-about-diet'
      />
      <AboutRow
        icon={<MdLanguage className="h-5 w-5"/>}
        text={profile.languages?.map((v) =>
          t(`profile.language.${v}`, INVERTED_LANGUAGE_CHOICES[v])
        )}
+        testId='profile-about-languages'
      />
      <HasKids profile={profile}/>
      <WantsKids profile={profile}/>
@@ -215,6 +225,7 @@ function Seeking(props: { profile: Profile }) {
    <AboutRow
      icon={<PiMagnifyingGlassBold className="h-5 w-5"/>}
      text={`${seekingGenderText} ${ageRangeText}`}
+      testId='profile-about-seeking'
    />
  )
 }
@@ -227,6 +238,7 @@ function RelationshipType(props: { profile: Profile }) {
    <AboutRow
      icon={<BsPersonHeart className="h-5 w-5"/>}
      text={seekingGenderText}
+      testId='profile-about-relationship-type'
    />
  )
 }
@@ -247,6 +259,7 @@ function RelationshipStatus(props: { profile: Profile }) {
          INVERTED_RELATIONSHIP_STATUS_CHOICES[v]
        )
      )}
+      testId='profile-about-relationship-status'
    />
  )
 }
@@ -274,7 +287,11 @@ function Education(props: { profile: Profile }) {
  if (text.length === 0) {
    return <></>
  }
-  return <AboutRow icon={<LuGraduationCap className="h-5 w-5"/>} text={text}/>
+  return <AboutRow
+    icon={<LuGraduationCap className="h-5 w-5"/>}
+    text={text}
+    testId='profile-about-education'
+  />
 }

 function Occupation(props: { profile: Profile }) {
@@ -295,6 +312,7 @@ function Occupation(props: { profile: Profile }) {
    <AboutRow
      icon={<LuBriefcase className="h-5 w-5"/>}
      text={occupationText}
+      testId='profile-about-occupation'
    />
  )
 }
@@ -316,6 +334,7 @@ function Smoker(props: { profile: Profile }) {
    <AboutRow
      icon={<LuCigaretteOff className="h-5 w-5"/>}
      text={t('profile.doesnt_smoke', "Doesn't smoke")}
+      testId='profile-about-smoker'
    />
  )
 }
@@ -330,6 +349,7 @@ function Drinks(props: { profile: Profile }) {
      <AboutRow
        icon={<MdNoDrinks className="h-5 w-5"/>}
        text={t('profile.doesnt_drink', "Doesn't drink")}
+        testId='profile-about-not-drink'
      />
    )
  }
@@ -343,6 +363,7 @@ function Drinks(props: { profile: Profile }) {
            count: drinksPerMonth,
          })
      }
+      testId='profile-about-drinker'
    />
  )
 }
@@ -367,6 +388,7 @@ function WantsKids(props: { profile: Profile }) {
    <AboutRow
      icon={<MdOutlineChildFriendly className="h-5 w-5"/>}
      text={wantsKidsText}
+      testId='profile-about-wants-kids'
    />
  )
 }
@@ -382,6 +404,7 @@ function LastOnline(props: { lastOnlineTime?: string }) {
      text={t('profile.last_online', 'Active {time}', {
        time: fromNow(lastOnlineTime, true, t, locale),
      })}
+      testId='profile-about-last-online'
    />
  )
 }
@@ -432,7 +455,7 @@ function Big5Traits(props: { profile: Profile }) {
  }

  return (
-    <Col className="gap-2">
+    <Col className="gap-2" data-testid='profile-about-big-five-personality-traits'>
      <div className="text-ink-600 font-medium">
        {t('profile.big5', 'Big Five personality traits')}:
      </div>
@@ -494,7 +517,13 @@ function HasKids(props: { profile: Profile }) {
    ) : (
      faChild
    )
-  return <AboutRow icon={icon} text={hasKidsText}/>
+  return (
+    <AboutRow
+      icon={icon}
+      text={hasKidsText}
+      testId={'profile-about-has-kids'}
+    />
+  )
 }

 export const formatProfileValue = (
--- a/web/components/profile/profile-header.tsx
+++ b/web/components/profile/profile-header.tsx
@@ -68,7 +68,7 @@ export default function ProfileHeader(props: {
      <Row className={clsx('flex-wrap justify-between gap-2 py-1')}>
        <Row className="items-center gap-1">
          <Col className="gap-1">
-            <Row className="items-center gap-1 text-xl">
+            <Row className="items-center gap-1 text-xl" data-testid="profile-display-name-age">
              {/*{!isCurrentUser && <OnlineIcon last_online_time={userActivity?.last_online_time}/>}*/}
              <span>
                {simpleView ? (
@@ -92,6 +92,7 @@ export default function ProfileHeader(props: {
            />
            <Tooltip text={t('more_options_user.edit_profile', 'Edit profile')} noTap>
              <Button
+                data-testid="profile-edit"
                color={'gray-outline'}
                onClick={() => {
                  track('editprofile', {userId: user.id})
@@ -103,7 +104,7 @@ export default function ProfileHeader(props: {
              </Button>
            </Tooltip>

-            <Tooltip text={t('more_options_user.profile_options', 'Profile options')} noTap>
+            <Tooltip text={t('more_options_user.profile_options', 'Profile options')} noTap testId='profile-options'>
              <DropdownMenu
                menuWidth={'w-52'}
                icon={
--- a/web/components/profile/profile-primary-info.tsx
+++ b/web/components/profile/profile-primary-info.tsx
@@ -19,7 +19,10 @@ export default function ProfilePrimaryInfo(props: { profile: Profile }) {
      ? profile.region_code
      : profile.country
  return (
-    <Row className="text-ink-700 gap-4 text-sm">
+    <Row
+      className="text-ink-700 gap-4 text-sm"
+      data-testid="profile-gender-location-height-inches"
+    >
      {profile.city && (
        <IconWithInfo
          text={`${profile.city ?? ''}, ${stateOrCountry ?? ''}`}
--- a/web/components/user/user-handles.tsx
+++ b/web/components/user/user-handles.tsx
@@ -40,6 +40,7 @@ export function UserHandles(props: { links: Socials; className?: string }) {
        'text-ink-400 flex-wrap items-center gap-2 sm:gap-x-4',
        className
      )}
+      data-testid="profile-social-media-accounts"
    >
      {display.map(({platform, label, url}) => (
        <a key={platform} target="_blank" href={url}>
--- a/web/components/widgets/add-photos.tsx
+++ b/web/components/widgets/add-photos.tsx
@@ -58,7 +58,7 @@ export const AddPhotosWidget = (props: {
        disabled={uploadingImages}
      />
      <Row className="flex-wrap gap-2">
-        <div className="relative">
+        <div className="relative" data-testid='profile-upload-photo'>
          <label
            className={clsx(
              'bg-canvas-50 hover:bg-ink-300 text-ink-0 dark:text-ink-500 hover:dark:text-ink-600 flex h-[200px] w-[200px] cursor-pointer flex-col items-center rounded-md transition-colors',
--- a/web/components/widgets/tooltip.tsx
+++ b/web/components/widgets/tooltip.tsx
@@ -25,6 +25,7 @@ export function Tooltip(props: {
  noFade?: boolean
  hasSafePolygon?: boolean
  suppressHydrationWarning?: boolean
+  testId?: string
 }) {
  const {
    text,
@@ -34,6 +35,7 @@ export function Tooltip(props: {
    noFade,
    hasSafePolygon,
    suppressHydrationWarning,
+    testId
  } = props

  const arrowRef = useRef(null)
@@ -141,6 +143,7 @@ export function Tooltip(props: {
  return text ? (
    <>
      <span
+        data-testid={testId}
        suppressHydrationWarning={suppressHydrationWarning}
        className={className}
        ref={reference}