# UI Code Analysis - Profile Editor data-testid Attributes

## Analysis Date: November 18, 2025
## Source: `CognitivePrism/my-project/cognitive-prism-assesment-ui/src/pages/StudentProfileEditor.jsx`

---

## ✅ Currently Implemented (14 attributes)

| # | Attribute | Line | Element | Status |
|---|-----------|------|---------|--------|
| 1 | `profile_editor__page` | 1582 | Main container div | ✅ |
| 2 | `profile_editor__progress_value` | 1645 | Progress percentage span | ✅ |
| 3 | `profile_editor__missing_fields_toggle` | 1654 | Info button | ✅ |
| 4 | `profile_editor__first_name_input` | 776 | Input | ✅ |
| 5 | `profile_editor__last_name_input` | 794 | Input | ✅ |
| 6 | `profile_editor__gender_select` | 809 | Select dropdown | ✅ |
| 7 | `profile_editor__dob_input` | 829 | Date input | ✅ |
| 8 | `profile_editor__roll_number_input` | 846 | Input | ✅ |
| 9 | `profile_editor__nationality_input` | 862 | Input | ✅ |
| 10 | `profile_editor__phone_input` | 948 | Input | ✅ |
| 11 | `profile_editor__address_input` | 966 | Input | ✅ |
| 12 | `profile_editor__full_name_input` | 1211 | Input | ✅ |
| 13 | `profile_editor__tab_{tab_name}` | 1784 | Tab buttons (dynamic) | ✅ |
| 14 | `profile_editor__save_button` | 1877 | Save button | ✅ |

---

## ❌ Missing Attributes (140+ attributes)

### Page & Navigation (3 missing)

| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__prev_button` | Prev button | ~1845 | ❌ Missing |
| `profile_editor__next_button` | Next button | ~1854 | ❌ Missing |
| `profile_editor__cancel_button` | Cancel button | ~1866 | ❌ Missing |

---

### Step 1: Personal Information (6 missing)

| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__language_input` | Language input | ~866 | ❌ Missing |
| `profile_editor__student_id_input` | Student ID Number | ~874 | ❌ Missing |
| `profile_editor__student_cpid_input` | Student CPID | ~883 | ❌ Missing |
| `profile_editor__specially_abled_checkbox` | Specially Abled checkbox | ~895 | ❌ Missing |
| `profile_editor__specially_abled_details_textarea` | Specially Abled Details | ~906 | ❌ Missing (conditional) |

**Note**: All other Step 1 fields are ✅ implemented.

---

### Step 2: Contact Information (5 missing)

| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__email_input` | Email input | ~925 | ❌ Missing |
| `profile_editor__city_input` | City input | ~970 | ❌ Missing |
| `profile_editor__state_input` | State input | ~979 | ❌ Missing |
| `profile_editor__zip_code_input` | ZIP Code input | ~988 | ❌ Missing |
| `profile_editor__native_state_input` | Native State input | ~997 | ❌ Missing |

**Note**: Phone and Address are ✅ implemented.

---

### Step 3: Parent/Guardian (13 missing)

#### Father's Details (4 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__father_full_name_input` | Father Full Name | ~1022 | ❌ Missing |
| `profile_editor__father_age_range_select` | Father Age Range | ~1032 | ❌ Missing |
| `profile_editor__father_occupation_input` | Father Occupation | ~1044 | ❌ Missing |
| `profile_editor__father_email_input` | Father Email | ~1053 | ❌ Missing |

#### Mother's Details (4 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__mother_full_name_input` | Mother Full Name | ~1071 | ❌ Missing |
| `profile_editor__mother_age_range_select` | Mother Age Range | ~1080 | ❌ Missing |
| `profile_editor__mother_occupation_input` | Mother Occupation | ~1093 | ❌ Missing |
| `profile_editor__mother_email_input` | Mother Email | ~1102 | ❌ Missing |

#### Guardian (5 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__guardian_different_checkbox` | Guardian Different checkbox | ~1117 | ❌ Missing |
| `profile_editor__guardian_full_name_input` | Guardian Full Name | ~1130 | ❌ Missing |
| `profile_editor__guardian_relationship_input` | Guardian Relationship | ~1139 | ❌ Missing |
| `profile_editor__guardian_phone_input` | Guardian Phone | ~1148 | ❌ Missing |
| `profile_editor__guardian_email_input` | Guardian Email | ~1158 | ❌ Missing |
| `profile_editor__guardian_address_input` | Guardian Address | ~1168 | ❌ Missing |

