add tests

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

@@ -0,0 +1,101 @@
+/**
+ * AdminDangerZonePanel Component Tests
+ *
+ * Tests for the AdminDangerZonePanel component that wraps the DangerZone UI component.
+ * Tests cover rendering, props, and interaction behavior.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AdminDangerZonePanel } from './AdminDangerZonePanel';
+import { describe, it, expect, vi } from 'vitest';
+
+// Mock the DangerZone UI component
+vi.mock('@/ui/DangerZone', () => ({
+  DangerZone: ({ title, description, children }: any) => (
+    <div data-testid="danger-zone">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      {children}
+    </div>
+  ),
+}));
+
+describe('AdminDangerZonePanel', () => {
+  it('should render with title and description', () => {
+    render(
+      <AdminDangerZonePanel
+        title="Delete Account"
+        description="This action cannot be undone"
+      >
+        <button>Delete</button>
+      </AdminDangerZonePanel>
+    );
+
+    expect(screen.getByText('Delete Account')).toBeTruthy();
+    expect(screen.getByText('This action cannot be undone')).toBeTruthy();
+  });
+
+  it('should render children content', () => {
+    render(
+      <AdminDangerZonePanel
+        title="Danger Zone"
+        description="Proceed with caution"
+      >
+        <button data-testid="danger-button">Delete</button>
+      </AdminDangerZonePanel>
+    );
+
+    expect(screen.getByTestId('danger-button')).toBeTruthy();
+    expect(screen.getByText('Delete')).toBeTruthy();
+  });
+
+  it('should render with minimal props', () => {
+    render(
+      <AdminDangerZonePanel title="Danger Zone" description="">
+        <button>Proceed</button>
+      </AdminDangerZonePanel>
+    );
+
+    expect(screen.getByText('Danger Zone')).toBeTruthy();
+    expect(screen.getByText('Proceed')).toBeTruthy();
+  });
+
+  it('should render multiple children', () => {
+    render(
+      <AdminDangerZonePanel
+        title="Multiple Actions"
+        description="Select an action"
+      >
+        <button>Option 1</button>
+        <button>Option 2</button>
+        <button>Option 3</button>
+      </AdminDangerZonePanel>
+    );
+
+    expect(screen.getByText('Option 1')).toBeTruthy();
+    expect(screen.getByText('Option 2')).toBeTruthy();
+    expect(screen.getByText('Option 3')).toBeTruthy();
+  });
+
+  it('should render with complex children components', () => {
+    const ComplexChild = () => (
+      <div>
+        <span>Complex</span>
+        <button>Click me</button>
+      </div>
+    );
+
+    render(
+      <AdminDangerZonePanel
+        title="Complex Content"
+        description="With nested elements"
+      >
+        <ComplexChild />
+      </AdminDangerZonePanel>
+    );
+
+    expect(screen.getByText('Complex')).toBeTruthy();
+    expect(screen.getByText('Click me')).toBeTruthy();
+  });
+});