add tests

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

@@ -0,0 +1,121 @@
+/**
+ * AdminEmptyState Component Tests
+ * 
+ * Tests for the AdminEmptyState component that displays empty state UI
+ * for admin lists and tables.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AdminEmptyState } from './AdminEmptyState';
+import { describe, it, expect } from 'vitest';
+import { Inbox, Users, AlertCircle } from 'lucide-react';
+
+describe('AdminEmptyState', () => {
+  it('should render with icon, title, and description', () => {
+    render(
+      <AdminEmptyState
+        icon={Inbox}
+        title="No Data Available"
+        description="Get started by creating your first item"
+      />
+    );
+
+    expect(screen.getByText('No Data Available')).toBeTruthy();
+    expect(screen.getByText('Get started by creating your first item')).toBeTruthy();
+  });
+
+  it('should render with minimal props (description optional)', () => {
+    render(
+      <AdminEmptyState
+        icon={Users}
+        title="No Users"
+      />
+    );
+
+    expect(screen.getByText('No Users')).toBeTruthy();
+  });
+
+  it('should render with action button', () => {
+    const actionButton = <button data-testid="action-btn">Create Item</button>;
+
+    render(
+      <AdminEmptyState
+        icon={Inbox}
+        title="Empty List"
+        description="Add some items"
+        action={actionButton}
+      />
+    );
+
+    expect(screen.getByText('Empty List')).toBeTruthy();
+    expect(screen.getByText('Add some items')).toBeTruthy();
+    expect(screen.getByTestId('action-btn')).toBeTruthy();
+    expect(screen.getByText('Create Item')).toBeTruthy();
+  });
+
+  it('should render with different icons', () => {
+    const icons = [Inbox, Users, AlertCircle];
+    
+    icons.forEach((Icon) => {
+      const { container } = render(
+        <AdminEmptyState
+          icon={Icon}
+          title="Test Title"
+        />
+      );
+      
+      // Check that the component renders without errors
+      expect(screen.getByText('Test Title')).toBeTruthy();
+    });
+  });
+
+  it('should render with complex action component', () => {
+    const ComplexAction = () => (
+      <div>
+        <button>Primary Action</button>
+        <button>Secondary Action</button>
+      </div>
+    );
+
+    render(
+      <AdminEmptyState
+        icon={Inbox}
+        title="Complex State"
+        description="Multiple actions available"
+        action={<ComplexAction />}
+      />
+    );
+
+    expect(screen.getByText('Complex State')).toBeTruthy();
+    expect(screen.getByText('Multiple actions available')).toBeTruthy();
+    expect(screen.getByText('Primary Action')).toBeTruthy();
+    expect(screen.getByText('Secondary Action')).toBeTruthy();
+  });
+
+  it('should render with long text content', () => {
+    render(
+      <AdminEmptyState
+        icon={Inbox}
+        title="This is a very long title that might wrap to multiple lines in the UI"
+        description="This is an even longer description that provides detailed information about why the state is empty and what the user should do next"
+      />
+    );
+
+    expect(screen.getByText(/This is a very long title/)).toBeTruthy();
+    expect(screen.getByText(/This is an even longer description/)).toBeTruthy();
+  });
+
+  it('should render with special characters in text', () => {
+    render(
+      <AdminEmptyState
+        icon={Inbox}
+        title="Special & Characters <Test>"
+        description="Quotes 'and' special characters"
+      />
+    );
+
+    expect(screen.getByText(/Special & Characters/)).toBeTruthy();
+    expect(screen.getByText(/Quotes/)).toBeTruthy();
+  });
+});