2025-12-12 19:54:54 +05:30

22 KiB

Raw Blame History

🎯 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:

Scope: Always profile_editor
Separator: Double underscore __ between scope and element name
Element Name: Snake_case (lowercase with underscores)
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):

Personal Information (Tab 0) - Includes Contact Information fields
Contact Information (Tab 1) - Separate tab in code
Parent/Guardian (Tab 2)
Education Details (Tab 3) - Displayed as "Institution Details" in UI
Focus Areas (Tab 4)
Self-Assessment (Tab 5)
Hobbies & Clubs (Tab 6)
Achievements (Tab 7)
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

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:

<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):

<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:

<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.

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):

// 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):

<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:

<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:

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:

<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:

<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:

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

// 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!')
}

Share the console output with the automation team for verification

🎯 PRIORITY ORDER

CRITICAL (Must Have):

Tab buttons (all 9 tabs)
Save, Cancel, Prev, Next buttons
All input fields in Personal Information
All input fields in Contact Information
Progress value display

HIGH PRIORITY:

All input fields in Parent/Guardian
All input fields in Education Details
All checkboxes in Focus Areas
All checkboxes in Self-Assessment
All checkboxes in Hobbies & Clubs

MEDIUM PRIORITY:

All textareas in Achievements
All checkboxes in Expectations
All "Others" text inputs
Scroll buttons
Missing fields toggle

LOW PRIORITY:

Page container
Back button
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

22 KiB Raw Blame History