@polderlabs/bizar 4.7.0 → 4.7.2

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

@@ -0,0 +1,206 @@
+// src/tests/a11y.test.tsx — WCAG 2.2 AA accessibility assertions for major views.
+//
+// This test file exercises the most critical accessibility patterns
+// added in v4.8 (form labels, skip-to-main, aria-live, focus-visible).
+// It uses Testing Library queries that mirror what assistive tech sees,
+// not implementation details, so the tests stay useful even as the
+// markup evolves.
+
+import { describe, it, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import { ModalProvider } from '../src/web/components/Modal';
+import { ToastProvider } from '../src/web/components/Toast';
+import { SearchModal } from '../src/web/components/SearchModal';
+import { Notifications } from '../src/web/components/Notifications';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────
+
+function renderWithProviders(ui: React.ReactNode) {
+  return render(
+    <ToastProvider>
+      <ModalProvider>{ui}</ModalProvider>
+    </ToastProvider>,
+  );
+}
+
+/**
+ * Walk the rendered tree and assert that every <input>, <select>, and
+ * <textarea> has an accessible name (label[for], aria-label,
+ * aria-labelledby, or wrapping <label>).
+ */
+function expectAllInputsAccessible(container: HTMLElement) {
+  const inputs = container.querySelectorAll('input, select, textarea');
+  const offenders: string[] = [];
+  inputs.forEach((el) => {
+    // Hidden file inputs and inputs explicitly disabled from the a11y tree
+    // (tabIndex=-1 + display:none, used for "click to trigger file picker"
+    // pattern) are still required to have an aria-label so screen-reader
+    // users can understand them — but we skip true hidden inputs.
+    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 (!labelledByLabel) {
+      // Walk up to find a wrapping <label>.
+      let p: HTMLElement | null = el.parentElement;
+      while (p) {
+        if (p.tagName.toLowerCase() === 'label') {
+          labelledByLabel = true;
+          break;
+        }
+        p = p.parentElement;
+      }
+    }
+    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([]);
+}
+
+/**
+ * Walk the rendered tree and assert every <button> has an accessible
+ * name (text content, aria-label, or aria-labelledby).
+ */
+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([]);
+}
+
+// ─── SearchModal ───────────────────────────────────────────────────────────
+
+describe('SearchModal — v4.7 role="search" + v4.8 scope roles', () => {
+  it('renders with role="search" and an accessible input', () => {
+    renderWithProviders(
+      <SearchModal open={true} onClose={() => undefined} onSelect={() => undefined} />,
+    );
+    expect(screen.getByRole('search')).toBeInTheDocument();
+    // The search input has aria-label="Search". Use a CSS selector to
+    // avoid colliding with the sr-only <span> title text.
+    const input = document.querySelector('input.search-modal-input');
+    expect(input).toBeInTheDocument();
+    expect(input?.getAttribute('aria-label')).toBe('Search');
+  });
+
+  it('scope buttons act as a tablist with aria-selected', () => {
+    renderWithProviders(
+      <SearchModal open={true} onClose={() => undefined} onSelect={() => undefined} />,
+    );
+    const tablist = screen.getByRole('tablist', { name: /search scope/i });
+    expect(tablist).toBeInTheDocument();
+    const tabs = within(tablist).getAllByRole('tab');
+    expect(tabs.length).toBeGreaterThan(0);
+    // The "All" scope is the default — must be aria-selected.
+    const allTab = tabs.find((t) => t.textContent?.trim() === 'All');
+    expect(allTab).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('the search input is an accessible textbox', () => {
+    renderWithProviders(
+      <SearchModal open={true} onClose={() => undefined} onSelect={() => undefined} />,
+    );
+    const input = document.querySelector('input.search-modal-input') as HTMLInputElement;
+    expect(input?.tagName.toLowerCase()).toBe('input');
+  });
+
+  it('all buttons inside the modal have accessible names', () => {
+    const { container } = renderWithProviders(
+      <SearchModal open={true} onClose={() => undefined} onSelect={() => undefined} />,
+    );
+    expectAllButtonsAccessible(container);
+  });
+});
+
+// ─── Notifications (icon-only buttons must be labelled) ───────────────────
+
+describe('Notifications — icon-only buttons are accessible', () => {
+  it('the bell button has an accessible name', () => {
+    renderWithProviders(<Notifications />);
+    const bell = screen.getByRole('button', { name: /notifications/i });
+    expect(bell).toHaveAttribute('aria-haspopup', 'true');
+    expect(bell).toHaveAttribute('aria-expanded');
+  });
+
+  it('all visible buttons have an accessible name', () => {
+    const { container } = renderWithProviders(<Notifications />);
+    expectAllButtonsAccessible(container);
+  });
+});
+
+// ─── ARIA semantics across components ─────────────────────────────────────
+
+describe('ARIA semantics — toast, modal, notifications', () => {
+  it('ToastItem renders with role="alert" and aria-live="assertive"', async () => {
+    const { ToastContainer } = await import('../src/web/components/Toast');
+    const { container } = render(
+      <ToastContainer
+        toasts={[
+          { id: 1, kind: 'info', message: 'Hello world' },
+        ]}
+        onDismiss={() => undefined}
+      />,
+    );
+    // Container itself is aria-live="polite"
+    const stack = container.querySelector('.toast-stack');
+    expect(stack).toHaveAttribute('aria-live', 'polite');
+    // Each toast uses role="alert" + aria-live="assertive"
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveTextContent('Hello world');
+  });
+});
+
+// ─── Skip-to-main link ─────────────────────────────────────────────────────
+
+describe('Skip-to-main-content link (added in App.tsx)', () => {
+  it('renders at the top of the body when the shell mounts', async () => {
+    // Importing App pulls in the whole graph. Use a lighter integration:
+    // render just the shell markup via a small render-only harness.
+    // We assert on the markup string the App shell produces.
+    const { App } = await import('../src/web/App');
+    const { container } = renderWithProviders(<App />);
+    const link = container.querySelector('a.skip-to-main');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '#main-content');
+    expect(link?.textContent).toMatch(/skip to main content/i);
+  });
+});
+
+// ─── Misc ─────────────────────────────────────────────────────────────────
+
+describe('Misc accessibility invariants', () => {
+  it('icon-only buttons inside rendered tree always carry aria-label', async () => {
+    // The Notifications bell is the simplest icon-only button to assert.
+    const { container } = renderWithProviders(<Notifications />);
+    const bell = container.querySelector('.notifications-bell');
+    expect(bell?.getAttribute('aria-label')).toMatch(/notifications/i);
+  });
+
+  it('skips hidden file inputs (display:none) but still checks accessible name', () => {
+    const { container } = render(
+      <form>
+        <input type="file" multiple style={{ display: 'none' }} aria-label="Attach" />
+      </form>,
+    );
+    // The file input has aria-label so it's accessible.
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(fileInput.getAttribute('aria-label')).toBe('Attach');
+  });
+});

package/bizar-dash/tests/backup-restore.test.mjs

@@ -0,0 +1,217 @@
+/**
+ * tests/backup-restore.test.mjs
+ *
+ * v4.8.0 — Round-trip backup/restore integration tests.
+ *
+ * Creates real state, backs it up, modifies state, restores from backup,
+ * and verifies the state matches the original.
+ */
+import { describe, it, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import {
+  mkdirSync,
+  rmSync,
+  writeFileSync,
+  readFileSync,
+  existsSync,
+} from 'node:fs';
+
+const BACKUP_STORE = await import('../src/server/backup-store.mjs').then((m) => m);
+
+describe('backup-restore round-trip', () => {
+  let workDir;
+  let backupRoot;
+  let stateFile;
+  let stateFilePath;
+  let state2File;
+  let state2FilePath;
+
+  beforeEach(() => {
+    const id = `bizar-roundtrip-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    workDir = join(tmpdir(), id);
+    backupRoot = join(workDir, 'backups');
+    stateFile = join(workDir, 'bizar', 'state.json');
+    state2File = join(workDir, 'bizar', 'state2.json');
+
+    mkdirSync(join(workDir, 'bizar'), { recursive: true });
+    mkdirSync(backupRoot, { recursive: true });
+
+    // Create initial state
+    const originalState = { config: { theme: 'dark', accent: '#8b5cf6' }, version: '1.0.0' };
+    writeFileSync(stateFile, JSON.stringify(originalState), { mode: 0o600 });
+    stateFilePath = stateFile;
+    state2FilePath = state2File;
+  });
+
+  afterEach(() => {
+    try { rmSync(workDir, { recursive: true, force: true }); } catch { /* ignore */ }
+  });
+
+  it('round-trip: create backup with project state, modify, restore', async () => {
+    // Use project-state label which maps to .bizar/ — we can control projectRoot
+    const projectRoot = workDir;
+
+    // 1. Create a .bizar/ directory in projectRoot
+    mkdirSync(join(projectRoot, '.bizar'), { recursive: true });
+    const stateFile = join(projectRoot, '.bizar', 'state.json');
+    const originalState = { config: { theme: 'dark', accent: '#8b5cf6' }, version: '1.0.0' };
+    writeFileSync(stateFile, JSON.stringify(originalState), { mode: 0o600 });
+
+    // 2. Create backup including project state
+    const backupResult = await BACKUP_STORE.createBackup({
+      outDir: backupRoot,
+      label: 'round-trip-test',
+      projectRoot,
+    });
+    assert.strictEqual(backupResult.ok, true);
+    assert.ok(backupResult.path.includes('round-trip-test'));
+
+    // 3. Verify backup has the state
+    const backedStatePath = join(backupResult.path, 'project-state', 'state.json');
+    const backedState = JSON.parse(readFileSync(backedStatePath, 'utf8'));
+    assert.strictEqual(backedState.config.theme, 'dark');
+
+    // 4. Modify the state file
+    const modifiedState = { config: { theme: 'light', accent: '#f97316' }, version: '2.0.0' };
+    writeFileSync(stateFile, JSON.stringify(modifiedState), { mode: 0o600 });
+    assert.strictEqual(JSON.parse(readFileSync(stateFile, 'utf8')).config.theme, 'light');
+
+    // 5. Restore from backup with overwrite and projectRoot
+    const restoreResult = await BACKUP_STORE.restoreBackup({
+      backupPath: backupResult.path,
+      dryRun: false,
+      conflictStrategy: 'overwrite',
+      projectRoot,
+    });
+    assert.strictEqual(restoreResult.ok, true);
+    assert.ok(restoreResult.restored.includes('project-state'));
+
+    // 6. Verify state was restored to original
+    const restoredContent = JSON.parse(readFileSync(stateFile, 'utf8'));
+    assert.strictEqual(restoredContent.config.theme, 'dark');
+    assert.strictEqual(restoredContent.config.accent, '#8b5cf6');
+    assert.strictEqual(restoredContent.version, '1.0.0');
+  });
+
+  it('merge strategy preserves newer existing files', async () => {
+    // 1. Create backup with original state
+    const testBackupDir = join(backupRoot, 'bizar-test-merge');
+    mkdirSync(testBackupDir, { recursive: true });
+    const originalState = { config: { theme: 'dark' }, version: '1.0.0', timestamp: Date.now() - 10000 };
+    mkdirSync(join(testBackupDir, 'state'), { recursive: true });
+    writeFileSync(join(testBackupDir, 'state', 'state.json'), JSON.stringify(originalState), { mode: 0o600 });
+    writeFileSync(
+      join(testBackupDir, 'manifest.json'),
+      JSON.stringify({ version: '1.0.0', createdAt: new Date().toISOString(), paths: ['state'] }),
+      { mode: 0o600 },
+    );
+
+    // 2. Modify state with newer timestamp
+    const modifiedState = { config: { theme: 'light' }, version: '2.0.0', timestamp: Date.now() };
+    writeFileSync(stateFilePath, JSON.stringify(modifiedState), { mode: 0o600 });
+
+    // 3. Restore with merge strategy (newer wins)
+    // The existing file is newer, so it should be kept
+    const restoreResult = await BACKUP_STORE.restoreBackup({
+      backupPath: testBackupDir,
+      dryRun: true,
+      conflictStrategy: 'merge',
+    });
+    // dryRun doesn't modify, so we just verify the call works
+    assert.ok(restoreResult.restored.length >= 0);
+  });
+
+  it('skip strategy does not overwrite existing files', async () => {
+    const testBackupDir = join(backupRoot, 'bizar-test-skip');
+    mkdirSync(testBackupDir, { recursive: true });
+    mkdirSync(join(testBackupDir, 'state'), { recursive: true });
+    writeFileSync(
+      join(testBackupDir, 'state', 'state.json'),
+      JSON.stringify({ config: { theme: 'dark' }, version: '1.0.0' }),
+      { mode: 0o600 },
+    );
+    writeFileSync(
+      join(testBackupDir, 'manifest.json'),
+      JSON.stringify({ version: '1.0.0', createdAt: new Date().toISOString(), paths: ['state'] }),
+      { mode: 0o600 },
+    );
+
+    // Modify existing state
+    writeFileSync(stateFilePath, JSON.stringify({ config: { theme: 'light' }, version: '2.0.0' }), { mode: 0o600 });
+
+    const restoreResult = await BACKUP_STORE.restoreBackup({
+      backupPath: testBackupDir,
+      dryRun: true,
+      conflictStrategy: 'skip',
+    });
+    assert.ok(restoreResult.skipped.length >= 0);
+  });
+
+  it('dry-run does not modify any files', async () => {
+    const testBackupDir = join(backupRoot, 'bizar-test-dryrun');
+    mkdirSync(testBackupDir, { recursive: true });
+    mkdirSync(join(testBackupDir, 'state'), { recursive: true });
+    const originalContent = { config: { theme: 'dark' }, version: '1.0.0' };
+    writeFileSync(join(testBackupDir, 'state', 'state.json'), JSON.stringify(originalContent), { mode: 0o600 });
+    writeFileSync(
+      join(testBackupDir, 'manifest.json'),
+      JSON.stringify({ version: '1.0.0', createdAt: new Date().toISOString(), paths: ['state'] }),
+      { mode: 0o600 },
+    );
+
+    const beforeContent = readFileSync(stateFilePath, 'utf8');
+    await BACKUP_STORE.restoreBackup({
+      backupPath: testBackupDir,
+      dryRun: true,
+      conflictStrategy: 'overwrite',
+    });
+    const afterContent = readFileSync(stateFilePath, 'utf8');
+    assert.strictEqual(beforeContent, afterContent);
+  });
+
+  it('verifies backup integrity correctly', async () => {
+    const testBackupDir = join(backupRoot, 'bizar-valid');
+    mkdirSync(testBackupDir, { recursive: true });
+    mkdirSync(join(testBackupDir, 'state'), { recursive: true });
+    writeFileSync(join(testBackupDir, 'state', 'state.json'), JSON.stringify({ theme: 'dark' }), { mode: 0o600 });
+    writeFileSync(
+      join(testBackupDir, 'manifest.json'),
+      JSON.stringify({ version: '1.0.0', createdAt: new Date().toISOString(), paths: ['state'] }),
+      { mode: 0o600 },
+    );
+
+    const result = await BACKUP_STORE.verifyBackup({ backupPath: testBackupDir });
+    assert.strictEqual(result.ok, true);
+    assert.strictEqual(result.issues.length, 0);
+  });
+
+  it('detects corrupted backup with missing files', async () => {
+    const testBackupDir = join(backupRoot, 'bizar-corrupt');
+    mkdirSync(testBackupDir, { recursive: true });
+    writeFileSync(
+      join(testBackupDir, 'manifest.json'),
+      JSON.stringify({ version: '1.0.0', createdAt: new Date().toISOString(), paths: ['state', 'missing'] }),
+      { mode: 0o600 },
+    );
+    mkdirSync(join(testBackupDir, 'state'), { recursive: true });
+    writeFileSync(join(testBackupDir, 'state', 'state.json'), JSON.stringify({ theme: 'dark' }), { mode: 0o600 });
+    // 'missing' path is listed in manifest but doesn't exist
+
+    const result = await BACKUP_STORE.verifyBackup({ backupPath: testBackupDir });
+    assert.strictEqual(result.ok, false);
+    assert.ok(result.issues.some((i) => i.includes('missing')));
+  });
+
+  it('deletes backup successfully', async () => {
+    const testBackupDir = join(backupRoot, 'bizar-to-delete');
+    mkdirSync(testBackupDir, { recursive: true });
+    writeFileSync(join(testBackupDir, 'test.txt'), 'will be deleted', { mode: 0o600 });
+    assert.ok(existsSync(testBackupDir));
+
+    const result = await BACKUP_STORE.deleteBackup({ backupPath: testBackupDir });
+    assert.strictEqual(result.ok, true);
+    assert.ok(!existsSync(testBackupDir));
+  });
+});

package/bizar-dash/tests/backup-restore.test.tsx

@@ -0,0 +1,123 @@
+/**
+ * tests/backup-restore.test.tsx
+ *
+ * v4.8.0 — Component test for BackupRestoreCard.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { BackupRestoreCard } from '../src/web/components/BackupRestore';
+
+// Mock the API
+vi.mock('../src/web/lib/api', () => ({
+  api: {
+    get: vi.fn(),
+    post: vi.fn(),
+    del: vi.fn(),
+  },
+}));
+
+// Mock the Toast
+vi.mock('../src/web/components/Toast', () => ({
+  useToast: () => ({
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+  }),
+}));
+
+// Mock the Modal
+vi.mock('../src/web/components/Modal', () => ({
+  useModal: () => ({
+    open: vi.fn(),
+    close: vi.fn(),
+    isModalOpen: false,
+  }),
+}));
+
+import { api } from '../src/web/lib/api';
+
+const mockBackups = [
+  {
+    path: '/tmp/backups/bizar-2025-07-05-120000',
+    name: 'bizar-2025-07-05-120000',
+    createdAt: '2025-07-05T12:00:00.000Z',
+    sizeBytes: 4096,
+    sizeFormatted: '4.0 KB',
+    manifest: {
+      version: '4.8.0',
+      createdAt: '2025-07-05T12:00:00.000Z',
+      label: null,
+      paths: ['config', 'opencode'],
+    },
+  },
+];
+
+describe('BackupRestoreCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (api.get as ReturnType<typeof vi.fn>).mockResolvedValue({ ok: true, backups: mockBackups });
+    (api.post as ReturnType<typeof vi.fn>).mockResolvedValue({ ok: true, path: '/tmp/backups/bizar-2025-07-05-120000', sizeBytes: 4096, durationMs: 100 });
+  });
+
+  it('renders the card title', async () => {
+    render(<BackupRestoreCard />);
+    expect(screen.getByText(/Backup.*Restore/i)).toBeTruthy();
+  });
+
+  it('renders the create backup button', async () => {
+    render(<BackupRestoreCard />);
+    expect(screen.getByRole('button', { name: /create backup/i })).toBeTruthy();
+  });
+
+  it('shows loading state initially', async () => {
+    render(<BackupRestoreCard />);
+    expect(screen.getByText(/Loading backups/i)).toBeTruthy();
+  });
+
+  it('renders backup list after loading', async () => {
+    render(<BackupRestoreCard />);
+    await waitFor(() => {
+      expect(screen.getByText(/bizar-2025-07-05-120000/)).toBeTruthy();
+    });
+  });
+
+  it('calls create backup API when create button is clicked', async () => {
+    render(<BackupRestoreCard />);
+    await waitFor(() => {
+      expect(screen.getByText(/bizar-2025-07-05-120000/)).toBeTruthy();
+    });
+    const createBtn = screen.getByRole('button', { name: /create backup/i });
+    fireEvent.click(createBtn);
+    await waitFor(() => {
+      expect(api.post).toHaveBeenCalledWith('/backup/create', expect.objectContaining({}));
+    });
+  });
+
+  it('calls verify API when verify button is clicked', async () => {
+    render(<BackupRestoreCard />);
+    await waitFor(() => {
+      expect(screen.getByText(/bizar-2025-07-05-120000/)).toBeTruthy();
+    });
+    const verifyBtn = screen.getByRole('button', { name: /verify/i });
+    fireEvent.click(verifyBtn);
+    await waitFor(() => {
+      expect(api.post).toHaveBeenCalledWith('/backup/verify', expect.objectContaining({
+        backupPath: '/tmp/backups/bizar-2025-07-05-120000',
+      }));
+    });
+  });
+
+  it('opens restore dialog when restore button is clicked', async () => {
+    const { useModal } = await import('../src/web/components/Modal');
+    render(<BackupRestoreCard />);
+    await waitFor(() => {
+      expect(screen.getByText(/bizar-2025-07-05-120000/)).toBeTruthy();
+    });
+    const restoreBtn = screen.getByRole('button', { name: /restore/i });
+    fireEvent.click(restoreBtn);
+    // Modal should open
+    const modalOpen = (useModal as ReturnType<typeof vi.fn>).mock.results[0]?.value?.open;
+    expect(modalOpen).toHaveBeenCalled();
+  });
+});