# 🎯 COMPLETE DATA-TESTID ATTRIBUTES REQUIREMENT DOCUMENT
## For UI Development Team - Student Profile Editor

**Date:** 2025-01-20  
**Priority:** 🔴 **CRITICAL - BLOCKING AUTOMATION**  
**Status:** ❌ **ALL ATTRIBUTES MISSING**  
**Source:** Analysis of `StudentProfileEditor.jsx` (Lines 1-1822)

---

## 📋 **EXECUTIVE SUMMARY**

**ALL form fields, buttons, and interactive elements in `StudentProfileEditor.jsx` are MISSING `data-testid` attributes.**

This document provides the **COMPLETE LIST** of all required attributes with exact naming conventions based on **ACTUAL SOURCE CODE ANALYSIS**.

**Total Required:** ~200+ attributes

---

## 🔑 **NAMING PATTERN (MANDATORY)**

### **Pattern:**
```
profile_editor__{element_name}_{type}
```

### **Rules:**
1. **Scope:** Always `profile_editor`
2. **Separator:** Double underscore `__` between scope and element name
3. **Element Name:** Snake_case (lowercase with underscores)
4. **Type Suffix:** 
   - `_input` for text inputs
   - `_select` for dropdowns
   - `_textarea` for text areas
   - `_checkbox` for checkboxes
   - `_button` for buttons
   - `_tab` for tab buttons

### **Examples:**
- ✅ `profile_editor__first_name_input`
- ✅ `profile_editor__gender_select`
- ✅ `profile_editor__save_button`
- ❌ `profile_editor_first_name` (single underscore)
- ❌ `profileEditor__first_name` (camelCase)

---

## 📊 **TAB STRUCTURE (FROM SOURCE CODE)**

The profile editor has **9 sections** (tabs) defined in `sections` array (line 758):

1. **Personal Information** (Tab 0) - Includes Contact Information fields
2. **Contact Information** (Tab 1) - Separate tab in code
3. **Parent/Guardian** (Tab 2)
4. **Education Details** (Tab 3) - Displayed as "Institution Details" in UI
5. **Focus Areas** (Tab 4)
6. **Self-Assessment** (Tab 5)
7. **Hobbies & Clubs** (Tab 6)
8. **Achievements** (Tab 7)
9. **Expectations** (Tab 8)

**Note:** Based on DOM inspection, Contact Information may be combined with Personal Information in the actual UI. Please verify tab structure.

---

## 🚨 **MISSING ATTRIBUTES BY SECTION**

### **1. PAGE-LEVEL ELEMENTS**

| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Page container | `profile_editor__page` | Line 1516 | ❌ MISSING |
| Progress value display | `profile_editor__progress_value` | Line 1577 | ❌ MISSING |
| Missing fields toggle button | `profile_editor__missing_fields_toggle` | Line 1580-1586 | ❌ MISSING |
| Back button (header) | `profile_editor__back_button` | Line 1555-1560 | ❌ MISSING |

---

### **2. TAB NAVIGATION**

| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Tab container | `profile_editor__tabs_container` | Line 1693-1700 | ❌ MISSING |
| Tab scroll left button | `profile_editor__tabs_scroll_left_button` | Line 1683-1690 | ❌ MISSING |
| Tab scroll right button | `profile_editor__tabs_scroll_right_button` | Line 1729-1736 | ❌ MISSING |
| **Tab buttons** (9 tabs) | See below | Line 1702-1724 | ❌ MISSING |

#### **Tab Button Attributes (CRITICAL):**

The tab buttons are rendered in a loop (line 1702-1724). Each button needs a `data-testid` attribute.

**Format:** `profile_editor__tab_{formatTestId(section.title)}`

Where `formatTestId` function (if exists) converts:
- All non-alphanumeric characters to underscores
- Converts to lowercase
- Removes leading/trailing underscores

**Required Tab Attributes:**

