js-in-html-testing

# JS-in-HTML Two-Layer Testing Strategy For JavaScript logic embedded in HTML files (e.g., diff navigation in viewer.html), use a two-layer testing approach. ## Layer 1: Python Unit Tests (fast algorithm verification) Replicate core JS algorithms in Python and verify correctness via pytest. Best for: pure computation logic, state decisions, matching algorithms — anything that doesn't depend on the DOM. **Example**: `tests/test_diff_matching.py` ```python # Replicate JS findPrevSameModel / findNextSameModel def find_diff_parent_by_prefix(entries, idx): ... def find_next_by_prefix(entries, idx): ... # Replicate JS updateNavButtons state computation def compute_nav_button_states(entries, cur_idx): prev_idx = find_diff_parent_by_prefix(entries, cur_idx) ... return (prev_enabled, next_enabled) ``` Advantages: fast (0.02s), no browser dependency, integrates with existing pytest setup. ## Layer 2: Playwright Browser Integration Tests (DOM interaction verification) Generate HTML with test data embedded, open it in real Chromium via Playwright, and verify DOM state and user interactions. Best for: button disabled states, overlay show/hide, keyboard events, click navigation, etc. **Example**: `tests/test_nav_browser.py` ### Building test HTML ```python def _build_test_html(): from claude_tap.viewer import VIEWER_SCRIPT_ANCHOR, _read_viewer_template template = _read_viewer_template() records = [json.dumps(e) for e in TEST_ENTRIES] data_js = ...