beads-ui 0.1.0 → 0.1.2

package/app/views/list.test.js

@@ -1,479 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { createListView } from './list.js';
-
-/** @type {(expected: any[]) => (type: string, payload?: unknown) => Promise<any[]>} */
-const stubSend = (expected) => async (type) => {
-  if (type !== 'list-issues') {
-    throw new Error('Unexpected type');
-  }
-  return expected;
-};
-
-describe('views/list', () => {
-  test('renders issues in table and navigates on row click', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-    const issues = [
-      {
-        id: 'UI-1',
-        title: 'One',
-        status: 'open',
-        priority: 1,
-        issue_type: 'task'
-      },
-      {
-        id: 'UI-2',
-        title: 'Two',
-        status: 'closed',
-        priority: 2,
-        issue_type: 'bug'
-      }
-    ];
-    const view = createListView(mount, stubSend(issues), (hash) => {
-      window.location.hash = hash;
-    });
-    await view.load();
-    const rows = mount.querySelectorAll('tr.issue-row');
-    expect(rows.length).toBe(2);
-
-    // badge present
-    const badges = mount.querySelectorAll('.type-badge');
-    expect(badges.length).toBeGreaterThanOrEqual(2);
-
-    const first = /** @type {HTMLElement} */ (rows[0]);
-    first.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    expect(window.location.hash).toBe('#/issue/UI-1');
-  });
-
-  test('filters by status and search', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-    const issues = [
-      { id: 'UI-1', title: 'Alpha', status: 'open', priority: 1 },
-      { id: 'UI-2', title: 'Beta', status: 'in_progress', priority: 2 },
-      { id: 'UI-3', title: 'Gamma', status: 'closed', priority: 3 }
-    ];
-    const view = createListView(mount, stubSend(issues));
-    await view.load();
-    const select = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select')
-    );
-    const input = /** @type {HTMLInputElement} */ (
-      mount.querySelector('input[type="search"]')
-    );
-
-    // Filter by status
-    select.value = 'open';
-    select.dispatchEvent(new Event('change'));
-    await Promise.resolve();
-    expect(mount.querySelectorAll('tr.issue-row').length).toBe(1);
-
-    // Search filters further
-    select.value = 'all';
-    select.dispatchEvent(new Event('change'));
-    input.value = 'ga';
-    input.dispatchEvent(new Event('input'));
-    const visible = Array.from(mount.querySelectorAll('tr.issue-row')).map(
-      (el) => ({
-        id: el.getAttribute('data-issue-id') || '',
-        text: el.textContent || ''
-      })
-    );
-    expect(visible.length).toBe(1);
-    expect(visible[0].id).toBe('UI-3');
-    expect(visible[0].text.toLowerCase()).toContain('gamma');
-  });
-
-  test('filters by issue type and combines with search', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-    const issues = [
-      {
-        id: 'UI-1',
-        title: 'Alpha',
-        status: 'open',
-        priority: 1,
-        issue_type: 'bug'
-      },
-      {
-        id: 'UI-2',
-        title: 'Beta',
-        status: 'open',
-        priority: 2,
-        issue_type: 'feature'
-      },
-      {
-        id: 'UI-3',
-        title: 'Gamma',
-        status: 'open',
-        priority: 3,
-        issue_type: 'bug'
-      },
-      {
-        id: 'UI-4',
-        title: 'Delta',
-        status: 'open',
-        priority: 2,
-        issue_type: 'task'
-      }
-    ];
-    const view = createListView(mount, stubSend(issues));
-    await view.load();
-
-    // Initially shows all
-    expect(mount.querySelectorAll('tr.issue-row').length).toBe(4);
-
-    const typeSelect = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select[aria-label="Filter by type"]')
-    );
-    // Select bug
-    typeSelect.value = 'bug';
-    typeSelect.dispatchEvent(new Event('change'));
-    await Promise.resolve();
-    const bug_only = Array.from(mount.querySelectorAll('tr.issue-row')).map(
-      (el) => el.getAttribute('data-issue-id') || ''
-    );
-    expect(bug_only).toEqual(['UI-1', 'UI-3']);
-
-    // Switch to feature
-    typeSelect.value = 'feature';
-    typeSelect.dispatchEvent(new Event('change'));
-    await Promise.resolve();
-    const feature_only = Array.from(mount.querySelectorAll('tr.issue-row')).map(
-      (el) => el.getAttribute('data-issue-id') || ''
-    );
-    expect(feature_only).toEqual(['UI-2']);
-
-    // Combine with search while bug selected
-    typeSelect.value = 'bug';
-    typeSelect.dispatchEvent(new Event('change'));
-    const input = /** @type {HTMLInputElement} */ (
-      mount.querySelector('input[type="search"]')
-    );
-    input.value = 'ga';
-    input.dispatchEvent(new Event('input'));
-    await Promise.resolve();
-    const filtered = Array.from(mount.querySelectorAll('tr.issue-row')).map(
-      (el) => el.getAttribute('data-issue-id') || ''
-    );
-    expect(filtered).toEqual(['UI-3']);
-  });
-
-  test('applies type filters after Ready reload', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const allIssues = [
-      {
-        id: 'UI-1',
-        title: 'One',
-        status: 'open',
-        priority: 1,
-        issue_type: 'task'
-      },
-      {
-        id: 'UI-2',
-        title: 'Two',
-        status: 'open',
-        priority: 2,
-        issue_type: 'feature'
-      },
-      {
-        id: 'UI-3',
-        title: 'Three',
-        status: 'open',
-        priority: 2,
-        issue_type: 'bug'
-      }
-    ];
-    const readyIssues = [
-      {
-        id: 'UI-2',
-        title: 'Two',
-        status: 'open',
-        priority: 2,
-        issue_type: 'feature'
-      },
-      {
-        id: 'UI-3',
-        title: 'Three',
-        status: 'open',
-        priority: 2,
-        issue_type: 'bug'
-      }
-    ];
-
-    /** @type {{ calls: any[] }} */
-    const spy = { calls: [] };
-    /** @type {(type: string, payload?: unknown) => Promise<any[]>} */
-    const send = async (type, payload) => {
-      spy.calls.push({ type, payload });
-      const p = /** @type {any} */ (payload);
-      if (p && p.filters && p.filters.ready === true) {
-        return readyIssues;
-      }
-      return allIssues;
-    };
-
-    const view = createListView(mount, send);
-    await view.load();
-    const statusSelect = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select')
-    );
-    statusSelect.value = 'ready';
-    statusSelect.dispatchEvent(new Event('change'));
-    await Promise.resolve();
-
-    // Apply type filter (feature)
-    const typeSelect = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select[aria-label="Filter by type"]')
-    );
-    typeSelect.value = 'feature';
-    typeSelect.dispatchEvent(new Event('change'));
-    await Promise.resolve();
-
-    const rows = Array.from(mount.querySelectorAll('tr.issue-row')).map(
-      (el) => el.getAttribute('data-issue-id') || ''
-    );
-    expect(rows).toEqual(['UI-2']);
-
-    // Ensure ready call happened
-    const has_ready = spy.calls.some(
-      (c) =>
-        c.type === 'list-issues' &&
-        c.payload &&
-        c.payload.filters &&
-        c.payload.filters.ready === true
-    );
-    expect(has_ready).toBe(true);
-  });
-
-  test('initializes type filter from store and reflects in controls', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const issues = [
-      {
-        id: 'UI-1',
-        title: 'Alpha',
-        status: 'open',
-        priority: 1,
-        issue_type: 'bug'
-      },
-      {
-        id: 'UI-2',
-        title: 'Beta',
-        status: 'open',
-        priority: 2,
-        issue_type: 'feature'
-      },
-      {
-        id: 'UI-3',
-        title: 'Gamma closed',
-        status: 'closed',
-        priority: 3,
-        issue_type: 'bug'
-      }
-    ];
-
-    /** @type {{ state: any, subs: ((s:any)=>void)[], getState: () => any, setState: (patch:any)=>void, subscribe: (fn:(s:any)=>void)=>()=>void }} */
-    const store = {
-      state: {
-        selected_id: null,
-        filters: { status: 'all', search: '', type: 'bug' }
-      },
-      subs: [],
-      getState() {
-        return this.state;
-      },
-      setState(patch) {
-        this.state = {
-          ...this.state,
-          ...(patch || {}),
-          filters: { ...this.state.filters, ...(patch.filters || {}) }
-        };
-        for (const fn of this.subs) {
-          fn(this.state);
-        }
-      },
-      subscribe(fn) {
-        this.subs.push(fn);
-        return () => {
-          this.subs = this.subs.filter((f) => f !== fn);
-        };
-      }
-    };
-
-    const view = createListView(mount, stubSend(issues), undefined, store);
-    await view.load();
-
-    // Only bug issues visible
-    const rows = Array.from(mount.querySelectorAll('tr.issue-row')).map(
-      (el) => el.getAttribute('data-issue-id') || ''
-    );
-    expect(rows).toEqual(['UI-1', 'UI-3']);
-
-    const typeSelect = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select[aria-label="Filter by type"]')
-    );
-    expect(typeSelect.value).toBe('bug');
-  });
-
-  test('ready filter via select triggers backend reload', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const allIssues = [
-      { id: 'UI-1', title: 'One', status: 'open', priority: 1 },
-      { id: 'UI-2', title: 'Two', status: 'open', priority: 2 }
-    ];
-    const readyIssues = [
-      { id: 'UI-2', title: 'Two', status: 'open', priority: 2 }
-    ];
-
-    /** @type {{ calls: any[] }} */
-    const spy = { calls: [] };
-    /** @type {(type: string, payload?: unknown) => Promise<any[]>} */
-    const send = async (type, payload) => {
-      spy.calls.push({ type, payload });
-      const p = /** @type {any} */ (payload);
-      if (p && p.filters && p.filters.ready === true) {
-        return readyIssues;
-      }
-      return allIssues;
-    };
-
-    const view = createListView(mount, send);
-    await view.load();
-    expect(mount.querySelectorAll('tr.issue-row').length).toBe(2);
-
-    const select = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select')
-    );
-    select.value = 'ready';
-    select.dispatchEvent(new Event('change'));
-    // Await a microtask to allow load to complete in jsdom
-    await Promise.resolve();
-
-    // A call should include filters.ready = true
-    const has_ready = spy.calls.some(
-      (c) =>
-        c.type === 'list-issues' &&
-        c.payload &&
-        c.payload.filters &&
-        c.payload.filters.ready === true
-    );
-    expect(has_ready).toBe(true);
-    expect(mount.querySelectorAll('tr.issue-row').length).toBe(1);
-  });
-
-  test('switching ready → all reloads full list', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const allIssues = [
-      { id: 'UI-1', title: 'One', status: 'open', priority: 1 },
-      { id: 'UI-2', title: 'Two', status: 'closed', priority: 2 }
-    ];
-    const readyIssues = [
-      { id: 'UI-2', title: 'Two', status: 'closed', priority: 2 }
-    ];
-
-    /** @type {{ calls: any[] }} */
-    const spy = { calls: [] };
-    /** @type {(type: string, payload?: unknown) => Promise<any[]>} */
-    const send = async (type, payload) => {
-      spy.calls.push({ type, payload });
-      const p = /** @type {any} */ (payload);
-      if (p && p.filters && p.filters.ready === true) {
-        return readyIssues;
-      }
-      return allIssues;
-    };
-
-    const view = createListView(mount, send);
-    await view.load();
-    expect(mount.querySelectorAll('tr.issue-row').length).toBe(2);
-
-    const select = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select')
-    );
-
-    // Switch to ready (backend should return the smaller set)
-    select.value = 'ready';
-    select.dispatchEvent(new Event('change'));
-    await Promise.resolve();
-    expect(mount.querySelectorAll('tr.issue-row').length).toBe(1);
-
-    // Switch back to all; view should reload full list from backend
-    select.value = 'all';
-    select.dispatchEvent(new Event('change'));
-    await Promise.resolve();
-    expect(mount.querySelectorAll('tr.issue-row').length).toBe(2);
-
-    // Verify that a request without ready=true was made after switching to all
-    const lastCall = spy.calls[spy.calls.length - 1];
-    expect(lastCall.type).toBe('list-issues');
-    const payload = /** @type {any} */ (lastCall.payload);
-    expect(payload && payload.filters && payload.filters.ready).not.toBe(true);
-  });
-
-  test('applies persisted filters from store on initial load', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const issues = [
-      { id: 'UI-1', title: 'Alpha', status: 'open', priority: 1 },
-      { id: 'UI-2', title: 'Gamma', status: 'open', priority: 2 },
-      { id: 'UI-3', title: 'Gamma closed', status: 'closed', priority: 3 }
-    ];
-
-    /** @type {{ state: any, subs: ((s:any)=>void)[], getState: () => any, setState: (patch:any)=>void, subscribe: (fn:(s:any)=>void)=>()=>void }} */
-    const store = {
-      state: { selected_id: null, filters: { status: 'open', search: 'ga' } },
-      subs: [],
-      getState() {
-        return this.state;
-      },
-      setState(patch) {
-        this.state = {
-          ...this.state,
-          ...(patch || {}),
-          filters: { ...this.state.filters, ...(patch.filters || {}) }
-        };
-        for (const fn of this.subs) {
-          fn(this.state);
-        }
-      },
-      subscribe(fn) {
-        this.subs.push(fn);
-        return () => {
-          this.subs = this.subs.filter((f) => f !== fn);
-        };
-      }
-    };
-
-    const view = createListView(mount, stubSend(issues), undefined, store);
-    await view.load();
-
-    // Expect only UI-2 ("Gamma" open) to be visible
-    const items = Array.from(mount.querySelectorAll('tr.issue-row')).map(
-      (el) => ({
-        id: el.getAttribute('data-issue-id') || '',
-        text: el.textContent || ''
-      })
-    );
-    expect(items.length).toBe(1);
-    expect(items[0].id).toBe('UI-2');
-
-    // Controls reflect persisted filters
-    const select = /** @type {HTMLSelectElement} */ (
-      mount.querySelector('select')
-    );
-    const input = /** @type {HTMLInputElement} */ (
-      mount.querySelector('input[type="search"]')
-    );
-    expect(select.value).toBe('open');
-    expect(input.value).toBe('ga');
-  });
-});

