CP_AUTOMATION/documentation/ui-team-requirements/UI_TEAM_QUICK_REFERENCE.md

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

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

2. Update Tab Buttons (Line 1703)

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

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:

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:

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