beads-ui 0.1.1 → 0.2.0

package/app/views/detail.assignee.test.js

@@ -1,161 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createDetailView } from './detail.js';
-
-/** @type {(impl: (type: string, payload?: unknown) => Promise<any>) => (type: string, payload?: unknown) => Promise<any>} */
-const mockSend = (impl) => vi.fn(impl);
-
-describe('views/detail assignee edit', () => {
-  test('edits assignee via Properties control', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const issue = {
-      id: 'UI-57',
-      title: 'Detail screen',
-      description: '',
-      status: 'open',
-      priority: 2,
-      assignee: 'alice',
-      dependencies: [],
-      dependents: []
-    };
-
-    const send = mockSend(async (type, payload) => {
-      if (type === 'show-issue') {
-        return issue;
-      }
-      if (type === 'update-assignee') {
-        expect(payload).toEqual({ id: 'UI-57', assignee: 'max' });
-        const next = { ...issue, assignee: 'max' };
-        return next;
-      }
-      throw new Error('Unexpected');
-    });
-
-    const view = createDetailView(mount, send);
-    await view.load('UI-57');
-
-    const assigneeSpan = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('#detail-root .prop.assignee .value .editable')
-    );
-    expect(assigneeSpan).toBeTruthy();
-    expect(assigneeSpan.textContent).toBe('alice');
-
-    assigneeSpan.click();
-    const input = /** @type {HTMLInputElement} */ (
-      mount.querySelector('#detail-root .prop.assignee input')
-    );
-    const saveBtn = /** @type {HTMLButtonElement} */ (
-      mount.querySelector('#detail-root .prop.assignee button')
-    );
-    input.value = 'max';
-    saveBtn.click();
-
-    await Promise.resolve();
-
-    const assigneeSpan2 = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('#detail-root .prop.assignee .value .editable')
-    );
-    expect(assigneeSpan2.textContent).toBe('max');
-  });
-
-  test('shows editable placeholder when unassigned', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const issue = {
-      id: 'UI-88',
-      title: 'No assignee yet',
-      description: '',
-      status: 'open',
-      priority: 2,
-      // no assignee field
-      dependencies: [],
-      dependents: []
-    };
-
-    const send = mockSend(async (type, payload) => {
-      if (type === 'show-issue') {
-        return issue;
-      }
-      if (type === 'update-assignee') {
-        const next = {
-          ...issue,
-          assignee: /** @type {any} */ (payload).assignee
-        };
-        return next;
-      }
-      throw new Error('Unexpected');
-    });
-
-    const view = createDetailView(mount, send);
-    await view.load('UI-88');
-
-    const ph = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('#detail-root .prop.assignee .value .editable')
-    );
-    expect(ph).toBeTruthy();
-    expect(ph.className).toContain('muted');
-    expect(ph.textContent).toBe('Unassigned');
-
-    ph.click();
-    const input = /** @type {HTMLInputElement} */ (
-      mount.querySelector('#detail-root .prop.assignee input')
-    );
-    expect(input).toBeTruthy();
-  });
-
-  test('clears assignee to empty string and shows placeholder', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const issue = {
-      id: 'UI-31',
-      title: 'Clearable',
-      status: 'open',
-      priority: 2,
-      assignee: 'bob',
-      dependencies: [],
-      dependents: []
-    };
-
-    const send = mockSend(async (type, payload) => {
-      if (type === 'show-issue') {
-        return issue;
-      }
-      if (type === 'update-assignee') {
-        const next = {
-          ...issue,
-          assignee: /** @type {any} */ (payload).assignee
-        };
-        return next;
-      }
-      throw new Error('Unexpected');
-    });
-
-    const view = createDetailView(mount, send);
-    await view.load('UI-31');
-
-    const span = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('#detail-root .prop.assignee .value .editable')
-    );
-    span.click();
-    const input = /** @type {HTMLInputElement} */ (
-      mount.querySelector('#detail-root .prop.assignee input')
-    );
-    const save = /** @type {HTMLButtonElement} */ (
-      mount.querySelector('#detail-root .prop.assignee button')
-    );
-    input.value = '';
-    save.click();
-    await Promise.resolve();
-    const span2 = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('#detail-root .prop.assignee .value .editable')
-    );
-    expect(span2.textContent).toBe('Unassigned');
-    expect(span2.className).toContain('muted');
-  });
-});

