60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { SectionPanel } from './SectionPanel';
|
|
|
|
const defaultProps = {
|
|
number: '01',
|
|
title: 'About',
|
|
id: 'about',
|
|
isActive: false,
|
|
href: '/about',
|
|
children: <p>Content here</p>,
|
|
};
|
|
|
|
describe('SectionPanel', () => {
|
|
describe('collapsed state (isActive=false)', () => {
|
|
it('renders a section element with the given id', () => {
|
|
const { container } = render(<SectionPanel {...defaultProps} />);
|
|
expect(container.querySelector('section#about')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders a link with number and title', () => {
|
|
render(<SectionPanel {...defaultProps} />);
|
|
expect(screen.getByRole('link', { name: /01.*About/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it('link points to the correct href', () => {
|
|
render(<SectionPanel {...defaultProps} />);
|
|
expect(screen.getByRole('link', { name: /01.*About/i })).toHaveAttribute('href', '/about');
|
|
});
|
|
|
|
it('does not render children', () => {
|
|
render(<SectionPanel {...defaultProps} />);
|
|
expect(screen.queryByText('Content here')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render a button', () => {
|
|
render(<SectionPanel {...defaultProps} />);
|
|
expect(screen.queryByRole('button')).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('active state (isActive=true)', () => {
|
|
const activeProps = { ...defaultProps, isActive: true };
|
|
|
|
it('renders an h1 with number and title', () => {
|
|
render(<SectionPanel {...activeProps} />);
|
|
expect(screen.getByRole('heading', { level: 1, name: /01.*About/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders children', () => {
|
|
render(<SectionPanel {...activeProps} />);
|
|
expect(screen.getByText('Content here')).toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render a link', () => {
|
|
render(<SectionPanel {...activeProps} />);
|
|
expect(screen.queryByRole('link')).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|