| Tab Index | Tab Title | Required Attribute | Line Reference |
|-----------|-----------|-------------------|----------------|
| 0 | Personal Information | `profile_editor__tab_personal_information` | Line 1702-1724 |
| 1 | Contact Information | `profile_editor__tab_contact_information` | Line 1702-1724 |
| 2 | Parent/Guardian | `profile_editor__tab_parent_guardian` | Line 1702-1724 |
| 3 | Education Details | `profile_editor__tab_education_details` | Line 1702-1724 |
| 4 | Focus Areas | `profile_editor__tab_focus_areas` | Line 1702-1724 |
| 5 | Self-Assessment | `profile_editor__tab_self_assessment` | Line 1702-1724 |
| 6 | Hobbies & Clubs | `profile_editor__tab_hobbies_clubs` | Line 1702-1724 |
| 7 | Achievements | `profile_editor__tab_achievements` | Line 1702-1724 |
| 8 | Expectations | `profile_editor__tab_expectations` | Line 1702-1724 |

**Implementation Note:** Add `data-testid` attribute to the `<button>` element at line 1703:
```jsx
<button
  key={idx}
  onClick={() => setActiveTab(idx)}
  data-testid={`profile_editor__tab_${formatTestId(section.title)}`}  // ADD THIS
  className={...}
>
```

---

### **3. SECTION 1: PERSONAL INFORMATION** (Tab 0, Lines 764-864)

| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| First Name input | `profile_editor__first_name_input` | Line 767-773 | ❌ MISSING |
| Last Name input | `profile_editor__last_name_input` | Line 776-782 | ❌ MISSING |
| Gender select | `profile_editor__gender_select` | Line 785-794 | ❌ MISSING |
| Date of Birth input | `profile_editor__dob_input` | Line 797-802 | ❌ MISSING |
| Nationality input | `profile_editor__nationality_input` | Line 805-811 | ❌ MISSING |
| Language input | `profile_editor__language_input` | Line 814-820 | ❌ MISSING |
| Student ID Number input | `profile_editor__student_id_input` | Line 823-829 | ❌ MISSING |
| Student CPID input | `profile_editor__student_cpid_input` | Line 832-838 | ❌ MISSING |
| Specially Abled checkbox | `profile_editor__specially_abled_checkbox` | Line 843-848 | ❌ MISSING |
| Specially Abled Details textarea | `profile_editor__specially_abled_details_textarea` | Line 854-860 | ❌ MISSING |

**Note:** Roll Number field is mentioned in form state (line 446) but not found in Personal Information section. Please verify if it exists or should be added.

---

### **4. SECTION 2: CONTACT INFORMATION** (Tab 1, Lines 870-938)

| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Email input | `profile_editor__email_input` | Line 873-879 | ❌ MISSING |
| Phone input | `profile_editor__phone_input` | Line 882-889 | ❌ MISSING |
| Address input | `profile_editor__address_input` | Line 892-898 | ❌ MISSING |
| City input | `profile_editor__city_input` | Line 901-907 | ❌ MISSING |
| State input | `profile_editor__state_input` | Line 910-916 | ❌ MISSING |
| ZIP Code input | `profile_editor__zip_code_input` | Line 919-925 | ❌ MISSING |
| Native State input | `profile_editor__native_state_input` | Line 928-934 | ❌ MISSING |

---

### **5. SECTION 3: PARENT/GUARDIAN** (Tab 2, Lines 944-1118)

#### **Father's Details:**
| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Father Full Name input | `profile_editor__father_full_name_input` | Line 953-959 | ❌ MISSING |
| Father Age Range select | `profile_editor__father_age_range_select` | Line 962-972 | ❌ MISSING |
| Father Occupation input | `profile_editor__father_occupation_input` | Line 975-981 | ❌ MISSING |
| Father Email input | `profile_editor__father_email_input` | Line 984-990 | ❌ MISSING |

