@polderlabs/bizar 4.5.2 → 4.7.0

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

@@ -0,0 +1,184 @@
+/**
+ * bizar-dash/tests/cli-refactor.test.mjs
+ *
+ * v4.6 — CLI refactor tests.
+ *
+ * Verifies:
+ *   1. cli/bin.mjs imports from cli/commands/*.mjs correctly
+ *   2. Each command module exports a `run` function
+ *   3. cli/utils.mjs exports `which()` and `bizarConfigDir()`
+ *   4. cli/artifact-cli.mjs, cli/artifact-server.mjs, cli/artifact-render.mjs
+ *      exist and export the right things
+ *   5. cli/artifact.mjs is a backward-compatible re-export shell
+ */
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { readdirSync } from 'node:fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const CLI_ROOT = resolve(__dirname, '..', '..', 'cli');
+const COMMANDS_DIR = resolve(CLI_ROOT, 'commands');
+
+// ── utils.mjs ────────────────────────────────────────────────────────────────
+
+describe('cli/utils.mjs exports', () => {
+  test('exports which()', async () => {
+    const { which } = await import(`${CLI_ROOT}/utils.mjs`);
+    assert.equal(typeof which, 'function');
+  });
+
+  test('exports whichPath()', async () => {
+    const { whichPath } = await import(`${CLI_ROOT}/utils.mjs`);
+    assert.equal(typeof whichPath, 'function');
+  });
+
+  test('exports bizarConfigDir()', async () => {
+    const { bizarConfigDir } = await import(`${CLI_ROOT}/utils.mjs`);
+    assert.equal(typeof bizarConfigDir, 'function');
+  });
+
+  test('bizarConfigDir() returns a non-empty string', async () => {
+    const { bizarConfigDir } = await import(`${CLI_ROOT}/utils.mjs`);
+    const dir = bizarConfigDir();
+    assert.equal(typeof dir, 'string');
+    assert.ok(dir.length > 0);
+    assert.ok(dir.includes('bizar'));
+  });
+
+  test('which() returns boolean', async () => {
+    const { which } = await import(`${CLI_ROOT}/utils.mjs`);
+    const result = which('node');
+    assert.equal(typeof result, 'boolean');
+  });
+
+  test('which() returns false for nonexistent command', async () => {
+    const { which } = await import(`${CLI_ROOT}/utils.mjs`);
+    const result = which('this-command-does-not-exist-xyz');
+    assert.equal(result, false);
+  });
+
+  test('whichPath() returns null for nonexistent command', async () => {
+    const { whichPath } = await import(`${CLI_ROOT}/utils.mjs`);
+    const result = whichPath('this-command-does-not-exist-xyz');
+    assert.equal(result, null);
+  });
+});
+
+// ── Command modules ────────────────────────────────────────────────────────────
+
+const COMMAND_FILES = [
+  'install',
+  'service',
+  'dash',
+  'minimax',
+  'headroom',
+  'mod',
+  'artifact',
+  'memory',
+  'usage',
+  'util',
+];
+
+describe('cli/commands/*.mjs exports', () => {
+  for (const name of COMMAND_FILES) {
+    test(`${name}.mjs exports run()`, async () => {
+      const mod = await import(`${COMMANDS_DIR}/${name}.mjs`);
+      assert.equal(typeof mod.run, 'function', `${name}.mjs should export run()`);
+    });
+
+    // Note: calling run() directly would execute the command (network calls, etc.)
+    // which is not appropriate in a module structure test. The run() signature
+    // is validated via TypeScript / node --check instead.
+  }
+});
+
+// ── Artifact split ────────────────────────────────────────────────────────────
+
+describe('artifact module split', () => {
+  test('artifact-cli.mjs exists and exports runArtifact', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact-cli.mjs`);
+    assert.equal(typeof mod.runArtifact, 'function');
+    assert.equal(typeof mod.default, 'function');
+  });
+
+  test('artifact-cli.mjs exports showHelp', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact-cli.mjs`);
+    assert.equal(typeof mod.showHelp, 'function');
+  });
+
+  test('artifact-cli.mjs exports regenerateHtml', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact-cli.mjs`);
+    assert.equal(typeof mod.regenerateHtml, 'function');
+  });
+
+  test('artifact-server.mjs exists and exports startServer', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact-server.mjs`);
+    assert.equal(typeof mod.startServer, 'function');
+  });
+
+  test('artifact-render.mjs exports CANVAS_SCHEMA_VERSION', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact-render.mjs`);
+    assert.equal(mod.CANVAS_SCHEMA_VERSION, 2);
+  });
+
+  test('artifact-render.mjs exports canvas helpers', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact-render.mjs`);
+    assert.equal(typeof mod.emptyCanvas, 'function');
+    assert.equal(typeof mod.readCanvasFile, 'function');
+    assert.equal(typeof mod.writeCanvasFile, 'function');
+    assert.equal(typeof mod.loadOrMigrateCanvas, 'function');
+    assert.equal(typeof mod.canvasToMarkdown, 'function');
+  });
+
+  test('artifact-render.mjs exports ID generators', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact-render.mjs`);
+    assert.equal(typeof mod.makeElementId, 'function');
+    assert.equal(typeof mod.makeConnectionId, 'function');
+    assert.equal(typeof mod.makeCommentId, 'function');
+    assert.equal(typeof mod.makeReplyId, 'function');
+  });
+
+  test('artifact-render.mjs exports HTML renderers', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact-render.mjs`);
+    assert.equal(typeof mod.renderElementHTML, 'function');
+    assert.equal(typeof mod.renderConnectionHTML, 'function');
+    assert.equal(typeof mod.renderCommentPinHTML, 'function');
+    assert.equal(typeof mod.escapeHtml, 'function');
+    assert.equal(typeof mod.formatDate, 'function');
+  });
+
+  test('artifact.mjs is a re-export shell (backward compat)', async () => {
+    const mod = await import(`${CLI_ROOT}/artifact.mjs`);
+    // Should re-export runArtifact
+    assert.equal(typeof mod.runArtifact, 'function');
+    // Should re-export runPlan as alias for runArtifact (backward compat)
+    assert.equal(typeof mod.runPlan, 'function');
+    // Should re-export startServer
+    assert.equal(typeof mod.startServer, 'function');
+    // Should re-export canvas helpers
+    assert.equal(typeof mod.emptyCanvas, 'function');
+    assert.equal(typeof mod.canvasToMarkdown, 'function');
+    // Should re-export render helpers
+    assert.equal(typeof mod.renderElementHTML, 'function');
+    assert.equal(typeof mod.escapeHtml, 'function');
+    // Should re-export regenerateHtml
+    assert.equal(typeof mod.regenerateHtml, 'function');
+  });
+});
+
+// ── bin.mjs structure ─────────────────────────────────────────────────────────
+
+describe('cli/bin.mjs structure', () => {
+  test('bin.mjs is a valid ESM module', async () => {
+    // Just verify it can be parsed as ESM — don't run main()
+    const { readFileSync } = await import('node:fs');
+    const src = readFileSync(`${CLI_ROOT}/bin.mjs`, 'utf8');
+    assert.ok(src.includes('#!/usr/bin/env node'));
+    assert.ok(src.includes('export'));
+    assert.ok(src.includes('import'));
+  });
+});
+
+console.log('  cli-refactor.test.mjs loaded — run with: node --test bizar-dash/tests/cli-refactor.test.mjs');

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

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Button } from '../../src/web/components/Button';
+
+describe('Button', () => {
+  it('renders text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('fires onClick when clicked', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button onClick={onClick}>Click</Button>);
+    await user.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('shows loading state and disables button', () => {
+    render(<Button loading>Saving</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn).toBeDisabled();
+    expect(btn.querySelector('.btn-spinner')).toBeInTheDocument();
+  });
+
+  it('applies variant classes', () => {
+    const { container } = render(<Button variant="primary">Primary</Button>);
+    expect(container.firstChild).toHaveClass('btn-primary');
+  });
+
+  it('applies size classes', () => {
+    const { container } = render(<Button size="lg">Large</Button>);
+    expect(container.firstChild).toHaveClass('btn-size-lg');
+  });
+});

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

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Card, CardTitle, CardMeta } from '../../src/web/components/Card';
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(<Card>Hello</Card>);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('has expected class name', () => {
+    const { container } = render(<Card>Test</Card>);
+    expect(container.firstChild).toHaveClass('card');
+  });
+
+  it('applies variant classes', () => {
+    const { container, rerender } = render(<Card variant="elevated">Test</Card>);
+    expect(container.firstChild).toHaveClass('card-elevated');
+
+    rerender(<Card variant="outlined">Test</Card>);
+    expect(container.firstChild).toHaveClass('card-outlined');
+
+    rerender(<Card variant="filled">Test</Card>);
+    expect(container.firstChild).toHaveClass('card-filled');
+  });
+
+  it('renders CardTitle and CardMeta', () => {
+    render(
+      <Card>
+        <CardTitle>My Title</CardTitle>
+        <CardMeta>Meta info</CardMeta>
+      </Card>,
+    );
+    expect(screen.getByText('My Title')).toBeInTheDocument();
+    expect(screen.getByText('Meta info')).toBeInTheDocument();
+  });
+
+  it('sets interactive class when interactive prop is true', () => {
+    const { container } = render(<Card interactive>Clickable</Card>);
+    expect(container.firstChild).toHaveClass('card-interactive');
+  });
+});

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