package/app/views/detail.deps.test.js

@@ -1,97 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createDetailView } from './detail.js';
-
-function setupDom() {
-  const root = document.createElement('div');
-  document.body.appendChild(root);
-  return root;
-}
-
-describe('views/detail dependencies', () => {
-  test('adds Dependencies link and re-renders', async () => {
-    const mount = setupDom();
-    const send = vi
-      .fn()
-      // initial show
-      .mockResolvedValueOnce({
-        id: 'UI-10',
-        title: 'X',
-        dependencies: [],
-        dependents: []
-      })
-      // dep-add returns updated issue
-      .mockResolvedValueOnce({
-        id: 'UI-10',
-        dependencies: [{ id: 'UI-2' }],
-        dependents: []
-      });
-    const view = createDetailView(mount, /** @type {any} */ (send));
-    await view.load('UI-10');
-
-    const input = mount.querySelector('[data-testid="add-dependency"]');
-    expect(input).toBeTruthy();
-    /** @type {HTMLInputElement} */
-    const el = /** @type {any} */ (input);
-    el.value = 'UI-2';
-    const addBtn = el.nextElementSibling;
-    addBtn?.dispatchEvent(new window.Event('click'));
-
-    // Next tick
-    await Promise.resolve();
-
-    // Should have called dep-add
-    const calls = send.mock.calls.map((c) => c[0]);
-    expect(calls.includes('dep-add')).toBe(true);
-  });
-
-  test('removes Blocks link', async () => {
-    const mount = setupDom();
-    const send = vi
-      .fn()
-      // initial show
-      .mockResolvedValueOnce({
-        id: 'UI-20',
-        title: 'Y',
-        dependencies: [],
-        dependents: [{ id: 'UI-5' }]
-      })
-      // dep-remove returns updated issue
-      .mockResolvedValueOnce({ id: 'UI-20', dependencies: [], dependents: [] });
-    const view = createDetailView(mount, /** @type {any} */ (send));
-    await view.load('UI-20');
-
-    // Find the remove button next to link #5
-    const btns = mount.querySelectorAll('button');
-    const rm = Array.from(btns).find((b) =>
-      b.getAttribute('aria-label')?.includes('#5')
-    );
-    expect(rm).toBeTruthy();
-    rm?.dispatchEvent(new window.Event('click'));
-
-    await Promise.resolve();
-    const calls = send.mock.calls.map((c) => c[0]);
-    expect(calls.includes('dep-remove')).toBe(true);
-  });
-
-  test('prevents duplicate link add', async () => {
-    const mount = setupDom();
-    const send = vi.fn().mockResolvedValueOnce({
-      id: 'UI-30',
-      dependencies: [{ id: 'UI-9' }],
-      dependents: []
-    });
-    const view = createDetailView(mount, /** @type {any} */ (send));
-    await view.load('UI-30');
-
-    const input = mount.querySelector('[data-testid="add-dependency"]');
-    const el = /** @type {HTMLInputElement} */ (/** @type {any} */ (input));
-    el.value = 'UI-9';
-    const addBtn = el.nextElementSibling;
-    addBtn?.dispatchEvent(new window.Event('click'));
-
-    await Promise.resolve();
-    // send should not be called with dep-add
-    const calls = send.mock.calls.map((c) => c[0]);
-    expect(calls.includes('dep-add')).toBe(false);
-  });
-});

package/app/views/detail.edits.test.js

