hamid
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { ThemeProvider } from '../../../theme';
|
|
import FormSection from './FormSection';
|
|
|
|
function renderSection(props: Partial<React.ComponentProps<typeof FormSection>> = {}) {
|
|
return render(
|
|
<ThemeProvider>
|
|
<FormSection title="Identity" {...props}>
|
|
<input aria-label="national id" />
|
|
</FormSection>
|
|
</ThemeProvider>,
|
|
);
|
|
}
|
|
|
|
describe('<FormSection/> component', () => {
|
|
it('names the group with a heading and renders its fields', () => {
|
|
renderSection({ description: 'Who you are' });
|
|
expect(screen.getByRole('heading', { name: 'Identity' })).toBeInTheDocument();
|
|
expect(screen.getByText('Who you are')).toBeInTheDocument();
|
|
expect(screen.getByLabelText('national id')).toBeInTheDocument();
|
|
});
|
|
|
|
it('marks a skippable group as optional instead of showing its status', () => {
|
|
// The whole point of the optional marker is that it wins the slot — a completion count on a
|
|
// group nobody has to fill in is noise.
|
|
renderSection({ optional: true, optionalLabel: 'Optional', status: <span>0 of 3</span> });
|
|
expect(screen.getByText('Optional')).toBeInTheDocument();
|
|
expect(screen.queryByText('0 of 3')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('shows the status line on a required group', () => {
|
|
renderSection({ status: <span>2 of 3</span> });
|
|
expect(screen.getByText('2 of 3')).toBeInTheDocument();
|
|
});
|
|
});
|