feat: guide mobile Find Work workflow (Closes #979)
This commit is contained in:
1 parent
611b10b477
commit
53e556ddab
9 files changed
+438
-85
No files matched your search
@@ -9,6 +9,7 @@ HTML = Path(__file__).parents[1] / "frontend" / "index.html"
|
||||
DASHBOARD = Path(__file__).parents[1] / "frontend" / "dashboard.js"
|
||||
CSS = Path(__file__).parents[1] / "frontend" / "dashboard.css"
|
||||
WORKER = Path(__file__).parents[1] / "frontend" / "service-worker.js"
|
||||
FIND_WORK_NAV = Path(__file__).parents[1] / "frontend" / "mobile-find-work-nav.js"
|
||||
|
||||
|
||||
def run_node(script):
|
||||
@@ -437,14 +438,15 @@ def test_mobile_find_work_exposes_accessible_batch_controls_and_offline_asset():
|
||||
dashboard = DASHBOARD.read_text()
|
||||
css = CSS.read_text()
|
||||
worker = WORKER.read_text()
|
||||
navigation = FIND_WORK_NAV.read_text()
|
||||
|
||||
assert 'id="select-find-work"' in html
|
||||
assert 'id="batch-find-work-actions"' in html
|
||||
assert 'id="claim-selected-work"' in html
|
||||
assert 'aria-live="polite"' in html
|
||||
assert "createBatchFindWork({" in dashboard
|
||||
assert "findWorkController.startSelection()" in dashboard
|
||||
assert "findWorkController.toggleSelection(item)" in dashboard
|
||||
assert "options.controller?.startSelection?.()" in navigation
|
||||
assert "options.controller?.toggleSelection" in navigation
|
||||
assert ".find-work-batch-actions" in css
|
||||
assert "position:sticky" in css
|
||||
assert "env(safe-area-inset-bottom)" in css
|
||||
@@ -472,7 +474,7 @@ def test_mobile_find_work_exposes_fill_today_action_with_capacity_handoff():
|
||||
assert 'id="fill-find-work-today"' in html
|
||||
assert 'aria-describedby="find-work-selection-status"' in html
|
||||
assert "findWorkController.fillSelection(remainingSlots)" in dashboard
|
||||
assert "openFindWorkEstimateReview(findWorkController.selectedItems())" in dashboard
|
||||
assert "openFit:openFindWorkEstimateReview" in dashboard
|
||||
assert ".fill-find-work-today" in css and "min-height:44px" in css
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
import json
|
||||
import subprocess
|
||||
from pathlib import Path
|
||||
|
||||
|
||||
CONTROLLER = Path(__file__).resolve().parents[1] / "frontend" / "mobile-find-work-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.hidden=false; this.disabled=false; this.focused=0; }}
|
||||
addEventListener(name, callback) {{ (this.listeners[name] ||= []).push(callback); }}
|
||||
removeEventListener(name, callback) {{ this.listeners[name]=(this.listeners[name]||[]).filter(item=>item!==callback); }}
|
||||
click() {{ for (const callback of this.listeners.click||[]) callback({{preventDefault(){{}}}}); }}
|
||||
setAttribute(name,value) {{ this.attributes[name]=value; }}
|
||||
removeAttribute(name) {{ delete this.attributes[name]; }}
|
||||
focus() {{ this.focused++; }}
|
||||
}}
|
||||
class FakeEvents {{
|
||||
constructor() {{ this.listeners={{}}; }}
|
||||
addEventListener(name, callback) {{ (this.listeners[name] ||= []).push(callback); }}
|
||||
removeEventListener(name, callback) {{ this.listeners[name]=(this.listeners[name]||[]).filter(item=>item!==callback); }}
|
||||
emit(name,event) {{ for (const callback of this.listeners[name]||[]) callback(event); }}
|
||||
}}
|
||||
{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_find_work_navigation_gates_review_and_fit_until_work_is_selected():
|
||||
result = run_navigation("""
|
||||
const names=['discover','review','fit'];
|
||||
const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
||||
const sections=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
||||
const events=new FakeEvents();
|
||||
const history={state:{taskOverlay:'find'}, pushes:[], backs:0,
|
||||
pushState(state){this.state=state;this.pushes.push(state);}, back(){this.backs++;}};
|
||||
const navigation=createNavigation({buttons,sections,history,eventTarget:events,onStageChange:()=>{}});
|
||||
navigation.start();
|
||||
const initial={stage:navigation.stage(),reviewDisabled:buttons.review.disabled,fitDisabled:buttons.fit.disabled,hidden:Object.fromEntries(names.map(name=>[name,sections[name].hidden]))};
|
||||
navigation.sync({selectedCount:2,recovery:false});
|
||||
buttons.review.click();
|
||||
buttons.fit.click();
|
||||
process.stdout.write(JSON.stringify({initial,stage:navigation.stage(),pushes:history.pushes,selected:Object.fromEntries(names.map(name=>[name,buttons[name].attributes['aria-current']||null]))}));
|
||||
""")
|
||||
|
||||
assert result == {
|
||||
"initial": {
|
||||
"stage": "discover",
|
||||
"reviewDisabled": True,
|
||||
"fitDisabled": True,
|
||||
"hidden": {"discover": False, "review": True, "fit": True},
|
||||
},
|
||||
"stage": "fit",
|
||||
"pushes": [
|
||||
{"taskOverlay": "find", "findWorkStage": "review"},
|
||||
{"taskOverlay": "find", "findWorkStage": "fit"},
|
||||
],
|
||||
"selected": {"discover": None, "review": None, "fit": "step"},
|
||||
}
|
||||
|
||||
|
||||
def test_browser_back_moves_fit_to_review_to_discover_without_losing_selection():
|
||||
result = run_navigation("""
|
||||
const names=['discover','review','fit'];
|
||||
const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
||||
const sections=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
||||
const events=new FakeEvents(); const changes=[];
|
||||
const history={state:{taskOverlay:'find'},pushState(state){this.state=state;},back(){}};
|
||||
const navigation=createNavigation({buttons,sections,history,eventTarget:events,onStageChange:stage=>changes.push(stage)});
|
||||
navigation.start(); navigation.sync({selectedCount:1,recovery:false}); navigation.go('review'); navigation.go('fit');
|
||||
events.emit('popstate',{state:{taskOverlay:'find',findWorkStage:'review'}});
|
||||
const afterFirst=navigation.stage();
|
||||
events.emit('popstate',{state:{taskOverlay:'find'}});
|
||||
process.stdout.write(JSON.stringify({afterFirst,afterSecond:navigation.stage(),changes,reviewDisabled:buttons.review.disabled,fitDisabled:buttons.fit.disabled}));
|
||||
""")
|
||||
|
||||
assert result == {
|
||||
"afterFirst": "review",
|
||||
"afterSecond": "discover",
|
||||
"changes": ["discover", "review", "fit", "review", "discover"],
|
||||
"reviewDisabled": False,
|
||||
"fitDisabled": False,
|
||||
}
|
||||
|
||||
|
||||
def test_reopening_restores_progress_but_completion_resets_to_discovery():
|
||||
result = run_navigation("""
|
||||
const names=['discover','review','fit'];
|
||||
const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
||||
const sections=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
||||
const events=new FakeEvents();
|
||||
const history={state:{taskOverlay:'find',findWorkStage:'review'},replaced:[],pushState(state){this.state=state;},replaceState(state){this.state=state;this.replaced.push(state);},back(){}};
|
||||
const navigation=createNavigation({buttons,sections,history,eventTarget:events,onStageChange:()=>{}});
|
||||
navigation.start(); navigation.sync({selectedCount:1,recovery:false}); navigation.open();
|
||||
const restored=navigation.stage();
|
||||
navigation.complete();
|
||||
process.stdout.write(JSON.stringify({restored,completed:navigation.stage(),state:history.state,replaced:history.replaced}));
|
||||
""")
|
||||
|
||||
assert result == {
|
||||
"restored": "review",
|
||||
"completed": "discover",
|
||||
"state": {"taskOverlay": "find"},
|
||||
"replaced": [{"taskOverlay": "find"}],
|
||||
}
|
||||
|
||||
|
||||
def test_find_work_ships_guided_mobile_flow_in_the_offline_bundle():
|
||||
html = (FRONTEND / "index.html").read_text()
|
||||
css = (FRONTEND / "dashboard.css").read_text()
|
||||
bundle = (FRONTEND.parent / "src" / "frontend_bundle.py").read_text()
|
||||
service_worker = (FRONTEND / "service-worker.js").read_text()
|
||||
dashboard = (FRONTEND / "dashboard.js").read_text()
|
||||
|
||||
assert '<nav class="mobile-find-work-nav"' in html
|
||||
assert 'aria-label="Find Work steps"' in html
|
||||
for name, label in (("discover", "Discover"), ("review", "Review"), ("fit", "Fit & assign")):
|
||||
assert f'data-find-work-stage="{name}"' in html
|
||||
assert f">{label}</button>" in html
|
||||
assert f'id="find-work-{name}-stage"' in html
|
||||
assert 'id="find-work-review-list"' in html
|
||||
assert 'id="continue-find-work-fit"' in html
|
||||
assert '<script src="static/mobile-find-work-nav.js"></script>' in html
|
||||
assert '"static/mobile-find-work-nav.js"' in bundle
|
||||
assert "static/mobile-find-work-nav.js" in service_worker
|
||||
assert ".mobile-find-work-nav" in css
|
||||
assert "min-height:44px" in css
|
||||
assert "createMobileFindWorkNavigation" in dashboard
|
||||
assert "findWorkNavigation?.sync" in dashboard
|
||||
@@ -1019,6 +1019,7 @@ def test_install_precaches_complete_subpath_scoped_app_shell():
|
||||
"/dashboard/static/mobile-review-detail-nav.js",
|
||||
"/dashboard/static/mobile-search-preview-nav.js",
|
||||
"/dashboard/static/mobile-plan-today-nav.js",
|
||||
"/dashboard/static/mobile-find-work-nav.js",
|
||||
"/dashboard/static/checklist-conflict.js",
|
||||
"/dashboard/static/voice-transcript-store.js",
|
||||
"/dashboard/static/voice-issue-capture.js",
|
||||
|
||||
Reference in new issue
Block a user