53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import React from 'react';
|
|
|
|
import { PageHead } from './PageHead';
|
|
|
|
describe('PageHead', () => {
|
|
it('renders the heading and caption', () => {
|
|
render(<PageHead caption="Test Caption" heading="Test Heading" />);
|
|
// Both layouts are rendered (one hidden), so we use getAllByText
|
|
expect(screen.getAllByText('Test Heading')[0]).toBeInTheDocument();
|
|
expect(screen.getByText('Test Caption')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders breadcrumbs when provided', () => {
|
|
render(<PageHead breadcrumbs={<div>My Breadcrumbs</div>} heading="Test" />);
|
|
expect(screen.getByText('My Breadcrumbs')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders addons when provided', () => {
|
|
render(
|
|
<PageHead
|
|
addonLeft={<div>Left Addon</div>}
|
|
addonRight={<div>Right Addon</div>}
|
|
heading="Test"
|
|
/>
|
|
);
|
|
// Addons are rendered in both layouts
|
|
expect(screen.getAllByText('Left Addon')[0]).toBeInTheDocument();
|
|
expect(screen.getAllByText('Right Addon')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
it('applies the correct classes for the strategy', () => {
|
|
render(<PageHead heading="Test" strategy="always-collapsed-fixed" />);
|
|
const header = screen.getByRole('banner');
|
|
expect(header).toHaveClass('fixed');
|
|
expect(header).not.toHaveClass('sticky');
|
|
});
|
|
|
|
it('reserves flow space below the out-of-flow bar for always-collapsed strategies', () => {
|
|
render(<PageHead heading="Test" strategy="always-collapsed-fixed" />);
|
|
const spacer = screen.getByRole('banner').nextElementSibling;
|
|
expect(spacer).not.toBeNull();
|
|
// The spacer is an invisible copy of the bar so it reserves the exact height.
|
|
expect(spacer).toHaveClass('invisible');
|
|
expect(spacer).toHaveAttribute('aria-hidden', 'true');
|
|
});
|
|
|
|
it('does not add a spacer for in-flow strategies', () => {
|
|
render(<PageHead heading="Test" strategy="collapsible-sticky" />);
|
|
expect(screen.getByRole('banner').nextElementSibling).toBeNull();
|
|
});
|
|
});
|