@@ -1,146 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createDetailView } from './detail.js';
-
-/** @type {(impl: (type: string, payload?: unknown) => Promise<any>) => (type: string, payload?: unknown) => Promise<any>} */
-const mockSend = (impl) => vi.fn(impl);
-
-describe('views/detail edits', () => {
-  test('updates status via dropdown and disables while pending', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const initial = {
-      id: 'UI-7',
-      title: 'T',
-      description: 'D',
-      status: 'open',
-      priority: 2
-    };
-    const updated = { ...initial, status: 'in_progress' };
-
-    const send = mockSend(async (type, payload) => {
-      if (type === 'show-issue') {
-        return initial;
-      }
-      if (type === 'update-status') {
-        expect(payload).toEqual({ id: 'UI-7', status: 'in_progress' });
-        // simulate server reconcile payload
-        return updated;
-      }
-      throw new Error('Unexpected');
-    });
-
-    const view = createDetailView(mount, send);
-    await view.load('UI-7');
-
-    const select = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select')
-    );
-    expect(select.value).toBe('open');
-
-    // Trigger change
-    select.value = 'in_progress';
-    const beforeDisabled = select.disabled;
-    select.dispatchEvent(new Event('change'));
-    // After dispatch, the component sets disabled & will re-render upon reply
-    expect(beforeDisabled || select.disabled).toBe(true);
-
-    // After async flow, DOM should reflect updated status
-    await Promise.resolve(); // allow microtasks
-    const select2 = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select')
-    );
-    expect(select2.value).toBe('in_progress');
-  });
-
-  test('saves title and re-renders from reply', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-    const initial = {
-      id: 'UI-8',
-      title: 'Old',
-      description: '',
-      status: 'open',
-      priority: 1
-    };
-    const send = mockSend(async (type, payload) => {
-      if (type === 'show-issue') {
-        return initial;
-      }
-      if (type === 'edit-text') {
-        const next = { ...initial, title: /** @type {any} */ (payload).value };
-        return next;
-      }
-      throw new Error('Unexpected');
-    });
-    const view = createDetailView(mount, send);
-    await view.load('UI-8');
-    // Enter edit mode by clicking the span
-    const titleSpan = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('h2 .editable')
-    );
-    titleSpan.click();
-    const titleInput = /** @type {HTMLInputElement} */ (
-      mount.querySelector('h2 input')
-    );
-    const titleSave = /** @type {HTMLButtonElement} */ (
-      mount.querySelector('h2 button')
-    );
-    titleInput.value = 'New Title';
-    titleSave.click();
-    await Promise.resolve();
-    // After save, returns to read mode with updated text
-    const titleSpan2 = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('h2 .editable')
-    );
-    expect(titleSpan2.textContent).toBe('New Title');
-  });
-
-  test('shows toast on description save error and re-enables', async () => {
-    vi.useFakeTimers();
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-    const initial = {
-      id: 'UI-9',
-      title: 'T',
-      description: 'D',
-      status: 'open',
-      priority: 2
-    };
-    const send = mockSend(async (type) => {
-      if (type === 'show-issue') {
-        return initial;
-      }
-      if (type === 'edit-text') {
-        throw new Error('boom');
-      }
-      throw new Error('Unexpected');
-    });
-    const view = createDetailView(mount, send);
-    await view.load('UI-9');
-    // Enter edit mode
-    const md = /** @type {HTMLDivElement} */ (mount.querySelector('.md'));
-    md.click();
-    const ta = /** @type {HTMLTextAreaElement} */ (
-      mount.querySelector('textarea')
-    );
-    const btn = /** @type {HTMLButtonElement} */ (
-      mount.querySelector('.editable-actions button')
-    );
-    ta.value = 'New D';
-    btn.click();
-    await Promise.resolve();
-    // Toast appears
-    const toast = /** @type {HTMLElement} */ (mount.querySelector('.toast'));
-    expect(toast).not.toBeNull();
-    expect((toast.textContent || '').toLowerCase()).toContain(
-      'failed to save description'
-    );
-    // Auto-dismiss after a while
-    await vi.advanceTimersByTimeAsync(3000);
-    vi.useRealTimers();
-  });
-});

package/app/views/detail.labels.test.js