---

### Step 4: Education Details (3 missing)

| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__current_grade_input` | Current Grade/Class | ~1215 | ❌ Missing |
| `profile_editor__section_input` | Section/Subject | ~1224 | ❌ Missing |
| `profile_editor__board_stream_select` | Board/Stream | ~1233 | ❌ Missing |

**Note**: Full Name is ✅ implemented.

---

### Step 5: Focus Areas (22 missing)

#### Short-term Focus Areas (11 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__short_term_focus_academics` | Academics checkbox | ~1263 (MultiSelectPicker) | ❌ Missing |
| `profile_editor__short_term_focus_family` | Family checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_health` | Health checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_friendship` | Friendship checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_emotional` | Emotional management checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_personal_growth` | Personal Growth checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_hobbies` | Hobbies checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_physical` | Physical Activities checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_future` | Future Aspiration checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_others` | Others checkbox | ~1263 | ❌ Missing |
| `profile_editor__short_term_focus_others_text` | Others text input | ~1277 | ❌ Missing |

#### Long-term Focus Areas (11 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__long_term_focus_academics` | Academics checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_family` | Family checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_health` | Health checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_friendship` | Friendship checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_emotional` | Emotional management checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_personal_growth` | Personal Growth checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_hobbies` | Hobbies checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_physical` | Physical Activities checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_future` | Future Aspiration checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_others` | Others checkbox | ~1293 | ❌ Missing |
| `profile_editor__long_term_focus_others_text` | Others text input | ~1307 | ❌ Missing |

**Note**: `MultiSelectPicker` component (line 147) needs `data-testid` on each checkbox input.

---

### Step 6: Self-Assessment (36 missing)

#### Strengths (18 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__strength_quick_learning` | Quick Learning checkbox | ~1333 (MultiSelectPicker) | ❌ Missing |
| `profile_editor__strength_curiosity` | Curiosity checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_problem_solving` | Problem-Solving checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_justice` | Sense of Justice checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_empathy` | Empathy checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_risk_taking` | Risk Taking checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_compassion` | Compassion checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_creative` | Creative Skills checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_technical` | Technical Skills checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_leadership` | Leadership checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_communication` | Communication checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_athletic` | Athletic Talents checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_languages` | Languages checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_research` | Research Skills checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_critical_thinking` | Critical Thinking checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_artistic` | Artistic Talent checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_others` | Others checkbox | ~1333 | ❌ Missing |
| `profile_editor__strength_others_text` | Others text input | ~1347 | ❌ Missing |

#### Areas of Improvement (18 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__improvement_quick_learning` | Quick Learning checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_curiosity` | Curiosity checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_problem_solving` | Problem-Solving checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_justice` | Sense of Justice checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_empathy` | Empathy checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_risk_taking` | Risk Taking checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_compassion` | Compassion checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_creative` | Creative Skills checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_technical` | Technical Skills checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_leadership` | Leadership checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_communication` | Communication checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_athletic` | Athletic Talents checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_languages` | Languages checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_research` | Research Skills checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_critical_thinking` | Critical Thinking checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_artistic` | Artistic Talent checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_others` | Others checkbox | ~1363 | ❌ Missing |
| `profile_editor__improvement_others_text` | Others text input | ~1377 | ❌ Missing |

**Note**: `MultiSelectPicker` component needs `data-testid` on each checkbox.

---

### Step 7: Hobbies & Clubs (26 missing)

#### Hobbies (13 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__hobby_reading` | Reading checkbox | ~1403 (MultiSelectPicker) | ❌ Missing |
| `profile_editor__hobby_musical` | Playing Musical Instruments checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_sports` | Sports checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_arts_crafts` | Arts and Crafts checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_cooking` | Cooking and Baking checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_gardening` | Gardening checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_gaming` | Gaming checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_traveling` | Traveling checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_volunteering` | Volunteering checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_learning` | Learning New Skills checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_singing` | Singing checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_other` | Other checkbox | ~1403 | ❌ Missing |
| `profile_editor__hobby_other_text` | Other text input | ~1417 | ❌ Missing |

