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