package/app/views/nav.test.js

@@ -1,43 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createTopNav } from './nav.js';
-
-function setup() {
-  document.body.innerHTML = '<div id="m"></div>';
-  const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
-  const store = {
-    state: { view: 'issues' },
-    getState() {
-      return this.state;
-    },
-    /** @param {any} v */
-    set(v) {
-      this.state = { ...this.state, ...v };
-    },
-    /** @param {(s: any) => void} fn */
-    subscribe(fn) {
-      // simplistic subscription for test
-      this._fn = fn;
-      return () => void 0;
-    },
-    _fn: /** @type {(s: any) => void} */ (() => {})
-  };
-  const router = { gotoView: vi.fn() };
-  return { mount, store, router };
-}
-
-describe('views/nav', () => {
-  test('renders and routes between tabs', async () => {
-    const { mount, store, router } = setup();
-    createTopNav(
-      mount,
-      /** @type {any} */ (store),
-      /** @type {any} */ (router)
-    );
-    const links = mount.querySelectorAll('a.tab');
-    expect(links.length).toBe(3);
-    links[1].dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    expect(router.gotoView).toHaveBeenCalledWith('epics');
-    links[2].dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    expect(router.gotoView).toHaveBeenCalledWith('board');
-  });
-});

package/app/ws.test.js

