Jeppe BandJeppe
0b1df55728
## Summary TRU-19 reports that the wash programs **FF Uvs** and **10min** are unresponsive on the Pleno bay while **SF** works. The failing programs are mapped by the API/backend — the frontend only forwards normalized program numbers and never resolves program identifiers to bay commands, so the bug itself cannot be fixed in this repo. This PR adds two frontend-side smoke checks that lock the contract with the wash bay so the next reader (or the next agent) cannot go down the same dead end and so any future contract drift surfaces as a deliberate test failure rather than a silent UI regression: 1. **Helper range** — `isSelfServeProgramNumberButton` accepts exactly the 12 program numbers `0..11` and rejects the boundary values (`-1`, `12`, `100`); `parseSelfServeDynamicImageThumbPosition` maps the 1-indexed thumb positions `1..12` to the same range and rejects `0`, `13`, and non-numeric / nullish input. 2. **Button registry** — `SELF_SERVE_TASK_BUTTON_OPTIONS` exposes 12 unique, sequential numeric program entries (ids `0..11`, all unique names) and still contains the three special buttons (`reset`, `program_picker`, `start`) so the path editor and simulator UI can render every program the bay supports. ## Why this is the right frontend-side fix - The frontend never sees the program identifiers (`FF Uvs`, `10min`, `SF`) — those live in the API repo's machine mapping table. Trying to "fix" the unresponsiveness here would only mask the bug. - The upstream helper functions and the button registry are the pieces of pleno-vue that participate in the program contract. Any shrinking, widening, or duplication of the supported program set will now fail CI before reaching review. - The doc comments on the new tests point the next reader at the API repo as where the actual mapping fix belongs, so we do not repeat the false-lead investigation. ## Commits - `743d4e4` test(self-serve): smoke check program number range (0-11) and thumb position (1-12) - `0f3b125` test(self-serve): smoke check button registry has 12 unique sequential programs ## Tests - `npx vitest run tests/unit/self-serve-dynamic-image.spec.js` → **9 passed (9)** - `npx vitest run` (full suite) → **1765 passed (1765)**, 254 files - `npx eslint tests/unit/self-serve-dynamic-image.spec.js` → clean - `git diff --check HEAD~2..HEAD` → no whitespace/conflict-marker issues ## Issue - Linear: TRU-19 (`AUT-15: pleno-vue + api — wash programs "FF Uvs" and "10min" are unresponsive; "SF" works`) - This PR closes the frontend-side portion of the bug. The actual program mapping fix must be applied in the `api` repo. > _This PR description was generated by an AI agent (OpenHands) on > behalf of the user._ --------- Co-authored-by: Jeppe <jeppe@copenhagentruckwash.io>
truckwashdashboardsfrontend
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VSCode + Volar (and disable Vetur).
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Contributing Changes
Create a scoped feature branch, push it, and open a pull request targeting
master. Do not push directly to master. Merge only after the Required CI
check succeeds, all review conversations are resolved, and the branch is up to
date. Use squash merge so master retains linear history.
See .github/BRANCH_PROTECTION.md for the
repository policy, rollout checks, and emergency bypass procedure.
Compile and Hot-Reload for Development
npm run dev
By default, the Vite dev server proxies /api/* to the remote stable API at
https://api-v2.truckwash.io/master/api. This lets the Vue app run locally
without a local PHP API container.
To develop against a local PHP API instead:
$env:VITE_API_PROXY_TARGET="http://localhost"; npm run dev
To use another remote API route:
$env:VITE_API_PROXY_BASE_PATH="/canary/api"; npm run dev
TLS certificate validation is enabled for proxied HTTPS APIs by default. If you are using a trusted local HTTPS API with a self-signed certificate, you can opt out explicitly:
$env:VITE_API_PROXY_TARGET="https://local-api.test"; $env:VITE_API_PROXY_SECURE="false"; npm run dev
For compatible local gateways that expect the /api prefix to be preserved:
$env:VITE_API_PROXY_TARGET="http://localhost"; $env:VITE_API_PROXY_STRIP_PREFIX="false"; npm run dev
Compile and Minify for Production
npm run build
Playwright Batched Chromium Runs
Run default e2e tests in deterministic 25-test shards across chromium-desktop and chromium-mobile:
npm run test:e2e:batched:chromium
Run the same flow and automatically re-run failed shards with PLAYWRIGHT_WORKERS=1:
npm run test:e2e:batched:chromium:rerun-failed
Optional overrides:
PLAYWRIGHT_BATCH_SIZE=25
PLAYWRIGHT_BATCH_WORKERS=2
PLAYWRIGHT_BATCH_DEV_PORT=5193
You can also forward Playwright args:
npm run test:e2e:batched:chromium -- --grep @smoke
Artifacts and summaries:
output/playwright/batched-chromium/last-run.jsonoutput/playwright/batched-chromium/failed-shards.jsonoutput/playwright/batched-chromium/report-index.htmloutput/playwright/batched-chromium-shard-<i>-of-<n>/report/index.htmloutput/playwright/batched-chromium-rerun-shard-<i>-of-<n>/report/index.html
Playwright Full E2E
Run the permanent grouped full-suite entrypoint with a hard max of 5 total workers across the browser-engine groups:
- Chromium
- WebKit
- Firefox
npm run test:e2e:ci
The full CI matrix is ordered by browser engine, then device class, then user role:
- browsers:
chromium,webkit,firefox - devices:
mobile,desktop,tablet - roles:
superuser,admin,customer,subuser
Run a single full-suite slice for one role and one Playwright project:
npm run test:e2e:full:slice -- --role=admin --project=webkit-tablet
Default worker allocation:
PLAYWRIGHT_PARALLEL_WORKERS_CHROMIUM=2
PLAYWRIGHT_PARALLEL_WORKERS_FIREFOX=1
PLAYWRIGHT_PARALLEL_WORKERS_WEBKIT=1
Optional overrides:
PLAYWRIGHT_PARALLEL_BASE_PORT=5191
PLAYWRIGHT_PARALLEL_WORKERS_CHROMIUM=2
PLAYWRIGHT_PARALLEL_WORKERS_FIREFOX=1
PLAYWRIGHT_PARALLEL_WORKERS_WEBKIT=1
The runner fails fast if the combined worker count exceeds 5.
GitHub Actions keeps the full browser/device/role matrix stable by capping full-suite
matrix parallelism at 2 jobs, running each full slice with PLAYWRIGHT_WORKERS=1,
wrapping Docker Playwright runs with systemd-inhibit when available, and setting
PLAYWRIGHT_VIDEO_MODE=off for the full matrix. The E2E network harness serves
Font Awesome from local fixtures so WebKit page loads and visual snapshots do not
depend on CDN/TLS availability. Traces and screenshots are still retained on
failure.
Artifacts and summaries:
output/playwright/ci-parallel-report/index.htmloutput/playwright/ci-parallel-chromium/report/index.htmloutput/playwright/ci-parallel-firefox/report/index.htmloutput/playwright/ci-parallel-webkit/report/index.htmloutput/playwright/test-lists/<project>-<role>.txtoutput/playwright/test-lists/<role>-<project>.txt(legacy compatibility copy)
Android App Icon
The Play Store Android package is built from the Capacitor project in android/.
The legacy Bubblewrap/TWA project at the repository root is not used by
npm run mobile:android:bundle.
The native launcher and store icons use the opaque iOS marketing icon as their shared master so Android and iOS keep the same white background:
ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-1024.png
Regenerate the checked-in launcher assets after changing that source image:
npm run mobile:android:icons
Check that the generated Android launcher assets are current:
npm run mobile:android:icons:check
npm run mobile:android:sync runs the icon generator before building and syncing
the Capacitor Android project. The generator updates android/app/src/main/res
launcher assets, public/icons/icon-192x192.png, public/icons/icon-512x512.png,
and store_icon.png.
Mobile Store Releases
Signed Android and iOS store artifacts are built through the GitHub Actions
Mobile Store Artifacts workflow. By default, current master after green
Automated Tests uploads Android to Google Play production and uploads iOS to
App Store Connect.
See docs/mobile-artifacts.md for workflow triggers, required secrets, and
local mobile checks. See docs/app-store-release.md for App Store Connect
release preparation and review notes. For a separate development-signed IPA
that can be installed on an approved iPhone from Ubuntu over USB, see
docs/ios-device-debug.md.
Bubblewrap (TWA) Build and Install
To build and install the Trusted Web Activity (TWA) using Bubblewrap, use the following commands:
Build the TWA
bubblewrap build
Install the TWA on a connected device
bubblewrap install