add tests

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

@@ -0,0 +1,131 @@
+/**
+ * AdminSectionHeader Component Tests
+ * 
+ * Tests for the AdminSectionHeader component that provides a semantic header
+ * for sections within admin pages.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AdminSectionHeader } from './AdminSectionHeader';
+import { describe, it, expect, vi } from 'vitest';
+
+// Mock the SectionHeader component
+vi.mock('@/ui/SectionHeader', () => ({
+  SectionHeader: ({ title, description, actions, variant }: any) => (
+    <div data-testid="section-header" data-variant={variant}>
+      <h2>{title}</h2>
+      {description && <p>{description}</p>}
+      {actions && <div data-testid="actions">{actions}</div>}
+    </div>
+  ),
+}));
+
+describe('AdminSectionHeader', () => {
+  it('should render with title only', () => {
+    render(
+      <AdminSectionHeader title="User Statistics" />
+    );
+
+    expect(screen.getByText('User Statistics')).toBeTruthy();
+  });
+
+  it('should render with title and description', () => {
+    render(
+      <AdminSectionHeader
+        title="User Statistics"
+        description="Overview of user activity and engagement"
+      />
+    );
+
+    expect(screen.getByText('User Statistics')).toBeTruthy();
+    expect(screen.getByText('Overview of user activity and engagement')).toBeTruthy();
+  });
+
+  it('should render with title, description, and actions', () => {
+    const actions = <button data-testid="action-btn">Refresh</button>;
+
+    render(
+      <AdminSectionHeader
+        title="User Statistics"
+        description="Overview of user activity"
+        actions={actions}
+      />
+    );
+
+    expect(screen.getByText('User Statistics')).toBeTruthy();
+    expect(screen.getByText('Overview of user activity')).toBeTruthy();
+    expect(screen.getByTestId('action-btn')).toBeTruthy();
+    expect(screen.getByText('Refresh')).toBeTruthy();
+  });
+
+  it('should render with multiple action buttons', () => {
+    const actions = (
+      <div>
+        <button>Export</button>
+        <button>Filter</button>
+        <button>Sort</button>
+      </div>
+    );
+
+    render(
+      <AdminSectionHeader
+        title="Data Table"
+        description="Manage your data"
+        actions={actions}
+      />
+    );
+
+    expect(screen.getByText('Data Table')).toBeTruthy();
+    expect(screen.getByText('Manage your data')).toBeTruthy();
+    expect(screen.getByText('Export')).toBeTruthy();
+    expect(screen.getByText('Filter')).toBeTruthy();
+    expect(screen.getByText('Sort')).toBeTruthy();
+  });
+
+  it('should render with complex actions component', () => {
+    const ComplexActions = () => (
+      <div>
+        <button>Primary</button>
+        <button>Secondary</button>
+      </div>
+    );
+
+    render(
+      <AdminSectionHeader
+        title="Complex Section"
+        description="With multiple actions"
+        actions={<ComplexActions />}
+      />
+    );
+
+    expect(screen.getByText('Complex Section')).toBeTruthy();
+    expect(screen.getByText('With multiple actions')).toBeTruthy();
+    expect(screen.getByText('Primary')).toBeTruthy();
+    expect(screen.getByText('Secondary')).toBeTruthy();
+  });
+
+  it('should render with long title and description', () => {
+    render(
+      <AdminSectionHeader
+        title="This is a very long section header title that might wrap to multiple lines in the UI"
+        description="This is an even longer description that provides detailed information about the section content and what users can expect to find here"
+      />
+    );
+
+    expect(screen.getByText(/This is a very long section header title/)).toBeTruthy();
+    expect(screen.getByText(/This is an even longer description/)).toBeTruthy();
+  });
+
+  it('should render with special characters in text', () => {
+    render(
+      <AdminSectionHeader
+        title="Special & Characters <Test>"
+        description="Quotes 'and' special characters"
+      />
+    );
+
+    expect(screen.getByText(/Special & Characters/)).toBeTruthy();
+    expect(screen.getByText(/Quotes/)).toBeTruthy();
+  });
+});