kenilkb/CP_AUTOMATION
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
e046a0c242
CP_AUTOMATION/documentation/ui-team-requirements/COMPLETE_UI_TEAM_REQUIREMENTS.md
Kenil_KB 14d2dfbaf5 first commit
2025-12-12 19:54:54 +05:30

849 lines
27 KiB
Markdown
Raw Blame History

# 🎯 COMPLETE DATA-TESTID REQUIREMENTS
## For UI Development Team - All Components
**Date:** 2025-01-20
**Priority:** 🔴 **CRITICAL - BLOCKING AUTOMATION**
**Status:** ❌ **ALL ATTRIBUTES MISSING**
**Version:** 1.0 - Standalone Complete Document
---
## 📋 **EXECUTIVE SUMMARY**
This document contains **ALL** required `data-testid` attributes for automation testing across **ALL** components.
**Total Required Attributes:** ~214+ attributes across 2 components
### **Components Requiring Updates:**
1. **Student Profile Editor** (`StudentProfileEditor.jsx`) - ~200+ attributes
2. **Mandatory Password Reset Modal** (`MandatoryPasswordResetModal.jsx`) - 14 attributes
---
## 🔑 **NAMING CONVENTION (MANDATORY - READ THIS FIRST)**
### **Pattern:**
```
{scope}__{element_name}_{type}
```
### **Rules:**
1. **Scope:** Component-specific scope (e.g., `profile_editor`, `mandatory_reset`)
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`
- ✅ `mandatory_reset__continue_button`
- ✅ `profile_editor__tab_personal_information`
- ❌ `profile_editor_first_name` (single underscore - WRONG)
- ❌ `profileEditor__first_name` (camelCase - WRONG)
### **Dynamic Elements:**
For dynamic elements (like checkboxes in lists), use:
```
{scope}__{base_name}__{formatted_option}
```
**Example:**
- `profile_editor__short_term_focus__01_academics`
- `profile_editor__strength__1_quick_learning`
---
## 📚 **PART 1: STUDENT PROFILE EDITOR**
**File:** `src/pages/StudentProfileEditor.jsx`
**Scope:** `profile_editor`
**Total Attributes:** ~200+
---
### **1.1 PAGE-LEVEL ELEMENTS**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Page container | `profile_editor__page` | Line 1516 | 🔴 CRITICAL |
| Progress value display | `profile_editor__progress_value` | Line 1577 | 🔴 CRITICAL |
| Missing fields toggle button | `profile_editor__missing_fields_toggle` | Line 1580-1586 | 🟡 IMPORTANT |
| Back button (header) | `profile_editor__back_button` | Line 1555-1560 | 🟡 IMPORTANT |
**Implementation:**
```jsx
<div data-testid="profile_editor__page">
<span data-testid="profile_editor__progress_value">{progress}%</span>
<button data-testid="profile_editor__missing_fields_toggle">...</button>
<button data-testid="profile_editor__back_button">Back</button>
</div>
```
---
### **1.2 TAB NAVIGATION**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Tab container | `profile_editor__tabs_container` | Line 1693-1700 | 🔴 CRITICAL |
| Tab scroll left button | `profile_editor__tabs_scroll_left_button` | Line 1683-1690 | 🟡 IMPORTANT |
| Tab scroll right button | `profile_editor__tabs_scroll_right_button` | Line 1729-1736 | 🟡 IMPORTANT |
#### **Tab Buttons (9 tabs) - 🔴 CRITICAL**
**Format:** `profile_editor__tab_{formatTestId(section.title)}`
| Tab Index | Tab Title | Required Attribute | Priority |
|-----------|-----------|-------------------|----------|
| 0 | Personal Information | `profile_editor__tab_personal_information` | 🔴 CRITICAL |
| 1 | Contact Information | `profile_editor__tab_contact_information` | 🔴 CRITICAL |
| 2 | Parent/Guardian | `profile_editor__tab_parent_guardian` | 🔴 CRITICAL |
| 3 | Education Details | `profile_editor__tab_education_details` | 🔴 CRITICAL |
| 4 | Focus Areas | `profile_editor__tab_focus_areas` | 🔴 CRITICAL |
| 5 | Self-Assessment | `profile_editor__tab_self_assessment` | 🔴 CRITICAL |
| 6 | Hobbies & Clubs | `profile_editor__tab_hobbies_clubs` | 🔴 CRITICAL |
| 7 | Achievements | `profile_editor__tab_achievements` | 🔴 CRITICAL |
| 8 | Expectations | `profile_editor__tab_expectations` | 🔴 CRITICAL |
**Implementation (Line 1703):**
```jsx
<button
key={idx}
onClick={() => setActiveTab(idx)}
data-testid={`profile_editor__tab_${formatTestId(section.title)}`}
className={...}
>
```
**formatTestId Function (Add at top of file, Line ~23):**
```javascript
const formatTestId = (value = '') => {
return value
.toLowerCase()
.replace(/[^a-z0-9]+/g, '_') // Replace all non-alphanumeric with underscore
.replace(/^_|_$/g, '') // Remove leading/trailing underscores
}
```
---
### **1.3 SECTION 1: PERSONAL INFORMATION** (Tab 0)
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| First Name input | `profile_editor__first_name_input` | Line 767-773 | 🔴 CRITICAL |
| Last Name input | `profile_editor__last_name_input` | Line 776-782 | 🔴 CRITICAL |
| Gender select | `profile_editor__gender_select` | Line 785-794 | 🔴 CRITICAL |
| Date of Birth input | `profile_editor__dob_input` | Line 797-802 | 🔴 CRITICAL |
| Nationality input | `profile_editor__nationality_input` | Line 805-811 | 🔴 CRITICAL |
| Language input | `profile_editor__language_input` | Line 814-820 | 🟡 IMPORTANT |
| Student ID Number input | `profile_editor__student_id_input` | Line 823-829 | 🟡 IMPORTANT |
| Student CPID input | `profile_editor__student_cpid_input` | Line 832-838 | 🟡 IMPORTANT |
| Specially Abled checkbox | `profile_editor__specially_abled_checkbox` | Line 843-848 | 🟡 IMPORTANT |
| Specially Abled Details textarea | `profile_editor__specially_abled_details_textarea` | Line 854-860 | 🟢 OPTIONAL |
**Implementation Example:**
```jsx
<input
type="text"
value={form.firstName}
onChange={(e) => handleFieldChange('firstName', e.target.value)}
data-testid="profile_editor__first_name_input"
className={...}
/>
```
---
### **1.4 SECTION 2: CONTACT INFORMATION** (Tab 1)
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Email input | `profile_editor__email_input` | Line 873-879 | 🔴 CRITICAL |
| Phone input | `profile_editor__phone_input` | Line 882-889 | 🔴 CRITICAL |
| Address input | `profile_editor__address_input` | Line 892-898 | 🔴 CRITICAL |
| City input | `profile_editor__city_input` | Line 901-907 | 🔴 CRITICAL |
| State input | `profile_editor__state_input` | Line 910-916 | 🔴 CRITICAL |
| ZIP Code input | `profile_editor__zip_code_input` | Line 919-925 | 🔴 CRITICAL |
| Native State input | `profile_editor__native_state_input` | Line 928-934 | 🟡 IMPORTANT |
---
### **1.5 SECTION 3: PARENT/GUARDIAN** (Tab 2)
#### **Father's Details:**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Father Full Name input | `profile_editor__father_full_name_input` | Line 953-959 | 🔴 CRITICAL |
| Father Age Range select | `profile_editor__father_age_range_select` | Line 962-972 | 🔴 CRITICAL |
| Father Occupation input | `profile_editor__father_occupation_input` | Line 975-981 | 🔴 CRITICAL |
| Father Email input | `profile_editor__father_email_input` | Line 984-990 | 🔴 CRITICAL |
#### **Mother's Details:**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Mother Full Name input | `profile_editor__mother_full_name_input` | Line 1002-1008 | 🔴 CRITICAL |
| Mother Age Range select | `profile_editor__mother_age_range_select` | Line 1011-1021 | 🔴 CRITICAL |
| Mother Occupation input | `profile_editor__mother_occupation_input` | Line 1024-1030 | 🔴 CRITICAL |
| Mother Email input | `profile_editor__mother_email_input` | Line 1033-1039 | 🔴 CRITICAL |
#### **Guardian (If Different):**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Guardian Different checkbox | `profile_editor__guardian_different_checkbox` | Line 1047-1052 | 🟡 IMPORTANT |
| Guardian Full Name input | `profile_editor__guardian_full_name_input` | Line 1061-1067 | 🟡 IMPORTANT |
| Guardian Relationship input | `profile_editor__guardian_relationship_input` | Line 1070-1076 | 🟡 IMPORTANT |
| Guardian Phone input | `profile_editor__guardian_phone_input` | Line 1079-1086 | 🟡 IMPORTANT |
| Guardian Email input | `profile_editor__guardian_email_input` | Line 1089-1095 | 🟡 IMPORTANT |
| Guardian Address input | `profile_editor__guardian_address_input` | Line 1099-1105 | 🟡 IMPORTANT |
---
### **1.6 SECTION 4: EDUCATION DETAILS** (Tab 3)
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Full Name input | `profile_editor__full_name_input` | Line 1128-1134 | 🔴 CRITICAL |
| Current Grade/Class input | `profile_editor__current_grade_input` | Line 1137-1143 | 🔴 CRITICAL |
| Section/Subject input | `profile_editor__section_input` | Line 1146-1152 | 🔴 CRITICAL |
| Board/Stream select | `profile_editor__board_stream_select` | Line 1155-1167 | 🔴 CRITICAL |
---
### **1.7 SECTION 5: FOCUS AREAS** (Tab 4)
#### **Short-term Focus Areas:**
**Format:** `profile_editor__short_term_focus__{formatTestId(option)}`
**Required for each option in FOCUS_AREAS_ADOLESCENT/FOCUS_AREAS_ADULT:**
- `profile_editor__short_term_focus__01_academics`
- `profile_editor__short_term_focus__02_family`
- `profile_editor__short_term_focus__03_health`
- ... (all options)
- `profile_editor__short_term_focus__10_others` (or `20_others` for adult)
**Others Text Input:**
- `profile_editor__short_term_focus_others_text` (Line 1198-1204)
#### **Long-term Focus Areas:**
**Format:** `profile_editor__long_term_focus__{formatTestId(option)}`
**Required for each option:**
- `profile_editor__long_term_focus__01_academics`
- ... (all options)
- `profile_editor__long_term_focus__10_others` (or `20_others`)
**Others Text Input:**
- `profile_editor__long_term_focus_others_text` (Line 1228-1234)
**Implementation - Update MultiSelectPicker Component (Line 174-186):**
```jsx
const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems, icon: Icon, testIdPrefix }) => {
// ... existing code ...
return (
<div className="space-y-2 xs:space-y-3">
{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}
className={...}
/>
{/* ... */}
</label>
)
})}
</div>
)
}
```
**Usage:**
```jsx
<MultiSelectPicker
options={focusAreas}
selectedItems={form.shortTermFocusAreas}
onToggle={...}
maxItems={3}
testIdPrefix="profile_editor__short_term_focus" // ADD THIS
/>
```
---
### **1.8 SECTION 6: SELF-ASSESSMENT** (Tab 5)
#### **Strengths:**
**Format:** `profile_editor__strength__{formatTestId(option)}`
**Required for each option in STRENGTHS_OPTIONS (19 options):**
- `profile_editor__strength__1_quick_learning`
- `profile_editor__strength__2_curiosity`
- `profile_editor__strength__3_problem_solving`
- ... (all 19 options)
- `profile_editor__strength__19_others`
**Others Text Input:**
- `profile_editor__strength_others_text` (Line 1268-1274)
#### **Areas of Improvement:**
**Format:** `profile_editor__improvement__{formatTestId(option)}`
**Required for each option (same as strengths, 19 options):**
- `profile_editor__improvement__1_quick_learning`
- ... (all 19 options)
- `profile_editor__improvement__19_others`
**Others Text Input:**
- `profile_editor__improvement_others_text` (Line 1298-1304)
**Usage:**
```jsx
<MultiSelectPicker
options={STRENGTHS_OPTIONS}
selectedItems={form.strengths}
onToggle={...}
maxItems={3}
testIdPrefix="profile_editor__strength" // ADD THIS
/>
```
---
### **1.9 SECTION 7: HOBBIES & CLUBS** (Tab 6)
#### **Hobbies/Interests:**
**Format:** `profile_editor__hobby__{formatTestId(option)}`
**Required for each option in HOBBIES_OPTIONS (12 options):**
- `profile_editor__hobby__01_reading`
- `profile_editor__hobby__02_playing_musical_instruments`
- ... (all 12 options)
- `profile_editor__hobby__12_other`
**Others Text Input:**
- `profile_editor__hobby_other_text` (Line 1337-1343)
#### **Clubs or Teams:**
**Format:** `profile_editor__club_{formatTestId(club)}`
**Required for each option in CLUBS_OPTIONS (13 options):**
- `profile_editor__club_0_no_clubs_teams`
- `profile_editor__club_1_science_club`
- `profile_editor__club_2_mathematics_club`
- ... (all 13 options)
- `profile_editor__club_12_other`
**Others Text Input:**
- `profile_editor__club_other_text` (Line 1410-1416)
**Implementation for Clubs (Line 1372):**
```jsx
<input
type="checkbox"
checked={isChecked}
disabled={isDisabled}
onChange={...}
data-testid={`profile_editor__club_${formatTestId(club)}`}
className={...}
/>
```
---
### **1.10 SECTION 8: ACHIEVEMENTS** (Tab 7)
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Academics textarea | `profile_editor__achievement_academics_textarea` | Line 1432-1438 | 🔴 CRITICAL |
| Sports textarea | `profile_editor__achievement_sports_textarea` | Line 1441-1447 | 🔴 CRITICAL |
| Cultural/Arts textarea | `profile_editor__achievement_cultural_textarea` | Line 1450-1456 | 🔴 CRITICAL |
| Trained/Certified textarea | `profile_editor__achievement_trained_textarea` | Line 1460-1466 | 🟡 IMPORTANT |
| Others textarea | `profile_editor__achievement_others_textarea` | Line 1470-1476 | 🔴 CRITICAL |
**Note:** Trained/Certified field is conditional (only for ageCategory === '18-23').
---
### **1.11 SECTION 9: EXPECTATIONS** (Tab 8)
**Format:** `profile_editor__expectation__{formatTestId(option)}`
**Required for each option in EXPECTATIONS_OPTIONS (10 options):**
- `profile_editor__expectation__1_self_understanding_gain_deeper_insights_into_their_personality_strengths_and_areas_for_growth`
- `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`
- ... (all 10 options)
- `profile_editor__expectation__10_others`
**Others Text Input:**
- `profile_editor__expectation_others_text` (Line 1500-1506)
**Note:** Expectations have very long text. The `formatTestId` function will handle this automatically.
---
### **1.12 NAVIGATION BUTTONS**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Previous button | `profile_editor__prev_button` | Line 1770-1778 | 🔴 CRITICAL |
| Next button | `profile_editor__next_button` | Line 1779-1787 | 🔴 CRITICAL |
| Cancel button | `profile_editor__cancel_button` | Line 1791-1797 | 🔴 CRITICAL |
| Save button | `profile_editor__save_button` | Line 1798-1814 | 🔴 CRITICAL |
**Implementation:**
```jsx
<button
type="submit"
disabled={loading || loadingStudent}
data-testid="profile_editor__save_button"
className={...}
>
Save
</button>
```
---
## 📚 **PART 2: MANDATORY PASSWORD RESET MODAL**
**File:** `src/pages/designs/design-1/components/MandatoryPasswordResetModal.jsx`
**Scope:** `mandatory_reset`
**Total Attributes:** 14
---
### **2.1 MODAL CONTAINER**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Modal Overlay | `mandatory_reset__modal` | Line 150 | 🔴 CRITICAL |
| Modal Content | `mandatory_reset__modal_content` | Line 156 | 🟢 OPTIONAL |
**Implementation (Line 150):**
```jsx
<motion.div
className="fixed inset-0 bg-black/60 z-[99999] flex items-center justify-center p-4"
data-testid="mandatory_reset__modal"
>
<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.2 STEP 1: WELCOME SCREEN**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Continue Button | `mandatory_reset__continue_button` | Line 248 | 🔴 CRITICAL |
**Implementation (Line 248):**
```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>
```
---
### **2.3 STEP 2: PASSWORD RESET FORM**
| Element | Required Attribute | Line Reference | Priority |
|---------|-------------------|----------------|----------|
| Form Container | `mandatory_reset__form` | Line 283 | 🔴 CRITICAL |
| Current Password Input | `mandatory_reset__current_password_input` | Line 290 | 🔴 CRITICAL |
| Current Password Toggle | `mandatory_reset__current_password_toggle` | Line 305 | 🟢 OPTIONAL |
| Current Password Error | `mandatory_reset__current_password_error` | Line 313 | 🟡 IMPORTANT |
| New Password Input | `mandatory_reset__new_password_input` | Line 325 | 🔴 CRITICAL |
| New Password Toggle | `mandatory_reset__new_password_toggle` | Line 340 | 🟢 OPTIONAL |
| New Password Error | `mandatory_reset__new_password_error` | Line 348 | 🟡 IMPORTANT |
| Confirm Password Input | `mandatory_reset__confirm_password_input` | Line 360 | 🔴 CRITICAL |
| Confirm Password Toggle | `mandatory_reset__confirm_password_toggle` | Line 375 | 🟢 OPTIONAL |
| Confirm Password Error | `mandatory_reset__confirm_password_error` | Line 383 | 🟡 IMPORTANT |
| Back Button | `mandatory_reset__back_button` | Line 454 | 🟡 IMPORTANT |
| Submit Button | `mandatory_reset__submit_button` | Line 464 | 🔴 CRITICAL |
**Implementation Examples:**
**Form (Line 283):**
```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"
value={formData.currentPassword}
onChange={handleInputChange}
data-testid="mandatory_reset__current_password_input"
className={...}
/>
```
**Current Password Toggle (Line 305):**
```jsx
<button
type="button"
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
data-testid="mandatory_reset__current_password_toggle"
className={...}
>
```
**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"
data-testid="mandatory_reset__current_password_error">
<AlertCircle className="w-4 h-4" />
{errors.currentPassword}
</p>
)}
```
**Submit Button (Line 464):**
```jsx
<motion.button
type="submit"
disabled={isLoading}
data-testid="mandatory_reset__submit_button"
className={...}
>
{isLoading ? (
<>Resetting...</>
) : (
<>
<Lock className="w-5 h-5" />
Reset Password
</>
)}
</motion.button>
```
---
## 🔧 **IMPLEMENTATION GUIDE**
### **Step 1: Add formatTestId Helper Function**
Add this function at the top of `StudentProfileEditor.jsx` (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: Update Tab Buttons**
Update the tab button rendering (Line 1703 in StudentProfileEditor.jsx):
```jsx
<button
key={idx}
onClick={() => setActiveTab(idx)}
data-testid={`profile_editor__tab_${formatTestId(section.title)}`}
className={...}
>
```
### **Step 3: Update MultiSelectPicker Component**
Update `MultiSelectPicker` component (Line 174-186) to accept and use `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}
className={...}
/>
{/* ... */}
</label>
)
})}
</div>
</div>
)
}
```
### **Step 4: 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"
className={...}
/>
```
### **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"
className={...}
>
```
---
## ✅ **VERIFICATION CHECKLIST**
After implementation, verify:
### **Profile Editor:**
- [ ] 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
### **Password Reset Modal:**
- [ ] Modal overlay has `data-testid="mandatory_reset__modal"`
- [ ] 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 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"`
---
## 🧪 **VERIFICATION SCRIPT**
After implementation, run this in browser console to verify:
```javascript
// Check Profile Editor attributes
const profileEditorIds = Array.from(document.querySelectorAll('[data-testid^="profile_editor__"]'))
.map(el => el.getAttribute('data-testid'))
.sort()
console.log(`✅ Profile Editor: Found ${profileEditorIds.length} data-testid attributes`)
// Check Password Reset Modal attributes
const mandatoryResetIds = Array.from(document.querySelectorAll('[data-testid^="mandatory_reset__"]'))
.map(el => el.getAttribute('data-testid'))
.sort()
console.log(`✅ Password Reset Modal: Found ${mandatoryResetIds.length} data-testid attributes`)
// Check for missing critical attributes
const criticalProfileEditor = [
'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',
]
const criticalMandatoryReset = [
'mandatory_reset__modal',
'mandatory_reset__continue_button',
'mandatory_reset__form',
'mandatory_reset__current_password_input',
'mandatory_reset__new_password_input',
'mandatory_reset__submit_button',
]
const missingProfileEditor = criticalProfileEditor.filter(id => !profileEditorIds.includes(id))
const missingMandatoryReset = criticalMandatoryReset.filter(id => !mandatoryResetIds.includes(id))
if (missingProfileEditor.length > 0) {
console.error('❌ Missing Profile Editor attributes:', missingProfileEditor)
} else {
console.log('✅ All critical Profile Editor attributes present!')
}
if (missingMandatoryReset.length > 0) {
console.error('❌ Missing Password Reset Modal attributes:', missingMandatoryReset)
} else {
console.log('✅ All critical Password Reset Modal attributes present!')
}
```
---
## 🎯 **PRIORITY ORDER**
### **🔴 CRITICAL (Must Have - Implement First):**
**Profile Editor:**
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
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
11. All textareas in Achievements
12. All checkboxes in Expectations
**Password Reset Modal:**
1. Modal overlay
2. Continue button
3. Form container
4. All 3 password inputs
5. Submit button
### **🟡 IMPORTANT (Should Have - Implement Second):**
**Profile Editor:**
- Missing fields toggle
- Back button
- Tab scroll buttons
- All "Others" text inputs
- Conditional fields (guardian, specially abled details)
**Password Reset Modal:**
- Back button
- All 3 error messages
### **🟢 OPTIONAL (Nice to Have - Implement Last):**
**Profile Editor:**
- Page container
- Modal content container
**Password Reset Modal:**
- Modal content container
- Password toggle buttons
---
## 📊 **SUMMARY STATISTICS**
| Component | Total Attributes | Critical | Important | Optional |
|-----------|-----------------|----------|-----------|----------|
| **Profile Editor** | ~200+ | ~150 | ~40 | ~10 |
| **Password Reset Modal** | 14 | 7 | 4 | 3 |
| **TOTAL** | **~214+** | **~157** | **~44** | **~13** |
---
## 📝 **FILES TO UPDATE**
1. **`src/pages/StudentProfileEditor.jsx`**
- Add `formatTestId` function
- Add `data-testid` to all elements listed above
- Update `MultiSelectPicker` component
2. **`src/pages/designs/design-1/components/MandatoryPasswordResetModal.jsx`**
- Add `data-testid` to all elements listed above
---
## 🚀 **AFTER IMPLEMENTATION**
Once all attributes are added:
1. **Run Verification Script** (see above) in browser console
2. **Share Results** with Automation Team
3. **Automation Team** will:
- Update locators to use data-testid
- Run DOM Inspector to verify
- Run full test suite
- Confirm 100% reliability
**Expected Results:**
- ✅ Tests run in < 1 minute (currently 8+ minutes)
- ✅ 100% test pass rate
- ✅ Zero fragile XPath/CSS selectors needed
- ✅ World-class automation reliability
---
## 📞 **SUPPORT & QUESTIONS**
If you have questions about:
- Naming conventions
- Implementation details
- Testing requirements
- Verification process
**Contact:** Automation Team
---
## ✅ **FINAL CHECKLIST**
Before marking as complete:
- [ ] All Profile Editor attributes added
- [ ] All Password Reset Modal attributes added
- [ ] formatTestId function added
- [ ] MultiSelectPicker updated with testIdPrefix
- [ ] Verification script run successfully
- [ ] Results shared with Automation Team
- [ ] Automation Team confirmed implementation
---
**Document Version:** 1.0
**Last Updated:** 2025-01-20
**Status:** ✅ Ready for UI Team Implementation
**Total Attributes Required:** ~214+
---
**This is a STANDALONE document - contains everything the UI team needs!**
Reference in New Issue View Git Blame Copy Permalink