Mitra §A: pre-home (S3a/S3b/AccountInactive) + design system + Bestie Home

- Port halo_tokens + halo_theme + HaloButton to mitra_app (rose palette,
  Bricolage display, Poppins body, JetBrainsMono).
- Build S3a Input WhatsApp (figma-bestie BestieS3 first half) with
  +62 chip, leading-zero/62 normalization, allow '+' in input.
- Build S3b OTP verification (6-digit, 60s resend timer, attempts hint,
  Focus(canRequestFocus:false) for maestro inputText compat) with full
  error branching (CODE_MISMATCH, OTP_EXPIRED, OTP_USED, ATTEMPTS_EXCEEDED,
  WRONG_FLOW, ACCOUNT_INACTIVE).
- Add AccountInactive terminal screen for is_active=false mitras.
- Typed MitraAuthError with Indonesian-first localized messages +
  retryAfterSeconds passthrough.
- Rebuild home_screen.dart to match figma BestieHome (greeting + status
  card + Ganti Status CTA + Pengingat + 2-tile dark grid).
- Backend: POST /internal/_test/seed-mitra (idempotent) and
  PATCH /internal/mitras/:id (display_name update).
- Control center: inline Edit Nama on mitras row + expandable inline log
  table under clicked mitra (vs old below-table panel).
- 5 maestro flows ts-mitra-A-01/03/04/05/06 covering invalid input, happy
  path, account inactive, phone-format normalization, and the back-to-S3a
  regression. All green.

Plan + memory documented in:
- requirement/phase4-mitra-prehome-plan.md
- requirement/flow_mitra.md / flow_mitra.mermaid.md §A

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-19 22:01:28 +08:00
parent ad02ee252d
commit 9696eadeaf
37 changed files with 3406 additions and 326 deletions

View File

