n.siegfried/Project-SDE-WP-Suite
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

T5.2 - B3: a first-run empty state, then the picker card comes out

Browse Source 
B3's warning is about ORDER, and it is the whole item: the proposal removes the
project-picker card, and the first-run empty state was built inside it. Remove
the card first and every brand-new account lands on a page whose only
instruction is to choose from a list with nothing in it.

So the empty state was built first, as its own thing rather than a branch inside
a control that is going away, and only then did the card go.

The launcher now shows exactly one of three states:

  no projects at all   what a project is for, the create form already open (it
                       is the only thing to do on this page, so hiding it behind
                       a button is one click of ceremony in front of the only
                       way forward), and the sample offered underneath it
  none chosen          point at the app bar's switcher, which is on every page,
                       plus New project
  one active           the tool cards, as before

Switching moved to the app bar's switcher entirely. Its popover footer used to
read "All projects / new project" and link to index.html - half of that promise
moved into the popover itself and the other half needs a form, so the link now
says New project and carries #new-project, which the launcher opens on.

The create form was rebuilt, so per C1 it ships accessible: a real <form> with
requestSubmit, every input labelled, and its validation inline at the field with
aria-describedby and role="alert" - the same shape T5.8 gives the wizard. That
retires the "Project name is required." alert (index.html 6 -> 5).

  html/index.html    three states, rebuilt create form, picker card removed
  html/wp-chrome.js  popover footer link (one line - it named the card)
  tests/launcher_check.py  new - 58 checks, two seeded databases
  tests/f_items.py   F1 rewritten to drive the controls that replaced the select

Done when
  [x] a brand-new account with zero projects sees a clear path to create one
  [x] the sample project remains discoverable from the empty state
  [x] the picker card is removed only after the empty state ships
  [x] switching projects still works from the header for users who have projects

Two things the probes caught that I would have shipped

  F1 went INCONCLUSIVE, not FAIL. Its probe drove `document.querySelector
  ('select')` on the launcher - the picker card's dropdown. It refused to guess
  rather than reporting a silent pass, which is the behaviour f_items was
  written for. Rewritten to drive both replacements, because they fail
  differently: the switcher RELOADS with ?project=<id>, so its two labels cannot
  drift apart whatever subscribes to what; creating a project changes the active
  project IN PAGE, and that is the interaction F1's mechanism actually applies
  to. It is now the only in-page change on the launcher, so it is the arm that
  matters. Both pass - the bar subscribes through ProjectData.onActiveChange.

  launcher_check reported "no focus ring" on the rebuilt form's inputs. That was
  trap 5 in reverse: without CDP focus emulation the headless document is not
  the focused one, :focus-visible never matches, and every control reports NO
  ring - a false red where a11y_check would get a false green. With emulation on
  they draw 2px --cds-focus from T4.7's app-wide floor.

Verified one at a time
  launcher_check  58/58   new (38 empty-account + 20 populated)
  stepper_check   70/70
  browser_check   71/71
  aggregates      16/16
  a11y            22/22   launcher 29 focusable elements, all >= 3:1
  url_state       23/23
  autosave        34/34
  f_items         F1-F5 FIXED, F6 REPRODUCES (T7.2)

No colour literal added: 0 across all five page sheets and all seven inline
<style> blocks.

Raised, not fixed
  BL-014 updated rather than left stale: two of its four sites (.proj-row select,
  .link-like) went with the picker card, and the third (.proj-form-grid input)
  was measured rather than assumed - it draws T4.7's ring, which post-dates that
  entry. What survives is field.html's .fld-search, which T9.5 should measure the
  same way instead of inheriting the wording.

Question for the PR, per CLAUDE.md: with the picker gone, an account whose only
project is archived sees the choose-a-project prompt plus the archived note, and
the switcher lists nothing. That is honest but bleak. Whether an archived project
should stay switchable read-only is a product call, not an implementation one.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nick Siegfried
2026-08-16 10:24:41 -05:00
parent 5e1f6e75ba
commit 77c043c3db
6 changed files with 714 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/reference/file-map.md
View File

