181 lines
5.5 KiB
Markdown
181 lines
5.5 KiB
Markdown
# 🚀 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`
|
|
|