# 🚨 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):**
```jsx
<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:**
```jsx
<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):**
```jsx
<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:**
```jsx
<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):**
```jsx
<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:**
```jsx
<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):**
```jsx
<form onSubmit={handleSubmit} className="p-6 space-y-4">
  // ❌ MISSING: data-testid="mandatory_reset__form"
```

**Required Fix:**
```jsx
<form onSubmit={handleSubmit} className="p-6 space-y-4" data-testid="mandatory_reset__form">
```

### **Current Password Input (Line 290):**
```jsx
<input
  type={showCurrentPassword ? 'text' : 'password'}
  name="currentPassword"
  // ❌ MISSING: data-testid="mandatory_reset__current_password_input"
```

**Required Fix:**
```jsx
<input
  type={showCurrentPassword ? 'text' : 'password'}
  name="currentPassword"
  data-testid="mandatory_reset__current_password_input"
```

### **Current Password Toggle (Line 305):**
```jsx
<button
  type="button"
  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
  // ❌ MISSING: data-testid="mandatory_reset__current_password_toggle"
```

**Required Fix:**
```jsx
<button
  type="button"
  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
  data-testid="mandatory_reset__current_password_toggle"
```

### **Current Password Error (Line 313):**
```jsx
{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:**
```jsx
{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):**
```jsx
<input
  type={showNewPassword ? 'text' : 'password'}
  name="newPassword"
  // ❌ MISSING: data-testid="mandatory_reset__new_password_input"
```

**Required Fix:**
```jsx
<input
  type={showNewPassword ? 'text' : 'password'}
  name="newPassword"
  data-testid="mandatory_reset__new_password_input"
```

### **New Password Toggle (Line 340):**
```jsx
<button
  type="button"
  onClick={() => setShowNewPassword(!showNewPassword)}
  // ❌ MISSING: data-testid="mandatory_reset__new_password_toggle"
```

**Required Fix:**
```jsx
<button
  type="button"
  onClick={() => setShowNewPassword(!showNewPassword)}
  data-testid="mandatory_reset__new_password_toggle"
```

### **New Password Error (Line 348):**
```jsx
{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:**
```jsx
{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):**
```jsx
<input
  type={showConfirmPassword ? 'text' : 'password'}
  name="confirmPassword"
  // ❌ MISSING: data-testid="mandatory_reset__confirm_password_input"
```

**Required Fix:**
```jsx
<input
  type={showConfirmPassword ? 'text' : 'password'}
  name="confirmPassword"
  data-testid="mandatory_reset__confirm_password_input"
```

### **Confirm Password Toggle (Line 375):**
```jsx
<button
  type="button"
  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
  // ❌ MISSING: data-testid="mandatory_reset__confirm_password_toggle"
```

**Required Fix:**
```jsx
<button
  type="button"
  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
  data-testid="mandatory_reset__confirm_password_toggle"
```

### **Confirm Password Error (Line 383):**
```jsx
{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:**
```jsx
{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):**
```jsx
<motion.button
  type="button"
  onClick={() => setCurrentStep(1)}
  // ❌ MISSING: data-testid="mandatory_reset__back_button"
```

**Required Fix:**
```jsx
<motion.button
  type="button"
  onClick={() => setCurrentStep(1)}
  data-testid="mandatory_reset__back_button"
```

### **Submit Button (Line 464):**
```jsx
<motion.button
  type="submit"
  disabled={isLoading}
  // ❌ MISSING: data-testid="mandatory_reset__submit_button"
```

**Required Fix:**
```jsx
<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