1 files changed, 68 insertions, 0 deletions
diff --git a/web/test/cancel-blocked.test.mjs b/web/test/cancel-blocked.test.mjs
new file mode 100644
index 0000000..0488345
--- /dev/null
+++ b/web/test/cancel-blocked.test.mjs
@@ -0,0 +1,68 @@
+// cancel-blocked.test.mjs — cancel button visibility for BLOCKED tasks
+//
+// Run with: node --test web/test/cancel-blocked.test.mjs
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+// ── Logic under test ──────────────────────────────────────────────────────────
+// BLOCKED tasks must show a Cancel button (in addition to question/subtask UI).
+// The cancel button should be visible for BLOCKED, RUNNING, and other active states.
+
+const CANCEL_STATES = new Set(['RUNNING', 'BLOCKED']);
+
+function showCancelButton(state) {
+  return CANCEL_STATES.has(state);
+}
+
+function getCancelEndpoint(taskId) {
+  return `/api/tasks/${taskId}/cancel`;
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('cancel button visibility for BLOCKED tasks', () => {
+  it('shows Cancel button for BLOCKED', () => {
+    assert.equal(showCancelButton('BLOCKED'), true);
+  });
+
+  it('shows Cancel button for RUNNING', () => {
+    assert.equal(showCancelButton('RUNNING'), true);
+  });
+
+  it('does not show Cancel button for PENDING', () => {
+    assert.equal(showCancelButton('PENDING'), false);
+  });
+
+  it('does not show Cancel button for COMPLETED', () => {
+    assert.equal(showCancelButton('COMPLETED'), false);
+  });
+
+  it('does not show Cancel button for QUEUED', () => {
+    assert.equal(showCancelButton('QUEUED'), false);
+  });
+
+  it('does not show Cancel button for FAILED', () => {
+    assert.equal(showCancelButton('FAILED'), false);
+  });
+
+  it('does not show Cancel button for CANCELLED', () => {
+    assert.equal(showCancelButton('CANCELLED'), false);
+  });
+
+  it('does not show Cancel button for READY', () => {
+    assert.equal(showCancelButton('READY'), false);
+  });
+});
+
+describe('cancel API endpoint for BLOCKED tasks', () => {
+  it('uses correct cancel endpoint for a BLOCKED task', () => {
+    assert.equal(getCancelEndpoint('task-123'), '/api/tasks/task-123/cancel');
+  });
+
+  it('cancel endpoint uses POST method (no-op check — method is always POST)', () => {
+    // The cancel action always calls POST /api/tasks/{id}/cancel
+    const method = 'POST';
+    assert.equal(method, 'POST');
+  });
+});