# 🚀 QUICK REFERENCE: Data-TestID Implementation Guide

## 📋 Summary

**Total Missing Attributes:** ~200+  
**File:** `src/pages/StudentProfileEditor.jsx`  
**Status:** ❌ ALL attributes missing

---

## ⚡ Quick Implementation Steps

### 1. Add formatTestId Helper (Line ~23)

```javascript
const formatTestId = (value = '') => {
  return value.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '')
}
```

### 2. Update Tab Buttons (Line 1703)

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

### 3. Update MultiSelectPicker Component (Line 174)

Add `testIdPrefix` prop and use it:

```jsx
const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems, icon: Icon, testIdPrefix }) => {
  // ...
  <input
    type="checkbox"
    data-testid={testIdPrefix ? `${testIdPrefix}__${formatTestId(option)}` : undefined}  // ADD
    // ...
  />
}
```

### 4. Add data-testid to All Inputs/Selects/Textareas

For EVERY input element, add:
```jsx
data-testid="profile_editor__{field_name}_{type}"
```

---

## 📊 Critical Attributes Checklist

### Page Level (4)
- [ ] `profile_editor__page`
- [ ] `profile_editor__progress_value`
- [ ] `profile_editor__missing_fields_toggle`
- [ ] `profile_editor__back_button`

### Tabs (9)
- [ ] `profile_editor__tab_personal_information`
- [ ] `profile_editor__tab_contact_information`
- [ ] `profile_editor__tab_parent_guardian`
- [ ] `profile_editor__tab_education_details`
- [ ] `profile_editor__tab_focus_areas`
- [ ] `profile_editor__tab_self_assessment`
- [ ] `profile_editor__tab_hobbies_clubs`
- [ ] `profile_editor__tab_achievements`
- [ ] `profile_editor__tab_expectations`

### Navigation Buttons (4)
- [ ] `profile_editor__prev_button`
- [ ] `profile_editor__next_button`
- [ ] `profile_editor__cancel_button`
- [ ] `profile_editor__save_button`

### Tab Scroll Buttons (2)
- [ ] `profile_editor__tabs_scroll_left_button`
- [ ] `profile_editor__tabs_scroll_right_button`

### Personal Information (10)
- [ ] `profile_editor__first_name_input`
- [ ] `profile_editor__last_name_input`
- [ ] `profile_editor__gender_select`
- [ ] `profile_editor__dob_input`
- [ ] `profile_editor__nationality_input`
- [ ] `profile_editor__language_input`
- [ ] `profile_editor__student_id_input`
- [ ] `profile_editor__student_cpid_input`
- [ ] `profile_editor__specially_abled_checkbox`
- [ ] `profile_editor__specially_abled_details_textarea`

### Contact Information (7)
- [ ] `profile_editor__email_input`
- [ ] `profile_editor__phone_input`
- [ ] `profile_editor__address_input`
- [ ] `profile_editor__city_input`
- [ ] `profile_editor__state_input`
- [ ] `profile_editor__zip_code_input`
- [ ] `profile_editor__native_state_input`

### Parent/Guardian (14)
- [ ] `profile_editor__father_full_name_input`
- [ ] `profile_editor__father_age_range_select`
- [ ] `profile_editor__father_occupation_input`
- [ ] `profile_editor__father_email_input`
- [ ] `profile_editor__mother_full_name_input`
- [ ] `profile_editor__mother_age_range_select`
- [ ] `profile_editor__mother_occupation_input`
- [ ] `profile_editor__mother_email_input`
- [ ] `profile_editor__guardian_different_checkbox`
- [ ] `profile_editor__guardian_full_name_input`
- [ ] `profile_editor__guardian_relationship_input`
- [ ] `profile_editor__guardian_phone_input`
- [ ] `profile_editor__guardian_email_input`
- [ ] `profile_editor__guardian_address_input`

### Education Details (4)
- [ ] `profile_editor__full_name_input`
- [ ] `profile_editor__current_grade_input`
- [ ] `profile_editor__section_input`
- [ ] `profile_editor__board_stream_select`

### Focus Areas (~40+ checkboxes)
- [ ] All short-term focus checkboxes: `profile_editor__short_term_focus__{formatted}`
- [ ] All long-term focus checkboxes: `profile_editor__long_term_focus__{formatted}`
- [ ] `profile_editor__short_term_focus_others_text`
- [ ] `profile_editor__long_term_focus_others_text`

### Self-Assessment (~40+ checkboxes)
- [ ] All strength checkboxes: `profile_editor__strength__{formatted}`
- [ ] All improvement checkboxes: `profile_editor__improvement__{formatted}`
- [ ] `profile_editor__strength_others_text`
- [ ] `profile_editor__improvement_others_text`

### Hobbies & Clubs (~30+ checkboxes)
- [ ] All hobby checkboxes: `profile_editor__hobby__{formatted}`
- [ ] All club checkboxes: `profile_editor__club_{formatted}`
- [ ] `profile_editor__hobby_other_text`
- [ ] `profile_editor__club_other_text`

### Achievements (5)
- [ ] `profile_editor__achievement_academics_textarea`
- [ ] `profile_editor__achievement_sports_textarea`
- [ ] `profile_editor__achievement_cultural_textarea`
- [ ] `profile_editor__achievement_trained_textarea`
- [ ] `profile_editor__achievement_others_textarea`

### Expectations (~10+ checkboxes)
- [ ] All expectation checkboxes: `profile_editor__expectation__{formatted}`
- [ ] `profile_editor__expectation_others_text`

---

## 🔍 Verification Script

After implementation, run this in browser console:

```javascript
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`)
console.log('Missing critical:', [
  'profile_editor__page',
  'profile_editor__save_button',
  'profile_editor__tab_personal_information',
  'profile_editor__first_name_input'
].filter(id => !testIds.includes(id)))
```

---

**See full documentation:** `UI_TEAM_DATA_TESTID_REQUIREMENTS.md`