170a6d0e40
Some checks are pending
Android UI Tests / ui-tests (pull_request) Waiting to run
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
386 lines
15 KiB
Python
Executable File
386 lines
15 KiB
Python
Executable File
#!/usr/bin/env python3
|
||
"""Build docs/parity-gallery.html pairing iOS + Android goldens per screen.
|
||
|
||
The output is a single self-contained HTML file that gitea's raw-file view
|
||
can render directly. Relative <img> paths resolve within the repo so the
|
||
images load without any webserver.
|
||
|
||
Variant matrix (driven by the canonical `GalleryScreens` manifest in
|
||
`composeApp/src/commonMain/.../testing/GalleryManifest.kt`):
|
||
|
||
DataCarrying surfaces — 4 PNGs per platform:
|
||
<screen>_empty_light.png <screen>_empty_dark.png
|
||
<screen>_populated_light.png <screen>_populated_dark.png
|
||
|
||
DataFree surfaces — 2 PNGs per platform:
|
||
<screen>_light.png <screen>_dark.png
|
||
|
||
Category is detected per-screen from which filename pattern exists on
|
||
either platform. Missing captures render as explicit
|
||
`[missing — android]` / `[missing — ios]` placeholder boxes so the gap
|
||
is visible and actionable, rather than silently omitted.
|
||
|
||
iOS snapshots live under
|
||
iosApp/HoneyDueTests/__Snapshots__/SnapshotGalleryTests/
|
||
with swift-snapshot-testing's `test_<func>.<named>.png` format which we
|
||
strip to align with Android's plain `<name>.png`.
|
||
|
||
Usage: python3 scripts/build_parity_gallery.py
|
||
"""
|
||
from __future__ import annotations
|
||
import glob
|
||
import html
|
||
import os
|
||
import re
|
||
|
||
REPO_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
|
||
ANDROID_DIR = "composeApp/src/androidUnitTest/roborazzi"
|
||
IOS_DIR = "iosApp/HoneyDueTests/__Snapshots__/SnapshotGalleryTests"
|
||
OUT_HTML = "docs/parity-gallery.html"
|
||
OUT_MD = "docs/parity-gallery-grid.md"
|
||
MANIFEST_KT = "composeApp/src/commonMain/kotlin/com/tt/honeyDue/testing/GalleryManifest.kt"
|
||
|
||
# swift-snapshot-testing names files "test_<func>.<name>.png".
|
||
IOS_NAME_RE = re.compile(r"^test_[^.]+\.(.+)\.png$")
|
||
|
||
# Stale golden patterns from prior test configurations — filter out so
|
||
# they don't clutter the gallery.
|
||
STALE_SUFFIX_RE = re.compile(
|
||
r"_(default|midnight|ocean)_(light|dark)$|_(actual|compare)$"
|
||
)
|
||
|
||
# Kotlin manifest row: `GalleryScreen("name", GalleryCategory.X, platformsSet),`
|
||
MANIFEST_ROW_RE = re.compile(
|
||
r'GalleryScreen\(\s*"(?P<name>\w+)"\s*,\s*'
|
||
r'GalleryCategory\.(?P<category>\w+)\s*,\s*'
|
||
r'(?P<platforms>\w+)\s*\)',
|
||
)
|
||
|
||
|
||
def canonical_name(platform: str, path: str) -> str | None:
|
||
"""Return the canonical key or None if unparseable / stale."""
|
||
base = os.path.basename(path)
|
||
if platform == "ios":
|
||
m = IOS_NAME_RE.match(base)
|
||
if not m:
|
||
return None
|
||
key = m.group(1)
|
||
else:
|
||
if not base.endswith(".png"):
|
||
return None
|
||
key = base[:-4]
|
||
# Drop stale theme-named and compare-artifact files.
|
||
if STALE_SUFFIX_RE.search(key):
|
||
return None
|
||
return key
|
||
|
||
|
||
def load(platform: str, directory: str) -> dict[str, str]:
|
||
out: dict[str, str] = {}
|
||
full = os.path.join(REPO_ROOT, directory)
|
||
if not os.path.isdir(full):
|
||
return out
|
||
for p in glob.glob(f"{full}/**/*.png", recursive=True):
|
||
key = canonical_name(platform, p)
|
||
if key is None:
|
||
continue
|
||
out[key] = os.path.relpath(p, os.path.join(REPO_ROOT, "docs"))
|
||
return out
|
||
|
||
|
||
def load_manifest() -> list[tuple[str, str, set[str]]]:
|
||
"""Parse `GalleryManifest.kt` → list of (name, category, platforms).
|
||
|
||
Source of truth for which screens exist, their category, and which
|
||
platforms are expected to capture them. The Kotlin manifest is
|
||
itself CI-gated against both platforms' tests, so any drift surfaces
|
||
there before reaching the gallery builder.
|
||
"""
|
||
path = os.path.join(REPO_ROOT, MANIFEST_KT)
|
||
if not os.path.isfile(path):
|
||
raise SystemExit(
|
||
f"Canonical manifest not found at {MANIFEST_KT}. "
|
||
"Run this script from the MyCribKMM repo root."
|
||
)
|
||
with open(path, encoding="utf-8") as f:
|
||
text = f.read()
|
||
rows: list[tuple[str, str, set[str]]] = []
|
||
for m in MANIFEST_ROW_RE.finditer(text):
|
||
name = m.group("name")
|
||
category = m.group("category")
|
||
platforms_ident = m.group("platforms")
|
||
# Resolve the platforms-set identifier to platform names. The
|
||
# manifest declares `both`, `androidOnly`, `iosOnly` as locals
|
||
# inside `GalleryScreens`; we mirror that mapping here.
|
||
platforms = {
|
||
"both": {"android", "ios"},
|
||
"androidOnly": {"android"},
|
||
"iosOnly": {"ios"},
|
||
}.get(platforms_ident)
|
||
if platforms is None:
|
||
raise SystemExit(
|
||
f"Unknown platforms identifier '{platforms_ident}' in manifest"
|
||
)
|
||
rows.append((name, category, platforms))
|
||
if not rows:
|
||
raise SystemExit("No screens parsed from manifest — regex drift?")
|
||
return rows
|
||
|
||
|
||
def rows_for(category: str) -> list[tuple[str, str]]:
|
||
"""Return the list of (state_label, filename_suffix) for a category."""
|
||
if category == "DataCarrying":
|
||
return [
|
||
("empty / light", "empty_light"),
|
||
("empty / dark", "empty_dark"),
|
||
("populated / light", "populated_light"),
|
||
("populated / dark", "populated_dark"),
|
||
]
|
||
return [
|
||
("light", "light"),
|
||
("dark", "dark"),
|
||
]
|
||
|
||
|
||
def placeholder(platform: str, screen: str, suffix: str, expected: bool) -> str:
|
||
"""HTML for a visible placeholder box.
|
||
|
||
`expected=True` → screen is in the manifest for this platform but the
|
||
PNG is missing (red border, action needed).
|
||
`expected=False` → screen is explicitly not-on-this-platform per the
|
||
manifest (muted border, no action needed).
|
||
"""
|
||
if expected:
|
||
cls = "missing missing-needed"
|
||
label = f"[missing — {platform}]"
|
||
else:
|
||
cls = "missing missing-platform"
|
||
label = f"not on {platform}"
|
||
return (
|
||
f"<div class='{cls}'>{label}<br>"
|
||
f"<span class='hint'>{html.escape(screen)}_{html.escape(suffix)}.png</span></div>"
|
||
)
|
||
|
||
|
||
def write_html(
|
||
android: dict[str, str],
|
||
ios: dict[str, str],
|
||
manifest: list[tuple[str, str, set[str]]],
|
||
) -> None:
|
||
out_path = os.path.join(REPO_ROOT, OUT_HTML)
|
||
os.makedirs(os.path.dirname(out_path), exist_ok=True)
|
||
|
||
# Preserve manifest order so the HTML reads product-flow top-to-bottom.
|
||
screen_names = [name for name, _, _ in manifest]
|
||
category_by_name = {name: cat for name, cat, _ in manifest}
|
||
platforms_by_name = {name: plats for name, _, plats in manifest}
|
||
|
||
total_pngs_android = len(android)
|
||
total_pngs_ios = len(ios)
|
||
data_carrying = sum(1 for _, c, _ in manifest if c == "DataCarrying")
|
||
data_free = sum(1 for _, c, _ in manifest if c == "DataFree")
|
||
|
||
with open(out_path, "w", encoding="utf-8") as f:
|
||
f.write(PAGE_HEAD)
|
||
f.write(
|
||
f"<div class='meta'>"
|
||
f"{len(screen_names)} screens · "
|
||
f"{data_carrying} DataCarrying · {data_free} DataFree · "
|
||
f"{total_pngs_android} Android PNGs · {total_pngs_ios} iOS PNGs"
|
||
f"</div>\n"
|
||
)
|
||
f.write("<div class='nav'>")
|
||
f.write(
|
||
" ".join(
|
||
f"<a href='#{html.escape(s)}'>{html.escape(s)}</a>"
|
||
for s in screen_names
|
||
)
|
||
)
|
||
f.write("</div>\n")
|
||
f.write(
|
||
"<div class='grid-header'>"
|
||
"<div class='label'></div>"
|
||
"<div>Android</div>"
|
||
"<div>iOS</div>"
|
||
"</div>\n"
|
||
)
|
||
|
||
for screen in screen_names:
|
||
category = category_by_name[screen]
|
||
plats = platforms_by_name[screen]
|
||
f.write(f"<div class='screen' id='{html.escape(screen)}'>\n")
|
||
f.write(
|
||
f" <h2>{html.escape(screen)} "
|
||
f"<span class='badge badge-{category.lower()}'>{category}</span>"
|
||
)
|
||
if plats != {"android", "ios"}:
|
||
only = "Android" if "android" in plats else "iOS"
|
||
f.write(f" <span class='badge badge-only'>{only}-only</span>")
|
||
f.write("</h2>\n")
|
||
for state_label, suffix in rows_for(category):
|
||
key = f"{screen}_{suffix}"
|
||
a_rel = android.get(key)
|
||
i_rel = ios.get(key)
|
||
a_expected = "android" in plats
|
||
i_expected = "ios" in plats
|
||
a_cell = (
|
||
f"<img loading='lazy' src='{html.escape(a_rel)}' alt='{key} Android'/>"
|
||
if a_rel
|
||
else placeholder("android", screen, suffix, a_expected)
|
||
)
|
||
i_cell = (
|
||
f"<img loading='lazy' src='{html.escape(i_rel)}' alt='{key} iOS'/>"
|
||
if i_rel
|
||
else placeholder("ios", screen, suffix, i_expected)
|
||
)
|
||
f.write(
|
||
f" <div class='row'>"
|
||
f"<div class='label'>{html.escape(state_label)}</div>"
|
||
f"{a_cell}{i_cell}"
|
||
f"</div>\n"
|
||
)
|
||
f.write("</div>\n")
|
||
f.write(PAGE_FOOT)
|
||
|
||
print(
|
||
f"wrote {OUT_HTML}: "
|
||
f"{len(screen_names)} screens ({data_carrying} DC + {data_free} DF) · "
|
||
f"{total_pngs_android} Android · {total_pngs_ios} iOS"
|
||
)
|
||
|
||
|
||
def write_markdown(
|
||
android: dict[str, str],
|
||
ios: dict[str, str],
|
||
manifest: list[tuple[str, str, set[str]]],
|
||
) -> None:
|
||
"""Gitea-renderable grid as markdown tables.
|
||
|
||
Images are emitted as raw `<img>` tags with explicit `width` and
|
||
`height` attributes rather than markdown `![]()` syntax. Gitea's
|
||
markdown renderer (goldmark + bluemonday) strips inline `style`
|
||
attributes, but keeps the `width`/`height` HTML attributes. Forcing
|
||
both dimensions guarantees identical cell sizes regardless of the
|
||
underlying PNG resolution (Android is 360×800 @1x, iOS is 780×1688
|
||
@2x; without this, row heights would shift a few percent per
|
||
platform and break side-by-side comparisons).
|
||
"""
|
||
# Fixed display size for every image cell. Kept at a ~9:19.5 aspect
|
||
# ratio (modern phone proportions). Width chosen to fit two tall
|
||
# portrait screens side-by-side in a typical Gitea markdown pane.
|
||
img_w, img_h = 260, 560
|
||
|
||
out = os.path.join(REPO_ROOT, OUT_MD)
|
||
os.makedirs(os.path.dirname(out), exist_ok=True)
|
||
|
||
def img_tag(src: str, alt: str) -> str:
|
||
return (
|
||
f'<img src="{html.escape(src)}" alt="{html.escape(alt)}" '
|
||
f'width="{img_w}" height="{img_h}">'
|
||
)
|
||
|
||
with open(out, "w", encoding="utf-8") as f:
|
||
f.write("# honeyDue parity gallery\n\n")
|
||
f.write(
|
||
f"*{len(manifest)} screens · {len(android)} Android · {len(ios)} iOS*\n\n"
|
||
)
|
||
f.write(
|
||
"Auto-generated by `scripts/build_parity_gallery.py` — do not hand-edit.\n\n"
|
||
)
|
||
f.write("See [parity-gallery.md](parity-gallery.md) for the workflow guide.\n\n")
|
||
f.write("## Screens\n\n")
|
||
for name, category, plats in manifest:
|
||
tag = ""
|
||
if plats != {"android", "ios"}:
|
||
only = "Android" if "android" in plats else "iOS"
|
||
tag = f" — *{only}-only*"
|
||
f.write(f"- [{name}](#{name.replace('_', '-')}) *({category})*{tag}\n")
|
||
f.write("\n---\n\n")
|
||
for name, category, plats in manifest:
|
||
anchor = name.replace("_", "-")
|
||
f.write(f"## {name} *({category})*<a id='{anchor}'></a>\n\n")
|
||
f.write("| State / Mode | Android | iOS |\n")
|
||
f.write("|---|---|---|\n")
|
||
for state_label, suffix in rows_for(category):
|
||
key = f"{name}_{suffix}"
|
||
a = android.get(key)
|
||
i = ios.get(key)
|
||
a_cell = img_tag(a, f"{key} Android") if a else (
|
||
"_\\[missing — android\\]_" if "android" in plats else "_(not on android)_"
|
||
)
|
||
i_cell = img_tag(i, f"{key} iOS") if i else (
|
||
"_\\[missing — ios\\]_" if "ios" in plats else "_(not on ios)_"
|
||
)
|
||
f.write(f"| **{state_label}** | {a_cell} | {i_cell} |\n")
|
||
f.write("\n[top](#honeydue-parity-gallery)\n\n---\n\n")
|
||
print(f"wrote {OUT_MD}")
|
||
|
||
|
||
def main() -> int:
|
||
manifest = load_manifest()
|
||
android = load("android", ANDROID_DIR)
|
||
ios = load("ios", IOS_DIR)
|
||
write_html(android, ios, manifest)
|
||
write_markdown(android, ios, manifest)
|
||
return 0
|
||
|
||
|
||
PAGE_HEAD = """<!DOCTYPE html>
|
||
<html lang='en'><head><meta charset='utf-8'>
|
||
<title>honeyDue parity gallery</title>
|
||
<style>
|
||
:root { color-scheme: dark; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: #0d1117; color: #e6edf3; margin: 0; padding: 20px; }
|
||
h1 { margin: 0 0 4px; font-size: 20px; }
|
||
.meta { color: #8b949e; font-size: 13px; margin-bottom: 16px; }
|
||
.nav { position: sticky; top: 0; background: #0d1117; padding: 8px 0; margin-bottom: 16px;
|
||
border-bottom: 1px solid #30363d; font-size: 12px; z-index: 10; }
|
||
.nav a { color: #79c0ff; margin-right: 10px; text-decoration: none; white-space: nowrap; }
|
||
.nav a:hover { text-decoration: underline; }
|
||
.grid-header { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 12px;
|
||
padding: 0 12px 8px; color: #8b949e; font-size: 12px; font-weight: 600;
|
||
position: sticky; top: 38px; background: #0d1117; z-index: 9;
|
||
border-bottom: 1px solid #30363d; }
|
||
.screen { background: #161b22; border-radius: 8px; padding: 12px; margin-bottom: 20px; }
|
||
.screen h2 { margin: 0 0 8px; font-size: 16px; color: #e6edf3; display: flex; align-items: center; gap: 8px; }
|
||
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
|
||
.badge-datacarrying { background: #0d5d56; color: #7ee2d1; }
|
||
.badge-datafree { background: #30363d; color: #8b949e; }
|
||
.row { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 12px;
|
||
margin-bottom: 8px; align-items: start; }
|
||
.label { font-size: 12px; color: #c9d1d9; padding-top: 4px; }
|
||
/* Force every screenshot — Android and iOS — into the same display box.
|
||
Native capture sizes differ (Android 360×800 @1x, iOS 390×844 @2x) so
|
||
without a forced aspect-ratio + object-fit the row heights shift by a
|
||
few percent per platform, making side-by-side comparisons noisy. */
|
||
.row img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: contain;
|
||
background: #0d1117; border: 1px solid #30363d; border-radius: 4px;
|
||
display: block; }
|
||
.missing { display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
aspect-ratio: 9 / 19.5; width: 100%;
|
||
background: #21262d; border-radius: 4px;
|
||
font-size: 13px; font-weight: 600; padding: 8px; box-sizing: border-box; }
|
||
.missing.missing-needed { border: 2px dashed #f85149; color: #f85149; }
|
||
.missing.missing-platform { border: 1px solid #30363d; color: #8b949e; }
|
||
.missing .hint { color: #6e7681; font-size: 10px; font-weight: 400;
|
||
margin-top: 6px; font-family: ui-monospace, monospace; }
|
||
.badge-only { background: #484f58; color: #c9d1d9; }
|
||
</style></head><body>
|
||
<h1>honeyDue parity gallery</h1>
|
||
"""
|
||
|
||
PAGE_FOOT = """<script>
|
||
// Ctrl/Cmd-F friendly: expose screen names in the document title on anchor change.
|
||
window.addEventListener('hashchange', () => {
|
||
const s = location.hash.slice(1);
|
||
document.title = s ? `${s} · parity` : 'honeyDue parity gallery';
|
||
});
|
||
</script>
|
||
</body></html>
|
||
"""
|
||
|
||
|
||
if __name__ == "__main__":
|
||
raise SystemExit(main())
|