@@ -1,168 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createWsClient } from './ws.js';
-
-/**
- * @returns {any[]}
- */
-function setupFakeWebSocket() {
-  /** @type {any[]} */
-  const sockets = [];
-  class FakeWebSocket {
-    /** @param {string} url */
-    constructor(url) {
-      this.url = url;
-      this.readyState = 0; // CONNECTING
-      this.OPEN = 1;
-      this.CLOSING = 2;
-      this.CLOSED = 3;
-      /** @type {{ open: Array<(ev:any)=>void>, message: Array<(ev:any)=>void>, error: Array<(ev:any)=>void>, close: Array<(ev:any)=>void> }} */
-      this._listeners = { open: [], message: [], error: [], close: [] };
-      /** @type {string[]} */
-      this.sent = [];
-      sockets.push(this);
-    }
-    /**
-     * @param {'open'|'message'|'error'|'close'} type
-     * @param {(ev:any)=>void} fn
-     */
-    addEventListener(type, fn) {
-      this._listeners[type].push(fn);
-    }
-    /**
-     * @param {'open'|'message'|'error'|'close'} type
-     * @param {(ev:any)=>void} fn
-     */
-    removeEventListener(type, fn) {
-      const a = this._listeners[type];
-      const i = a.indexOf(fn);
-      if (i !== -1) {
-        a.splice(i, 1);
-      }
-    }
-    /**
-     * @param {'open'|'message'|'error'|'close'} type
-     * @param {any} ev
-     */
-    _dispatch(type, ev) {
-      for (const fn of this._listeners[type]) {
-        try {
-          fn(ev);
-        } catch {
-          // ignore
-        }
-      }
-    }
-    openNow() {
-      this.readyState = this.OPEN;
-      this._dispatch('open', {});
-    }
-    /** @param {string} data */
-    send(data) {
-      this.sent.push(String(data));
-    }
-    /** @param {any} obj */
-    emitMessage(obj) {
-      this._dispatch('message', { data: JSON.stringify(obj) });
-    }
-    close() {
-      this.readyState = this.CLOSED;
-      this._dispatch('close', {});
-    }
-  }
-  vi.stubGlobal('WebSocket', FakeWebSocket);
-  return sockets;
-}
-
-describe('app/ws client', () => {
-  test('correlates replies for concurrent sends', async () => {
-    const sockets = setupFakeWebSocket();
-    const client = createWsClient({
-      backoff: { initialMs: 5, maxMs: 5, jitterRatio: 0 }
-    });
-    // open connection
-    sockets[0].openNow();
-
-    const p1 = client.send('list-issues', { filters: {} });
-    const p2 = client.send('show-issue', { id: 'UI-1' });
-
-    // Parse the last two frames to extract ids
-    const frames = sockets[0].sent
-      .slice(-2)
-      .map((/** @type {string} */ s) => JSON.parse(s));
-    const id1 = frames[0].id;
-    const id2 = frames[1].id;
-
-    // Reply out of order
-    sockets[0].emitMessage({
-      id: id2,
-      ok: true,
-      type: 'show-issue',
-      payload: { id: 'UI-1' }
-    });
-    sockets[0].emitMessage({
-      id: id1,
-      ok: true,
-      type: 'list-issues',
-      payload: [{ id: 'UI-1' }]
-    });
-
-    await expect(p2).resolves.toEqual({ id: 'UI-1' });
-    await expect(p1).resolves.toEqual([{ id: 'UI-1' }]);
-  });
-
-  test('reconnects and resubscribes after close', async () => {
-    vi.useFakeTimers();
-    const sockets = setupFakeWebSocket();
-    const client = createWsClient({
-      backoff: { initialMs: 10, maxMs: 10, jitterRatio: 0 }
-    });
-
-    // First connection opens
-    sockets[0].openNow();
-    // subscribe-updates should be first frame
-    const firstFrame = JSON.parse(sockets[0].sent[0]);
-    expect(firstFrame.type).toBe('subscribe-updates');
-
-    // Close the socket to trigger reconnect
-    sockets[0].close();
-    // Advance timers for reconnect
-    await vi.advanceTimersByTimeAsync(10);
-
-    // Second socket should exist and open
-    expect(sockets.length).toBeGreaterThan(1);
-    sockets[1].openNow();
-    const sub = JSON.parse(sockets[1].sent[0]);
-    expect(sub.type).toBe('subscribe-updates');
-
-    vi.useRealTimers();
-    client.close();
-  });
-
-  test('dispatches server events and logs unknown types', async () => {
-    const sockets = setupFakeWebSocket();
-    const logger = { ...console, warn: vi.fn(), error: vi.fn() };
-    const client = createWsClient({ logger });
-    sockets[0].openNow();
-
-    /** @type {any[]} */
-    const events = [];
-    client.on('issues-changed', (p) => events.push(p));
-    sockets[0].emitMessage({
-      id: 'evt-1',
-      ok: true,
-      type: 'issues-changed',
-      payload: { ids: ['UI-1'] }
-    });
-    expect(events).toEqual([{ ids: ['UI-1'] }]);
-
-    // No handler registered for create-issue -> warn
-    sockets[0].emitMessage({
-      id: 'evt-2',
-      ok: true,
-      type: 'create-issue',
-      payload: {}
-    });
-    expect(logger.warn).toHaveBeenCalled();
-    client.close();
-  });
-});