Test — Mobile Comment Form UX

bahalaka.com · ~t

Smoke Tests

Comment form rendersPASS

Toggle any section's comments — form appears with identity or name input depending on localStorage state.

Post button present and styledPASS

button.cf-post has tron blue background, black text, correct hover state (#8DD4EC).

Functional Tests

New user — name input visiblePASS

Clear localStorage → open comments. Name input shows (max-width: 200px). Identity row hidden. Textarea + Post below.

Returning user — identity label shownPASS

With saved name in localStorage → "Posting as Name (change)" displays. Name input hidden. Saves full vertical row on mobile.

Change name flowPASS

Click "change" → identity hides, name input appears with current value, auto-focused. Edit and post → new name saved, identity label updates on re-render.

Post with identity (no input visible)PASS

Hidden name input retains value from localStorage. postComment reads it correctly — name field is never empty for returning users.

Post refreshes form correctlyPASS

After posting, renderThread() rebuilds — new comment appears, form resets with identity label (name now saved).

Integration Tests

Mobile viewport (≤600px) — no full-width name inputPASS

At 375px width: name input uses max-width: 100% (responsive cap). No more flex: unset causing full-width blowout. Form stays compact.

Desktop viewport — no regressionPASS

At 1200px width: identity label or name input renders correctly. Textarea + Post side by side in cf-body row. No layout shift.

Edit button selector still worksPASS

parentElement.querySelector('button') on textEl targets cf-body → finds button.cf-post. Correct element selected for loading state.

Results

9/9 tests pass. No fixes needed. Mobile comment form is compact for returning users, functional for new users, no desktop regression.