@@ -220,12 +220,23 @@ python tests/autosave_check.py # S2/B5 — does unsaved work survive?
python tests/a11y_check.py # S10/S11/S12 — announce, legible, focus 22 checks
```
Wave 5 added one more, for the same reason:
Wave 5 added more, for the same reason:
```bash
python tests/stepper_check.py # A4/S9 — ten real buttons, keyboard operable 70 checks
python tests/launcher_check.py # B3 — can a brand-new account get started? 58 checks
```
`launcher_check.py` is the only probe that runs itself in **two subprocesses**, and both
reasons are worth knowing before writing a third:
- The two states it tests are *database* states — an account with no projects, and an
account with two — and faking "no projects" in the browser would test the fake.
- `server/db.py` builds its engine at import time from `DATABASE_URL`, so a second `seed()`
in one interpreter still points at the first phase's database, which has been deleted by
then. That surfaces as `unable to open database file`, which reads like a broken
environment rather than what it is.
It drives the rail with **real** key events over `Input.dispatchKeyEvent` rather than
`page.key()`, which dispatches a synthetic `KeyboardEvent` on `document`. That event
never reaches a listener bound to the rail and never triggers a button's native
@@ -252,7 +263,7 @@ one.
| — | `outline: none` in stylesheets | 6 | **1**, with its replacement one rule above | `T3.4`, `T4.7` |
| — | helper-text contrast, worst case | 3.01:1 | **4.56:1** | `T4.6` |
| 3 | `<div onclick>` | 12 | **2** | `T5.1` |
| 1 | native dialogs app-wide | 79 | **78** | `T5.1` (2 removed), wave 4 (1 added) |
| 1 | native dialogs app-wide | 79 | **77** | `T5.1` (2), `T5.2` (1), wave 4 (+1) |
Metrics 2, 4 and 6 (creator dialogs, `<span onclick>`, `.help-tip` badges) are wave 9's to
move and are unchanged.

7
docs/waves/backlog.md
View File

@@ -309,3 +309,10 @@ deliberately deferred.
- **Why not now:** adding rings to the launcher and field view is outside `T3.4`, whose files
are the wizard stylesheet, and both surfaces are touched by later waves anyway.
- **Suggested wave or follow-up:** `T9.5`, with the `C1` audit.
- **Update, T5.2 — two of the four sites no longer exist.** `.proj-row select` and
`.link-like` went with the project-picker card (`B3`). The third, `.proj-form-grid input`,
survives in the rebuilt create form and was **measured rather than assumed**: with CDP
focus emulation on it draws `2px var(--cds-focus)` from the app-wide `:where()` floor
`T4.7` added, which post-dates this entry. So the launcher half of BL-014 is closed;
what is left is `field.html`'s `.fld-search`, and `T9.5` should re-measure that one the
same way rather than inheriting this entry's wording.

297
html/index.html
View File

@@ -292,25 +292,38 @@
color: var(--cds-text-primary);
}
/* PROJECT PICKER */
/* PROJECT ENTRY POINTS — B3
The picker card (a "Select a project…" dropdown in its own section) is gone.
Switching projects is the app bar's switcher, which is on every page; the
launcher keeps the two things a dropdown could not do — the first-run empty
state, and creating a project. */
.proj-loading { color: var(--cds-text-secondary); font-style: italic; font-size: 13px; }
.proj-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.proj-row select { flex: 1; min-width: 240px; padding: 0.6rem 0.7rem; font-size: 14px;
border: 1px solid var(--cds-border-strong); background: var(--cds-field); }
.proj-empty { background: var(--cds-ui-01); border: 1px dashed var(--cds-border-strong);
padding: 1.25rem; }
.proj-empty p { margin: 0 0 0.9rem; color: var(--cds-text-secondary); }
.proj-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.proj-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
/* Shown once when the project someone had open turns out to have been archived
rather than deleted — otherwise the picker just silently resets on them. */
rather than deleted — otherwise the launcher just silently resets on them. */
.proj-archived-note { background: var(--wp-status-warning-bg); border: 1px solid var(--cds-support-warning); color: var(--wp-status-warning-text);
padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; font-size: 13px; line-height: 1.5; }
.proj-form { margin-top: 1rem; padding: 1rem; border: 1px solid var(--cds-ui-03); background: var(--cds-ui-01); }
.proj-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; }
.proj-form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 12px; font-weight: 600; color: var(--cds-text-secondary); }
.proj-form-grid input { padding: 0.55rem 0.65rem; font-size: 14px; border: 1px solid var(--cds-border-strong); }
.proj-active { margin-top: 0.85rem; font-size: 13px; color: var(--cds-text-primary); }
.link-like { background: none; border: none; color: var(--cds-link-01); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }
.proj-form-grid input { padding: 0.55rem 0.65rem; font-size: 14px; border: 1px solid var(--cds-border-strong); background: var(--cds-field); }
.proj-form-grid input[aria-invalid="true"] { border-color: var(--cds-support-error); }
/* .link-like and .proj-row went with the picker card. Both were named in
BL-014 as controls falling back to the UA focus ring; two of that entry's
four sites no longer exist. */
/* An inline error at the field it belongs to, rather than a native dialog that
names no field and highlights nothing (C1, and the pattern T5.8 uses in the
wizard). :empty so the element can sit in the markup and announce on change. */
.field-error { color: var(--cds-text-error); font-size: 12px; font-weight: 600; margin-top: 0.3rem; }
.field-error:empty { display: none; }
/* FIRST RUN
A brand-new account has no projects, so it has no tool cards either — this
is the whole page for that person, and it has to say what to do next. */
.first-run { border-left: 3px solid var(--cds-interactive-01); }
.first-run-note { font-size: 13px; margin-top: 1rem; }
.first-run-sample { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cds-border-subtle); }
.first-run-sample h3 { margin-bottom: 0.35rem; }
/* RESPONSIVE */
@media (max-width: 768px) {
@@ -344,12 +357,85 @@
<p id="hero-sub">Standardized Work Package creation for Prime Controls construction projects. Select a project to begin — or create one.</p>
</div>
<!-- PROJECT SELECTION -->
<div class="section" id="project-section">
<h2>Project</h2>
<p style="color:var(--cds-text-secondary);font-size:13px;margin:-.25rem 0 1rem">Projects are stored centrally. Pick the project you're working on, or set up a new one.</p>
<div id="project-picker"><div class="proj-loading">Loading projects…</div></div>
</div>
<!-- ═══════════════════════════════════════════════════════════════════════
PROJECT ENTRY POINTS — B3 / T5.2
The project-picker card that used to sit here — <h2>Project</h2> over a
"Select a project…" dropdown — is gone. Switching projects is the app
bar's switcher, which is on every page rather than only this one.
What a dropdown could NOT do is what stayed: the first-run empty state,
and creating a project. The empty state was built INSIDE the picker card,
so removing the card first would have stranded every new account on a
page whose only instruction was to pick from an empty list.
Exactly one of these three is visible at a time; #proj-status says which
and is where the archived note lands.
══════════════════════════════════════════════════════════════════════ -->
<div id="proj-status"><div class="proj-loading">Loading projects…</div></div>
<!-- (a) no projects at all -->
<section class="section first-run" id="first-run" hidden>
<h2>No projects yet</h2>
<p>A project holds one SOP — the baseline every work package on the job
inherits — and the work packages written against it. Everything else in
the suite hangs off a project, so this is the first thing to make.
Fill in the form below, or start from the sample underneath it.</p>
</section>
<!-- (b) projects exist, none chosen -->
<section class="section" id="pick-prompt" hidden>
<h2>Choose a project</h2>
<p id="pick-prompt-sub">Pick the job you are working on from the project
switcher in the bar at the top of the page. It is there on every page, so
you can change job without coming back here.</p>
<div class="proj-actions">
<button type="button" class="card-button" id="open-switcher-btn">Open the project switcher</button>
<button type="button" class="close-btn" id="new-project-btn">New project</button>
</div>
</section>
<!-- (c) the create form. Open on first run, on demand after that. -->
<section class="section" id="new-project" hidden>
<h2 id="new-project-head">Create a project</h2>
<form id="np-form" novalidate>
<div class="proj-form-grid">
<label for="np_name">Project name *
<input type="text" id="np_name" name="np_name" required
aria-describedby="np_name_err" placeholder="e.g. Micron — INC Construction">
</label>
<label for="np_number">Project number
<input type="text" id="np_number" placeholder="e.g. 26-67-008"></label>
<label for="np_client">Client
<input type="text" id="np_client" placeholder="e.g. Micron Technology, Inc."></label>
<label for="np_division">Division
<input type="text" id="np_division" placeholder="e.g. Semiconductor"></label>
<label for="np_site">Site / location
<input type="text" id="np_site" placeholder="e.g. Boise, ID — Fab"></label>
</div>
<!-- The error belongs at the field, not in a dialog that names no field
and highlights nothing. role="alert" so it is heard (C1 / S10). -->
<div class="field-error" id="np_name_err" role="alert"></div>
<div class="proj-actions">
<button type="submit" class="card-button">Create &amp; select</button>
<button type="button" class="close-btn" id="np-cancel">Cancel</button>
</div>
</form>
</section>
<!-- (d) the sample. Offered on first run, where it is the alternative to
filling in a form about a job you may not have started yet. It stays
reachable afterwards from the create form's own section. -->
<section class="section" id="sample-offer" hidden>
<h2>Not ready to set one up?</h2>
<p>The sample project is a fully configured example — a finished SOP and a
few work packages — so you can see what the tools do before committing a
real job to them. It is labelled as a sample everywhere it appears, and it
can be deleted later.</p>
<div class="proj-actions">
<button type="button" class="close-btn" id="use-sample-btn">Use the sample project</button>
</div>
</section>
<!-- TOOL CARDS (shown once a project is active) -->
<div class="cards-grid" id="overview" style="display:none">
@@ -452,7 +538,8 @@
}
const dropped = (active && !_projects.some(p => p.id === active.id)) ? active : null;
if(dropped) ProjectData.setActive(null);
renderProjectPicker();
_listLoaded = true;
renderProjectEntry();
applyActiveProject();
// "No longer in the list" used to mean one thing — deleted. Now it also
// means archived, and resetting someone to "Select a project" with no word
@@ -466,7 +553,7 @@
// taken away) fails here, and that case genuinely has nothing to say.
ProjectData.get(p.id).then(full => {
if(!full || !full.archived) return;
const box = document.getElementById('project-picker');
const box = document.getElementById('proj-status');
if(!box || document.getElementById('proj-archived-note')) return;
const note = document.createElement('div');
note.id = 'proj-archived-note';
@@ -478,55 +565,86 @@
}).catch(() => {});
}
function createFormHtml(){
return `<div class="proj-form" id="proj-form" style="display:none">
<div class="proj-form-grid">
<label>Project Name *<input type="text" id="np_name" placeholder="e.g. Micron — INC Construction"></label>
<label>Project Number<input type="text" id="np_number" placeholder="e.g. 26-67-008"></label>
<label>Client<input type="text" id="np_client" placeholder="e.g. Micron Technology, Inc."></label>
<label>Division<input type="text" id="np_division" placeholder="e.g. Semiconductor"></label>
<label>Site / Location<input type="text" id="np_site" placeholder="e.g. Boise, ID — Fab"></label>
</div>
<div class="proj-actions">
<button class="card-button" onclick="saveNewProject()">Create &amp; select</button>
<button class="close-btn" onclick="hideCreateProject()">Cancel</button>
</div>
</div>`;
}
// ── PROJECT ENTRY POINTS (B3 / T5.2) ──────────────────────────────────────
// Three states, one visible at a time. The picker card that used to render
// here is gone; the app bar's switcher does that job on every page, and this
// page keeps the two things a dropdown could not do.
//
// ORDER MATTERS, and it is the whole reason B3 exists: the first-run empty
// state used to live INSIDE the picker card. Deleting the card without
// building this first would have left a brand-new account on a page whose
// only instruction was to choose from a list with nothing in it.
const $ = id => document.getElementById(id);
let _createOpenedManually = false;
let _focusCreateOnRender = false;
// Nothing renders until the list is in. "No projects yet" is a claim, and
// making it while the request is still in flight would show every new-account
// page to every returning user for a beat.
let _listLoaded = false;
function renderProjectPicker(){
const box = document.getElementById('project-picker');
const activeId = ProjectData.getActiveId();
if(!_projects.length){
box.innerHTML = `<div class="proj-empty">
<p>No projects yet. Create your first project, or start from a sample.</p>
<div class="proj-actions">
<button class="card-button" onclick="showCreateProject()">+ Create project</button>
<button class="close-btn" onclick="useSampleProject()">Use sample project</button>
</div>
</div>` + createFormHtml();
return;
function show(id, on){ const el = $(id); if(el) el.hidden = !on; }
function renderProjectEntry(){
if(!_listLoaded) return;
const status = $('proj-status');
const loading = status && status.querySelector('.proj-loading');
if(loading) loading.remove();
const firstRun = !_projects.length;
const active = ProjectData.getActive();
show('first-run', firstRun);
show('sample-offer', firstRun);
// On first run the form IS the page — there is nothing else to do here, so
// hiding it behind a button would be one click of ceremony in front of the
// only path forward.
show('new-project', firstRun || _createOpenedManually);
show('pick-prompt', !firstRun && !active && !_createOpenedManually);
const head = $('new-project-head');
if(head) head.textContent = firstRun ? 'Create your first project' : 'Create a project';
// Nothing to cancel back to on first run.
show('np-cancel', !firstRun);
if(_focusCreateOnRender && !$('new-project').hidden){
_focusCreateOnRender = false;
const n = $('np_name');
if(n){ n.focus(); n.scrollIntoView({behavior:'smooth', block:'center'}); }
}
const opts = _projects.map(p =>
`<option value="${esc(p.id)}" ${p.id===activeId?'selected':''}>${esc(p.name||'(unnamed)')}${p.number?' — '+esc(p.number):''}${p.sample?' [sample]':''}</option>`
).join('');
box.innerHTML = `<div class="proj-row">
<select id="project-select" onchange="selectProject(this.value)">
<option value="">Select a project…</option>${opts}
</select>
<button class="card-button" onclick="showCreateProject()">+ New</button>
<button class="close-btn" onclick="useSampleProject()">Sample</button>
</div>
<div id="active-project-info"></div>` + createFormHtml();
}
function showCreateProject(){ const f=document.getElementById('proj-form'); if(f){ f.style.display=''; const n=document.getElementById('np_name'); if(n) n.focus(); } }
function hideCreateProject(){ const f=document.getElementById('proj-form'); if(f) f.style.display='none'; }
function showCreateProject(){
_createOpenedManually = true;
_focusCreateOnRender = true;
renderProjectEntry();
}
function hideCreateProject(){
_createOpenedManually = false;
setFieldError('np_name', '');
renderProjectEntry();
}
// An error at the field, associated with aria-describedby and announced —
// rather than a native dialog that names no field and highlights nothing.
// Same shape T5.8 gives the SOP wizard (C1).
function setFieldError(fieldId, message){
const field = $(fieldId), box = $(fieldId + '_err');
if(box) box.textContent = message || '';
if(field){
if(message) field.setAttribute('aria-invalid', 'true');
else field.removeAttribute('aria-invalid');
}
}
function saveNewProject(){
const v = id => (document.getElementById(id)?.value || '').trim();
const v = id => ($(id)?.value || '').trim();
const name = v('np_name');
if(!name){ alert('Project name is required.'); return; }
if(!name){
setFieldError('np_name', 'Enter a project name — it is the only field this needs.');
$('np_name')?.focus();
return;
}
setFieldError('np_name', '');
const p = { name, number:v('np_number'), client:v('np_client'), division:v('np_division'), site:v('np_site'), sample:false };
ProjectData.save(p).then(saved => { afterProjectChosen(saved); });
}
@@ -537,6 +655,33 @@
ProjectData.save(Object.assign({}, ProjectData.SAMPLE)).then(saved => { afterProjectChosen(saved); });
}
// The switcher is wp-chrome.js's, injected into the app bar after this script
// runs. Reaching for its button is deliberate: the alternative is a second
// project list on this page, which is the card B3 removes.
function openProjectSwitcher(){
const btn = document.querySelector('.wpc-proj-btn');
if(btn){ btn.click(); btn.focus(); return true; }
return false;
}
document.addEventListener('DOMContentLoaded', function(){
$('np-form')?.addEventListener('submit', function(e){ e.preventDefault(); saveNewProject(); });
$('np-cancel')?.addEventListener('click', hideCreateProject);
$('new-project-btn')?.addEventListener('click', showCreateProject);
$('use-sample-btn')?.addEventListener('click', useSampleProject);
$('open-switcher-btn')?.addEventListener('click', function(){
if(!openProjectSwitcher()){
// No chrome mounted (it returns early inside an iframe, and it loads
// after this file). Say so rather than doing nothing on a click.
const sub = $('pick-prompt-sub');
if(sub) sub.textContent = 'The project switcher is in the bar at the top of the page.';
}
});
// The app bar's popover links here for "new project". Honour it, so that
// link lands on the form rather than on a page that no longer has one.
if(location.hash === '#new-project') showCreateProject();
});
// S3: which project you are in is addressable, so a launcher link carries it
// and Back returns to the project you were looking at before.
function urlSyncProject(id, replace){
@@ -544,16 +689,16 @@
(replace ? WPUrl.replace : WPUrl.push).call(WPUrl, { project: id || '' });
}
function selectProject(id){
if(!id){ ProjectData.setActive(null); urlSyncProject('', false); applyActiveProject(); return; }
const p = _projects.find(x => x.id === id);
if(p){ ProjectData.setActive(p); urlSyncProject(p.id, false); applyActiveProject(); }
}
// selectProject() went with the picker card's <select>. The app bar's switcher
// reloads with ?project=<id> rather than swapping state in place, so there is
// nothing left on this page that chooses a project without navigating.
function afterProjectChosen(p){
if(!_projects.some(x => x.id === p.id)) _projects.unshift(p);
ProjectData.setActive(p);
renderProjectPicker();
_createOpenedManually = false;
urlSyncProject(p.id, false);
renderProjectEntry();
applyActiveProject();
document.getElementById('overview').scrollIntoView({ behavior:'smooth', block:'start' });
}
@@ -564,13 +709,15 @@
const cards = document.getElementById('overview');
const heroTitle = document.getElementById('hero-title');
const heroSub = document.getElementById('hero-sub');
const info = document.getElementById('active-project-info');
if(!active){
cards.style.display = 'none';
heroTitle.textContent = 'Work Package Suite';
heroSub.textContent = 'Select a project to begin — or create one.';
if(info) info.innerHTML = '';
// Two different situations, and telling someone to "select a project"
// when there are none to select is the thing B3 is about.
heroSub.textContent = _projects.length
? 'Choose a project to begin — or create one.'
: 'Create your first project to begin.';
return;
}
@@ -584,8 +731,6 @@
cards.style.display = '';
heroTitle.textContent = active.name || 'Work Package Suite';
heroSub.textContent = [active.number, active.client, active.site].filter(Boolean).join(' · ') || 'Active project';
if(info) info.innerHTML = `<div class="proj-active">✓ Active project: <strong>${esc(active.name||'')}</strong>${active.number?' ('+esc(active.number)+')':''}
&nbsp;<button class="link-like" onclick="clearActiveProject()">change</button></div>`;
// Pull the project's shared SOP/WPs into the local cache so the tools boot
// with data. The card status below does NOT come from that cache — see
@@ -594,7 +739,7 @@
reflectSOPStatus(active);
}
function clearActiveProject(){ ProjectData.setActive(null); urlSyncProject('', false); renderProjectPicker(); applyActiveProject(); }
function clearActiveProject(){ ProjectData.setActive(null); urlSyncProject('', false); renderProjectEntry(); applyActiveProject(); }
// Back / Forward between projects.
if(typeof WPUrl !== 'undefined'){
@@ -607,7 +752,7 @@
const p = (_projects||[]).find(x=>x.id===want);
ProjectData.setActive(p || { id: want });
}
renderProjectPicker(); applyActiveProject();
renderProjectEntry(); applyActiveProject();
});
}

6
html/wp-chrome.js
View File

@@ -137,7 +137,11 @@
pop.innerHTML =
'<div class="wpc-pop-head">Switch project</div>' +
(rows || '<div class="wpc-empty">No projects you can access yet.</div>') +
'<div class="wpc-pop-foot"><a class="wpc-foot-btn" href="index.html">All projects / new project</a></div>';
// B3/T5.2 removed the launcher's picker card, so "all projects" is this
// popover now and the launcher is where a project is CREATED. The link
// says the one thing that is still true there, and carries the hash the
// launcher opens its form on — otherwise it promises a list that moved.
'<div class="wpc-pop-foot"><a class="wpc-foot-btn" href="index.html#new-project">New project</a></div>';
Array.prototype.forEach.call(pop.querySelectorAll('.wpc-item'), function (item) {
item.addEventListener('click', function () {
var p = projects.filter(function (x) { return x.id === item.getAttribute('data-pid'); })[0];

84
tests/f_items.py
View File

@@ -103,7 +103,19 @@ def f1(page, base, tok):
does not, because wp-chrome.js renders projectLabel() once and only refreshes it
on the /api/projects callback, never on the selection itself.
Priming localStorage before load would hide this, so it is cleared first."""
Priming localStorage before load would hide this, so it is cleared first.
Updated at T5.2: this drove the launcher's project-picker <select>, which B3
removed. The probe correctly refused to guess and reported INCONCLUSIVE rather
than a silent pass. Two controls replace it, and both are exercised, because
they fail differently:
the app bar's switcher changes project by RELOADING with ?project=<id>, so
the two labels cannot drift apart even if nothing
subscribes to anything;
creating a project changes the active project IN PAGE, with no reload.
That is the interaction F1's mechanism applies to,
and it is now the only one on the launcher."""
page.clear_cookies()
page.set_cookie("wp_session", tok["root"])
page.viewport(1440)
@@ -112,35 +124,69 @@ def f1(page, base, tok):
page.goto(base + "/index.html", wait_for="!!document.querySelector('.wpc-proj-name')")
time.sleep(1.3) # let /api/projects land and wpcRefresh run
# ── arm 1: the app bar's switcher ─────────────────────────────────────────
picked = page.eval("""(function(){
var s=document.querySelector('select'); if(!s) return 'no-select';
var o=[].slice.call(s.options).filter(function(x){return x.value==='projA';})[0];
if(!o) return 'no-projA';
s.value='projA'; s.dispatchEvent(new Event('change',{bubbles:true}));
var b=document.querySelector('.wpc-proj-btn'); if(!b) return 'no-switcher';
b.click();
var items=[].slice.call(document.querySelectorAll('.wpc-pop .wpc-item'));
if(!items.length) return 'no-items';
var hit=items.filter(function(x){return /Job A/.test(x.textContent);})[0];
if(!hit) return 'no-projA';
hit.click();
return 'ok';})()""")
if picked != "ok":
return report("F1", UNKNOWN, f"could not drive the project picker ({picked})")
return report("F1", UNKNOWN, f"could not drive the project switcher ({picked})")
for _ in range(30):
if "projA" in (page.eval("location.search") or ""):
break
time.sleep(0.3)
time.sleep(1.4) # generous: a correct fix may re-render async
bar = rect(page, ".wpc-proj-name")
hero = rect(page, "#hero-title")
if not bar or not hero:
return report("F1", UNKNOWN, "app bar or hero not found after selection")
stored = page.eval("localStorage.getItem('wp_active_project')")
reloaded = page.eval("location.search")
bar_txt, hero_txt = bar["text"], hero["text"]
body_knows = "Job A" in hero_txt
bar_knows = "Job A" in bar_txt
if body_knows and not bar_knows:
return report("F1", UNKNOWN, "app bar or hero not found after switching")
if "Job A" in hero["text"] and "Job A" not in bar["text"]:
return report("F1", REPRO,
f"picked Job A: hero {hero_txt!r}, app bar still {bar_txt!r} "
f"(wp_active_project={stored!r}, no reload{', url ' + reloaded if reloaded else ''})")
if not body_knows:
f"switched to Job A: hero {hero['text']!r}, app bar still {bar['text']!r}")
if "Job A" not in hero["text"]:
return report("F1", UNKNOWN,
f"selection did not reach the hero either (hero {hero_txt!r}) - probe drove the wrong control")
f"switching did not reach the hero either (hero {hero['text']!r}) "
"- probe drove the wrong control")
# ── arm 2: an in-page change, with no reload to paper over it ─────────────
nav_before = page.eval("performance.getEntriesByType('navigation').length")
made = page.eval("""(function(){
var f=document.getElementById('np-form'); if(!f) return 'no-form';
if(typeof showCreateProject==='function') showCreateProject();
var n=document.getElementById('np_name'); if(!n) return 'no-name-field';
n.value='F1 Probe Job'; n.dispatchEvent(new Event('input',{bubbles:true}));
f.requestSubmit();
return 'ok';})()""")
if made != "ok":
return report("F1", UNKNOWN, f"could not drive the create-project form ({made})")
for _ in range(30):
h = rect(page, "#hero-title")
if h and "F1 Probe Job" in h["text"]:
break
time.sleep(0.3)
time.sleep(1.2)
bar2 = rect(page, ".wpc-proj-name")
hero2 = rect(page, "#hero-title")
if not bar2 or not hero2:
return report("F1", UNKNOWN, "app bar or hero not found after creating a project")
if "F1 Probe Job" not in hero2["text"]:
return report("F1", UNKNOWN,
f"creating a project did not reach the hero (hero {hero2['text']!r})")
reloaded = page.eval("performance.getEntriesByType('navigation').length") != nav_before
if "F1 Probe Job" not in bar2["text"]:
return report("F1", REPRO,
f"created a project in page: hero {hero2['text']!r}, app bar still "
f"{bar2['text']!r}{' (after a reload)' if reloaded else ' (no reload)'}")
return report("F1", FIXED,
f"app bar {bar_txt!r} tracks hero {hero_txt!r} in the same interaction")
f"app bar {bar['text']!r} tracks hero {hero['text']!r} when switching, and "
f"{bar2['text']!r} tracks {hero2['text']!r} on an in-page change with no reload")
# ── F2 ────────────────────────────────────────────────────────────────────────

403
tests/launcher_check.py Normal file
View File

@@ -0,0 +1,403 @@
#!/usr/bin/env python3
"""The launcher's project entry points — B3 (T5.2).
B3's warning is about ORDER: the proposal removes the project-picker card, and
the first-run empty state was built inside it. Remove the card first and every
brand-new account lands on a page whose only instruction is to choose from a list
with nothing in it.
So the state that matters most here is the one the fixture does not naturally
produce — an account with zero projects — and it is tested against a database
seeded with none, not by hiding rows in the browser.
1. a brand-new account with zero projects sees a clear path to create one
2. the sample project stays discoverable from that empty state
3. the picker card is gone, and nothing on the page re-creates it
4. switching projects still works from the app bar for users who have projects
5. creating a project from the launcher still works, end to end
6. the rebuilt form is accessible: labelled, keyboard-reachable, and its
validation lands at the field rather than in a native dialog (C1)
Exit 0 all passed, 1 a failure, 2 could not run.
"""
import json
import os
import subprocess
import sys
import tempfile
import time
sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
import cdp # noqa: E402
from browser_check import seed, start_server, chk, _PASS, _FAIL, _c, PW # noqa: E402
STUB = """
window.__dialogs = [];
window.alert = function (m) { window.__dialogs.push(['alert', String(m)]); };
window.confirm = function (m) { window.__dialogs.push(['confirm', String(m)]); return false; };
window.prompt = function (m) { window.__dialogs.push(['prompt', String(m)]); return null; };
true
"""
READY = "!!(document.getElementById('proj-status') && !document.querySelector('.proj-loading'))"
def seed_empty(db_path):
"""One account, no projects at all. This is the state B3 is about, and no
existing fixture has it — browser_check's seeds two projects precisely so the
scoping assertions have something to scope."""
os.environ["DATABASE_URL"] = "sqlite:///" + db_path.replace("\\", "/")
os.environ.setdefault("AUTH_SECRET_KEY", "browser-check-secret-not-for-production")
from server.db import SessionLocal, Base, engine
from server import models, auth
Base.metadata.create_all(bind=engine)
with SessionLocal() as db:
db.add(models.User(id="user_new", username="new", email="new@example.test",
full_name="New Starter", password_hash=auth.hash_password(PW),
role=auth.ROLE_ADMIN))
db.commit()
return {u.username: auth.create_token(u) for u in db.query(models.User).all()}
def settle(seconds=1.4):
time.sleep(seconds)
def js_errors(page):
"""page.js_errors() minus one known false alarm.
A project with no SOP yet answers GET /api/sops/latest with 404, correctly —
and the browser logs every 404 resource at error level whatever the app does
about it. browser_check.py's fixture seeds a SOP to sidestep this; a probe
that CREATES a project cannot, because a brand-new project has no SOP by
definition. That is exactly the state under test, so the entry is filtered by
name rather than the check being dropped."""
return [e for e in page.js_errors() if "/api/sops/latest" not in e]
def visible(page, sel):
return page.eval(
"(() => { const e = document.querySelector(%r); if (!e) return false; "
"const r = e.getBoundingClientRect(); return !!(r.width && r.height); })()" % sel)
def run_empty(page, base, tok):
print("\n1 + 2. a brand-new account with no projects at all")
page.clear_cookies()
page.set_cookie("wp_session", tok["new"])
page.goto(base + "/index.html", READY)
settle(1.6)
page.eval(STUB)
chk("the page boots with no JavaScript errors", not page.js_errors(), page.js_errors())
chk("it says there are no projects yet", visible(page, "#first-run"))
chk("...and explains what a project is for, not just that there are none",
len((page.eval("(document.getElementById('first-run')||{}).textContent||''")).strip()) > 120)
chk("the create form is open, not behind another click",
visible(page, "#new-project") and visible(page, "#np_name"))
chk("...headed as the first one", "first" in (page.eval(
"(document.getElementById('new-project-head')||{}).textContent||''")).lower(),
page.eval("(document.getElementById('new-project-head')||{}).textContent||''"))
chk("...with no Cancel, because there is nothing to cancel back to",
not visible(page, "#np-cancel"))
chk("the hero says create, not select",
"reate" in (page.eval("(document.getElementById('hero-sub')||{}).textContent||''")),
page.eval("(document.getElementById('hero-sub')||{}).textContent||''"))
chk("the sample project is offered from the empty state", visible(page, "#sample-offer"))
chk("...as a button that says what it does",
"sample" in (page.eval(
"(document.getElementById('use-sample-btn')||{}).textContent||''")).lower())
chk("no tool cards are shown over a project that does not exist",
not visible(page, "#overview"))
chk("...and no 'choose a project' prompt with nothing to choose from",
not visible(page, "#pick-prompt"))
print("\n6. the rebuilt create form is accessible (C1)")
labelled = json.loads(page.eval("""JSON.stringify(
[...document.querySelectorAll('#np-form input')].map(i => ({
id: i.id,
labelled: !!(i.labels && i.labels.length),
describedby: i.getAttribute('aria-describedby'),
tabindex: i.tabIndex,
})))"""))
chk("every input has a real label", labelled and all(f["labelled"] for f in labelled),
[f for f in labelled if not f["labelled"]])
chk("...and every one is keyboard reachable",
labelled and all(f["tabindex"] >= 0 for f in labelled))
chk("the required field points at its error region",
any(f["id"] == "np_name" and f["describedby"] == "np_name_err" for f in labelled),
labelled)
ring = page.eval("""(() => {
const i = document.getElementById('np_name');
i.focus();
if (document.activeElement !== i) return 'not focusable';
const cs = getComputedStyle(i);
return cs.outlineStyle !== 'none' && parseFloat(cs.outlineWidth) > 0
? 'ring ' + cs.outlineWidth + ' ' + cs.outlineColor : 'no ring';
})()""")
chk("...and shows a focus ring when focused (BL-014's third site)",
str(ring).startswith("ring"), ring)
print(" submitting it empty says so at the field, not in a dialog")
page.eval("document.getElementById('np-form').requestSubmit()")
settle(0.6)
chk("an empty submit is refused", visible(page, "#first-run"))
chk("...with the reason at the field",
bool((page.eval("(document.getElementById('np_name_err')||{}).textContent||''")).strip()),
page.eval("(document.getElementById('np_name_err')||{}).textContent||''"))
chk("...announced through a live region",
page.eval("(document.getElementById('np_name_err')||{}).getAttribute('role')") == "alert")
chk("...the field marked invalid",
page.eval("document.getElementById('np_name').getAttribute('aria-invalid')") == "true")
chk("...focus moved to it",
page.eval("(document.activeElement||{}).id") == "np_name")
chk("...and no native dialog was opened",
not json.loads(page.eval("JSON.stringify(window.__dialogs||[])")),
page.eval("JSON.stringify(window.__dialogs||[])"))
print("\n5. creating the first project works end to end")
page.eval("""(() => {
const n = document.getElementById('np_name');
n.value = 'First Job'; n.dispatchEvent(new Event('input', {bubbles:true}));
document.getElementById('np_number').value = 'FJ-1';
return true;
})()""")
page.eval("document.getElementById('np-form').requestSubmit()")
for _ in range(30):
if page.eval("!document.getElementById('overview') || "
"getComputedStyle(document.getElementById('overview')).display !== 'none'"):
break
time.sleep(0.3)
settle(1.2)
chk("the new project becomes the active one",
page.eval("(ProjectData.getActive()||{}).name") == "First Job",
page.eval("JSON.stringify(ProjectData.getActive()||{})"))
chk("...the tool cards appear", visible(page, "#overview"))
chk("...the first-run state stands down", not visible(page, "#first-run"))
chk("...and so does the sample offer", not visible(page, "#sample-offer"))
chk("...the hero names the project",
page.eval("(document.getElementById('hero-title')||{}).textContent") == "First Job")
chk("...and the URL carries it, so the address bar is shareable (S3)",
"project=" in page.eval("location.search"), page.eval("location.search"))
chk("no JavaScript error through the whole first-run flow",
not js_errors(page), js_errors(page))
print("\n2b. the sample project is reachable from the empty state")
page.eval("localStorage.clear()")
page.goto(base + "/index.html", READY)
settle(1.6)
page.eval(STUB)
# One project exists now, so this is the "projects exist, none active" state.
chk("with a project on the account but none chosen, the launcher says to choose",
visible(page, "#pick-prompt"))
chk("...and points at the app bar's switcher, not at a second list on the page",
"switcher" in (page.eval(
"(document.getElementById('pick-prompt-sub')||{}).textContent||''")).lower())
chk("...offering New project as well", visible(page, "#new-project-btn"))
chk("...with the create form closed until asked for", not visible(page, "#new-project"))
chk("...and the first-run state not shown to someone who is not new",
not visible(page, "#first-run"))
page.eval("document.getElementById('new-project-btn').click()")
settle(0.6)
chk("New project opens the form", visible(page, "#new-project"))
chk("...and moves focus into it",
page.eval("(document.activeElement||{}).id") == "np_name")
chk("...with Cancel available now that there is something to cancel to",
visible(page, "#np-cancel"))
page.eval("document.getElementById('np-cancel').click()")
settle(0.5)
chk("Cancel closes it again", not visible(page, "#new-project"))
chk("...and brings the choose-a-project prompt back", visible(page, "#pick-prompt"))
def run_populated(page, base, tok):
print("\n3 + 4. the picker card is gone; the app bar still switches")
page.clear_cookies()
page.set_cookie("wp_session", tok["root"])
page.goto(base + "/index.html?project=projA", READY)
settle(1.8)
page.eval(STUB)
chk("the page boots with no JavaScript errors", not page.js_errors(), page.js_errors())
chk("the picker card is gone", page.eval("!document.getElementById('project-section')"))
chk("...and so is its dropdown", page.eval("!document.getElementById('project-select')"))
chk("...and nothing else on the page lists projects to pick from",
page.eval("""(() => {
const inMain = [...document.querySelectorAll('.container select')];
return inMain.filter(s => s.options.length > 1).length === 0;
})()"""),
page.eval("[...document.querySelectorAll('.container select')].map(s => s.id)"))
chk("the app bar carries a project switcher",
page.eval("!!document.querySelector('.wp-appbar .wpc-proj-btn')"))
chk("...naming the active project",
"Job A" in (page.eval(
"(document.querySelector('.wpc-proj-name')||{}).textContent||''")),
page.eval("(document.querySelector('.wpc-proj-name')||{}).textContent||''"))
page.eval("document.querySelector('.wpc-proj-btn').click()")
settle(0.6)
chk("...it opens", page.eval(
"document.querySelector('.wpc-proj-btn').getAttribute('aria-expanded')") == "true")
chk("...and lists both projects on the account",
page.eval("document.querySelectorAll('.wpc-pop .wpc-item').length") == 2,
page.eval("document.querySelectorAll('.wpc-pop .wpc-item').length"))
chk("...its footer offers a new project rather than a list that moved",
"New project" in (page.eval(
"(document.querySelector('.wpc-pop-foot')||{}).textContent||''")),
page.eval("(document.querySelector('.wpc-pop-foot')||{}).textContent||''"))
chk("...pointing at the launcher's form",
"#new-project" in (page.eval(
"(document.querySelector('.wpc-foot-btn')||{}).getAttribute('href')||''") or ""),
page.eval("(document.querySelector('.wpc-foot-btn')||{}).getAttribute('href')||''"))
page.eval("""[...document.querySelectorAll('.wpc-pop .wpc-item')]
.find(b => /Job B/.test(b.textContent)).click()""")
for _ in range(30):
if "projB" in page.eval("location.search"):
break
time.sleep(0.3)
settle(1.6)
chk("switching from the bar changes project", "projB" in page.eval("location.search"),
page.eval("location.search"))
chk("...and the launcher follows it",
page.eval("(document.getElementById('hero-title')||{}).textContent") == "Job B",
page.eval("(document.getElementById('hero-title')||{}).textContent"))
chk("...with the tool cards still shown", visible(page, "#overview"))
chk("...and no first-run or choose-a-project state on a page that has both",
not visible(page, "#first-run") and not visible(page, "#pick-prompt"))
print("\n the app bar's 'New project' link lands on the form")
page.goto(base + "/index.html#new-project", READY)
settle(1.6)
chk("arriving at #new-project opens the create form", visible(page, "#new-project"))
chk("...and not the first-run state, on an account that has projects",
not visible(page, "#first-run"))
print("\n both widths")
for w, label in ((390, "390px"), (1440, "1440px")):
page.viewport(w, 900, mobile=(w == 390))
page.goto(base + "/index.html?project=projA", READY)
settle(1.4)
chk("%s: the page does not scroll sideways" % label,
page.eval("document.documentElement.scrollWidth <= window.innerWidth + 1"),
page.eval("[document.documentElement.scrollWidth, window.innerWidth]"))
chk("%s: the switcher is reachable" % label,
page.eval("""(() => { const b = document.querySelector('.wpc-proj-btn');
if (!b) return false; const r = b.getBoundingClientRect();
return r.width > 0 && r.right <= window.innerWidth + 1; })()"""))
page.viewport(1400, 1000)
def one_run(seeder, body, title):
exe = cdp.find_browser()
if not exe:
print("no headless-capable browser found; set WP_BROWSER.")
return 2
tmpdir = tempfile.mkdtemp(prefix="wpsuite-launcher-")
db_path = os.path.join(tmpdir, "check.db")
server = None
try:
tok = seeder(db_path)
port = cdp.free_port()
base = "http://127.0.0.1:%d" % port
server = start_server(port, db_path)
if server is None:
print("the test server would not start.")
return 2
print("\n%s\nTarget: %s" % (title, base))
browser = cdp.Browser(exe)
page = browser.page()
# Trap 5, in reverse: without focus emulation the headless document is
# not the focused one, :focus-visible never matches, and every control
# reports NO ring — a false red where a11y_check.py would get a false
# green. Same switch, same reason.
page.ws.call("Emulation.setFocusEmulationEnabled", {"enabled": True})
try:
body(page, base, tok)
finally:
page.close()
browser.close()
finally:
if server:
server.kill()
try:
server.wait(timeout=10)
except subprocess.TimeoutExpired:
pass
try:
from server.db import engine
engine.dispose()
except Exception:
pass
import shutil
for _ in range(10):
shutil.rmtree(tmpdir, ignore_errors=True)
if not os.path.exists(tmpdir):
break
time.sleep(0.3)
return 0
PHASES = {
"empty": (seed_empty, run_empty, "Launcher — a brand-new account (B3)"),
"populated": (seed, run_populated, "Launcher — an account with projects (B3)"),
}
def phase_main(name):
seeder, body, title = PHASES[name]
rc = one_run(seeder, body, title)
if rc == 2:
return 2
total = len(_PASS) + len(_FAIL)
print("\n%s\n%d/%d checks passed." % ("-" * 54, len(_PASS), total))
for f in _FAIL:
print(" - " + f)
print("RESULT %d %d" % (len(_PASS), total))
return 1 if _FAIL else 0
def main():
# The two states are DATABASE states, not view states — faking "no projects"
# in the browser would test the fake — so each phase needs its own database.
#
# And each needs its own PROCESS. server/db.py builds its engine at import
# time from DATABASE_URL, so a second seed() in the same interpreter still
# points at the first phase's database, which has been deleted by then. That
# surfaces as "unable to open database file", which reads like a broken test
# environment rather than what it is.
if len(sys.argv) > 1 and sys.argv[1] in PHASES:
return phase_main(sys.argv[1])
passed = total = 0
worst = 0
for name in ("empty", "populated"):
proc = subprocess.run([sys.executable, os.path.abspath(__file__), name],
capture_output=True, text=True,
cwd=os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
for line in proc.stdout.splitlines():
if line.startswith("RESULT "):
_, p, t = line.split()
passed += int(p)
total += int(t)
continue
print(line)
if proc.stderr.strip():
print(proc.stderr.strip()[-2000:])
worst = max(worst, proc.returncode)
# A fresh browser per phase, and a pause between: started back to back
# they exhaust the headless browser's ports and abort with "browser would
# not start", which looks like a code fault and is not one.
time.sleep(2.0)
print("\n%s\n%d/%d checks passed." % ("=" * 54, passed, total))
if worst:
return worst
print("\nResult: " + _c("ALL PASS — new accounts have a way in; switching moved to the bar.", "32") + "\n")
return 0
if __name__ == "__main__":
sys.exit(main())