#### **Mother's Details:**
| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Mother Full Name input | `profile_editor__mother_full_name_input` | Line 1002-1008 | ❌ MISSING |
| Mother Age Range select | `profile_editor__mother_age_range_select` | Line 1011-1021 | ❌ MISSING |
| Mother Occupation input | `profile_editor__mother_occupation_input` | Line 1024-1030 | ❌ MISSING |
| Mother Email input | `profile_editor__mother_email_input` | Line 1033-1039 | ❌ MISSING |

#### **Guardian (If Different):**
| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Guardian Different checkbox | `profile_editor__guardian_different_checkbox` | Line 1047-1052 | ❌ MISSING |
| Guardian Full Name input | `profile_editor__guardian_full_name_input` | Line 1061-1067 | ❌ MISSING |
| Guardian Relationship input | `profile_editor__guardian_relationship_input` | Line 1070-1076 | ❌ MISSING |
| Guardian Phone input | `profile_editor__guardian_phone_input` | Line 1079-1086 | ❌ MISSING |
| Guardian Email input | `profile_editor__guardian_email_input` | Line 1089-1095 | ❌ MISSING |
| Guardian Address input | `profile_editor__guardian_address_input` | Line 1099-1105 | ❌ MISSING |

---

### **6. SECTION 4: EDUCATION DETAILS** (Tab 3, Lines 1125-1171)

| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Full Name input | `profile_editor__full_name_input` | Line 1128-1134 | ❌ MISSING |
| Current Grade/Class input | `profile_editor__current_grade_input` | Line 1137-1143 | ❌ MISSING |
| Section/Subject input | `profile_editor__section_input` | Line 1146-1152 | ❌ MISSING |
| Board/Stream select | `profile_editor__board_stream_select` | Line 1155-1167 | ❌ MISSING |

---

### **7. SECTION 5: FOCUS AREAS** (Tab 4, Lines 1177-1241)

#### **Short-term Focus Areas:**
The `MultiSelectPicker` component (line 1184-1194) renders checkboxes dynamically. Each checkbox needs a `data-testid` attribute.

**Format:** `profile_editor__short_term_focus__{formatTestId(option)}`

**Required Attributes (for each option in FOCUS_AREAS_ADOLESCENT/FOCUS_AREAS_ADULT):**

| Option | Required Attribute | Line Reference |
|--------|-------------------|----------------|
| 01. Academics | `profile_editor__short_term_focus__01_academics` | Line 174-186 |
| 02. Family | `profile_editor__short_term_focus__02_family` | Line 174-186 |
| 03. Health | `profile_editor__short_term_focus__03_health` | Line 174-186 |
| ... (all options) | `profile_editor__short_term_focus__{formatted}` | Line 174-186 |
| 10. Others / 20. Others | `profile_editor__short_term_focus__10_others` or `profile_editor__short_term_focus__20_others` | Line 174-186 |
| Short-term Others text input | `profile_editor__short_term_focus_others_text` | Line 1198-1204 |

#### **Long-term Focus Areas:**
Same pattern with `long_term` prefix:

| Option | Required Attribute | Line Reference |
|--------|-------------------|----------------|
| 01. Academics | `profile_editor__long_term_focus__01_academics` | Line 1214-1224 |
| ... (all options) | `profile_editor__long_term_focus__{formatted}` | Line 1214-1224 |
| Long-term Others text input | `profile_editor__long_term_focus_others_text` | Line 1228-1234 |

**Implementation Note:** Add `data-testid` to the `<input type="checkbox">` element in `MultiSelectPicker` component (line 174-186):
```jsx
<input
  type="checkbox"
  checked={isSelected}
  disabled={isDisabled}
  onChange={...}
  data-testid={`profile_editor__short_term_focus__${formatTestId(option)}`}  // ADD THIS
  className={...}
/>
```

---

### **8. SECTION 6: SELF-ASSESSMENT** (Tab 5, Lines 1247-1311)

#### **Strengths:**
The `MultiSelectPicker` component (line 1254-1264) renders checkboxes for STRENGTHS_OPTIONS.