@@ -0,0 +1,116 @@
# §A — Mitra Pre-Home (auth) test plan
Spec: [requirement/flow_mitra.mermaid.md §A](../../../requirement/flow_mitra.mermaid.md).
Tests use the naming convention `ts-mitra-<section>-<sub>-<description>.yaml`:
- `<section>` — flow_mitra.mermaid section identifier (`A` for pre-home auth).
- `<sub>` — sub-flow index within the section, zero-padded.
- `<description>` — snake_case summary of the branch under test.
## Implemented
| File | Branch (spec ref) | Expected destination |
|---|---|---|
| `ts-mitra-A-01-phone_invalid_inline_error.yaml` | §A.1 local CTA gate for short phones | "kirim kode" disabled for <9 subscriber digits, enables + navigates on valid input |
| `ts-mitra-A-03-success_login_to_home.yaml` | §A.2 200 + `is_active=true` | `/home` (active sessions tab) |
| `ts-mitra-A-04-account_inactive_screen.yaml` | §A.2 200 + `is_active=false` → 403 `ACCOUNT_INACTIVE` | `/auth/inactive` (AppBar back arrow omitted; system-back interception deferred) |
| `ts-mitra-A-05-phone_format_variants.yaml` | §A.1 phone-format normalization | 5 variants (`8…`, `08…`, `628…`, `+628…`, `0628…`) all reach S3b with `+628200000501` shown |
| `ts-mitra-A-06-back_to_login_and_retry.yaml` | §A.1 regression — back from S3b + re-submit | Second "kirim kode" tap still navigates to S3b after returning to S3a |
## Test infrastructure
JS scripts (live in [`../scripts/`](../scripts/)) called via `runScript:`:
| Script | Purpose | Backend endpoint |
|---|---|---|
| `reset_phone.js` | Clear `otp_requests` rows for `TEST_PHONE` so cooldown / phone-rate-limit don't trip on re-runs. | `POST /internal/_test/reset-phone` |
| `seed_mitra.js` | Upsert a mitra row with given phone + `is_active`. Idempotent. | `POST /internal/_test/seed-mitra` |
| `peek_otp.js` | Read the latest stub-generated OTP code for `TEST_PHONE`. Writes to `output.OTP`. | `GET /internal/_test/peek-otp` |
All three only exist on the **internal** listener (port 3001), so they're
network-isolated from production traffic.
### Phone-number convention
Each test uses a unique `+628200000<NN><SS>` phone to avoid cross-flow
interference:
- A-02 (deferred) → `+628200000201`
- A-03 → `+628200000301`
- A-04 → `+628200000401`
- A-05 → `+628200000501` (one phone, 5 input formats)
- A-06 → `+628200000601`
If the same phone gets used across multiple flows in one run, the per-IP
rate-limit (10 OTP requests / hour, default) can trip and break A-03 or A-04
mid-suite. A-05 mitigates this by calling `reset_phone` between its 5
variants (each variant is one OTP request).
## Deferred (not yet implemented — see reasons)
### `ts-mitra-A-02-wrong_code_attempts_then_blocked.yaml`
**Branch:** §A.2 5× CODE_MISMATCH → OTP_ATTEMPTS_EXCEEDED → blocked dialog.
**Why deferred:** the 6-separate-TextField OTP pattern with `maxLength: 1`
per box doesn't play well with maestro's `inputText` on Android. Maestro
uses uiautomator2's `setText` under the hood, which delivers chars
non-deterministically across the per-box focus chain — even matching the
customer-app's exact `inputText: "000000"` × 6 pattern. After the 5th
auto-submit succeeds and the boxes clear, focus state races with the
next `inputText` call and digits silently drop. Verified manually: the
"Tersisa N percobaan" hint and blocked dialog both render correctly with
real keyboard typing.
**Possible future approach:** refactor S3b to use a single hidden
`TextField` with custom box decorations (the `pin_code_fields` pattern).
One `inputText: "000000"` per attempt would land all 6 chars in one IME
commit, matching how real users paste OTPs from SMS. Worth doing for
SMS-paste UX anyway.
### `ts-mitra-A-05-otp_cooldown_snackbar.yaml`
**Branch:** §A.1 second OTP request within 60s → `OTP_COOLDOWN` 429 + snackbar.
**Why deferred:** Maestro's `extendedWaitUntil` can't reliably assert a
floating snackbar that auto-dismisses in ~4s — the visible window is too
short for the polling cadence. Possible workaround: drive two consecutive
requests and rely on the CTA label switching to "coba lagi dalam Ns" (which
is non-floating and stable). Worth adding once the resend-cooldown UX
stabilizes.
### `ts-mitra-A-06-rate_limit_phone_popup.yaml`
**Branch:** §A.1 4th OTP request in 1h for same phone → `OTP_RATE_LIMIT_PHONE`
429 popup with `retry_after_seconds`.
**Why deferred:** The popup is asserted in manual testing (screenshot in
phase4-mitra-prehome-plan.md). Driving 4 sequential requests within one
maestro run is brittle if any earlier test bumped the counter. A backend
`_test/reset-phone-rate-limit` helper would make this reliable; not added yet
to keep the test-surface minimal.
### `ts-mitra-A-07-resend_after_cooldown.yaml`
**Branch:** §A.4 resend after 60s cooldown → fresh OTP, attempts counter resets.
**Why deferred:** 60s wall-clock wait per pass is too slow for CI. Drive
this manually until we have a `_test/expire-cooldown` helper that fast-forwards
the cooldown clock.
### `ts-mitra-A-08-otp_expired.yaml`
**Branch:** §A.2 5-minute TTL elapses → `OTP_EXPIRED` 410 → dialog → S3a.
**Why deferred:** Same wall-clock problem. Need a `_test/force-expire-otp`
helper before this is automatable.
## Running
From `mitra_app/`:
```bash
# Single flow
maestro test .maestro/flows/ts-mitra-A-01-phone_invalid_inline_error.yaml
# Whole §A suite
maestro test .maestro/flows/ts-mitra-A-*.yaml
```
The backend must be running with `OTP_STATIC_CODE` **unset** — peek_otp.js
relies on the stub generator returning a fresh code per request, not a
static one.

View File

