stackchain-dashboard/tests/test_mobile_first_task.py
timmy 304e4a8a24
All checks were successful
CI / lint (pull_request) Successful in 3m8s
CI / build-release (pull_request) Successful in 6s
CI / browser-journey (pull_request) Successful in 3m29s
CI / release-candidate (pull_request) Has been skipped
feat: guide first mobile task activation (Closes #1140)
2026-08-19 17:33:26 +00:00

126 lines
4.8 KiB
Python

import json
import subprocess
from pathlib import Path
import pytest
from tests.dashboard_bundle import dashboard
CONTROLLER = Path(__file__).resolve().parents[1] / "frontend" / "mobile-first-task.js"
def run_node(body: str) -> dict:
script = f"""
const createFirstTask = require({json.dumps(str(CONTROLLER))});
class Element {{
constructor() {{ this.listeners = {{}}; this.disabled = false; this.hidden = false; this.open = false; this.textContent = ''; this.focused = false; }}
addEventListener(name, callback) {{ this.listeners[name] = callback; }}
click() {{ this.listeners.click?.({{preventDefault() {{}}}}); }}
showModal() {{ this.open = true; }}
close() {{ this.open = false; this.listeners.close?.(); }}
focus() {{ this.focused = true; }}
}}
{body}
"""
result = subprocess.run(["node", "-e", script], capture_output=True, text=True)
assert result.returncode == 0, result.stderr
return json.loads(result.stdout)
def test_first_task_activation_is_account_bound_and_completes_when_work_appears():
result = run_node(
"""
const values = new Map();
const storage = {getItem:key => values.get(key) || null, setItem:(key,value) => values.set(key,value)};
const sheet = new Element();
let login = 'Timmy';
let hasWork = false;
const controller = createFirstTask({
storage, getLogin:() => login, hasWork:() => hasWork, isOnline:() => true,
mediaQuery:{matches:true}, sheet, findButton:new Element(), createButton:new Element(),
setupButton:new Element(), closeButton:new Element(), status:new Element(),
onFind() {}, onCreate() {}, onSetup() {},
});
const before = [controller.required(), controller.open(), sheet.open];
hasWork = true;
const completed = controller.refresh();
const timmyRequired = controller.required();
login = 'alexander'; hasWork = false;
const alexanderRequired = controller.required();
process.stdout.write(JSON.stringify({before, completed, sheetOpen:sheet.open, timmyRequired, alexanderRequired, values:[...values]}));
"""
)
assert result == {
"before": [True, True, True],
"completed": "completed",
"sheetOpen": False,
"timmyRequired": False,
"alexanderRequired": True,
"values": [["stackchain.first-task.v1:timmy", "complete"]],
}
def test_first_task_activation_routes_existing_flows_and_keeps_create_available_offline():
result = run_node(
"""
const calls = [];
const sheet = new Element();
const findButton = new Element();
const createButton = new Element();
const setupButton = new Element();
const closeButton = new Element();
const status = new Element();
let online = false;
const controller = createFirstTask({
storage:{getItem:() => null, setItem() {}}, getLogin:() => 'timmy', hasWork:() => false,
isOnline:() => online, mediaQuery:{matches:true}, sheet, findButton, createButton,
setupButton, closeButton, status,
onFind:() => calls.push('find'), onCreate:() => calls.push('create'), onSetup:() => calls.push('setup'),
});
controller.start();
controller.open();
const offline = {findDisabled:findButton.disabled, createDisabled:createButton.disabled, status:status.textContent, createFocused:createButton.focused};
findButton.click();
createButton.click();
controller.open();
setupButton.click();
controller.open();
online = true;
controller.render();
findButton.click();
process.stdout.write(JSON.stringify({offline, calls, sheetOpen:sheet.open}));
"""
)
assert result == {
"offline": {
"findDisabled": True,
"createDisabled": False,
"status": "You are offline. Create a task now and it will stay in Drafts until you reconnect.",
"createFocused": True,
},
"calls": ["create", "setup", "find"],
"sheetOpen": False,
}
@pytest.mark.anyio
async def test_dashboard_renders_and_wires_phone_safe_first_task_activation():
html = await dashboard()
assert '<dialog class="mobile-first-task" id="mobile-first-task" aria-labelledby="mobile-first-task-title">' in html
assert '<h2 id="mobile-first-task-title">Start your first task</h2>' in html
assert 'id="mobile-first-task-find" type="button">Find a task</button>' in html
assert 'id="mobile-first-task-create" type="button">Create a task</button>' in html
assert 'id="mobile-first-task-setup" type="button">Make this phone work-ready</button>' in html
assert '<script src="static/mobile-first-task.js"></script>' in html
assert "const mobileFirstTask = createMobileFirstTask({" in html
assert "shouldActivate: () => mobileFirstTask.required()" in html
assert "openActivation: () => mobileFirstTask.open()" in html
assert "mobileFirstTask.refresh()" in html
assert '.mobile-first-task { box-sizing:border-box; width:100%;' in html
assert 'padding-bottom:calc(16px + env(safe-area-inset-bottom))' in html
assert '.mobile-first-task-actions button { min-height:48px;' in html