65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
/** @jest-environment jsdom */
|
|
import { h } from 'preact';
|
|
import { fireEvent, render, screen } from '@testing-library/preact';
|
|
import { Modal, ModalContent, ModalFooter } from 'js/components/Modal';
|
|
|
|
describe('Modal', () => {
|
|
it('renders a title and content when open', () => {
|
|
render(
|
|
<Modal title="My Title" isOpen={true}>
|
|
<ModalContent>My Content</ModalContent>
|
|
</Modal>
|
|
);
|
|
expect(screen.queryByRole('banner')).toBeVisible();
|
|
expect(screen.queryByRole('banner')).toHaveTextContent('My Title');
|
|
expect(screen.queryByText('My Content')).toBeVisible();
|
|
|
|
expect(screen.queryByRole('img')).not.toBeInTheDocument();
|
|
expect(screen.queryByTitle('Close')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render a title and content when not open', () => {
|
|
render(
|
|
<Modal title="My Title" isOpen={false}>
|
|
<ModalContent>My Content</ModalContent>
|
|
</Modal>
|
|
);
|
|
expect(screen.queryByRole('banner')).not.toBeInTheDocument();
|
|
expect(screen.queryByText('My Content')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('renders a footer', () => {
|
|
render(
|
|
<Modal title="My Title" isOpen={true}>
|
|
<ModalContent>My Content</ModalContent>
|
|
<ModalFooter>My Footer</ModalFooter>
|
|
</Modal>
|
|
);
|
|
expect(screen.queryByRole('banner')).toHaveTextContent('My Title');
|
|
expect(screen.queryByText('My Content')).toBeVisible();
|
|
expect(screen.getByRole('contentinfo')).toHaveTextContent('My Footer');
|
|
});
|
|
|
|
it('can have a close button', () => {
|
|
const onClose = jest.fn();
|
|
render(
|
|
<Modal title="My Title" isOpen={true} onClose={onClose}>
|
|
<ModalContent>My Content</ModalContent>
|
|
</Modal>
|
|
);
|
|
const button = screen.getByTitle('Close');
|
|
expect(button).toBeVisible();
|
|
fireEvent.click(button);
|
|
expect(onClose).toHaveBeenCalledWith(true);
|
|
});
|
|
|
|
it('can have an icon', () => {
|
|
render(
|
|
<Modal title="My Title" isOpen={true} icon="warning">
|
|
<ModalContent>My Content</ModalContent>
|
|
</Modal>
|
|
);
|
|
expect(screen.getByRole('img')).toBeVisible();
|
|
});
|
|
});
|