@@ -0,0 +1,50 @@
# ts-mitra-A-01 — §A.1 phone-input validation gates the CTA
# Spec ref: requirement/flow_mitra.mermaid.md §A.1
#
# The local CTA gate (subscriberDigits.length >= 9) prevents short phones
# from even reaching the backend — this test verifies the client-side
# guard: "12345" leaves the button disabled, "8123456789" enables it.
#
# (The PHONE_INVALID server-side path is unreachable from the UI today
# because the local gate is stricter than the backend regex. Kept as
# defensive code in login_screen.dart's auth listener; not test-driven.)
appId: com.mybestie.mitra
env:
TEST_PHONE: "+628222222222"
BACKEND_INTERNAL_URL: http://localhost:3001
---
# Reset rate-limit history for the test phone so the kirim-kode tap below
# never trips OTP_COOLDOWN / OTP_RATE_LIMIT_PHONE leftover from prior runs.
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 10000
# Short phone — 5 digits — CTA should remain disabled.
- tapOn:
point: "60%, 47%"
- inputText: "12345"
- assertVisible: "(?s).*kirim kode.*"
# Tapping the disabled CTA should NOT navigate forward.
- tapOn: "(?s).*kirim kode.*"
# Brief idle; if the CTA were active the screen would push to /otp.
- assertNotVisible: "Masukkan OTP"
- assertNotVisible: "(?s).*masukin 6 digit kode.*"
# Erase, type a valid 10-digit subscriber → CTA enables and pushes to S3b.
- eraseText
- inputText: "8222222222"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*masukin 6 digit kode.*"
timeout: 10000

View File

@@ -0,0 +1,64 @@
# ts-mitra-A-03 — §A.2 happy path → /home
# Spec ref: requirement/flow_mitra.mermaid.md §A.2 (200 + is_active=true branch).
#
# End-to-end S3a → S3b → home for an active mitra:
# 1. Seed mitra row with is_active=true
# 2. Reset OTP requests (so cooldown/rate-limit doesn't trip)
# 3. Drive S3a, request OTP
# 4. Peek the stub OTP code from the backend
# 5. Submit it on S3b → /home renders
appId: com.mybestie.mitra
env:
TEST_PHONE: "+628200000301"
MITRA_DISPLAY_NAME: "Maestro Active"
BACKEND_INTERNAL_URL: http://localhost:3001
---
- runScript:
file: ../scripts/seed_mitra.js
env:
TEST_PHONE: ${TEST_PHONE}
MITRA_DISPLAY_NAME: ${MITRA_DISPLAY_NAME}
IS_ACTIVE: "true"
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 10000
# S3a — request OTP.
- tapOn:
point: "60%, 47%"
- inputText: "8200000301"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*masukin 6 digit kode.*"
timeout: 10000
# Peek the stub OTP that the backend just generated. Stored in output.OTP.
- runScript:
file: ../scripts/peek_otp.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
# Submit it. inputText delivers the chars one-at-a-time via adb shell input;
# the Focus(canRequestFocus:false)-wrapped TextFields chain focus on each
# digit and _submit() fires automatically when the 6th digit lands.
- inputText: ${output.OTP}
# Assert: home renders. Use any text we know lives on the home/active-sessions
# tab to confirm we're past auth.
- extendedWaitUntil:
visible:
text: "Sesi Aktif|Riwayat Chat"
timeout: 15000

View File

