mAi
728788225c
ROOT CAUSE (head-diagnosed, confirmed): projax templates use hx-post/hx-get/ hx-target/hx-swap across the task, tree, dashboard, bulk and classify forms, but HTMX was NEVER loaded — layout.tmpl had only inline <script> blocks, no htmx <script src>. So every hx-post form silently no-op'd to a GET-to-self (logs: GET /i/social.mama on each 'Add' click). m hit it as 'can't add Tasks (projax), nothing happens'. Both the mBrian AND the older CalDAV task forms were dead. The style.css even comments 'HTMX-driven' — the script was just never wired. FIX: vendor htmx 1.9.12 into web/static (Tailscale-only app → vendored over CDN, matches the go:embed asset model) + one deferred <script> in layout <head>. htmx only intercepts hx-* elements, so the existing plain method=post forms are untouched. The task handlers already return section fragments for hx-swap, so the flow just works once htmx is present. Added htmx.min.js to the service-worker shell precache (CACHE_NAME v1→v2). The server-side write path was already proven green (TestMBrianTaskRoundTrip PASS with prod creds) — the bug was purely the client form never POSTing. Loading htmx closes that gap. Regression guard: TestLayoutLoadsHTMX asserts the script ships in the layout so this can't silently recur.
209 lines
8.1 KiB
Go
209 lines
8.1 KiB
Go
package web_test
|
|
|
|
import (
|
|
"strings"
|
|
"testing"
|
|
)
|
|
|
|
// TestLayoutSidebarOnDesktop confirms the Phase 5g sidebar markup is
|
|
// rendered with all six nav items (Tree / Dashboard / Calendar /
|
|
// Timeline / Graph / Admin). Per-item href + label asserted so a stray
|
|
// edit can't silently lose a section.
|
|
func TestLayoutSidebarOnDesktop(t *testing.T) {
|
|
srv, pool := mustServer(t)
|
|
defer pool.Close()
|
|
h := srv.Routes()
|
|
_, body := get(t, h, "/views/dashboard")
|
|
if !strings.Contains(body, `<aside class="projax-sidebar"`) {
|
|
t.Fatalf("expected <aside class=\"projax-sidebar\"> in body, got: %s", truncate(body, 400))
|
|
}
|
|
for _, want := range []struct {
|
|
href, label string
|
|
}{
|
|
{`/views/tree`, "Tree"},
|
|
{`/views/dashboard`, "Dashboard"},
|
|
{`/views/calendar`, "Calendar"},
|
|
{`/views/timeline`, "Timeline"},
|
|
{`/views/graph`, "Graph"},
|
|
{`/admin`, "Admin"},
|
|
} {
|
|
if !strings.Contains(body, `href="`+want.href+`"`) {
|
|
t.Errorf("sidebar missing href=%q", want.href)
|
|
}
|
|
if !strings.Contains(body, `<span class="nav-label">`+want.label+`</span>`) {
|
|
t.Errorf("sidebar missing label %q", want.label)
|
|
}
|
|
}
|
|
}
|
|
|
|
// TestLayoutActiveClass proves the server-side active marker fires only
|
|
// on the cell whose href matches the request path. Render is driven by
|
|
// the .Path field the render helper injects from r.URL.Path.
|
|
func TestLayoutActiveClass(t *testing.T) {
|
|
srv, pool := mustServer(t)
|
|
defer pool.Close()
|
|
h := srv.Routes()
|
|
_, body := get(t, h, "/views/dashboard")
|
|
// Dashboard item should be active.
|
|
if !strings.Contains(body, `class="nav-item active" title="Dashboard"`) {
|
|
t.Errorf("expected Dashboard nav-item to carry .active on /dashboard, body: %s", truncate(body, 400))
|
|
}
|
|
// Tree item (href="/views/tree") must NOT be active on the /dashboard page.
|
|
// The Tree anchor opens with the exact-path active match; on /dashboard
|
|
// the substring `class="nav-item" title="Tree"` should be present and
|
|
// not its `active` sibling.
|
|
if !strings.Contains(body, `class="nav-item" title="Tree"`) {
|
|
t.Errorf("expected Tree nav-item to be non-active on /dashboard")
|
|
}
|
|
if strings.Contains(body, `class="nav-item active" title="Tree"`) {
|
|
t.Errorf("Tree nav-item should NOT be active on /dashboard")
|
|
}
|
|
}
|
|
|
|
// TestLayoutCollapseScript proves the inline pre-paint script that
|
|
// restores the sidebar collapsed state from localStorage ships unchanged.
|
|
// Without it the main-content margin would flash from 220px → 56px on
|
|
// every navigation when the user has the sidebar collapsed.
|
|
func TestLayoutCollapseScript(t *testing.T) {
|
|
srv, pool := mustServer(t)
|
|
defer pool.Close()
|
|
h := srv.Routes()
|
|
_, body := get(t, h, "/views/dashboard")
|
|
// Pre-paint restore script.
|
|
if !strings.Contains(body, `localStorage.getItem('projax.sidebar.collapsed')`) {
|
|
t.Errorf("expected pre-paint localStorage restore script in layout")
|
|
}
|
|
// The collapse-toggle button + its handler are also part of the chrome.
|
|
if !strings.Contains(body, `id="sidebar-collapse"`) {
|
|
t.Errorf("expected #sidebar-collapse button in layout")
|
|
}
|
|
if !strings.Contains(body, `localStorage.setItem('projax.sidebar.collapsed'`) {
|
|
t.Errorf("expected toggle handler that persists state")
|
|
}
|
|
}
|
|
|
|
// TestLayoutNoTopHeader proves the pre-5g <header> chrome is gone so
|
|
// callers that asserted on old top-nav markup can't keep passing by
|
|
// accident. Belt-and-braces guard for the migration.
|
|
//
|
|
// Scope: only the TOP-of-body header is forbidden. <header> elements
|
|
// inside <main> (card heads, tile heads) are valid HTML5 and used by
|
|
// the existing card-tasks template and the Phase 5h tile template.
|
|
func TestLayoutNoTopHeader(t *testing.T) {
|
|
srv, pool := mustServer(t)
|
|
defer pool.Close()
|
|
h := srv.Routes()
|
|
_, body := get(t, h, "/views/dashboard")
|
|
// Slice out the region between <body> and <main> — that's where the
|
|
// pre-5g top header lived. Inside <main> belongs to content templates.
|
|
chrome := body
|
|
if i := strings.Index(chrome, "<main"); i >= 0 {
|
|
chrome = chrome[:i]
|
|
}
|
|
if strings.Contains(chrome, `<header>`) || strings.Contains(chrome, `<header `) {
|
|
t.Errorf("expected the pre-5g top <header> to be gone, but body chrome (before <main>) has one: %s", truncate(chrome, 400))
|
|
}
|
|
if strings.Contains(body, `class="logout-btn"`) {
|
|
t.Errorf("expected the pre-5g .logout-btn to be replaced by the sidebar .logout-item")
|
|
}
|
|
}
|
|
|
|
// TestLayoutBottomNavMarkup pins the Slice-B mobile bottom-nav shape: five
|
|
// slots in the documented order (Tree / Dashboard / + New / Calendar /
|
|
// Menu), the +New slot is a raised .capture-circle pointing at /new, and
|
|
// the Menu opens a <details> drawer with the overflow items inside.
|
|
func TestLayoutBottomNavMarkup(t *testing.T) {
|
|
srv, pool := mustServer(t)
|
|
defer pool.Close()
|
|
h := srv.Routes()
|
|
_, body := get(t, h, "/views/dashboard")
|
|
if !strings.Contains(body, `<nav class="projax-bottom-nav"`) {
|
|
t.Fatalf("expected <nav class=\"projax-bottom-nav\"> in body, got: %s", truncate(body, 400))
|
|
}
|
|
// 5-slot anchors / details element.
|
|
for _, want := range []string{
|
|
`<a href="/views/tree" class="bottom-nav-item`,
|
|
`<a href="/views/dashboard" class="bottom-nav-item`,
|
|
`<a href="/new" class="bottom-nav-item capture-btn"`,
|
|
`class="capture-circle"`,
|
|
`<a href="/views/calendar" class="bottom-nav-item`,
|
|
`<details class="projax-mobile-drawer"`,
|
|
} {
|
|
if !strings.Contains(body, want) {
|
|
t.Errorf("bottom-nav body missing %q", want)
|
|
}
|
|
}
|
|
// Drawer overflow items: Timeline, Graph, Admin, theme toggle, sign-out.
|
|
for _, want := range []string{
|
|
`<a href="/views/timeline" class="drawer-item`,
|
|
`<a href="/views/graph" class="drawer-item`,
|
|
`<a href="/admin" class="drawer-item`,
|
|
`id="theme-toggle-drawer"`,
|
|
`<form method="post" action="/logout" class="drawer-form">`,
|
|
} {
|
|
if !strings.Contains(body, want) {
|
|
t.Errorf("drawer body missing %q", want)
|
|
}
|
|
}
|
|
}
|
|
|
|
// TestLayoutBottomNavActiveClass mirrors TestLayoutActiveClass — the
|
|
// server-side .Path marker fires on the bottom-nav too so a user on
|
|
// /calendar sees the Calendar slot highlighted (and not Tree/Dashboard).
|
|
func TestLayoutBottomNavActiveClass(t *testing.T) {
|
|
srv, pool := mustServer(t)
|
|
defer pool.Close()
|
|
h := srv.Routes()
|
|
_, body := get(t, h, "/views/calendar")
|
|
if !strings.Contains(body, `<a href="/views/calendar" class="bottom-nav-item active"`) {
|
|
t.Errorf("expected Calendar bottom-nav-item to carry .active on /calendar")
|
|
}
|
|
if strings.Contains(body, `<a href="/views/tree" class="bottom-nav-item active"`) {
|
|
t.Errorf("Tree bottom-nav-item should NOT be active on /calendar")
|
|
}
|
|
}
|
|
|
|
// TestLayoutThemeToggleBoundToBothButtons proves the single theme handler
|
|
// is wired to both the sidebar (#theme-toggle) and the drawer
|
|
// (#theme-toggle-drawer) so flipping either swaps the data-theme. Without
|
|
// this the mobile drawer's theme button would be a dead element.
|
|
func TestLayoutThemeToggleBoundToBothButtons(t *testing.T) {
|
|
srv, pool := mustServer(t)
|
|
defer pool.Close()
|
|
h := srv.Routes()
|
|
_, body := get(t, h, "/views/dashboard")
|
|
// Both buttons present.
|
|
if !strings.Contains(body, `id="theme-toggle"`) {
|
|
t.Errorf("sidebar theme-toggle button missing")
|
|
}
|
|
if !strings.Contains(body, `id="theme-toggle-drawer"`) {
|
|
t.Errorf("drawer theme-toggle-drawer button missing")
|
|
}
|
|
// Inline handler enumerates BOTH ids — keeps drift detection cheap.
|
|
if !strings.Contains(body, `getElementById('theme-toggle-drawer')`) {
|
|
t.Errorf("expected theme handler to enumerate #theme-toggle-drawer")
|
|
}
|
|
}
|
|
|
|
// TestLayoutLoadsHTMX guards against the Phase 7c regression: the task / tree
|
|
// / dashboard / bulk / classify forms drive in-place swaps with hx-* attrs,
|
|
// which are inert unless htmx is actually loaded. It went unnoticed for many
|
|
// phases (every hx-post task form silently no-op'd to a GET-to-self). This
|
|
// test fails the moment the vendored htmx <script> drops out of the layout.
|
|
func TestLayoutLoadsHTMX(t *testing.T) {
|
|
srv, pool := mustServer(t)
|
|
defer pool.Close()
|
|
h := srv.Routes()
|
|
_, body := get(t, h, "/views/dashboard")
|
|
if !strings.Contains(body, `src="/static/htmx.min.js"`) {
|
|
t.Errorf("layout must load vendored htmx (hx-* forms are dead without it); body: %s", truncate(body, 400))
|
|
}
|
|
}
|
|
|
|
func truncate(s string, n int) string {
|
|
if len(s) <= n {
|
|
return s
|
|
}
|
|
return s[:n] + "…"
|
|
}
|