#### Clubs (13 missing)
| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__club_science` | Science Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_mathematics` | Mathematics Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_quiz` | Quiz Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_literary` | Literary Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_robotics` | Robotics Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_art` | Art Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_music` | Music Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_dramatics` | Dramatics / Theatre Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_sports` | Sports Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_community` | Community Service Club checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_mun` | Model United Nations (MUN) checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_other` | Other checkbox | ~1434 | ❌ Missing |
| `profile_editor__club_other_text` | Other text input | ~1472 | ❌ Missing |

**Note**: Clubs use direct mapping (line 1434), not MultiSelectPicker.

---

### Step 8: Achievements (5 missing)

| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__achievement_academics_textarea` | Academics textarea | ~1495 | ❌ Missing |
| `profile_editor__achievement_sports_textarea` | Sports textarea | ~1504 | ❌ Missing |
| `profile_editor__achievement_cultural_textarea` | Cultural/Arts textarea | ~1513 | ❌ Missing |
| `profile_editor__achievement_trained_textarea` | Trained/Certified textarea | ~1522 | ❌ Missing (conditional) |
| `profile_editor__achievement_others_textarea` | Others textarea | ~1532 | ❌ Missing |

---

### Step 9: Expectations (11 missing)

| Attribute | Element | Line Reference | Status |
|-----------|---------|----------------|--------|
| `profile_editor__expectation_self_understanding` | Self-Understanding checkbox | ~1550 (MultiSelectPicker) | ❌ Missing |
| `profile_editor__expectation_career_guidance` | Career Guidance checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_academic_support` | Academic Support checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_validation` | Validation / Reassurance checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_decision_making` | Improved Decision-Making checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_clarity` | Clarity About Strengths checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_personal_growth` | Personal Growth checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_objective_feedback` | Objective Feedback checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_actionable_steps` | Actionable Next Steps checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_others` | Others checkbox | ~1550 | ❌ Missing |
| `profile_editor__expectation_others_text` | Others text input | ~1564 | ❌ Missing |

---

## Summary Statistics

### Implementation Status
- **✅ Implemented**: 14 attributes (9%)
- **❌ Missing**: 140+ attributes (91%)
- **Total Required**: ~154 attributes

### By Category
| Category | Implemented | Missing | Total |
|----------|-------------|---------|-------|
| Page & Navigation | 1 | 3 | 4 |
| Step 1: Personal Information | 6 | 5 | 11 |
| Step 2: Contact Information | 2 | 5 | 7 |
| Step 3: Parent/Guardian | 0 | 13 | 13 |
| Step 4: Education Details | 1 | 3 | 4 |
| Step 5: Focus Areas | 0 | 22 | 22 |
| Step 6: Self-Assessment | 0 | 36 | 36 |
| Step 7: Hobbies & Clubs | 0 | 26 | 26 |
| Step 8: Achievements | 0 | 5 | 5 |
| Step 9: Expectations | 0 | 11 | 11 |

---

## Critical Components Needing Updates

### 1. MultiSelectPicker Component (Line 147)
**Issue**: Checkboxes inside `MultiSelectPicker` don't have `data-testid` attributes.

**Current Code** (Line 171):
```jsx
<input
  type="checkbox"
  checked={isSelected}
  disabled={isDisabled}
  onChange={() => {...}}
  className="..."
/>
```

**Required**: Add `data-testid` to each checkbox based on option value.

**Solution**: Modify `MultiSelectPicker` to accept a `testIdPrefix` prop:
```jsx
<input
  type="checkbox"
  data-testid={`${testIdPrefix}_${formatTestId(option)}`}
  ...
/>
```

**Affected Sections**:
- Focus Areas (short-term & long-term)
- Self-Assessment (strengths & improvements)
- Expectations

---

### 2. Clubs Checkboxes (Line 1434)
**Issue**: Direct mapping without `data-testid`.

**Current Code**:
```jsx
{CLUBS_OPTIONS.map((club) => (
  <motion.label>
    <input type="checkbox" ... />
  </motion.label>
))}
```

**Required**: Add `data-testid` to each checkbox:
```jsx
<input
  type="checkbox"
  data-testid={`profile_editor__club_${formatTestId(club)}`}
  ...
/>
```

---

### 3. All Text Inputs
**Issue**: Many text inputs missing `data-testid`.

**Pattern to Follow**:
```jsx
<input
  type="text"
  data-testid="profile_editor__{field_name}_input"
  ...