@@ -0,0 +1,72 @@
# ts-mitra-A-04 — §A.2 ACCOUNT_INACTIVE → terminal full-screen state
# Spec ref: requirement/flow_mitra.mermaid.md §A.2 (403 ACCOUNT_INACTIVE branch).
#
# Verifies the inactive-mitra flow:
# 1. Seed mitra row with is_active=false
# 2. Reset OTP requests
# 3. Drive S3a, request OTP
# 4. Submit the correct OTP code → backend returns 403 ACCOUNT_INACTIVE
# AFTER OTP verification succeeds (mitra.auth.routes.js L54-57)
# 5. Screen routes to /auth/inactive
# 6. PopScope(canPop: false) blocks system back
appId: com.mybestie.mitra
env:
TEST_PHONE: "+628200000401"
MITRA_DISPLAY_NAME: "Maestro Inactive"
BACKEND_INTERNAL_URL: http://localhost:3001
---
- runScript:
file: ../scripts/seed_mitra.js
env:
TEST_PHONE: ${TEST_PHONE}
MITRA_DISPLAY_NAME: ${MITRA_DISPLAY_NAME}
IS_ACTIVE: "false"
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 10000
# S3a — request OTP.
- tapOn:
point: "60%, 47%"
- inputText: "8200000401"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*masukin 6 digit kode.*"
timeout: 10000
# Peek + submit correct code.
- runScript:
file: ../scripts/peek_otp.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- inputText: ${output.OTP}
# AccountInactive screen renders.
- extendedWaitUntil:
visible:
text: "(?s).*akun belum aktif.*"
timeout: 15000
- assertVisible: "(?s).*memverifikasi akun kamu.*"
- assertVisible: "(?s).*pakai nomor lain.*"
# Negative assertion: the home screen should NOT have rendered (token storage
# should be empty — backend returned 403 without tokens before is_active gate).
- assertNotVisible: "Sesi Aktif"
# Note: system-back interception is intentionally NOT tested here — PopScope
# on a GoRouter root route doesn't currently block the Android back key
# because there's no Navigator route to pop. Tracked as a follow-up; the
# AppBar has no back arrow either way so the in-app UX is correct.

View File

@@ -0,0 +1,136 @@
# ts-mitra-A-05 — §A.1 phone-format normalization
# Spec ref: requirement/flow_mitra.mermaid.md §A.1
#
# Indonesian users type phone numbers in many shapes. The login screen's
# _subscriberDigits() in login_screen.dart must normalize ALL of these to
# the same +628200000501 (subscriber digits = 8200000501):
#
# 8200000501 — subscriber only
# 08200000501 — local format with leading 0
# 628200000501 — country code without +
# +628200000501 — full E.164
# 0628200000501 — typo combo with leading 0 before country code
#
# Strategy: seed ONE mitra at +628200000501. For each variant, do a fresh
# launchApp clearState, type the variant, tap "kirim kode", and assert the
# S3b screen shows the correctly normalized phone "+628200000501". A fresh
# launch per variant is more reliable than back-navigation across maestro
# / IME / keyboard state.
appId: com.mybestie.mitra
env:
TEST_PHONE: "+628200000501"
MITRA_DISPLAY_NAME: "Maestro Variants"
BACKEND_INTERNAL_URL: http://localhost:3001
---
- runScript:
file: ../scripts/seed_mitra.js
env:
TEST_PHONE: ${TEST_PHONE}
MITRA_DISPLAY_NAME: ${MITRA_DISPLAY_NAME}
IS_ACTIVE: "true"
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
# ── Variant 1: 8xxxxxxxxx (subscriber only, 10 digits) ──
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 10000
- tapOn:
point: "60%, 47%"
- inputText: "8200000501"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*\\+628200000501.*"
timeout: 10000
# ── Variant 2: 08xxxxxxxxx (local format with leading 0) ──
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 10000
- tapOn:
point: "60%, 47%"
- inputText: "08200000501"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*\\+628200000501.*"
timeout: 10000
# ── Variant 3: 628xxxxxxxxx (country code without +) ──
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 10000
- tapOn:
point: "60%, 47%"
- inputText: "628200000501"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*\\+628200000501.*"
timeout: 10000
# ── Variant 4: +628xxxxxxxxx (full E.164 with +) ──
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 10000
- tapOn:
point: "60%, 47%"
- inputText: "+628200000501"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*\\+628200000501.*"
timeout: 10000
# ── Variant 5: 0628xxxxxxxxx (typo combo) ──
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 10000
- tapOn:
point: "60%, 47%"
- inputText: "0628200000501"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*\\+628200000501.*"
timeout: 10000

View File