**Format:** `profile_editor__strength__{formatTestId(option)}`

**Required Attributes (for each option in STRENGTHS_OPTIONS, lines 61-81):**

| Option | Required Attribute | Line Reference |
|--------|-------------------|----------------|
| 1. Quick Learning | `profile_editor__strength__1_quick_learning` | Line 1254-1264 |
| 2. Curiosity | `profile_editor__strength__2_curiosity` | Line 1254-1264 |
| 3. Problem-Solving | `profile_editor__strength__3_problem_solving` | Line 1254-1264 |
| ... (all options) | `profile_editor__strength__{formatted}` | Line 1254-1264 |
| 19. Others | `profile_editor__strength__19_others` | Line 1254-1264 |
| Strengths Others text input | `profile_editor__strength_others_text` | Line 1268-1274 |

#### **Areas of Improvement:**
Same pattern with `improvement` prefix:

| Option | Required Attribute | Line Reference |
|--------|-------------------|----------------|
| 1. Quick Learning | `profile_editor__improvement__1_quick_learning` | Line 1284-1294 |
| ... (all options) | `profile_editor__improvement__{formatted}` | Line 1284-1294 |
| 19. Others | `profile_editor__improvement__19_others` | Line 1284-1294 |
| Improvement Others text input | `profile_editor__improvement_others_text` | Line 1298-1304 |

---

### **9. SECTION 7: HOBBIES & CLUBS** (Tab 6, Lines 1317-1423)

#### **Hobbies/Interests:**
The `MultiSelectPicker` component (line 1324-1333) renders checkboxes for HOBBIES_OPTIONS.

**Format:** `profile_editor__hobby__{formatTestId(option)}`

**Required Attributes (for each option in HOBBIES_OPTIONS, lines 83-96):**

| Option | Required Attribute | Line Reference |
|--------|-------------------|----------------|
| 01. Reading | `profile_editor__hobby__01_reading` | Line 1324-1333 |
| 02. Playing Musical Instruments | `profile_editor__hobby__02_playing_musical_instruments` | Line 1324-1333 |
| ... (all options) | `profile_editor__hobby__{formatted}` | Line 1324-1333 |
| 12. Other | `profile_editor__hobby__12_other` | Line 1324-1333 |
| Hobbies Others text input | `profile_editor__hobby_other_text` | Line 1337-1343 |

#### **Clubs or Teams:**
Clubs are rendered differently (line 1354-1405) - each club has its own checkbox in a motion.label.

**Format:** `profile_editor__club_{formatTestId(club)}`

**Required Attributes (for each option in CLUBS_OPTIONS, lines 100-114):**

| Option | Required Attribute | Line Reference |
|--------|-------------------|----------------|
| 0. No Clubs/Teams | `profile_editor__club_0_no_clubs_teams` | Line 1372-1391 |
| 1. Science Club | `profile_editor__club_1_science_club` | Line 1372-1391 |
| 2. Mathematics Club | `profile_editor__club_2_mathematics_club` | Line 1372-1391 |
| ... (all options) | `profile_editor__club_{formatted}` | Line 1372-1391 |
| 12. Other | `profile_editor__club_12_other` | Line 1372-1391 |
| Clubs Others text input | `profile_editor__club_other_text` | Line 1410-1416 |

**Implementation Note:** Add `data-testid` to the `<input type="checkbox">` element at line 1372:
```jsx
<input
  type="checkbox"
  checked={isChecked}
  disabled={isDisabled}
  onChange={...}
  data-testid={`profile_editor__club_${formatTestId(club)}`}  // ADD THIS
  className={...}
/>
```

---

### **10. SECTION 8: ACHIEVEMENTS** (Tab 7, Lines 1429-1479)

| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Academics textarea | `profile_editor__achievement_academics_textarea` | Line 1432-1438 | ❌ MISSING |
| Sports textarea | `profile_editor__achievement_sports_textarea` | Line 1441-1447 | ❌ MISSING |
| Cultural/Arts textarea | `profile_editor__achievement_cultural_textarea` | Line 1450-1456 | ❌ MISSING |
| Trained/Certified textarea | `profile_editor__achievement_trained_textarea` | Line 1460-1466 | ❌ MISSING |
| Others textarea | `profile_editor__achievement_others_textarea` | Line 1470-1476 | ❌ MISSING |

**Note:** Trained/Certified field is conditional (only for ageCategory === '18-23', line 1458).

---

### **11. SECTION 9: EXPECTATIONS** (Tab 8, Lines 1486-1511)

The `MultiSelectPicker` component (line 1487-1496) renders checkboxes for EXPECTATIONS_OPTIONS.

**Format:** `profile_editor__expectation__{formatTestId(option)}`

**Required Attributes (for each option in EXPECTATIONS_OPTIONS, lines 116-127):**

| Option | Required Attribute | Line Reference |
|--------|-------------------|----------------|
| 1. Self-Understanding: ... | `profile_editor__expectation__1_self_understanding_gain_deeper_insights_into_their_personality_strengths_and_areas_for_growth` | Line 1487-1496 |
| 2. Career Guidance: ... | `profile_editor__expectation__2_career_guidance_clear_recommendations_on_suitable_career_paths_or_college_majors_based_on_their_interests_and_abilities_backed_by_scientific_tool` | Line 1487-1496 |
| ... (all options) | `profile_editor__expectation__{formatted}` | Line 1487-1496 |
| 10. Others | `profile_editor__expectation__10_others` | Line 1487-1496 |
| Expectations Others text input | `profile_editor__expectation_others_text` | Line 1500-1506 |

**Note:** Expectations have very long text. The `formatTestId` function should handle this by converting to a reasonable identifier.

---

### **12. NAVIGATION BUTTONS** (Lines 1767-1816)

| Element | Required Attribute | Line Reference | Current Status |
|---------|-------------------|----------------|----------------|
| Previous button | `profile_editor__prev_button` | Line 1770-1778 | ❌ MISSING |
| Next button | `profile_editor__next_button` | Line 1779-1787 | ❌ MISSING |
| Cancel button | `profile_editor__cancel_button` | Line 1791-1797 | ❌ MISSING |
| Save button | `profile_editor__save_button` | Line 1798-1814 | ❌ MISSING |

---

## 🔧 **IMPLEMENTATION GUIDE**

### **Step 1: Create formatTestId Helper Function**

Add this function at the top of the file (after imports, around line 23):

```javascript
// Helper function to format test IDs
const formatTestId = (value = '') => {
  return value
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '_')  // Replace all non-alphanumeric with underscore
    .replace(/^_|_$/g, '')         // Remove leading/trailing underscores
}
```

### **Step 2: Add data-testid to Tab Buttons**

Update the tab button rendering (line 1703):

```jsx
<button
  key={idx}
  onClick={() => setActiveTab(idx)}
  data-testid={`profile_editor__tab_${formatTestId(section.title)}`}  // ADD THIS LINE
  className={...}
>
```

### **Step 3: Add data-testid to All Input Elements**

For each `<input>`, `<select>`, `<textarea>`, add `data-testid` attribute:

```jsx
<input
  type="text"
  value={form.firstName}
  onChange={(e) => handleFieldChange('firstName', e.target.value)}
  data-testid="profile_editor__first_name_input"  // ADD THIS
  className={...}
/>
```

### **Step 4: Add data-testid to MultiSelectPicker Component**

Update the `MultiSelectPicker` component (line 174-186) to accept and use a `testIdPrefix` prop:

