Files
enduro-trails/docs/work-items/ET-011/04b-ui-test-cases.md
claude-bot 721b33a2f6
All checks were successful
CI / lint (push) Successful in 4s
CI / test (push) Successful in 6s
CI / lint (pull_request) Successful in 4s
CI / build (push) Successful in 2s
CI / test (pull_request) Successful in 6s
CI / build (pull_request) Successful in 4s
fix(gps-tracks): address ET-011 review — JS UI tests + flat 403 contract
Закрывает findings из docs/work-items/ET-011/12-review.md (REQUEST_CHANGES,
попытка 3/3):

P1-01 — добавлены поведенческие JS unit-тесты UI download-flow
  - tests/web/track_download.test.js — 28 кейсов (node --test):
      • _parseFilenameFromCD — RFC 5987 приоритет, plain fallback,
        битый percent-encoding, null/empty (REQ-F-05.2, AC-2 UI)
      • _handleDownloadError — 400/403/404/413/5xx тосты, defensive
        при отсутствии showToast, поддержка flat (ADR-015 §G) и legacy
        wrapped 403-форм (REQ-F-05.4, AC-7 UI)
      • _renderTrackPopupHtml — наличие кнопки, aria-label «Скачать GPX»,
        data-track-id, отсутствие при невалидном id, регрессия прочих
        полей (REQ-F-01, AC-1)
  - tests/web/test_track_download.py — pytest-обёртка (статические
    проверки + запуск Node-раннера), исполняется в обычном pytest tests/
  - 04b-ui-test-cases.md: AC-13 (mobile-bbox) явно маркирован как
    MANUAL release-smoke (Playwright-раннер в проекте не настроен;
    альтернатива согласована reviewer'ом в P1-01).

P2-01 — устранено расхождение «doc vs runtime» по контракту 403
  - endpoint.py: HTTPException(detail={...}) → JSONResponse(content={...}),
    чтобы FastAPI не оборачивал dict во второй слой «detail». Контракт
    теперь совпадает с ADR-015 §G и ADR-014 §6:
        {"detail":"source_forbidden","external_urls":[...]}
  - test_gps_tracks_download.py IT-05: упрощено — body уже плоский,
    без двухуровневого `body.get("detail", body)` workaround.
  - gps_tracks.js::_handleDownloadError: flat-форма стала приоритетной,
    wrapped-форма оставлена как defensive fallback (с комментарием).

Регрессия: 89/89 API-тестов + 24/24 предыдущих JS-тестов + 28 новых
JS-тестов download-flow проходят. ruff check — clean.

Refs: ET-011

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-03 23:01:19 +00:00

7.9 KiB
Raw Blame History

UI Test Cases — ET-011: Скачивание трека из popup

Playwright-сценарии для визуальной проверки. Все запускаются на https://openclaw.mva154.duckdns.org/enduro/.

Селекторы базируются на текущем DOM src/web/index.html и popup'е, создаваемом в src/web/gps_tracks.js (_renderTrackPopupHtml). Когда architect/builder уточнит CSS-классы новой кнопки — обновить селекторы в этом файле.

Статус автоматизации (ET-011, после review 12-review.md / P1-01): Playwright-спека tests/web/test_track_download.spec.ts из test-plan §E2E-01..E2E-04 не реализована — в проекте нет настроенного Playwright-раннера. UI-сторона AC-1 / AC-2 / AC-7 закрыта поведенческими JS unit-тестами tests/web/track_download.test.js (28 кейсов, node --test, обёрнуто pytest'ом). AC-13 (mobile bbox / тапабельность кнопки ≥ 32×32 CSS px на 375×667) — ручной smoke перед каждым релизом; сценарий — TC-UI-02 ниже (+ TC-UI-05 для проверки реального download).


TC-UI-01 — Кнопка «Скачать» в popup трека (desktop)

Тип: ui Viewport: desktop (1280×800)

Шаги:

  1. navigate: https://openclaw.mva154.duckdns.org/enduro/
  2. wait: 5000
  3. click: #terrain-toggle
  4. wait: 500
  5. click: #public-tracks-cb
  6. wait: 4000
  7. screenshot: 01-public-tracks-enabled
  8. check-visual: слой публичных треков отрисован (видны цветные линии на карте)
  9. click: #map (в точке, где есть трек — координаты подобрать вручную/программно)
  10. wait: 1500
  11. screenshot: 02-track-popup-opened
  12. check-visual: появилось всплывающее окно .maplibregl-popup с классом .track-popup внутри, видны название, активность, длина
  13. check-visual: внутри popup присутствует кнопка/иконка «Скачать» с aria-label="Скачать GPX"
  14. screenshot: 03-popup-with-download-button

TC-UI-02 — Popup и кнопка на мобильном (AC-13, MANUAL release-smoke)

Тип: ui (manual smoke — единственное покрытие AC-13) Viewport: mobile (375×667) Когда: перед каждым деплоем в test/prod, оператором — DevTools или устройство с тем же viewport.

Шаги:

  1. navigate: https://openclaw.mva154.duckdns.org/enduro/
  2. wait: 5000
  3. click: #terrain-toggle
  4. wait: 500
  5. click: #public-tracks-cb
  6. wait: 4000
  7. click: #map (тап в координате трека)
  8. wait: 1500
  9. screenshot: mobile-popup
  10. check-visual: popup помещается в ширину viewport (≤ 375px), не обрезан
  11. check-visual: кнопка «Скачать» видна без скролла внутри popup
  12. check-visual: bounding box кнопки «Скачать» ≥ 32×32 CSS px

TC-UI-03 — Тёмная тема: контраст кнопки

Тип: ui Viewport: desktop

Шаги:

  1. navigate: https://openclaw.mva154.duckdns.org/enduro/
  2. wait: 5000
  3. check-visual: body имеет класс theme-dark
  4. click: #terrain-toggle
  5. click: #public-tracks-cb
  6. wait: 4000
  7. click: #map (тап в координате трека)
  8. wait: 1500
  9. screenshot: dark-popup-with-download
  10. check-visual: иконка «Скачать» имеет читаемый контраст на тёмном фоне popup (текст / стрелка видна, не сливается с фоном)

TC-UI-04 — Светлая тема: контраст кнопки

Тип: ui Viewport: desktop

Шаги:

  1. navigate: https://openclaw.mva154.duckdns.org/enduro/
  2. wait: 5000
  3. click: #btn-theme
  4. wait: 500
  5. check-visual: body НЕ имеет класса theme-dark (или имеет theme-light)
  6. click: #terrain-toggle
  7. click: #public-tracks-cb
  8. wait: 4000
  9. click: #map (тап в координате трека)
  10. wait: 1500
  11. screenshot: light-popup-with-download
  12. check-visual: иконка «Скачать» читаема в светлой теме

TC-UI-05 — Скачивание срабатывает (e2e download event)

Тип: ui Viewport: desktop

Шаги:

  1. navigate: https://openclaw.mva154.duckdns.org/enduro/
  2. wait: 5000
  3. click: #terrain-toggle
  4. click: #public-tracks-cb
  5. wait: 4000
  6. click: #map (тап в координате трека)
  7. wait: 1500
  8. Подготовить page.waitForEvent('download') ДО клика на кнопку
  9. click: кнопка «Скачать» внутри .maplibregl-popup .track-popup (точный селектор — после Architecture, например .track-popup-download-btn или button[aria-label="Скачать GPX"])
  10. screenshot: download-triggered
  11. check-visual: download event получен, download.suggestedFilename() заканчивается на .gpx
  12. check-visual: файл сохранён, размер > 100 байт, начинается с <?xml

TC-UI-06 — Popup не «прыгает» из-за кнопки

Тип: ui Viewport: desktop

Шаги:

  1. Открыть popup трека (как в TC-UI-01).
  2. wait: 500
  3. Снять bbox popup (getBoundingClientRect через JS).
  4. wait: 1500
  5. Снять bbox повторно.
  6. check-visual: размеры popup не меняются (нет «дёрганий» из-за поздно подгруженного контента кнопки).

TC-UI-07 — Регрессия: остальные элементы popup остались

Тип: ui Viewport: desktop

Шаги:

  1. Открыть popup трека.
  2. screenshot: regression-popup
  3. check-visual: видны все исторические поля
    • название трека
    • строка с иконкой активности и лейблом
    • строка 📏 X.X км · N точек
    • дата (если есть)
    • пользователь (если есть)
    • блок «Источники: …» (если есть)
  4. check-visual: новая кнопка «Скачать» добавлена, но не вытеснила/не заместила другие поля

TC-UI-08 — Регрессия: панель sheet-gpx и downloadGPX маршрута

Тип: ui Viewport: desktop

Шаги:

  1. navigate: https://openclaw.mva154.duckdns.org/enduro/
  2. wait: 5000
  3. click: #tb-gpx
  4. wait: 500
  5. screenshot: regression-sheet-gpx
  6. check-visual: панель #sheet-gpx открывается как раньше, заголовок «GPX-треки», текст-подсказка о загрузке.
  7. closeAllSheets via tap on backdrop
  8. click: #tb-route
  9. wait: 500
  10. screenshot: regression-sheet-route
  11. check-visual: панель #sheet-route открывается, кнопка-иконка «Скачать GPX» (для маршрута) присутствует и работает как прежде.

Примечания по селекторам

Конкретные классы / id новой кнопки внутри popup трека определит architect / builder. В качестве разумных рабочих имён предлагаются:

  • button.track-popup-download-btn или
  • .track-popup .track-popup-actions button[aria-label="Скачать GPX"]

После Architecture стадии обновить селекторы в этом файле.