@@ -1,73 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createDetailView } from './detail.js';
-
-function mountDiv() {
-  const div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
-describe('detail view labels', () => {
-  test('shows labels and allows add/remove', async () => {
-    const mount = mountDiv();
-    let current = {
-      id: 'UI-5',
-      title: 'With labels',
-      status: 'open',
-      priority: 2,
-      labels: ['frontend']
-    };
-    const sendFn = vi.fn(async (type, payload) => {
-      if (type === 'show-issue') {
-        return current;
-      }
-      if (type === 'label-add') {
-        current = { ...current, labels: [...current.labels, payload.label] };
-        return current;
-      }
-      if (type === 'label-remove') {
-        current = {
-          ...current,
-          labels: current.labels.filter((l) => l !== payload.label)
-        };
-        return current;
-      }
-      return current;
-    });
-
-    const view = createDetailView(mount, sendFn);
-    await view.load('UI-5');
-
-    // Initial chip present
-    expect(mount.querySelectorAll('.prop.labels .badge').length).toBe(1);
-
-    // Add a label via input + Enter
-    const input = /** @type {HTMLInputElement} */ (
-      mount.querySelector('.prop.labels input')
-    );
-    input.value = 'backend';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    input.dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
-    );
-    await Promise.resolve();
-
-    expect(sendFn).toHaveBeenCalledWith('label-add', {
-      id: 'UI-5',
-      label: 'backend'
-    });
-    expect(mount.querySelectorAll('.prop.labels .badge').length).toBe(2);
-
-    // Remove the first label by clicking the × button
-    const removeBtn = /** @type {HTMLButtonElement} */ (
-      mount.querySelector('.prop.labels .badge button')
-    );
-    removeBtn.click();
-    await Promise.resolve();
-    expect(sendFn).toHaveBeenCalledWith('label-remove', {
-      id: 'UI-5',
-      label: 'frontend'
-    });
-    expect(mount.querySelectorAll('.prop.labels .badge').length).toBe(1);
-  });
-});

package/app/views/detail.priority.test.js

@@ -1,86 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createDetailView } from './detail.js';
-
-/** @type {(impl: (type: string, payload?: unknown) => Promise<any>) => (type: string, payload?: unknown) => Promise<any>} */
-const mockSend = (impl) => vi.fn(impl);
-
-describe('views/detail priority edit', () => {
-  test('updates priority via dropdown and re-renders from reply', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const initial = {
-      id: 'UI-70',
-      title: 'P',
-      description: '',
-      status: 'open',
-      priority: 2
-    };
-    const send = mockSend(async (type, payload) => {
-      if (type === 'show-issue') {
-        return initial;
-      }
-      if (type === 'update-priority') {
-        expect(payload).toEqual({ id: 'UI-70', priority: 4 });
-        return { ...initial, priority: 4 };
-      }
-      throw new Error('Unexpected');
-    });
-
-    const view = createDetailView(mount, send);
-    await view.load('UI-70');
-
-    const selects = mount.querySelectorAll('select.badge--priority');
-    expect(selects.length).toBe(1);
-    const prio = /** @type {HTMLSelectElement} */ (selects[0]);
-    expect(prio.value).toBe('2');
-
-    prio.value = '4';
-    prio.dispatchEvent(new Event('change'));
-
-    await Promise.resolve();
-
-    const prio2 = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select.badge--priority')
-    );
-    expect(prio2.value).toBe('4');
-  });
-
-  test('shows toast on error and restores previous value', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const initial = { id: 'UI-71', title: 'Q', status: 'open', priority: 1 };
-    const send = mockSend(async (type) => {
-      if (type === 'show-issue') {
-        return initial;
-      }
-      if (type === 'update-priority') {
-        throw new Error('oops');
-      }
-      throw new Error('Unexpected');
-    });
-
-    const view = createDetailView(mount, send);
-    await view.load('UI-71');
-    const prio = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select.badge--priority')
-    );
-    expect(prio.value).toBe('1');
-
-    prio.value = '3';
-    prio.dispatchEvent(new Event('change'));
-
-    await Promise.resolve();
-
-    const toast = mount.querySelector('.toast');
-    expect(toast).toBeTruthy();
-    // Should restore previous value
-    const prio2 = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select.badge--priority')
-    );
-    expect(prio2.value).toBe('1');
-  });
-});