146 lines
3.6 KiB
TypeScript
146 lines
3.6 KiB
TypeScript
/**
|
|
* AdminToolbar Component Tests
|
|
*
|
|
* Tests for the AdminToolbar component that provides a semantic toolbar
|
|
* for admin pages with filters, search, and secondary actions.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { AdminToolbar } from './AdminToolbar';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
|
|
// Mock the ControlBar component
|
|
vi.mock('@/ui/ControlBar', () => ({
|
|
ControlBar: ({ leftContent, children }: any) => (
|
|
<div data-testid="control-bar">
|
|
{leftContent && <div data-testid="left-content">{leftContent}</div>}
|
|
<div data-testid="children">{children}</div>
|
|
</div>
|
|
),
|
|
}));
|
|
|
|
describe('AdminToolbar', () => {
|
|
it('should render with children only', () => {
|
|
render(
|
|
<AdminToolbar>
|
|
<button>Filter</button>
|
|
</AdminToolbar>
|
|
);
|
|
|
|
expect(screen.getByText('Filter')).toBeTruthy();
|
|
});
|
|
|
|
it('should render with leftContent and children', () => {
|
|
render(
|
|
<AdminToolbar
|
|
leftContent={<span>Left Content</span>}
|
|
>
|
|
<button>Filter</button>
|
|
</AdminToolbar>
|
|
);
|
|
|
|
expect(screen.getByText('Left Content')).toBeTruthy();
|
|
expect(screen.getByText('Filter')).toBeTruthy();
|
|
});
|
|
|
|
it('should render with multiple children', () => {
|
|
render(
|
|
<AdminToolbar
|
|
leftContent={<span>Filters</span>}
|
|
>
|
|
<button>Filter 1</button>
|
|
<button>Filter 2</button>
|
|
<button>Filter 3</button>
|
|
</AdminToolbar>
|
|
);
|
|
|
|
expect(screen.getByText('Filters')).toBeTruthy();
|
|
expect(screen.getByText('Filter 1')).toBeTruthy();
|
|
expect(screen.getByText('Filter 2')).toBeTruthy();
|
|
expect(screen.getByText('Filter 3')).toBeTruthy();
|
|
});
|
|
|
|
it('should render with complex leftContent', () => {
|
|
const ComplexLeftContent = () => (
|
|
<div>
|
|
<span>Complex</span>
|
|
<button>Action</button>
|
|
</div>
|
|
);
|
|
|
|
render(
|
|
<AdminToolbar
|
|
leftContent={<ComplexLeftContent />}
|
|
>
|
|
<button>Filter</button>
|
|
</AdminToolbar>
|
|
);
|
|
|
|
expect(screen.getByText('Complex')).toBeTruthy();
|
|
expect(screen.getByText('Action')).toBeTruthy();
|
|
expect(screen.getByText('Filter')).toBeTruthy();
|
|
});
|
|
|
|
it('should render with complex children', () => {
|
|
const ComplexChild = () => (
|
|
<div>
|
|
<span>Complex</span>
|
|
<button>Action</button>
|
|
</div>
|
|
);
|
|
|
|
render(
|
|
<AdminToolbar
|
|
leftContent={<span>Filters</span>}
|
|
>
|
|
<ComplexChild />
|
|
</AdminToolbar>
|
|
);
|
|
|
|
expect(screen.getByText('Filters')).toBeTruthy();
|
|
expect(screen.getByText('Complex')).toBeTruthy();
|
|
expect(screen.getByText('Action')).toBeTruthy();
|
|
});
|
|
|
|
it('should render with mixed content types', () => {
|
|
render(
|
|
<AdminToolbar
|
|
leftContent={<span>Filters</span>}
|
|
>
|
|
<button>Button</button>
|
|
<input type="text" placeholder="Search" />
|
|
<select>
|
|
<option>Option 1</option>
|
|
</select>
|
|
</AdminToolbar>
|
|
);
|
|
|
|
expect(screen.getByText('Filters')).toBeTruthy();
|
|
expect(screen.getByText('Button')).toBeTruthy();
|
|
expect(screen.getByPlaceholderText('Search')).toBeTruthy();
|
|
});
|
|
|
|
it('should render without leftContent', () => {
|
|
render(
|
|
<AdminToolbar>
|
|
<button>Filter</button>
|
|
</AdminToolbar>
|
|
);
|
|
|
|
expect(screen.getByText('Filter')).toBeTruthy();
|
|
});
|
|
|
|
it('should render with empty children', () => {
|
|
render(
|
|
<AdminToolbar
|
|
leftContent={<span>Filters</span>}
|
|
>
|
|
{null}
|
|
</AdminToolbar>
|
|
);
|
|
|
|
expect(screen.getByText('Filters')).toBeTruthy();
|
|
});
|
|
});
|