@polderlabs/bizar 5.1.0 → 5.3.0

package/bizar-dash/tests/a11y/components.test.tsx

@@ -0,0 +1,149 @@
+// tests/a11y/components.test.tsx — WCAG 2.2 AA accessibility for interactive components.
+//
+// Tests Toggle role/switch behavior, PluginCard button accessible names,
+// PluginPermissions container label, and semantic structure.
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Toggle } from '../../src/web/components/Toggle';
+import { PluginCard } from '../../src/web/components/PluginCard';
+import { PluginPermissions } from '../../src/web/components/PluginPermissions';
+import { ScheduleTemplateCard } from '../../src/web/components/ScheduleTemplateCard';
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+/** Assert every button in the container has an accessible name. */
+function expectAllButtonsAccessible(container: HTMLElement) {
+  const buttons = container.querySelectorAll('button');
+  const offenders: string[] = [];
+  buttons.forEach((el) => {
+    const ariaLabel = el.getAttribute('aria-label');
+    const labelledBy = el.getAttribute('aria-labelledby');
+    const text = (el.textContent || '').trim();
+    const title = el.getAttribute('title');
+    if (!ariaLabel && !labelledBy && !text && !title) {
+      offenders.push(`<button> has no accessible name`);
+    }
+  });
+  expect(offenders, offenders.join('\n')).toEqual([]);
+}
+
+// ─── Toggle ────────────────────────────────────────────────────────────────
+
+describe('Toggle — WCAG 4.4.2: role=switch + aria-checked', () => {
+  it('has role="switch" on the input element', () => {
+    render(<Toggle checked={false} onChange={() => {}} />);
+    const input = document.querySelector('input[type="checkbox"]');
+    expect(input).toHaveAttribute('role', 'switch');
+  });
+
+  it('has aria-checked matching the checked prop', () => {
+    const { rerender } = render(<Toggle checked={true} onChange={() => {}} />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true');
+    rerender(<Toggle checked={false} onChange={() => {}} />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('has a visible focus indicator via :focus-visible', () => {
+    const { container } = render(<Toggle checked={false} onChange={() => {}} />);
+    const input = container.querySelector('input');
+    expect(input).toBeInTheDocument();
+  });
+});
+
+// ─── PluginCard ─────────────────────────────────────────────────────────────
+
+const FAKE_PLUGIN = {
+  id: 'test-plugin',
+  name: 'Test Plugin',
+  version: '1.0.0',
+  description: 'A test plugin',
+  permissions: ['net', 'fs'],
+  enabled: true,
+  invocations: 0,
+  lastInvokedAt: null,
+};
+
+describe('PluginCard — WCAG 2.1.1: all buttons have accessible names', () => {
+  it('the toggle has an accessible name via aria-label', () => {
+    render(
+      <PluginCard
+        plugin={FAKE_PLUGIN}
+        onToggle={() => {}}
+        onUninstall={() => {}}
+        onConfigure={() => {}}
+      />,
+    );
+    const toggle = screen.getByRole('switch');
+    expect(toggle).toHaveAttribute('aria-label', 'Toggle Test Plugin enabled');
+  });
+
+  it('the Configure button has an aria-label', () => {
+    render(
+      <PluginCard
+        plugin={FAKE_PLUGIN}
+        onToggle={() => {}}
+        onUninstall={() => {}}
+        onConfigure={() => {}}
+      />,
+    );
+    const configureBtn = screen.getByRole('button', { name: /configure test plugin/i });
+    expect(configureBtn).toBeInTheDocument();
+  });
+
+  it('the Uninstall button has an aria-label', () => {
+    render(
+      <PluginCard
+        plugin={FAKE_PLUGIN}
+        onToggle={() => {}}
+        onUninstall={() => {}}
+        onConfigure={() => {}}
+      />,
+    );
+    const uninstallBtn = screen.getByRole('button', { name: /uninstall test plugin/i });
+    expect(uninstallBtn).toBeInTheDocument();
+  });
+
+  it('all buttons inside the card have accessible names', () => {
+    const { container } = render(
+      <PluginCard
+        plugin={FAKE_PLUGIN}
+        onToggle={() => {}}
+        onUninstall={() => {}}
+        onConfigure={() => {}}
+      />,
+    );
+    expectAllButtonsAccessible(container);
+  });
+});
+
+// ─── PluginPermissions ──────────────────────────────────────────────────────
+
+describe('PluginPermissions — WCAG 1.3.1: container has aria-label', () => {
+  it('the permissions container has aria-label="Required permissions"', () => {
+    render(<PluginPermissions permissions={['net', 'fs']} />);
+    const container = document.querySelector('.plugin-permissions');
+    expect(container).toHaveAttribute('aria-label', 'Required permissions');
+  });
+});
+
+// ─── ScheduleTemplateCard ────────────────────────────────────────────────────
+
+describe('ScheduleTemplateCard — WCAG 2.1.1: button has accessible name', () => {
+  it('the Use this template button has an aria-label', () => {
+    render(
+      <ScheduleTemplateCard
+        template={{
+          id: 't1',
+          name: 'Weekly Review',
+          description: 'Run weekly review',
+          type: 'cron',
+          action: { type: 'agent', target: 'weekly-reviewer' },
+        }}
+        onUse={() => {}}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: /use template: weekly review/i });
+    expect(btn).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/a11y/forms.test.tsx

@@ -0,0 +1,191 @@
+// tests/a11y/forms.test.tsx — WCAG 2.1.1 / 3.3.1 form accessibility for Doctor and Schedules.
+//
+// Tests that all form inputs have accessible names (label, aria-label,
+// or aria-labelledby), and that form errors and live regions are announced.
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Doctor } from '../../src/web/views/Doctor';
+import { Schedules } from '../../src/web/views/Schedules';
+import { ToastProvider } from '../../src/web/components/Toast';
+import { ModalProvider } from '../../src/web/components/Modal';
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+/** Assert every input/select/textarea in the container has an accessible name. */
+function expectAllInputsAccessible(container: HTMLElement) {
+  const inputs = container.querySelectorAll('input, select, textarea');
+  const offenders: string[] = [];
+  inputs.forEach((el) => {
+    if ((el as HTMLInputElement).type === 'hidden') return;
+    const accessibleName =
+      el.getAttribute('aria-label') ||
+      el.getAttribute('aria-labelledby') ||
+      el.getAttribute('placeholder') ||
+      el.getAttribute('title');
+    let labelledByLabel = false;
+    if (el.id) {
+      labelledByLabel = !!container.querySelector(`label[for="${el.id}"]`);
+    }
+    if (!accessibleName && !labelledByLabel) {
+      offenders.push(
+        `<${el.tagName.toLowerCase()}${el.id ? ` id="${el.id}"` : ''}${el.getAttribute('type') ? ` type="${el.getAttribute('type')}"` : ''}> has no accessible name`,
+      );
+    }
+  });
+  expect(offenders, offenders.join('\n')).toEqual([]);
+}
+
+/** Assert every button in the container has an accessible name. */
+function expectAllButtonsAccessible(container: HTMLElement) {
+  const buttons = container.querySelectorAll('button');
+  const offenders: string[] = [];
+  buttons.forEach((el) => {
+    const ariaLabel = el.getAttribute('aria-label');
+    const labelledBy = el.getAttribute('aria-labelledby');
+    const text = (el.textContent || '').trim();
+    const title = el.getAttribute('title');
+    if (!ariaLabel && !labelledBy && !text && !title) {
+      offenders.push(`<button> has no accessible name`);
+    }
+  });
+  expect(offenders, offenders.join('\n')).toEqual([]);
+}
+
+function renderWithProviders(ui: React.ReactNode) {
+  return render(
+    <ToastProvider>
+      <ModalProvider>{ui}</ModalProvider>
+    </ToastProvider>,
+  );
+}
+
+// ─── Doctor ─────────────────────────────────────────────────────────────────
+
+const FAKE_SNAPSHOT = {
+  bizarreVersion: '99.0.0',
+  platform: 'linux',
+  arch: 'x64',
+  uptime: 3600,
+  tasks: 0,
+  schedules: 0,
+  mods: 0,
+  providers: 0,
+  mcps: 0,
+  agents: 0,
+  projects: 0,
+  workspaces: 0,
+  voiceNotes: 0,
+  evalRuns: 0,
+  backups: 0,
+  activeProject: null,
+};
+
+const FAKE_SETTINGS = {};
+
+describe('Doctor — WCAG 3.3.1: form inputs have accessible names + aria-live', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    // Mock the API to avoid real network calls
+    vi.spyOn(require('../../src/web/lib/api'), 'api').mockImplementation(() => ({
+      get: vi.fn().mockResolvedValue({
+        health: { status: 'ok', issues: [] },
+        checks: { system: [], services: [], config: [], counts: [] },
+        bizarreVersion: '99.0.0',
+        platform: 'linux',
+        arch: 'x64',
+        uptime: 3600,
+        counts: {},
+        recentErrors: [],
+      }),
+      post: vi.fn().mockResolvedValue({ name: 'test', message: 'ok' }),
+    }));
+  });
+
+  it('the "Run Health Check Now" button has aria-label="Refresh diagnostics"', async () => {
+    renderWithProviders(
+      <Doctor
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="doctor"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: /refresh diagnostics/i });
+    expect(btn).toBeInTheDocument();
+  });
+
+  it('the auto-refresh toggle button has an accessible name', async () => {
+    renderWithProviders(
+      <Doctor
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="doctor"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    // The button shows "Pause auto-refresh" or "Resume auto-refresh"
+    const btn = screen.getByRole('button', { name: /(pause|resume) auto-refresh/i });
+    expect(btn).toBeInTheDocument();
+  });
+
+  it('header meta region has aria-live="polite"', async () => {
+    renderWithProviders(
+      <Doctor
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="doctor"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const liveRegion = document.querySelector('[aria-live="polite"]');
+    expect(liveRegion).toBeInTheDocument();
+  });
+});
+
+// ─── Schedules ───────────────────────────────────────────────────────────────
+
+describe('Schedules — WCAG 3.3.1: all form inputs have accessible names', () => {
+  it('the Refresh button has aria-label="Refresh schedules"', () => {
+    renderWithProviders(
+      <Schedules
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="schedules"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: /refresh schedules/i });
+    expect(btn).toBeInTheDocument();
+  });
+
+  it('all visible inputs in the Schedules view have accessible names', () => {
+    const { container } = renderWithProviders(
+      <Schedules
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="schedules"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    expectAllInputsAccessible(container);
+  });
+
+  it('all visible buttons in the Schedules view have accessible names', () => {
+    const { container } = renderWithProviders(
+      <Schedules
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="schedules"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    expectAllButtonsAccessible(container);
+  });
+});

package/bizar-dash/tests/a11y/navigation.test.tsx

@@ -0,0 +1,112 @@
+// tests/a11y/navigation.test.tsx — WCAG 2.1.1 / 2.4.1 navigation accessibility.
+//
+// Tests that sidebar, tabs, and the Memory source rail all meet
+// keyboard navigation, role, and aria attributes requirements.
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Memory } from '../../src/web/views/Memory';
+import { Plugins } from '../../src/web/views/Plugins';
+import { ToastProvider } from '../../src/web/components/Toast';
+import { ModalProvider } from '../../src/web/components/Modal';
+
+function renderWithProviders(ui: React.ReactNode) {
+  return render(
+    <ToastProvider>
+      <ModalProvider>{ui}</ModalProvider>
+    </ToastProvider>,
+  );
+}
+
+// ─── Memory tab ──────────────────────────────────────────────────────────────
+
+describe('Memory — WCAG 2.4.1: nav has aria-label, tabs have role=tab + aria-selected', () => {
+  it('source rail has aria-label="Memory sources"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const nav = document.querySelector('[aria-label="Memory sources"]');
+    expect(nav).toBeInTheDocument();
+  });
+
+  it('each source button has role="tab"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs.length).toBeGreaterThan(0);
+  });
+
+  it('active tab has aria-selected="true"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const activeTab = screen.getByRole('tab', { selected: true });
+    expect(activeTab).toBeInTheDocument();
+  });
+
+  it('inactive tabs have aria-selected="false"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const tabs = screen.getAllByRole('tab');
+    const unselected = tabs.filter((t) => !t.getAttribute('aria-selected') || t.getAttribute('aria-selected') === 'false');
+    expect(unselected.length).toBeGreaterThan(0);
+  });
+
+  it('refresh button has aria-label="Refresh memory"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: /refresh memory/i });
+    expect(btn).toBeInTheDocument();
+  });
+});
+
+// ─── Plugins ─────────────────────────────────────────────────────────────────
+
+describe('Plugins — WCAG 2.1.1: filter input has accessible name', () => {
+  it('the filter input has aria-label="Filter plugins"', () => {
+    renderWithProviders(
+      <Plugins
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="plugins"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const input = document.querySelector('input[type="search"]');
+    expect(input).toHaveAttribute('aria-label', 'Filter plugins');
+  });
+});

package/bizar-dash/tests/cli-tailscale.test.mjs

@@ -0,0 +1,113 @@
+/**
+ * bizar-dash/tests/cli-tailscale.test.mjs
+ *
+ * v5.2 — CLI Tailscale integration tests.
+ *
+ * Tests the tailscale CLI command module (cli/commands/tailscale.mjs).
+ * Verifies module structure and run() doesn't throw for help/invalid subcommands.
+ * Full integration testing requires a real or mocked tailscale binary.
+ */
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const CLI_COMMANDS = resolve(__dirname, '..', '..', 'cli', 'commands');
+
+// ── Tests ───────────────────────────────────────────────────────────────────
+
+describe('cli/commands/tailscale.mjs exports', () => {
+  test('exports run() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.run, 'function');
+  });
+
+  test('exports ensureTailscaleAuth() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.ensureTailscaleAuth, 'function');
+  });
+
+  test('exports setupTailscaleServe() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.setupTailscaleServe, 'function');
+  });
+
+  test('exports unsetupTailscaleServe() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.unsetupTailscaleServe, 'function');
+  });
+
+  test('exports getServeUrl() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.getServeUrl, 'function');
+  });
+
+  test('exports showTailscaleStatus() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.showTailscaleStatus, 'function');
+  });
+
+  test('exports showTailscaleHelp() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.showTailscaleHelp, 'function');
+  });
+
+  test('exports isTailscaleInstalled() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.isTailscaleInstalled, 'function');
+  });
+});
+
+describe('run() — CLI subcommand dispatcher', () => {
+  test('run() with no args does not throw (prints help)', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    // Should not throw - it will print help and return
+    await mod.run('tailscale', [], false);
+  });
+
+  test('run() with --help flag does not throw', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    await mod.run('tailscale', ['--help'], false);
+  });
+
+  test('run() with "help" subcommand does not throw', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    await mod.run('tailscale', ['help'], false);
+  });
+
+  test('run() with unknown subcommand does not throw (prints error + help)', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    // Should not throw - it will print an error and help
+    await mod.run('tailscale', ['unknown-subcommand'], false);
+  });
+});
+
+describe('showTailscaleHelp()', () => {
+  test('prints help text including env var documentation', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    let stdout = '';
+    const orig = process.stdout.write.bind(process.stdout);
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    process.stdout.write = (s) => { stdout += String(s); return true; };
+    try {
+      mod.showTailscaleHelp();
+      assert.ok(stdout.includes('bizar tailscale'));
+      assert.ok(stdout.includes('TAILSCALE_AUTHKEY'));
+      assert.ok(stdout.includes('bizar tailscale status'));
+      assert.ok(stdout.includes('bizar tailscale serve'));
+      assert.ok(stdout.includes('bizar tailscale unserve'));
+    } finally {
+      process.stdout.write = orig;
+    }
+  });
+});
+
+describe('getServeUrl()', () => {
+  test('returns null when serve config does not exist', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    const url = mod.getServeUrl();
+    // Returns null when no config file exists (test environment)
+    assert.equal(url, null);
+  });
+});