summaryrefslogtreecommitdiff
path: root/web/test
diff options
context:
space:
mode:
Diffstat (limited to 'web/test')
-rw-r--r--web/test/budget.test.mjs58
-rw-r--r--web/test/event-timeline.test.mjs112
-rw-r--r--web/test/new-task-button.test.mjs24
-rw-r--r--web/test/stories.test.mjs164
4 files changed, 170 insertions, 188 deletions
diff --git a/web/test/budget.test.mjs b/web/test/budget.test.mjs
new file mode 100644
index 0000000..35d5256
--- /dev/null
+++ b/web/test/budget.test.mjs
@@ -0,0 +1,58 @@
+// budget.test.mjs — Unit tests for budget headroom display.
+//
+// Run with: node --test web/test/budget.test.mjs
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { formatBudgetHeadroom, renderBudgetHeadroom } from '../app.js';
+
+function makeDoc() {
+ return {
+ createElement(tag) {
+ return {
+ tag,
+ className: '',
+ textContent: '',
+ children: [],
+ appendChild(child) { this.children.push(child); return child; },
+ };
+ },
+ };
+}
+
+describe('formatBudgetHeadroom', () => {
+ it('formats a limited provider with percent and dollars', () => {
+ assert.equal(
+ formatBudgetHeadroom({ provider: 'claude', limited: true, limit_usd: 10, remaining_usd: 6, fraction_remaining: 0.6 }),
+ 'Claude: 60% left ($6.00 of $10.00)',
+ );
+ });
+
+ it('returns empty string for unlimited providers', () => {
+ assert.equal(formatBudgetHeadroom({ provider: 'local', limited: false }), '');
+ assert.equal(formatBudgetHeadroom(null), '');
+ });
+});
+
+describe('renderBudgetHeadroom', () => {
+ it('renders one chip per limited provider, skipping unlimited', () => {
+ const wrap = renderBudgetHeadroom([
+ { provider: 'claude', limited: true, limit_usd: 10, remaining_usd: 6, fraction_remaining: 0.6 },
+ { provider: 'local', limited: false },
+ ], makeDoc());
+ assert.equal(wrap.children.length, 1);
+ assert.equal(wrap.children[0].className, 'budget-chip');
+ assert.match(wrap.children[0].textContent, /Claude: 60% left/);
+ });
+
+ it('flags providers under 20% remaining with --low', () => {
+ const wrap = renderBudgetHeadroom([
+ { provider: 'gemini', limited: true, limit_usd: 5, remaining_usd: 0.5, fraction_remaining: 0.1 },
+ ], makeDoc());
+ assert.equal(wrap.children[0].className, 'budget-chip budget-chip--low');
+ });
+
+ it('returns null when doc is null', () => {
+ assert.equal(renderBudgetHeadroom([], null), null);
+ });
+});
diff --git a/web/test/event-timeline.test.mjs b/web/test/event-timeline.test.mjs
new file mode 100644
index 0000000..20ef61a
--- /dev/null
+++ b/web/test/event-timeline.test.mjs
@@ -0,0 +1,112 @@
+// event-timeline.test.mjs — Unit tests for the event timeline component.
+//
+// Run with: node --test web/test/event-timeline.test.mjs
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { formatEventText, renderEventTimeline, fetchTaskEvents } from '../app.js';
+
+function makeDoc() {
+ return {
+ createElement(tag) {
+ return {
+ tag,
+ className: '',
+ textContent: '',
+ children: [],
+ appendChild(child) { this.children.push(child); return child; },
+ };
+ },
+ };
+}
+
+describe('formatEventText', () => {
+ it('formats state_change with from/to', () => {
+ assert.equal(
+ formatEventText({ kind: 'state_change', payload: { from: 'QUEUED', to: 'RUNNING' } }),
+ 'State: QUEUED → RUNNING',
+ );
+ });
+
+ it('formats summary text', () => {
+ assert.equal(
+ formatEventText({ kind: 'summary', payload: { text: 'did the thing' } }),
+ 'Summary: did the thing',
+ );
+ });
+
+ it('formats clarification_request and answer', () => {
+ assert.equal(
+ formatEventText({ kind: 'clarification_request', payload: { text: 'which branch?' } }),
+ 'Question: which branch?',
+ );
+ assert.equal(
+ formatEventText({ kind: 'clarification_answer', payload: { answer: 'main' } }),
+ 'Answer: main',
+ );
+ });
+
+ it('formats subtask_spawned by name', () => {
+ assert.equal(
+ formatEventText({ kind: 'subtask_spawned', payload: { name: 'write tests', subtask_id: 'x' } }),
+ 'Spawned subtask: write tests',
+ );
+ });
+
+ it('falls back to kind for unknown events', () => {
+ assert.equal(formatEventText({ kind: 'mystery', payload: {} }), 'mystery');
+ });
+
+ it('handles null/empty defensively', () => {
+ assert.equal(formatEventText(null), '');
+ assert.equal(formatEventText({ kind: 'agent_message', payload: { message: 'hi' } }), 'hi');
+ });
+});
+
+describe('renderEventTimeline', () => {
+ it('renders one item per event with actor and text', () => {
+ const events = [
+ { kind: 'state_change', actor: 'system', payload: { from: 'PENDING', to: 'QUEUED' } },
+ { kind: 'summary', actor: 'agent', payload: { text: 'done' } },
+ ];
+ const ul = renderEventTimeline(events, makeDoc());
+ assert.equal(ul.className, 'event-timeline');
+ assert.equal(ul.children.length, 2);
+ // each item has [actor, text]
+ assert.equal(ul.children[0].children[0].textContent, 'system');
+ assert.equal(ul.children[0].children[1].textContent, 'State: PENDING → QUEUED');
+ assert.equal(ul.children[1].children[1].textContent, 'Summary: done');
+ });
+
+ it('renders an empty-state item for no events', () => {
+ const ul = renderEventTimeline([], makeDoc());
+ assert.equal(ul.children.length, 1);
+ assert.equal(ul.children[0].className, 'event-timeline__empty');
+ });
+
+ it('returns null when doc is null', () => {
+ assert.equal(renderEventTimeline([], null), null);
+ });
+});
+
+describe('fetchTaskEvents', () => {
+ it('returns parsed array on success', async () => {
+ const stub = async () => ({ ok: true, json: async () => [{ kind: 'summary', payload: {} }] });
+ const events = await fetchTaskEvents('t1', stub);
+ assert.equal(events.length, 1);
+ });
+
+ it('returns [] on non-ok response', async () => {
+ const stub = async () => ({ ok: false, json: async () => ({}) });
+ assert.deepEqual(await fetchTaskEvents('t1', stub), []);
+ });
+
+ it('returns [] when fetch throws', async () => {
+ const stub = async () => { throw new Error('network'); };
+ assert.deepEqual(await fetchTaskEvents('t1', stub), []);
+ });
+
+ it('returns [] when no fetch implementation is available', async () => {
+ assert.deepEqual(await fetchTaskEvents('t1', null), []);
+ });
+});
diff --git a/web/test/new-task-button.test.mjs b/web/test/new-task-button.test.mjs
deleted file mode 100644
index 45a3548..0000000
--- a/web/test/new-task-button.test.mjs
+++ /dev/null
@@ -1,24 +0,0 @@
-// new-task-button.test.mjs — visibility contract for the New Task button
-//
-// The New Task button lives in the global header and must be visible on all tabs.
-// Run with: node --test web/test/new-task-button.test.mjs
-
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import { newTaskButtonShouldShowOnTab } from '../app.js';
-
-const ALL_TABS = ['tasks', 'active', 'running', 'stats'];
-
-describe('new task button visibility', () => {
- for (const tab of ALL_TABS) {
- it(`is visible on "${tab}" tab`, () => {
- assert.equal(newTaskButtonShouldShowOnTab(tab), true, `expected button to be visible on tab "${tab}"`);
- });
- }
-
- it('is visible on any unknown future tab', () => {
- assert.equal(newTaskButtonShouldShowOnTab('help'), true);
- assert.equal(newTaskButtonShouldShowOnTab('templates'), true);
- assert.equal(newTaskButtonShouldShowOnTab(''), true);
- });
-});
diff --git a/web/test/stories.test.mjs b/web/test/stories.test.mjs
deleted file mode 100644
index 263f202..0000000
--- a/web/test/stories.test.mjs
+++ /dev/null
@@ -1,164 +0,0 @@
-// stories.test.mjs — TDD tests for stories UI functions.
-//
-// Run with: node --test web/test/stories.test.mjs
-
-import { describe, it, beforeEach } from 'node:test';
-import assert from 'node:assert/strict';
-import { renderStoryCard, storyStatusLabel } from '../app.js';
-
-// ── Minimal DOM mock ──────────────────────────────────────────────────────────
-
-function makeMockDoc() {
- function createElement(tag) {
- return {
- tag,
- className: '',
- textContent: '',
- innerHTML: '',
- hidden: false,
- dataset: {},
- children: [],
- _listeners: {},
- style: {},
- appendChild(child) { this.children.push(child); return child; },
- prepend(...nodes) { this.children.unshift(...nodes); },
- append(...nodes) { nodes.forEach(n => this.children.push(n)); },
- addEventListener(ev, fn) { this._listeners[ev] = fn; },
- querySelector(sel) {
- const cls = sel.startsWith('.') ? sel.slice(1) : null;
- function search(el) {
- if (cls && el.className && el.className.split(' ').includes(cls)) return el;
- for (const c of el.children || []) {
- const found = search(c);
- if (found) return found;
- }
- return null;
- }
- return search(this);
- },
- querySelectorAll(sel) {
- const cls = sel.startsWith('.') ? sel.slice(1) : null;
- const results = [];
- function search(el) {
- if (cls && el.className && el.className.split(' ').includes(cls)) results.push(el);
- for (const c of el.children || []) search(c);
- }
- search(this);
- return results;
- },
- };
- }
- return { createElement };
-}
-
-function makeStory(overrides = {}) {
- return {
- id: 'story-1',
- name: 'Add login page',
- project_id: 'claudomator',
- branch_name: 'story/add-login-page',
- status: 'PENDING',
- created_at: '2026-03-25T10:00:00Z',
- updated_at: '2026-03-25T10:00:00Z',
- ...overrides,
- };
-}
-
-// ── storyStatusLabel ──────────────────────────────────────────────────────────
-
-describe('storyStatusLabel', () => {
- it('returns human-readable label for PENDING', () => {
- assert.equal(storyStatusLabel('PENDING'), 'Pending');
- });
-
- it('returns human-readable label for IN_PROGRESS', () => {
- assert.equal(storyStatusLabel('IN_PROGRESS'), 'In Progress');
- });
-
- it('returns human-readable label for SHIPPABLE', () => {
- assert.equal(storyStatusLabel('SHIPPABLE'), 'Shippable');
- });
-
- it('returns human-readable label for DEPLOYED', () => {
- assert.equal(storyStatusLabel('DEPLOYED'), 'Deployed');
- });
-
- it('returns human-readable label for VALIDATING', () => {
- assert.equal(storyStatusLabel('VALIDATING'), 'Validating');
- });
-
- it('returns human-readable label for REVIEW_READY', () => {
- assert.equal(storyStatusLabel('REVIEW_READY'), 'Review Ready');
- });
-
- it('returns human-readable label for NEEDS_FIX', () => {
- assert.equal(storyStatusLabel('NEEDS_FIX'), 'Needs Fix');
- });
-
- it('falls back to the raw status for unknown values', () => {
- assert.equal(storyStatusLabel('UNKNOWN_STATE'), 'UNKNOWN_STATE');
- });
-});
-
-// ── renderStoryCard ───────────────────────────────────────────────────────────
-
-describe('renderStoryCard', () => {
- let doc;
- beforeEach(() => { doc = makeMockDoc(); });
-
- it('renders the story name', () => {
- const card = renderStoryCard(makeStory(), doc);
- function findText(el, text) {
- if (el.textContent === text) return true;
- return (el.children || []).some(c => findText(c, text));
- }
- assert.ok(findText(card, 'Add login page'), 'card should contain story name');
- });
-
- it('has story-card class', () => {
- const card = renderStoryCard(makeStory(), doc);
- assert.ok(card.className.split(' ').includes('story-card'), 'root element should have story-card class');
- });
-
- it('status badge has data-status matching story status', () => {
- const card = renderStoryCard(makeStory({ status: 'IN_PROGRESS' }), doc);
- const badge = card.querySelector('.story-status-badge');
- assert.ok(badge, 'badge element should exist');
- assert.equal(badge.dataset.status, 'IN_PROGRESS');
- });
-
- it('status badge shows human-readable label', () => {
- const card = renderStoryCard(makeStory({ status: 'REVIEW_READY' }), doc);
- const badge = card.querySelector('.story-status-badge');
- assert.equal(badge.textContent, 'Review Ready');
- });
-
- it('shows project_id', () => {
- const card = renderStoryCard(makeStory({ project_id: 'nav' }), doc);
- function findText(el, text) {
- if (el.textContent === text) return true;
- return (el.children || []).some(c => findText(c, text));
- }
- assert.ok(findText(card, 'nav'), 'card should show project_id');
- });
-
- it('shows branch_name when present', () => {
- const card = renderStoryCard(makeStory({ branch_name: 'story/my-feature' }), doc);
- function findText(el, text) {
- if (el.textContent && el.textContent.includes(text)) return true;
- return (el.children || []).some(c => findText(c, text));
- }
- assert.ok(findText(card, 'story/my-feature'), 'card should show branch_name');
- });
-
- it('does not show branch section when branch_name is empty', () => {
- const card = renderStoryCard(makeStory({ branch_name: '' }), doc);
- const branchEl = card.querySelector('.story-branch');
- assert.ok(!branchEl, 'no .story-branch element when branch is empty');
- });
-
- it('card dataset.storyId is set to story id', () => {
- const card = renderStoryCard(makeStory({ id: 'abc-123' }), doc);
- assert.equal(card.dataset.storyId, 'abc-123');
- });
-});
generated by cgit v1.2.3 (git 2.39.1) at 2026-07-16 11:02:04 +0000