test: i18n (en/es) & Mobile Responsiveness across all major routes

[guillermoscript]

Scope

Verify that all major routes work correctly in both en and es locales, and that the UI is usable on mobile viewports (375px, 768px).

Personas

All personas — each test should be done in both locales.

i18n Test Cases

Locale Switching

• /en/ prefix routes work: all dashboard pages, public pages, auth pages
• /es/ prefix routes work: all dashboard pages, public pages, auth pages
• Locale cookie/header persists across navigation
• Date formatting respects locale (Spanish: "ene./feb./mar."; English: "Jan/Feb/Mar")
• Number formatting correct (scores, prices)

Missing Translation Keys (regression check)

• No [key] or raw key strings visible in UI on any page
• Transaction status badges: pending, successful, failed, archived, canceled, refunded — all have Spanish translations
• Gamification: components.gamification namespace used (not gamification)
• Lesson navigation: components.lessonNavigation namespace used

Critical Pages — Spanish Spot-Check

Run through these in /es/ and confirm no untranslated strings:

• /es/dashboard/student — student dashboard
• /es/dashboard/student/courses/[id] — course view
• /es/dashboard/student/progress — progress page
• /es/dashboard/admin — admin dashboard
• /es/dashboard/admin/billing — billing page
• /es/dashboard/teacher/courses/[id] — course editor
• /es/ (school subdomain) — school landing page
• /es/platform-pricing — platform pricing

RTL / Special Character Safety

• Spanish text with accented characters (é, á, ñ, ü) renders correctly
• No text truncation breaking Spanish long strings in nav items or badges

Mobile Responsiveness Test Cases

Test at 375px (iPhone SE), 390px (iPhone 14), 768px (iPad).

Navigation

• Mobile sidebar/hamburger menu opens and closes
• All nav items accessible on mobile
• No overflow-x on any page

Student Dashboard (375px)

• Enrolled course cards stack vertically
• Progress bars visible and correct width
• Lesson list scrolls without cutting off content

Course View (375px)

• Video player fills width, no overflow
• Lesson navigation (prev/next) usable with thumbs
• Exercise input area (textarea/microphone) accessible

Admin Dashboard (768px)

• Tables have horizontal scroll, not cut off
• Cards reflow to 1-column on narrow viewport
• Modal/sheet dialogs don't overflow viewport

Landing Pages (375px)

• Hero block text readable (no overflow)
• Course grid → single column
• CTA buttons full-width

Forms (375px)

• Login, sign-up, create-school forms usable on mobile
• Input fields at least 16px font-size (prevent iOS zoom)
• Submit buttons reachable

Definition of Done

• Zero untranslated key strings visible in either locale on tested pages
• All tested pages scroll and interact without horizontal overflow on 375px
• No layout breakage at 768px
• Date/number formatting correct per locale

[guillermoscript]

QA — i18n (en/es) + mobile: 1 bug fixed (in PR #309), plus findings

Verified key data + live es rendering. The student-dashboard IntlError fix shipped in PR #309 (see #300).

✅ Verified

Check	Result
Transaction status badges (es)	✅ all 6 present: Pendiente / Exitoso / Fallido / Archivado / Cancelado / Reembolsado
Payment methods (es)	✅ Stripe / Manual / Transferencia Bancaria / Zelle / Pagos Chile
Gamification namespace	✅ components.gamification used (not gamification); IntlError fixed in #309 — header now renders NIVEL / RACHA DE DÍAS / MONEDAS
Lesson-nav namespace	✅ components.lessonNavigation, 9/9 key parity en↔es
/es/dashboard/student render	✅ fully Spanish (sidebar, stats, "Bienvenido", "Primeros Pasos"); no raw key paths
Accented chars (é/á/ñ/ü)	✅ "lección", "Configuración", "Clasificación" render correctly
Mobile (narrow viewport)	✅ sidebar collapses to hamburger; no horizontal overflow (scrollWidth ≤ innerWidth)

🐛 Fixed (PR #309)

GamificationHeaderCard threw IntlError: INSUFFICIENT_PATH on every student-dashboard render (t('achievements') on an object key) → fixed to t('achievements.title').

Findings (low severity, not fixed)

1. Orphan namespace mismatch: course.* / lesson.* / exam.* (~60 keys) are top-level in en.json but nested under dashboard.* in es.json. No component reads them (verified — lesson-nav uses components.lessonNavigation, course pages use dashboard.teacher.manageCourse / community), so it's dead-data, not a visible bug — but worth cleaning to avoid future confusion. Full en↔es diff: 107 keys in en-not-es, 102 in es-not-en, almost entirely this mismatch.
2. One untranslated string: the student "Getting Started" checklist footer "All done! You can dismiss this checklist." stays English under /es/.

Note

True 375px couldn't be tested (macOS Chrome clamps the window to ~535px min); verified no overflow at 535px. A real device/emulator is needed for the 375px-specific cases.