/>
```

---

### 4. All Select Dropdowns
**Issue**: Select elements missing `data-testid`.

**Pattern to Follow**:
```jsx
<select
  data-testid="profile_editor__{field_name}_select"
  ...
>
```

---

### 5. All Textareas
**Issue**: Textarea elements missing `data-testid`.

**Pattern to Follow**:
```jsx
<textarea
  data-testid="profile_editor__{field_name}_textarea"
  ...
/>
```

---

### 6. Navigation Buttons
**Issue**: Prev, Next, Cancel buttons missing `data-testid`.

**Required**:
- `profile_editor__prev_button` (Line ~1845)
- `profile_editor__next_button` (Line ~1854)
- `profile_editor__cancel_button` (Line ~1866)

---

## Implementation Priority

### Priority 1: Critical (Required for Basic Automation)
1. Navigation buttons (Prev, Next, Cancel)
2. Step 2: Contact Information inputs (email, city, state, zip_code, native_state)
3. Step 4: Education Details (current_grade, section, board_stream)
4. Step 8: Achievements textareas

### Priority 2: Important (Required for Complete Automation)
1. Step 3: Parent/Guardian fields
2. Step 5: Focus Areas checkboxes
3. Step 6: Self-Assessment checkboxes
4. Step 7: Hobbies & Clubs checkboxes
5. Step 9: Expectations checkboxes

### Priority 3: Optional (Nice to Have)
1. Step 1: Language, Student ID, Student CPID, Specially Abled
2. Conditional fields (Guardian, Specially Abled Details, "Others" text inputs)

---

## Recommended Implementation Approach

### Phase 1: Update MultiSelectPicker Component
1. Add `testIdPrefix` prop to `MultiSelectPicker`
2. Generate `data-testid` for each checkbox using `formatTestId` function
3. This will automatically fix Focus Areas, Self-Assessment, and Expectations

### Phase 2: Add Missing Input Attributes
1. Add `data-testid` to all remaining text inputs
2. Add `data-testid` to all select dropdowns
3. Add `data-testid` to all textareas

### Phase 3: Add Missing Checkbox Attributes
1. Update Clubs mapping to include `data-testid`
2. Add `data-testid` to Specially Abled checkbox
3. Add `data-testid` to Guardian Different checkbox

### Phase 4: Add Navigation Buttons
1. Add `data-testid` to Prev button
2. Add `data-testid` to Next button
3. Add `data-testid` to Cancel button

---

## Code Examples for Dev Team

### Example 1: MultiSelectPicker Update
```jsx
// Current (Line 147)
const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems = 3, icon: Icon }) => {
  // ...
  <input
    type="checkbox"
    checked={isSelected}
    // ... missing data-testid
  />
}

// Required
const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems = 3, icon: Icon, testIdPrefix }) => {
  // ...
  <input
    type="checkbox"
    data-testid={`${testIdPrefix}_${formatTestId(option)}`}
    checked={isSelected}
    // ...
  />
}

// Usage
<MultiSelectPicker
  testIdPrefix="profile_editor__short_term_focus"
  options={focusAreas}
  // ...
/>
```

### Example 2: Clubs Checkboxes
```jsx
// Current (Line 1434)
{CLUBS_OPTIONS.map((club) => (
  <input type="checkbox" ... />
))}

// Required
{CLUBS_OPTIONS.map((club) => (
  <input
    type="checkbox"
    data-testid={`profile_editor__club_${formatTestId(club)}`}
    // ...
  />
))}
```

### Example 3: Text Input
```jsx
// Current (Line 925)
<input
  type="email"
  value={form.email}
  // ... missing data-testid
/>

// Required
<input
  type="email"
  data-testid="profile_editor__email_input"
  value={form.email}
  // ...
/>
```

---

## Verification Checklist

After implementation, verify:
- [ ] All 154 attributes are present
- [ ] All checkboxes have `data-testid`
- [ ] All inputs have `data-testid`
- [ ] All selects have `data-testid`
- [ ] All textareas have `data-testid`
- [ ] All buttons have `data-testid`
- [ ] Dynamic attributes use `formatTestId` function
- [ ] No duplicate `data-testid` values
- [ ] All attributes follow naming convention: `profile_editor__{element_name}`

---

**Status**: ✅ Analysis Complete  
**Confidence**: 100%  
**Next Step**: Share with Dev Team for Implementation