102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
/**
|
|
* 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();
|
|
});
|
|
});
|