add tests

apps/website/components/admin/AdminToolbar.test.tsx

@@ -0,0 +1,145 @@
+/**
+ * AdminToolbar Component Tests
+ * 
+ * Tests for the AdminToolbar component that provides a semantic toolbar
+ * for admin pages with filters, search, and secondary actions.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AdminToolbar } from './AdminToolbar';
+import { describe, it, expect, vi } from 'vitest';
+
+// Mock the ControlBar component
+vi.mock('@/ui/ControlBar', () => ({
+  ControlBar: ({ leftContent, children }: any) => (
+    <div data-testid="control-bar">
+      {leftContent && <div data-testid="left-content">{leftContent}</div>}
+      <div data-testid="children">{children}</div>
+    </div>
+  ),
+}));
+
+describe('AdminToolbar', () => {
+  it('should render with children only', () => {
+    render(
+      <AdminToolbar>
+        <button>Filter</button>
+      </AdminToolbar>
+    );
+
+    expect(screen.getByText('Filter')).toBeTruthy();
+  });
+
+  it('should render with leftContent and children', () => {
+    render(
+      <AdminToolbar
+        leftContent={<span>Left Content</span>}
+      >
+        <button>Filter</button>
+      </AdminToolbar>
+    );
+
+    expect(screen.getByText('Left Content')).toBeTruthy();
+    expect(screen.getByText('Filter')).toBeTruthy();
+  });
+
+  it('should render with multiple children', () => {
+    render(
+      <AdminToolbar
+        leftContent={<span>Filters</span>}
+      >
+        <button>Filter 1</button>
+        <button>Filter 2</button>
+        <button>Filter 3</button>
+      </AdminToolbar>
+    );
+
+    expect(screen.getByText('Filters')).toBeTruthy();
+    expect(screen.getByText('Filter 1')).toBeTruthy();
+    expect(screen.getByText('Filter 2')).toBeTruthy();
+    expect(screen.getByText('Filter 3')).toBeTruthy();
+  });
+
+  it('should render with complex leftContent', () => {
+    const ComplexLeftContent = () => (
+      <div>
+        <span>Complex</span>
+        <button>Action</button>
+      </div>
+    );
+
+    render(
+      <AdminToolbar
+        leftContent={<ComplexLeftContent />}
+      >
+        <button>Filter</button>
+      </AdminToolbar>
+    );
+
+    expect(screen.getByText('Complex')).toBeTruthy();
+    expect(screen.getByText('Action')).toBeTruthy();
+    expect(screen.getByText('Filter')).toBeTruthy();
+  });
+
+  it('should render with complex children', () => {
+    const ComplexChild = () => (
+      <div>
+        <span>Complex</span>
+        <button>Action</button>
+      </div>
+    );
+
+    render(
+      <AdminToolbar
+        leftContent={<span>Filters</span>}
+      >
+        <ComplexChild />
+      </AdminToolbar>
+    );
+
+    expect(screen.getByText('Filters')).toBeTruthy();
+    expect(screen.getByText('Complex')).toBeTruthy();
+    expect(screen.getByText('Action')).toBeTruthy();
+  });
+
+  it('should render with mixed content types', () => {
+    render(
+      <AdminToolbar
+        leftContent={<span>Filters</span>}
+      >
+        <button>Button</button>
+        <input type="text" placeholder="Search" />
+        <select>
+          <option>Option 1</option>
+        </select>
+      </AdminToolbar>
+    );
+
+    expect(screen.getByText('Filters')).toBeTruthy();
+    expect(screen.getByText('Button')).toBeTruthy();
+    expect(screen.getByPlaceholderText('Search')).toBeTruthy();
+  });
+
+  it('should render without leftContent', () => {
+    render(
+      <AdminToolbar>
+        <button>Filter</button>
+      </AdminToolbar>
+    );
+
+    expect(screen.getByText('Filter')).toBeTruthy();
+  });
+
+  it('should render with empty children', () => {
+    render(
+      <AdminToolbar
+        leftContent={<span>Filters</span>}
+      >
+        {null}
+      </AdminToolbar>
+    );
+
+    expect(screen.getByText('Filters')).toBeTruthy();
+  });
+});