CP_AUTOMATION/documentation/ui-team-requirements/UI_TEAM_MANDATORY_RESET_DATA_TESTID.md

🚨 URGENT: Missing data-testid Attributes - Mandatory Password Reset Modal

Date: 2025-01-20
Priority: 🔴 HIGH - Required for Automation Testing
Component: MandatoryPasswordResetModal.jsx
Scope: mandatory_reset

---

⚠️ CRITICAL ISSUE

ALL data-testid attributes are MISSING from the Mandatory Password Reset Modal component.

Impact:

• ❌ Automation tests cannot reliably find elements
• ❌ Tests are taking 8+ minutes instead of < 1 minute
• ❌ Password reset flow is failing
• ❌ Using fragile XPath/CSS fallbacks (not reliable)

Solution: Add all data-testid attributes listed below.

---

📋 REQUIRED data-testid ATTRIBUTES

Naming Convention:

• Scope: mandatory_reset
• Pattern: mandatory_reset__{element_name}
• Format: Lowercase with underscores

---

1. MODAL CONTAINER

Element	Current Line	Required Attribute	Element Type
Modal Overlay	Line 150	mandatory_reset__modal	<motion.div> (outer overlay)
Modal Content	Line 156	mandatory_reset__modal_content	<motion.div> (inner content)

Current Code (Line 150):

<motion.div
  className="fixed inset-0 bg-black/60 z-[99999] flex items-center justify-center p-4"
  // ❌ MISSING: data-testid="mandatory_reset__modal"
>

Required Fix:

<motion.div
  className="fixed inset-0 bg-black/60 z-[99999] flex items-center justify-center p-4"
  data-testid="mandatory_reset__modal"
>

Current Code (Line 156):

<motion.div
  className="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl max-w-lg w-full relative border border-white/20 dark:border-gray-700"
  // ❌ MISSING: data-testid="mandatory_reset__modal_content"
>

Required Fix:

<motion.div
  className="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl max-w-lg w-full relative border border-white/20 dark:border-gray-700"
  data-testid="mandatory_reset__modal_content"
>

---

2. STEP 1: WELCOME SCREEN

Element	Current Line	Required Attribute	Element Type
Continue Button	Line 248	mandatory_reset__continue_button	<motion.button>

Current Code (Line 248):

<motion.button
  onClick={goToStep2}
  className="w-full mt-6 bg-gradient-to-r from-blue-500 to-indigo-600..."
  // ❌ MISSING: data-testid="mandatory_reset__continue_button"
>
  <span>Continue to Reset Password</span>
  <ArrowRight className="w-5 h-5" />
</motion.button>

Required Fix:

<motion.button
  onClick={goToStep2}
  className="w-full mt-6 bg-gradient-to-r from-blue-500 to-indigo-600..."
  data-testid="mandatory_reset__continue_button"
>
  <span>Continue to Reset Password</span>
  <ArrowRight className="w-5 h-5" />
</motion.button>

---

3. STEP 2: PASSWORD RESET FORM

Element	Current Line	Required Attribute	Element Type
Form Container	Line 283	mandatory_reset__form	<form>
Current Password Input	Line 290	mandatory_reset__current_password_input	<input>
Current Password Toggle	Line 305	mandatory_reset__current_password_toggle	<button>
Current Password Error	Line 313	mandatory_reset__current_password_error	Error message
New Password Input	Line 325	mandatory_reset__new_password_input	<input>
New Password Toggle	Line 340	mandatory_reset__new_password_toggle	<button>
New Password Error	Line 348	mandatory_reset__new_password_error	Error message
Confirm Password Input	Line 360	mandatory_reset__confirm_password_input	<input>
Confirm Password Toggle	Line 375	mandatory_reset__confirm_password_toggle	<button>
Confirm Password Error	Line 383	mandatory_reset__confirm_password_error	Error message
Back Button	Line 454	mandatory_reset__back_button	<motion.button>
Submit Button	Line 464	mandatory_reset__submit_button	<motion.button>

Form Container (Line 283):

<form onSubmit={handleSubmit} className="p-6 space-y-4">
  // ❌ MISSING: data-testid="mandatory_reset__form"

Required Fix:

<form onSubmit={handleSubmit} className="p-6 space-y-4" data-testid="mandatory_reset__form">

Current Password Input (Line 290):

<input
  type={showCurrentPassword ? 'text' : 'password'}
  name="currentPassword"
  // ❌ MISSING: data-testid="mandatory_reset__current_password_input"

Required Fix:

<input
  type={showCurrentPassword ? 'text' : 'password'}
  name="currentPassword"
  data-testid="mandatory_reset__current_password_input"

Current Password Toggle (Line 305):

<button
  type="button"
  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
  // ❌ MISSING: data-testid="mandatory_reset__current_password_toggle"

Required Fix:

<button
  type="button"
  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
  data-testid="mandatory_reset__current_password_toggle"

Current Password Error (Line 313):