@@ -0,0 +1,104 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ModalProvider, useModal } from '../../src/web/components/Modal';
+
+function ModalHarness() {
+  const modal = useModal();
+  return (
+    <div>
+      <button onClick={() => modal.open({ title: 'Dialog', children: <p>Content</p> })}>
+        Open
+      </button>
+    </div>
+  );
+}
+
+function ModalHarnessWithClose() {
+  const modal = useModal();
+  return (
+    <div>
+      <button
+        onClick={() =>
+          modal.open({
+            title: 'Dialog',
+            children: <p>Content</p>,
+            footer: <button onClick={() => modal.close()}>Close</button>,
+          })
+        }
+      >
+        Open
+      </button>
+    </div>
+  );
+}
+
+describe('Modal', () => {
+  it('renders when open', async () => {
+    const user = userEvent.setup();
+    render(
+      <ModalProvider>
+        <ModalHarness />
+      </ModalProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Dialog')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('does not render dialog when closed', () => {
+    render(
+      <ModalProvider>
+        <ModalHarness />
+      </ModalProvider>,
+    );
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('has role="dialog"', async () => {
+    const user = userEvent.setup();
+    render(
+      <ModalProvider>
+        <ModalHarness />
+      </ModalProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('closes on Escape key', async () => {
+    const user = userEvent.setup();
+    render(
+      <ModalProvider>
+        <ModalHarness />
+      </ModalProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('closes when clicking the backdrop', async () => {
+    const user = userEvent.setup();
+    render(
+      <ModalProvider>
+        <ModalHarness />
+      </ModalProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+
+    const backdrop = dialog.parentElement!;
+    await user.click(backdrop);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Spinner } from '../../src/web/components/Spinner';
+
+describe('Spinner', () => {
+  it('renders with default size', () => {
+    const { container } = render(<Spinner />);
+    const spinner = container.firstChild;
+    expect(spinner).toHaveClass('spinner');
+    expect(spinner).toHaveClass('spinner-md');
+  });
+
+  it('renders with custom size', () => {
+    const { container } = render(<Spinner size="lg" />);
+    expect(container.firstChild).toHaveClass('spinner-lg');
+  });
+
+  it('has role="status" for accessibility', () => {
+    render(<Spinner />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('has default aria-label', () => {
+    render(<Spinner />);
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Loading');
+  });
+
+  it('accepts a custom aria-label', () => {
+    render(<Spinner label="Please wait" />);
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Please wait');
+  });
+});

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

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { StatusBadge } from '../../src/web/components/StatusBadge';
+
+describe('StatusBadge', () => {
+  it('renders with default neutral kind', () => {
+    const { container } = render(<StatusBadge>Default</StatusBadge>);
+    expect(container.firstChild).toHaveClass('badge');
+    expect(container.firstChild).toHaveClass('badge-neutral');
+  });
+
+  it('renders with each variant class', () => {
+    const variants = ['success', 'warning', 'error', 'info', 'accent'] as const;
+    for (const kind of variants) {
+      const { container, unmount } = render(<StatusBadge kind={kind}>{kind}</StatusBadge>);
+      expect(container.firstChild).toHaveClass(`badge-${kind}`);
+      unmount();
+    }
+  });
+
+  it('renders children', () => {
+    render(<StatusBadge>Active</StatusBadge>);
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('shows dot element when dot prop is true', () => {
+    const { container } = render(<StatusBadge dot>With dot</StatusBadge>);
+    expect(container.querySelector('.badge-dot')).toBeInTheDocument();
+  });
+
+  it('does not show dot when dot prop is false', () => {
+    const { container } = render(<StatusBadge>No dot</StatusBadge>);
+    expect(container.querySelector('.badge-dot')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,108 @@
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ToastContainer, ToastProvider, useToast } from '../../src/web/components/Toast';
+
+function ToastHarness() {
+  const toast = useToast();
+  return (
+    <div>
+      <button onClick={() => toast.show('Info message')}>Show Info</button>
+      <button onClick={() => toast.success('Success!')}>Show Success</button>
+      <button onClick={() => toast.error('Error!')}>Show Error</button>
+    </div>
+  );
+}
+
+describe('ToastContainer', () => {
+  it('renders toast with message', () => {
+    render(
+      <ToastContainer
+        toasts={[{ id: 1, kind: 'info', message: 'Test toast' }]}
+        onDismiss={() => {}}
+      />,
+    );
+    expect(screen.getByText('Test toast')).toBeInTheDocument();
+  });
+
+  it('has role="alert" and aria-live="assertive"', () => {
+    render(
+      <ToastContainer
+        toasts={[{ id: 1, kind: 'info', message: 'Accessible toast' }]}
+        onDismiss={() => {}}
+      />,
+    );
+    const toast = screen.getByRole('alert');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveAttribute('aria-live', 'assertive');
+  });
+});
+
+describe('ToastProvider + useToast', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('displays a toast when show is called', async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <ToastHarness />
+      </ToastProvider>,
+    );
+
+    await user.click(screen.getByText('Show Info'));
+    expect(screen.getByText('Info message')).toBeInTheDocument();
+  });
+
+  it('displays multiple toasts stacked', async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <ToastHarness />
+      </ToastProvider>,
+    );
+
+    await user.click(screen.getByText('Show Success'));
+    await user.click(screen.getByText('Show Error'));
+
+    expect(screen.getByText('Success!')).toBeInTheDocument();
+    expect(screen.getByText('Error!')).toBeInTheDocument();
+  });
+
+  it('auto-dismisses after the default timeout', () => {
+    // Use fireEvent (synchronous) instead of userEvent to avoid
+    // timer conflicts with vi.useFakeTimers
+    vi.useFakeTimers();
+
+    render(
+      <ToastProvider>
+        <ToastHarness />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByText('Show Info'));
+    expect(screen.getByText('Info message')).toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(4000);
+    });
+
+    expect(screen.queryByText('Info message')).not.toBeInTheDocument();
+  });
+
+  it('dismisses a toast when dismiss button is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <ToastHarness />
+      </ToastProvider>,
+    );
+
+    await user.click(screen.getByText('Show Info'));
+    expect(screen.getByText('Info message')).toBeInTheDocument();
+
+    await user.click(screen.getByLabelText('Dismiss'));
+    expect(screen.queryByText('Info message')).not.toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/hooks/useModal.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { ModalProvider, useModal } from '../../src/web/components/Modal';
+
+function TestHarness() {
+  const modal = useModal();
+  return (
+    <div>
+      <button onClick={() => modal.open({ title: 'Dialog', children: <p>Content</p> })}>
+        Open
+      </button>
+      <span data-testid="modal-open">{String(modal.isModalOpen)}</span>
+    </div>
+  );
+}
+
+describe('useModal', () => {
+  it('isModalOpen starts as false', () => {
+    render(
+      <ModalProvider>
+        <TestHarness />
+      </ModalProvider>,
+    );
+
+    expect(screen.getByTestId('modal-open')).toHaveTextContent('false');
+  });
+
+  it('open() renders a modal dialog', async () => {
+    const user = userEvent.setup();
+    render(
+      <ModalProvider>
+        <TestHarness />
+      </ModalProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Dialog')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('close() removes the dialog', async () => {
+    const user = userEvent.setup();
+
+    function HarnessWithClose() {
+      const modal = useModal();
+      return (
+        <div>
+          <button
+            onClick={() =>
+              modal.open({
+                title: 'Dialog',
+                children: <p>Content</p>,
+                footer: <button onClick={() => modal.close()}>Close Modal</button>,
+              })
+            }
+          >
+            Open
+          </button>
+        </div>
+      );
+    }
+
+    render(
+      <ModalProvider>
+        <HarnessWithClose />
+      </ModalProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Close Modal'));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('returns fallback api when no provider is present', () => {
+    const { result } = renderHook(() => useModal());
+    expect(result.current.isModalOpen).toBe(false);
+    expect(result.current.open({ children: <p>test</p> })).toBe('');
+    expect(() => result.current.close()).not.toThrow();
+  });
+});

package/bizar-dash/tests/hooks/useToast.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen, act, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ToastProvider, useToast } from '../../src/web/components/Toast';
+
+function TestHarness() {
+  const toast = useToast();
+  return (
+    <div>
+      <button onClick={() => toast.success('Success toast body')}>Trigger Success</button>
+      <button onClick={() => toast.error('Error toast body')}>Trigger Error</button>
+      <button onClick={() => toast.info('Info toast body')}>Trigger Info</button>
+    </div>
+  );
+}
+
+describe('useToast', () => {
+  it('calling success() renders a toast', async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <TestHarness />
+      </ToastProvider>,
+    );
+
+    await user.click(screen.getByText('Trigger Success'));
+    expect(screen.getByText('Success toast body')).toBeInTheDocument();
+  });
+
+  it('calling error() renders an error toast', async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <TestHarness />
+      </ToastProvider>,
+    );
+
+    await user.click(screen.getByText('Trigger Error'));
+    expect(screen.getByText('Error toast body')).toBeInTheDocument();
+  });
+
+  it('returns fallback api when no provider is present', () => {
+    const { result } = renderHook(() => useToast());
+    expect(result.current.toasts).toEqual([]);
+    expect(result.current.isModalOpen).toBeUndefined();
+    // Calling methods should not throw
+    expect(() => result.current.show('test')).not.toThrow();
+    expect(() => result.current.dismiss(1)).not.toThrow();
+  });
+});