```jsx
const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems, icon: Icon, testIdPrefix }) => {
  // ... existing code ...
  
  return (
    <div className="space-y-2 xs:space-y-3">
      {/* ... */}
      <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-2">
        {options.map((option) => {
          // ... existing code ...
          return (
            <label key={option} className={...}>
              <input
                type="checkbox"
                checked={isSelected}
                disabled={isDisabled}
                onChange={...}
                data-testid={testIdPrefix ? `${testIdPrefix}__${formatTestId(option)}` : undefined}  // ADD THIS
                className={...}
              />
              {/* ... */}
            </label>
          )
        })}
      </div>
    </div>
  )
}
```

Then when using `MultiSelectPicker`, pass the `testIdPrefix`:

```jsx
<MultiSelectPicker
  options={focusAreas}
  selectedItems={form.shortTermFocusAreas}
  onToggle={...}
  maxItems={3}
  testIdPrefix="profile_editor__short_term_focus"  // ADD THIS
/>
```

### **Step 5: Add data-testid to All Buttons**

For each `<button>`, add `data-testid` attribute:

```jsx
<button
  type="submit"
  disabled={loading || loadingStudent}
  data-testid="profile_editor__save_button"  // ADD THIS
  className={...}
>
```

---

## ✅ **VERIFICATION CHECKLIST**

After implementation, please verify:

- [ ] All 9 tab buttons have `data-testid` attributes
- [ ] All input fields have `data-testid` attributes
- [ ] All select dropdowns have `data-testid` attributes
- [ ] All textareas have `data-testid` attributes
- [ ] All checkboxes have `data-testid` attributes
- [ ] All buttons (Save, Cancel, Prev, Next, Back, Scroll) have `data-testid` attributes
- [ ] All MultiSelectPicker checkboxes have `data-testid` attributes
- [ ] All "Others" text inputs have `data-testid` attributes
- [ ] Progress value display has `data-testid` attribute
- [ ] Missing fields toggle has `data-testid` attribute
- [ ] Page container has `data-testid` attribute

---

## 📝 **TESTING INSTRUCTIONS**

After adding all attributes:

1. **Run the application** and navigate to Profile Editor
2. **Open browser DevTools** (F12)
3. **In Console**, run this script to verify all attributes:

```javascript
// Get all elements with profile_editor data-testid
const testIds = Array.from(document.querySelectorAll('[data-testid^="profile_editor__"]'))
  .map(el => el.getAttribute('data-testid'))
  .sort()

console.log(`Found ${testIds.length} data-testid attributes:`)
testIds.forEach(id => console.log(`  - ${id}`))

// Check for missing critical attributes
const required = [
  'profile_editor__page',
  'profile_editor__progress_value',
  'profile_editor__save_button',
  'profile_editor__tab_personal_information',
  'profile_editor__first_name_input',
  'profile_editor__email_input',
  // ... add more critical ones
]

const missing = required.filter(id => !testIds.includes(id))
if (missing.length > 0) {
  console.error('Missing required attributes:', missing)
} else {
  console.log('✅ All critical attributes present!')
}
```

4. **Share the console output** with the automation team for verification

---

## 🎯 **PRIORITY ORDER**

### **CRITICAL (Must Have):**
1. Tab buttons (all 9 tabs)
2. Save, Cancel, Prev, Next buttons
3. All input fields in Personal Information
4. All input fields in Contact Information
5. Progress value display

### **HIGH PRIORITY:**
6. All input fields in Parent/Guardian
7. All input fields in Education Details
8. All checkboxes in Focus Areas
9. All checkboxes in Self-Assessment
10. All checkboxes in Hobbies & Clubs

### **MEDIUM PRIORITY:**
11. All textareas in Achievements
12. All checkboxes in Expectations
13. All "Others" text inputs
14. Scroll buttons
15. Missing fields toggle

### **LOW PRIORITY:**
16. Page container
17. Back button
18. Conditional fields (guardian, specially abled details)

---

## 📞 **SUPPORT**

If you have questions about:
- Naming conventions
- Implementation details
- Testing requirements

Please contact the Automation Team.

---

**Document Version:** 1.0  
**Last Updated:** 2025-01-20  
**Status:** Ready for UI Team Implementation