Compare commits
No commits in common. "cc449b3d2f2dafc09043f8f6ee4f1e3049ee43cd" and "25f752339f162b13280ffb2482444cff6003eba0" have entirely different histories.
cc449b3d2f
...
25f752339f
|
|
@ -54,8 +54,8 @@ jobs:
|
||||||
run: |
|
run: |
|
||||||
pip install -r requirements-e2e.txt
|
pip install -r requirements-e2e.txt
|
||||||
python3 -m playwright install --with-deps chromium
|
python3 -m playwright install --with-deps chromium
|
||||||
- name: Exercise mobile offline filing and Search Preview navigation
|
- name: Exercise mobile offline filing from the release artifact
|
||||||
run: python3 -m pytest tests/e2e/test_mobile_offline_issue_release.py tests/e2e/test_mobile_search_preview_navigation.py -q
|
run: python3 -m pytest tests/e2e/test_mobile_offline_issue_release.py -q
|
||||||
|
|
||||||
release-candidate:
|
release-candidate:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
|
|
||||||
|
|
@ -654,10 +654,8 @@ textarea { resize: vertical; min-height: 120px; }
|
||||||
.find-work-detail a { display:flex; align-items:center; justify-content:center; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
|
.find-work-detail a { display:flex; align-items:center; justify-content:center; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
|
||||||
.search-preview { position:fixed; inset:0; z-index:60; display:none; justify-content:flex-end; background:rgba(5,12,21,.72); backdrop-filter:blur(4px); }
|
.search-preview { position:fixed; inset:0; z-index:60; display:none; justify-content:flex-end; background:rgba(5,12,21,.72); backdrop-filter:blur(4px); }
|
||||||
.search-preview.open { display:flex; }
|
.search-preview.open { display:flex; }
|
||||||
.search-preview-panel { box-sizing:border-box; width:min(560px,100%); height:100dvh; overflow:auto; overflow-x:hidden; display:grid; align-content:start; gap:12px; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); background:#0b1526; border-left:1px solid #2a496e; overflow-wrap:anywhere; }
|
.search-preview-panel { box-sizing:border-box; width:min(560px,100%); height:100dvh; overflow:auto; display:grid; align-content:start; gap:12px; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); background:#0b1526; border-left:1px solid #2a496e; overflow-wrap:anywhere; }
|
||||||
.search-preview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
|
.search-preview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
|
||||||
.mobile-search-preview-nav { display:none; }
|
|
||||||
.search-preview-overview { display:grid; gap:12px; min-width:0; }
|
|
||||||
.search-preview-header button, .search-preview-actions button, .search-preview-actions a { min-height:44px; }
|
.search-preview-header button, .search-preview-actions button, .search-preview-actions a { min-height:44px; }
|
||||||
.search-preview-body { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
|
.search-preview-body { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
|
||||||
.search-preview-conversation { display:grid; gap:8px; padding-top:8px; border-top:1px solid #2a496e; }
|
.search-preview-conversation { display:grid; gap:8px; padding-top:8px; border-top:1px solid #2a496e; }
|
||||||
|
|
@ -680,33 +678,6 @@ textarea { resize: vertical; min-height: 120px; }
|
||||||
@media (max-width:420px) {
|
@media (max-width:420px) {
|
||||||
.search-preview-primary-actions { grid-template-columns:1fr; }
|
.search-preview-primary-actions { grid-template-columns:1fr; }
|
||||||
}
|
}
|
||||||
@media (max-width:600px) {
|
|
||||||
.search-preview-panel { width:100%; border-left:0; padding:14px; padding-top:max(12px,env(safe-area-inset-top)); }
|
|
||||||
.mobile-search-preview-nav {
|
|
||||||
position:sticky; top:env(safe-area-inset-top); z-index:6;
|
|
||||||
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
|
|
||||||
margin-inline:-14px; padding:4px 14px;
|
|
||||||
background:rgba(11,21,38,.98); border-block:1px solid #2a496e;
|
|
||||||
}
|
|
||||||
.mobile-search-preview-nav button {
|
|
||||||
min-width:0; min-height:44px; padding:4px; overflow-wrap:anywhere;
|
|
||||||
border-color:transparent; font-size:12px;
|
|
||||||
}
|
|
||||||
.mobile-search-preview-nav button[aria-current="location"] {
|
|
||||||
border-color:#60a5fa; background:#17365a; color:#fff;
|
|
||||||
}
|
|
||||||
.mobile-search-preview-nav button[aria-disabled="true"] { opacity:.55; }
|
|
||||||
.search-preview-navigation {
|
|
||||||
position:sticky; bottom:0; z-index:5;
|
|
||||||
margin-inline:-6px; padding:6px;
|
|
||||||
padding-bottom:calc(6px + env(safe-area-inset-bottom));
|
|
||||||
background:rgba(11,21,38,.98); border-block:1px solid #2a496e;
|
|
||||||
}
|
|
||||||
#search-preview-overview, #search-preview-conversation,
|
|
||||||
#search-preview-reply-workspace, #search-preview-actions { scroll-margin-top:72px; }
|
|
||||||
#search-preview-actions { position:static; }
|
|
||||||
}
|
|
||||||
@media (min-width:601px) { .mobile-search-preview-nav { display:none; } }
|
|
||||||
.search-preview-actions a { display:flex; align-items:center; justify-content:center; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
|
.search-preview-actions a { display:flex; align-items:center; justify-content:center; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
|
||||||
.markdown-content { min-width:0; max-width:100%; overflow-wrap:anywhere; white-space:normal; }
|
.markdown-content { min-width:0; max-width:100%; overflow-wrap:anywhere; white-space:normal; }
|
||||||
.markdown-content > :first-child { margin-top:0; }
|
.markdown-content > :first-child { margin-top:0; }
|
||||||
|
|
|
||||||
|
|
@ -533,17 +533,9 @@
|
||||||
</div>
|
</div>
|
||||||
<button id="close-search-preview" type="button">Back to search</button>
|
<button id="close-search-preview" type="button">Back to search</button>
|
||||||
</div>
|
</div>
|
||||||
<nav class="mobile-search-preview-nav" aria-label="Search preview sections">
|
<div id="search-preview-status" class="small" aria-live="polite">Choose a search result.</div>
|
||||||
<button type="button" data-search-preview-section="overview">Overview</button>
|
<div id="search-preview-meta" class="row"></div>
|
||||||
<button type="button" data-search-preview-section="conversation">Conversation</button>
|
<div id="search-preview-body" class="search-preview-body markdown-content"></div>
|
||||||
<button type="button" data-search-preview-section="reply">Reply</button>
|
|
||||||
<button type="button" data-search-preview-section="actions">Act</button>
|
|
||||||
</nav>
|
|
||||||
<section id="search-preview-overview" class="search-preview-overview">
|
|
||||||
<div id="search-preview-status" class="small" aria-live="polite">Choose a search result.</div>
|
|
||||||
<div id="search-preview-meta" class="row"></div>
|
|
||||||
<div id="search-preview-body" class="search-preview-body markdown-content"></div>
|
|
||||||
</section>
|
|
||||||
<section id="search-preview-conversation" class="search-preview-conversation" aria-labelledby="search-preview-conversation-title">
|
<section id="search-preview-conversation" class="search-preview-conversation" aria-labelledby="search-preview-conversation-title">
|
||||||
<h2 id="search-preview-conversation-title">Current conversation</h2>
|
<h2 id="search-preview-conversation-title">Current conversation</h2>
|
||||||
<div id="search-preview-comments"></div>
|
<div id="search-preview-comments"></div>
|
||||||
|
|
@ -551,7 +543,7 @@
|
||||||
<button id="retry-search-preview-conversation" type="button" hidden>Retry conversation</button>
|
<button id="retry-search-preview-conversation" type="button" hidden>Retry conversation</button>
|
||||||
<button id="load-older-search-preview-comments" type="button" hidden>Load older messages</button>
|
<button id="load-older-search-preview-comments" type="button" hidden>Load older messages</button>
|
||||||
</section>
|
</section>
|
||||||
<section class="search-preview-reply" id="search-preview-reply-workspace" aria-labelledby="search-preview-reply-title" hidden>
|
<section class="search-preview-reply" aria-labelledby="search-preview-reply-title" hidden>
|
||||||
<h2 id="search-preview-reply-title">Reply</h2>
|
<h2 id="search-preview-reply-title">Reply</h2>
|
||||||
<textarea id="search-preview-reply" maxlength="10000" placeholder="Write a reply"></textarea>
|
<textarea id="search-preview-reply" maxlength="10000" placeholder="Write a reply"></textarea>
|
||||||
<section class="voice-conversation" id="voice-search-reply" aria-label="Dictate search result reply" hidden>
|
<section class="voice-conversation" id="voice-search-reply" aria-label="Dictate search result reply" hidden>
|
||||||
|
|
@ -597,7 +589,7 @@
|
||||||
<button id="send-search-preview-reply-next" type="button">Send & next</button>
|
<button id="send-search-preview-reply-next" type="button">Send & next</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div class="search-preview-actions" id="search-preview-actions">
|
<div class="search-preview-actions">
|
||||||
<nav class="search-preview-navigation" aria-label="Search result navigation" hidden>
|
<nav class="search-preview-navigation" aria-label="Search result navigation" hidden>
|
||||||
<button id="previous-search-result" type="button">Previous</button>
|
<button id="previous-search-result" type="button">Previous</button>
|
||||||
<span id="search-preview-position" aria-live="polite"></span>
|
<span id="search-preview-position" aria-live="polite"></span>
|
||||||
|
|
@ -1587,7 +1579,6 @@
|
||||||
<script src="static/mobile-issue-detail-nav.js"></script>
|
<script src="static/mobile-issue-detail-nav.js"></script>
|
||||||
<script src="static/mobile-update-detail-nav.js"></script>
|
<script src="static/mobile-update-detail-nav.js"></script>
|
||||||
<script src="static/mobile-review-detail-nav.js"></script>
|
<script src="static/mobile-review-detail-nav.js"></script>
|
||||||
<script src="static/mobile-search-preview-nav.js"></script>
|
|
||||||
<script src="static/dashboard.js"></script>
|
<script src="static/dashboard.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
function createMobileSearchPreviewNavigation(options) {
|
|
||||||
const buttons = options.buttons || {};
|
|
||||||
const targets = options.targets || {};
|
|
||||||
const focusTargets = options.focusTargets || {};
|
|
||||||
const listeners = new Map();
|
|
||||||
const prefersReducedMotion = options.prefersReducedMotion || (() => false);
|
|
||||||
const targetNames = new Map(Object.entries(targets).map(([name, target]) => [target, name]));
|
|
||||||
let replyAvailable = options.replyAvailable !== false;
|
|
||||||
let observer = null;
|
|
||||||
let navigationLockUntil = 0;
|
|
||||||
|
|
||||||
function select(name) {
|
|
||||||
Object.entries(buttons).forEach(([key, button]) => {
|
|
||||||
if (!button) return;
|
|
||||||
if (key === name) button.setAttribute('aria-current', 'location');
|
|
||||||
else button.removeAttribute('aria-current');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function setReplyAvailable(available) {
|
|
||||||
replyAvailable = Boolean(available);
|
|
||||||
const button = buttons.reply;
|
|
||||||
if (!button) return;
|
|
||||||
if (replyAvailable) button.removeAttribute('aria-disabled');
|
|
||||||
else button.setAttribute('aria-disabled', 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
function navigate(name) {
|
|
||||||
if (name === 'reply' && !replyAvailable) return false;
|
|
||||||
const target = targets[name];
|
|
||||||
if (!target) return false;
|
|
||||||
target.scrollIntoView({
|
|
||||||
block: 'start',
|
|
||||||
behavior: prefersReducedMotion() ? 'auto' : 'smooth',
|
|
||||||
});
|
|
||||||
navigationLockUntil = Date.now() + 500;
|
|
||||||
select(name);
|
|
||||||
const focusTarget = focusTargets[name] || (name === 'reply' ? target : null);
|
|
||||||
if (focusTarget) focusTarget.focus({preventScroll:true});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function reset(available = replyAvailable) {
|
|
||||||
setReplyAvailable(available);
|
|
||||||
select('overview');
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
start() {
|
|
||||||
Object.entries(buttons).forEach(([name, button]) => {
|
|
||||||
if (!button || listeners.has(button)) return;
|
|
||||||
const listener = event => {
|
|
||||||
event.preventDefault();
|
|
||||||
navigate(name);
|
|
||||||
};
|
|
||||||
listeners.set(button, listener);
|
|
||||||
button.addEventListener('click', listener);
|
|
||||||
});
|
|
||||||
reset(replyAvailable);
|
|
||||||
const observe = options.observe || ((handler, observedTargets, root) => {
|
|
||||||
if (typeof IntersectionObserver === 'undefined') return null;
|
|
||||||
const instance = new IntersectionObserver(handler, {
|
|
||||||
root,
|
|
||||||
rootMargin: '-20% 0px -60% 0px',
|
|
||||||
threshold: [0, 0.25, 0.5, 0.75, 1],
|
|
||||||
});
|
|
||||||
observedTargets.forEach(target => instance.observe(target));
|
|
||||||
return instance;
|
|
||||||
});
|
|
||||||
observer = observe(entries => {
|
|
||||||
if (Date.now() < navigationLockUntil) return;
|
|
||||||
const visible = entries
|
|
||||||
.filter(entry => entry.isIntersecting && targetNames.has(entry.target))
|
|
||||||
.filter(entry => targetNames.get(entry.target) !== 'reply' || replyAvailable)
|
|
||||||
.sort((left, right) => right.intersectionRatio - left.intersectionRatio)[0];
|
|
||||||
if (visible) select(targetNames.get(visible.target));
|
|
||||||
}, Array.from(targetNames.keys()).filter(Boolean), options.root || null);
|
|
||||||
},
|
|
||||||
stop() {
|
|
||||||
listeners.forEach((listener, button) => button.removeEventListener('click', listener));
|
|
||||||
listeners.clear();
|
|
||||||
if (observer) observer.disconnect();
|
|
||||||
observer = null;
|
|
||||||
},
|
|
||||||
navigate,
|
|
||||||
reset,
|
|
||||||
select,
|
|
||||||
setReplyAvailable,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function attachMobileSearchPreviewNavigation({document, window}) {
|
|
||||||
const bySection = name => document.querySelector('[data-search-preview-section="' + name + '"]');
|
|
||||||
const preview = document.getElementById('search-preview');
|
|
||||||
const reply = document.getElementById('search-preview-reply-workspace');
|
|
||||||
const navigation = createMobileSearchPreviewNavigation({
|
|
||||||
root:document.querySelector('.search-preview-panel'),
|
|
||||||
buttons:{
|
|
||||||
overview:bySection('overview'),
|
|
||||||
conversation:bySection('conversation'),
|
|
||||||
reply:bySection('reply'),
|
|
||||||
actions:bySection('actions'),
|
|
||||||
},
|
|
||||||
targets:{
|
|
||||||
overview:document.getElementById('search-preview-overview'),
|
|
||||||
conversation:document.getElementById('search-preview-conversation'),
|
|
||||||
reply,
|
|
||||||
actions:document.getElementById('search-preview-actions'),
|
|
||||||
},
|
|
||||||
focusTargets:{reply:document.getElementById('search-preview-reply')},
|
|
||||||
replyAvailable:!reply.hidden,
|
|
||||||
prefersReducedMotion:() => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
|
|
||||||
});
|
|
||||||
navigation.start();
|
|
||||||
new MutationObserver(() => navigation.setReplyAvailable(!reply.hidden)).observe(reply, {
|
|
||||||
attributes:true, attributeFilter:['hidden'],
|
|
||||||
});
|
|
||||||
new MutationObserver(() => {
|
|
||||||
if (preview.classList.contains('open')) navigation.reset(!reply.hidden);
|
|
||||||
}).observe(preview, {attributes:true, attributeFilter:['class']});
|
|
||||||
['previous-search-result', 'next-search-result'].forEach(id => {
|
|
||||||
document.getElementById(id).addEventListener('click', () => {
|
|
||||||
setTimeout(() => navigation.reset(!reply.hidden), 0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return navigation;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof module !== 'undefined') module.exports = createMobileSearchPreviewNavigation;
|
|
||||||
else attachMobileSearchPreviewNavigation({document, window});
|
|
||||||
|
|
@ -80,7 +80,6 @@ const SHELL = [
|
||||||
BASE + 'static/mobile-issue-detail-nav.js',
|
BASE + 'static/mobile-issue-detail-nav.js',
|
||||||
BASE + 'static/mobile-update-detail-nav.js',
|
BASE + 'static/mobile-update-detail-nav.js',
|
||||||
BASE + 'static/mobile-review-detail-nav.js',
|
BASE + 'static/mobile-review-detail-nav.js',
|
||||||
BASE + 'static/mobile-search-preview-nav.js',
|
|
||||||
BASE + 'static/checklist-conflict.js',
|
BASE + 'static/checklist-conflict.js',
|
||||||
BASE + 'static/voice-transcript-store.js',
|
BASE + 'static/voice-transcript-store.js',
|
||||||
BASE + 'static/voice-issue-capture.js',
|
BASE + 'static/voice-issue-capture.js',
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ FEATURE_SOURCES = {
|
||||||
"security-center": ("static/security-center.js",),
|
"security-center": ("static/security-center.js",),
|
||||||
"today-timer": (
|
"today-timer": (
|
||||||
"static/voice-transcript-store.js", "static/voice-conversation-capture.js",
|
"static/voice-transcript-store.js", "static/voice-conversation-capture.js",
|
||||||
"static/today-completion.js", "static/work-detail-position.js", "static/work-route.js", "static/commands.js", "static/saved-searches.js", "static/task-overlay-history.js", "static/search-preview.js", "static/mobile-search-preview-nav.js", "static/search-reply-draft-store.js", "static/conversation-reply-draft-store.js", "static/conversation-photo-drafts.js", "static/search-defer.js", "static/mobile-search-viewport.js", "static/my-work.js", "static/protect-today.js", "static/mobile-task-dock.js", "static/mobile-queue-launcher.js", "static/mobile-start-day.js", "static/update-triage-session.js", "static/update-review-handoff.js", "static/update-triage-launcher.js", "static/update-triage-gesture.js", "static/notification-undo.js", "static/today-timer.js", "static/today-recap.js",
|
"static/today-completion.js", "static/work-detail-position.js", "static/work-route.js", "static/commands.js", "static/saved-searches.js", "static/task-overlay-history.js", "static/search-preview.js", "static/search-reply-draft-store.js", "static/conversation-reply-draft-store.js", "static/conversation-photo-drafts.js", "static/search-defer.js", "static/mobile-search-viewport.js", "static/my-work.js", "static/protect-today.js", "static/mobile-task-dock.js", "static/mobile-queue-launcher.js", "static/mobile-start-day.js", "static/update-triage-session.js", "static/update-review-handoff.js", "static/update-triage-launcher.js", "static/update-triage-gesture.js", "static/notification-undo.js", "static/today-timer.js", "static/today-recap.js",
|
||||||
"static/today-rollover.js", "static/later-work.js", "static/later-picker.js", "static/drafts.js", "static/unfiled-captures.js", "static/unfiled-draft-sync.js",
|
"static/today-rollover.js", "static/later-work.js", "static/later-picker.js", "static/drafts.js", "static/unfiled-captures.js", "static/unfiled-draft-sync.js",
|
||||||
"static/assign-and-start.js", "static/filed-claim.js", "static/queue-today.js", "static/create-and-start.js",
|
"static/assign-and-start.js", "static/filed-claim.js", "static/queue-today.js", "static/create-and-start.js",
|
||||||
"static/draft-filing-session.js", "static/draft-capacity-dialog.js", "static/work-selection.js",
|
"static/draft-filing-session.js", "static/draft-capacity-dialog.js", "static/work-selection.js",
|
||||||
|
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
from __future__ import annotations
|
|
||||||
|
|
||||||
import os
|
|
||||||
import re
|
|
||||||
from pathlib import Path
|
|
||||||
|
|
||||||
import pytest
|
|
||||||
|
|
||||||
if os.getenv("STACKCHAIN_RUN_RELEASE_E2E") != "1":
|
|
||||||
pytest.skip("rendered mobile Search Preview checks run only in the browser gate", allow_module_level=True)
|
|
||||||
pytest.importorskip("playwright.sync_api")
|
|
||||||
from playwright.sync_api import expect, sync_playwright
|
|
||||||
|
|
||||||
|
|
||||||
ROOT = Path(__file__).resolve().parents[2]
|
|
||||||
FRONTEND = ROOT / "frontend"
|
|
||||||
|
|
||||||
|
|
||||||
@pytest.mark.parametrize(("width", "height"), [(320, 568), (390, 844)])
|
|
||||||
def test_rendered_mobile_search_preview_navigation_preserves_reading_space_and_draft(width, height):
|
|
||||||
html = re.sub(r'<script src="static/[^"]+"></script>', "", (FRONTEND / "index.html").read_text())
|
|
||||||
|
|
||||||
with sync_playwright() as playwright:
|
|
||||||
browser = playwright.chromium.launch()
|
|
||||||
page = browser.new_page(viewport={"width": width, "height": height})
|
|
||||||
page.set_content(html)
|
|
||||||
page.add_style_tag(path=FRONTEND / "dashboard.css")
|
|
||||||
page.locator("#search-preview").evaluate("node => node.classList.add('open')")
|
|
||||||
page.locator("#search-preview-reply-workspace").evaluate("node => node.hidden = false")
|
|
||||||
page.locator(".search-preview-navigation").evaluate("node => node.hidden = false")
|
|
||||||
page.locator("#search-preview-overview").evaluate("node => node.style.minHeight = '500px'")
|
|
||||||
page.locator("#search-preview-conversation").evaluate("node => node.style.minHeight = '500px'")
|
|
||||||
page.locator("#search-preview-reply-workspace").evaluate("node => node.style.minHeight = '500px'")
|
|
||||||
page.locator("#search-preview-actions").evaluate("node => node.style.minHeight = '300px'")
|
|
||||||
page.add_script_tag(path=FRONTEND / "mobile-search-preview-nav.js")
|
|
||||||
|
|
||||||
navigation = page.locator(".mobile-search-preview-nav")
|
|
||||||
expect(navigation).to_be_visible()
|
|
||||||
buttons = navigation.locator("button")
|
|
||||||
assert buttons.count() == 4
|
|
||||||
for button in buttons.all():
|
|
||||||
bounds = button.bounding_box()
|
|
||||||
assert bounds and bounds["height"] >= 44
|
|
||||||
assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")
|
|
||||||
assert page.locator(".search-preview-panel").evaluate("node => node.scrollWidth <= node.clientWidth")
|
|
||||||
|
|
||||||
page.locator("#search-preview-reply").fill("Keep this reply while navigating")
|
|
||||||
navigation.locator('[data-search-preview-section="conversation"]').click()
|
|
||||||
expect(navigation.locator('[data-search-preview-section="conversation"]')).to_have_attribute(
|
|
||||||
"aria-current", "location"
|
|
||||||
)
|
|
||||||
navigation.locator('[data-search-preview-section="reply"]').click()
|
|
||||||
expect(page.locator("#search-preview-reply")).to_be_focused()
|
|
||||||
assert page.locator("#search-preview-reply").input_value() == "Keep this reply while navigating"
|
|
||||||
navigation.locator('[data-search-preview-section="actions"]').click()
|
|
||||||
expect(navigation.locator('[data-search-preview-section="actions"]')).to_have_attribute(
|
|
||||||
"aria-current", "location"
|
|
||||||
)
|
|
||||||
|
|
||||||
continuation = page.locator(".search-preview-navigation")
|
|
||||||
assert continuation.evaluate("node => getComputedStyle(node).position") == "sticky"
|
|
||||||
assert continuation.evaluate("node => getComputedStyle(node).bottom") == "0px"
|
|
||||||
assert page.locator("#search-preview-actions").evaluate("node => getComputedStyle(node).position") == "static"
|
|
||||||
|
|
||||||
page.locator("#next-search-result").click()
|
|
||||||
expect(navigation.locator('[data-search-preview-section="overview"]')).to_have_attribute(
|
|
||||||
"aria-current", "location"
|
|
||||||
)
|
|
||||||
assert page.locator("#search-preview-reply").input_value() == "Keep this reply while navigating"
|
|
||||||
|
|
||||||
page.set_viewport_size({"width": 800, "height": 700})
|
|
||||||
expect(navigation).to_be_hidden()
|
|
||||||
browser.close()
|
|
||||||
|
|
@ -38,8 +38,5 @@ def test_release_promotion_waits_for_artifact_mobile_offline_journey():
|
||||||
assert "pip install -r requirements-e2e.txt" in browser
|
assert "pip install -r requirements-e2e.txt" in browser
|
||||||
assert "python3 -m playwright install --with-deps chromium" in browser
|
assert "python3 -m playwright install --with-deps chromium" in browser
|
||||||
assert 'STACKCHAIN_RUN_RELEASE_E2E: "1"' in browser
|
assert 'STACKCHAIN_RUN_RELEASE_E2E: "1"' in browser
|
||||||
assert (
|
assert "python3 -m pytest tests/e2e/test_mobile_offline_issue_release.py -q" in browser
|
||||||
"python3 -m pytest tests/e2e/test_mobile_offline_issue_release.py "
|
|
||||||
"tests/e2e/test_mobile_search_preview_navigation.py -q"
|
|
||||||
) in browser
|
|
||||||
assert "needs: [lint, build-release, browser-journey]" in release
|
assert "needs: [lint, build-release, browser-journey]" in release
|
||||||
|
|
|
||||||
|
|
@ -1,135 +0,0 @@
|
||||||
import json
|
|
||||||
import subprocess
|
|
||||||
from pathlib import Path
|
|
||||||
|
|
||||||
|
|
||||||
CONTROLLER = Path(__file__).resolve().parents[1] / "frontend" / "mobile-search-preview-nav.js"
|
|
||||||
FRONTEND = CONTROLLER.parent
|
|
||||||
|
|
||||||
|
|
||||||
def run_navigation(scenario: str) -> dict:
|
|
||||||
script = f"""
|
|
||||||
const createNavigation = require({json.dumps(str(CONTROLLER))});
|
|
||||||
class FakeElement {{
|
|
||||||
constructor(name) {{
|
|
||||||
this.name=name; this.listeners={{}}; this.attributes={{}}; this.scrolls=[];
|
|
||||||
this.focuses=0; this.hidden=false;
|
|
||||||
}}
|
|
||||||
addEventListener(name, callback) {{ this.listeners[name]=callback; }}
|
|
||||||
removeEventListener(name) {{ delete this.listeners[name]; }}
|
|
||||||
click() {{ this.listeners.click?.({{preventDefault() {{}}}}); }}
|
|
||||||
setAttribute(name,value) {{ this.attributes[name]=value; }}
|
|
||||||
removeAttribute(name) {{ delete this.attributes[name]; }}
|
|
||||||
scrollIntoView(options) {{ this.scrolls.push(options); }}
|
|
||||||
focus(options) {{ this.focuses += 1; this.focusOptions=options; }}
|
|
||||||
}}
|
|
||||||
{scenario}
|
|
||||||
"""
|
|
||||||
result = subprocess.run(["node", "-e", script], capture_output=True, text=True)
|
|
||||||
assert result.returncode == 0, result.stderr
|
|
||||||
return json.loads(result.stdout)
|
|
||||||
|
|
||||||
|
|
||||||
def test_mobile_search_preview_navigation_completes_the_workflow_and_gates_reply():
|
|
||||||
result = run_navigation("""
|
|
||||||
const names=['overview','conversation','reply','actions'];
|
|
||||||
const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
|
||||||
const targets=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
|
||||||
const navigation=createNavigation({buttons,targets,prefersReducedMotion:()=>true});
|
|
||||||
navigation.start();
|
|
||||||
navigation.setReplyAvailable(false);
|
|
||||||
buttons.reply.click();
|
|
||||||
const unavailableScrolls=targets.reply.scrolls.length;
|
|
||||||
navigation.setReplyAvailable(true);
|
|
||||||
buttons.conversation.click();
|
|
||||||
buttons.reply.click();
|
|
||||||
buttons.actions.click();
|
|
||||||
const selected=Object.fromEntries(Object.entries(buttons).map(([name,button])=>[name,button.attributes['aria-current']||null]));
|
|
||||||
navigation.stop();
|
|
||||||
process.stdout.write(JSON.stringify({
|
|
||||||
unavailableScrolls,
|
|
||||||
replyDisabled:buttons.reply.attributes['aria-disabled']||null,
|
|
||||||
conversation:targets.conversation.scrolls,
|
|
||||||
reply:targets.reply.scrolls,
|
|
||||||
replyFocuses:targets.reply.focuses,
|
|
||||||
actions:targets.actions.scrolls,
|
|
||||||
selected,
|
|
||||||
listeners:Object.values(buttons).map(button=>Object.keys(button.listeners).length),
|
|
||||||
}));
|
|
||||||
""")
|
|
||||||
|
|
||||||
assert result == {
|
|
||||||
"unavailableScrolls": 0,
|
|
||||||
"replyDisabled": None,
|
|
||||||
"conversation": [{"block": "start", "behavior": "auto"}],
|
|
||||||
"reply": [{"block": "start", "behavior": "auto"}],
|
|
||||||
"replyFocuses": 1,
|
|
||||||
"actions": [{"block": "start", "behavior": "auto"}],
|
|
||||||
"selected": {
|
|
||||||
"overview": None,
|
|
||||||
"conversation": None,
|
|
||||||
"reply": None,
|
|
||||||
"actions": "location",
|
|
||||||
},
|
|
||||||
"listeners": [0, 0, 0, 0],
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
def test_mobile_search_preview_navigation_tracks_panel_sections_and_resets_for_next_result():
|
|
||||||
result = run_navigation("""
|
|
||||||
const names=['overview','conversation','reply','actions'];
|
|
||||||
const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
|
||||||
const targets=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
|
||||||
const root=new FakeElement('panel');
|
|
||||||
let callback; let observedRoot; let disconnected=0;
|
|
||||||
const navigation=createNavigation({
|
|
||||||
buttons,targets,root,
|
|
||||||
observe(handler,observed,rootOption){callback=handler; observedRoot=rootOption; return {disconnect(){disconnected++;}};},
|
|
||||||
});
|
|
||||||
navigation.start();
|
|
||||||
callback([{target:targets.overview,isIntersecting:true,intersectionRatio:.2},{target:targets.conversation,isIntersecting:true,intersectionRatio:.8}]);
|
|
||||||
navigation.reset(false);
|
|
||||||
const selected=Object.fromEntries(Object.entries(buttons).map(([name,button])=>[name,button.attributes['aria-current']||null]));
|
|
||||||
navigation.stop();
|
|
||||||
process.stdout.write(JSON.stringify({selected,replyDisabled:buttons.reply.attributes['aria-disabled'],observedRoot:observedRoot.name,disconnected}));
|
|
||||||
""")
|
|
||||||
|
|
||||||
assert result == {
|
|
||||||
"selected": {"overview": "location", "conversation": None, "reply": None, "actions": None},
|
|
||||||
"replyDisabled": "true",
|
|
||||||
"observedRoot": "panel",
|
|
||||||
"disconnected": 1,
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
def test_search_preview_ships_mobile_navigation_in_the_offline_bundle():
|
|
||||||
html = (FRONTEND / "index.html").read_text()
|
|
||||||
css = (FRONTEND / "dashboard.css").read_text()
|
|
||||||
navigation_js = CONTROLLER.read_text()
|
|
||||||
bundle = (FRONTEND.parent / "src" / "frontend_bundle.py").read_text()
|
|
||||||
service_worker = (FRONTEND / "service-worker.js").read_text()
|
|
||||||
|
|
||||||
assert '<nav class="mobile-search-preview-nav"' in html
|
|
||||||
assert 'aria-label="Search preview sections"' in html
|
|
||||||
for name, label in (
|
|
||||||
("overview", "Overview"),
|
|
||||||
("conversation", "Conversation"),
|
|
||||||
("reply", "Reply"),
|
|
||||||
("actions", "Act"),
|
|
||||||
):
|
|
||||||
assert f'data-search-preview-section="{name}"' in html
|
|
||||||
assert f">{label}</button>" in html
|
|
||||||
assert 'id="search-preview-overview"' in html
|
|
||||||
assert 'id="search-preview-reply-workspace"' in html
|
|
||||||
assert 'id="search-preview-actions"' in html
|
|
||||||
assert '<script src="static/mobile-search-preview-nav.js"></script>' in html
|
|
||||||
assert '"static/mobile-search-preview-nav.js"' in bundle
|
|
||||||
assert "attachMobileSearchPreviewNavigation({document, window})" in navigation_js
|
|
||||||
assert "navigation.reset(!reply.hidden)" in navigation_js
|
|
||||||
assert "attributeFilter:['hidden']" in navigation_js
|
|
||||||
assert "static/mobile-search-preview-nav.js" in service_worker
|
|
||||||
assert ".mobile-search-preview-nav" in css
|
|
||||||
assert "grid-template-columns:repeat(4,minmax(0,1fr))" in css
|
|
||||||
assert "min-height:44px" in css
|
|
||||||
assert "env(safe-area-inset-top)" in css
|
|
||||||
assert "#search-preview-actions { position:static" in css
|
|
||||||
|
|
@ -1001,7 +1001,6 @@ def test_install_precaches_complete_subpath_scoped_app_shell():
|
||||||
"/dashboard/static/mobile-issue-detail-nav.js",
|
"/dashboard/static/mobile-issue-detail-nav.js",
|
||||||
"/dashboard/static/mobile-update-detail-nav.js",
|
"/dashboard/static/mobile-update-detail-nav.js",
|
||||||
"/dashboard/static/mobile-review-detail-nav.js",
|
"/dashboard/static/mobile-review-detail-nav.js",
|
||||||
"/dashboard/static/mobile-search-preview-nav.js",
|
|
||||||
"/dashboard/static/checklist-conflict.js",
|
"/dashboard/static/checklist-conflict.js",
|
||||||
"/dashboard/static/voice-transcript-store.js",
|
"/dashboard/static/voice-transcript-store.js",
|
||||||
"/dashboard/static/voice-issue-capture.js",
|
"/dashboard/static/voice-issue-capture.js",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user