114 lines
4.9 KiB
Python
114 lines
4.9 KiB
Python
import json
|
|
import subprocess
|
|
from pathlib import Path
|
|
|
|
from playwright.sync_api import sync_playwright
|
|
|
|
|
|
FRONTEND = Path(__file__).resolve().parents[1] / "frontend"
|
|
CONTROLLER = FRONTEND / "mobile-issue-detail-nav.js"
|
|
|
|
|
|
def test_pull_navigation_prepares_review_before_scrolling_and_focuses_reply():
|
|
script = f"""
|
|
const createNavigation = require({json.dumps(str(CONTROLLER))});
|
|
class FakeElement {{
|
|
constructor(name) {{ this.name=name; this.listeners={{}}; this.attributes={{}}; this.open=false; this.focuses=0; this.scrolls=[]; }}
|
|
addEventListener(name, callback) {{ this.listeners[name]=callback; }}
|
|
removeEventListener(name) {{ delete this.listeners[name]; }}
|
|
setAttribute(name, value) {{ this.attributes[name]=value; }}
|
|
removeAttribute(name) {{ delete this.attributes[name]; }}
|
|
focus() {{ this.focuses += 1; }}
|
|
scrollIntoView(options) {{ this.scrolls.push({{...options, openWhenScrolled:this.open}}); }}
|
|
}}
|
|
const buttons = Object.fromEntries(['overview','conversation','reply','review'].map(name => [name,new FakeElement(name)]));
|
|
const targets = Object.fromEntries(['overview','conversation','reply','review'].map(name => [name,new FakeElement(name)]));
|
|
let prepared = [];
|
|
const navigation = createNavigation({{
|
|
buttons, targets,
|
|
beforeNavigate:{{review(target) {{ prepared.push('review'); target.open=true; }}}},
|
|
prefersReducedMotion:() => true,
|
|
}});
|
|
navigation.start();
|
|
navigation.navigate('reply');
|
|
navigation.navigate('review');
|
|
process.stdout.write(JSON.stringify({{
|
|
replyFocuses:targets.reply.focuses,
|
|
reviewScrolls:targets.review.scrolls,
|
|
prepared,
|
|
current:Object.fromEntries(Object.entries(buttons).map(([name,button]) => [name,button.attributes['aria-current'] || null])),
|
|
}}));
|
|
"""
|
|
result = subprocess.run(["node", "-e", script], capture_output=True, text=True)
|
|
|
|
assert result.returncode == 0, result.stderr
|
|
assert json.loads(result.stdout) == {
|
|
"replyFocuses": 1,
|
|
"reviewScrolls": [{"block": "start", "behavior": "auto", "openWhenScrolled": True}],
|
|
"prepared": ["review"],
|
|
"current": {
|
|
"overview": None,
|
|
"conversation": None,
|
|
"reply": None,
|
|
"review": "location",
|
|
},
|
|
}
|
|
|
|
|
|
def test_pull_sheet_wires_four_workspace_destinations_to_existing_lazy_review():
|
|
html = (FRONTEND / "index.html").read_text()
|
|
dashboard_js = (FRONTEND / "dashboard.js").read_text()
|
|
|
|
assert '<nav class="mobile-detail-nav mobile-pull-detail-nav"' in html
|
|
assert 'aria-label="Pull request sections"' in html
|
|
for name, label in (
|
|
("overview", "Overview"),
|
|
("conversation", "Conversation"),
|
|
("reply", "Reply"),
|
|
("review", "Review & merge"),
|
|
):
|
|
assert f'data-pull-section="{name}"' in html
|
|
assert f">{label}</button>" in html
|
|
assert 'id="pull-overview"' in html
|
|
assert 'id="pull-conversation"' in html
|
|
assert 'id="pull-comment"' in html
|
|
assert 'id="pull-review"' in html
|
|
assert "document.querySelectorAll('[data-pull-section]')" in dashboard_js
|
|
assert "beforeNavigate:{review(target) { target.open = true; }}" in dashboard_js
|
|
|
|
|
|
def test_pull_workspace_rail_is_phone_contained_and_desktop_hidden():
|
|
html = (FRONTEND / "index.html").read_text()
|
|
css = (FRONTEND / "dashboard.css").read_text()
|
|
rendered = html.replace(
|
|
'<link rel="stylesheet" href="static/dashboard.css" />',
|
|
f"<style>{css}</style>",
|
|
)
|
|
|
|
with sync_playwright() as playwright:
|
|
browser = playwright.chromium.launch()
|
|
page = browser.new_page(viewport={"width": 320, "height": 568})
|
|
page.set_content(rendered, wait_until="domcontentloaded")
|
|
page.locator("#pull-sheet").evaluate("node => node.classList.add('open')")
|
|
for width, height in ((320, 568), (390, 844)):
|
|
page.set_viewport_size({"width": width, "height": height})
|
|
phone = page.locator(".mobile-pull-detail-nav").evaluate(
|
|
"""nav => ({
|
|
display:getComputedStyle(nav).display,
|
|
navWidth:nav.getBoundingClientRect().width,
|
|
panelWidth:nav.closest('.pull-sheet-panel').getBoundingClientRect().width,
|
|
panelOverflow:nav.closest('.pull-sheet-panel').scrollWidth > nav.closest('.pull-sheet-panel').clientWidth,
|
|
heights:Array.from(nav.querySelectorAll('button')).map(button => button.getBoundingClientRect().height),
|
|
position:getComputedStyle(nav).position,
|
|
})"""
|
|
)
|
|
assert phone["display"] == "grid"
|
|
assert phone["position"] == "sticky"
|
|
assert phone["navWidth"] <= phone["panelWidth"]
|
|
assert phone["panelOverflow"] is False
|
|
assert min(phone["heights"]) >= 44
|
|
|
|
page.set_viewport_size({"width": 900, "height": 700})
|
|
assert page.locator(".mobile-pull-detail-nav").evaluate("nav => getComputedStyle(nav).display") == "none"
|
|
browser.close()
|