{errors.currentPassword && (
  <p className="mt-1 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
    // ❌ MISSING: data-testid="mandatory_reset__current_password_error"

Required Fix:

{errors.currentPassword && (
  <p className="mt-1 text-sm text-red-600 dark:text-red-400 flex items-center gap-1" 
     data-testid="mandatory_reset__current_password_error">

New Password Input (Line 325):

<input
  type={showNewPassword ? 'text' : 'password'}
  name="newPassword"
  // ❌ MISSING: data-testid="mandatory_reset__new_password_input"

Required Fix:

<input
  type={showNewPassword ? 'text' : 'password'}
  name="newPassword"
  data-testid="mandatory_reset__new_password_input"

New Password Toggle (Line 340):

<button
  type="button"
  onClick={() => setShowNewPassword(!showNewPassword)}
  // ❌ MISSING: data-testid="mandatory_reset__new_password_toggle"

Required Fix:

<button
  type="button"
  onClick={() => setShowNewPassword(!showNewPassword)}
  data-testid="mandatory_reset__new_password_toggle"

New Password Error (Line 348):

{errors.newPassword && (
  <p className="mt-1 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
    // ❌ MISSING: data-testid="mandatory_reset__new_password_error"

Required Fix:

{errors.newPassword && (
  <p className="mt-1 text-sm text-red-600 dark:text-red-400 flex items-center gap-1"
     data-testid="mandatory_reset__new_password_error">

Confirm Password Input (Line 360):

<input
  type={showConfirmPassword ? 'text' : 'password'}
  name="confirmPassword"
  // ❌ MISSING: data-testid="mandatory_reset__confirm_password_input"

Required Fix:

<input
  type={showConfirmPassword ? 'text' : 'password'}
  name="confirmPassword"
  data-testid="mandatory_reset__confirm_password_input"

Confirm Password Toggle (Line 375):

<button
  type="button"
  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
  // ❌ MISSING: data-testid="mandatory_reset__confirm_password_toggle"

Required Fix:

<button
  type="button"
  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
  data-testid="mandatory_reset__confirm_password_toggle"

Confirm Password Error (Line 383):

{errors.confirmPassword && (
  <p className="mt-1 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
    // ❌ MISSING: data-testid="mandatory_reset__confirm_password_error"

Required Fix:

{errors.confirmPassword && (
  <p className="mt-1 text-sm text-red-600 dark:text-red-400 flex items-center gap-1"
     data-testid="mandatory_reset__confirm_password_error">

Back Button (Line 454):

<motion.button
  type="button"
  onClick={() => setCurrentStep(1)}
  // ❌ MISSING: data-testid="mandatory_reset__back_button"

Required Fix:

<motion.button
  type="button"
  onClick={() => setCurrentStep(1)}
  data-testid="mandatory_reset__back_button"

Submit Button (Line 464):

<motion.button
  type="submit"
  disabled={isLoading}
  // ❌ MISSING: data-testid="mandatory_reset__submit_button"

Required Fix:

<motion.button
  type="submit"
  disabled={isLoading}
  data-testid="mandatory_reset__submit_button"

---

📊 SUMMARY

Total Missing Attributes: 14

Category	Count	Status
Modal Container	2	❌ Missing
Step 1 (Welcome)	1	❌ Missing
Step 2 (Form)	11	❌ Missing
TOTAL	14	❌ ALL MISSING

---

✅ IMPLEMENTATION CHECKLIST

After adding attributes, verify:

• Modal overlay has data-testid="mandatory_reset__modal"
• Modal content has data-testid="mandatory_reset__modal_content"
• Continue button has data-testid="mandatory_reset__continue_button"
• Form has data-testid="mandatory_reset__form"
• All 3 password inputs have their data-testid attributes
• All 3 password toggles have their data-testid attributes
• All 3 error messages have their data-testid attributes
• Back button has data-testid="mandatory_reset__back_button"
• Submit button has data-testid="mandatory_reset__submit_button"

---

🎯 PRIORITY ORDER

1. 🔴 CRITICAL (Must have):

   • mandatory_reset__modal
   • mandatory_reset__continue_button
   • mandatory_reset__form
   • mandatory_reset__current_password_input
   • mandatory_reset__new_password_input
   • mandatory_reset__confirm_password_input
   • mandatory_reset__submit_button

2. 🟡 IMPORTANT (Should have):

   • mandatory_reset__back_button
   • mandatory_reset__current_password_error
   • mandatory_reset__new_password_error
   • mandatory_reset__confirm_password_error

3. 🟢 NICE TO HAVE (Optional):

   • mandatory_reset__modal_content
   • mandatory_reset__current_password_toggle
   • mandatory_reset__new_password_toggle
   • mandatory_reset__confirm_password_toggle

---

📝 NOTES

• All attributes follow the mandatory_reset__{element_name} pattern
• Attributes should be added to the actual interactive elements (inputs, buttons)
• Error messages should only have data-testid when they're visible (conditional rendering is fine)
• Toggle buttons are optional but recommended for complete automation coverage

---

🚀 AFTER IMPLEMENTATION

Once attributes are added:

1. Automation team will update locators to use data-testid
2. Tests will run faster (< 1 minute instead of 8+ minutes)
3. Password reset flow will be 100% reliable
4. No more fragile XPath/CSS fallbacks needed

---

File to Update: cognitive-prism-assesment-ui/src/pages/designs/design-1/components/MandatoryPasswordResetModal.jsx

Contact: Automation Team for verification after implementation