@@ -0,0 +1,72 @@
# ts-mitra-A-06 — §A.1 navigate back from S3b, tap "kirim kode" again
# Spec ref: requirement/flow_mitra.mermaid.md §A.1
#
# Regression: a previous fix to deduplicate OTP-screen pushes (login_screen's
# listener was firing twice on resend) accidentally blocked the second push
# entirely when the user navigated back to S3a manually. Symptom: tapping
# "kirim kode" the second time did nothing — request fired, but no /otp
# navigation.
#
# Root cause: the listener guarded on `prev` state being non-OtpSentData,
# which fails on retry because AsyncLoading retains the previous OtpSentData
# value. Fix: guard on `GoRouterState.matchedLocation == '/login'` instead.
#
# This test exercises the full path: fresh login → /otp → back to S3a →
# kirim kode again → /otp.
appId: com.mybestie.mitra
env:
TEST_PHONE: "+628200000601"
MITRA_DISPLAY_NAME: "Maestro Retry"
BACKEND_INTERNAL_URL: http://localhost:3001
---
- runScript:
file: ../scripts/seed_mitra.js
env:
TEST_PHONE: ${TEST_PHONE}
MITRA_DISPLAY_NAME: ${MITRA_DISPLAY_NAME}
IS_ACTIVE: "true"
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
- launchApp:
clearState: true
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 15000
# First request → arrives on S3b.
- tapOn:
point: "60%, 47%"
- inputText: "8200000601"
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*masukin 6 digit kode.*"
timeout: 10000
# Back to S3a via system back.
- hideKeyboard
- pressKey: Back
- extendedWaitUntil:
visible:
text: "(?s).*Halo Mitra Bestie.*"
timeout: 8000
# Reset rate-limit so the second OTP request isn't blocked by cooldown.
- runScript:
file: ../scripts/reset_phone.js
env:
TEST_PHONE: ${TEST_PHONE}
BACKEND_INTERNAL_URL: ${BACKEND_INTERNAL_URL}
# Second tap — phone field still holds the previous input, so just tap CTA.
- tapOn: "(?s).*kirim kode.*"
- extendedWaitUntil:
visible:
text: "(?s).*masukin 6 digit kode.*"
timeout: 10000

View File

@@ -0,0 +1,13 @@
// Read the latest stub-generated OTP code for TEST_PHONE from the
// backend's dev-only /internal/_test/peek-otp endpoint.
//
// Writes the 6-digit code to output.OTP so the calling flow can use ${output.OTP}.
const phone = TEST_PHONE
const url = BACKEND_INTERNAL_URL || 'http://localhost:3001'
const encoded = encodeURIComponent(phone)
const resp = http.get(`${url}/internal/_test/peek-otp?phone=${encoded}`)
if (resp.status !== 200) {
throw new Error(`peek-otp failed (${resp.status}): ${resp.body}`)
}
const data = json(resp.body)
output.OTP = data.code

View File

@@ -0,0 +1,12 @@
// Wipe otp_requests rows for TEST_PHONE so repeated runs don't trip the 60s
// cooldown or the 3/hour rate-limit. Does NOT drop the mitra row — mitras
// are seeded separately via seed_mitra.js.
const phone = TEST_PHONE
const url = BACKEND_INTERNAL_URL || 'http://localhost:3001'
const resp = http.post(`${url}/internal/_test/reset-phone`, {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ phone }),
})
if (resp.status !== 200) {
throw new Error(`reset-phone failed (${resp.status}): ${resp.body}`)
}

View File

@@ -0,0 +1,17 @@
// Upsert a mitra with TEST_PHONE, MITRA_DISPLAY_NAME, and IS_ACTIVE.
// Idempotent — safe to run on every test pass.
//
// Required env: TEST_PHONE, MITRA_DISPLAY_NAME
// Optional env: IS_ACTIVE (defaults to "true"; pass "false" to seed an
// inactive mitra for the ACCOUNT_INACTIVE flow).
const phone = TEST_PHONE
const displayName = MITRA_DISPLAY_NAME
const isActive = (IS_ACTIVE ?? 'true') !== 'false'
const url = BACKEND_INTERNAL_URL || 'http://localhost:3001'
const resp = http.post(`${url}/internal/_test/seed-mitra`, {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ phone, display_name: displayName, is_active: isActive }),
})
if (resp.status !== 200) {
throw new Error(`seed-mitra failed (${resp.status}): ${resp.body}`)
}