@kadconsulting/dry
Version:
KAD Reusable Component Library
107 lines • 6.05 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Modal from './Modal';
describe('Modal', () => {
const defaultProps = {
isOpen: false,
onClose: () => { },
children: _jsx("div", { children: "Test Children" }),
};
it('renders when isOpen is true and does not render when false', () => {
const { rerender } = render(_jsx(Modal, { ...defaultProps, isOpen: true, onClose: () => { } }));
expect(screen.getByRole('dialog')).toBeInTheDocument();
rerender(_jsx(Modal, { ...defaultProps, isOpen: false, onClose: () => { } }));
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
it('renders header and sub-header text', () => {
render(_jsx(Modal, { ...defaultProps, isOpen: true, onClose: () => { }, headerText: 'Header', subHeaderText: 'Subheader' }));
expect(screen.getByText('Header')).toBeInTheDocument();
expect(screen.getByText('Subheader')).toBeInTheDocument();
});
it('renders left and right buttons with properties', () => {
render(_jsx(Modal, { ...defaultProps, isOpen: true, onClose: () => { }, leftButtonText: 'Left', leftButtonType: 'primary', rightButtonText: 'Right', rightButtonType: 'secondary' }));
const leftButton = screen.getByText('Left');
const rightButton = screen.getByText('Right');
expect(leftButton).toBeInTheDocument();
expect(rightButton).toBeInTheDocument();
expect(leftButton).toHaveClass('primary');
expect(rightButton).toHaveClass('secondary');
});
it('handles left and right button clicks', () => {
const leftClick = jest.fn();
const rightClick = jest.fn();
render(_jsx(Modal, { ...defaultProps, isOpen: true, onClose: () => { }, leftButtonHandler: leftClick, rightButtonHandler: rightClick, leftButtonText: 'Left', rightButtonText: 'Right' }));
userEvent.click(screen.getByText('Left'));
userEvent.click(screen.getByText('Right'));
expect(leftClick).toHaveBeenCalledTimes(1);
expect(rightClick).toHaveBeenCalledTimes(1);
});
it('closes the modal when the close button is clicked', () => {
const onClose = jest.fn();
render(_jsx(Modal, { ...defaultProps, isOpen: true, onClose: onClose }));
userEvent.click(screen.getByRole('button', { name: /close/i }));
expect(onClose).toHaveBeenCalledTimes(1);
});
it('renders children', () => {
render(_jsx(Modal, { ...defaultProps, isOpen: true, onClose: () => { }, children: _jsx("div", { children: "Child Element" }) }));
expect(screen.getByText('Child Element')).toBeInTheDocument();
});
it('forwards passProps', () => {
render(_jsx(Modal, { ...defaultProps, isOpen: true, onClose: () => { }, passProps: { 'aria-label': 'ModalLabel' } }));
expect(screen.getByRole('dialog')).toHaveAttribute('aria-label', 'ModalLabel');
});
it('renders with a dry-prepended className', () => {
const { container } = render(_jsx(Modal, { ...defaultProps, isOpen: true, onClose: () => { } }));
expect(container.firstChild).toHaveClass('dry-modal');
});
it('passes a ref to its outermost element', async () => {
const Wrapper = () => {
const ref = useRef(null);
const [refWasPassed, setRefWasPassed] = useState(false);
useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (_jsxs(_Fragment, { children: [_jsx(Modal, { ...defaultProps, ref: ref, isOpen: true, onClose: () => { } }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
await waitFor(() => screen.getByText('Ref was passed!'));
});
it('renders children', () => {
render(_jsx(Modal, { ...defaultProps, isOpen: true, children: _jsx("div", { children: "Child Element" }) }));
expect(screen.getByText('Child Element')).toBeInTheDocument();
});
it('passes a downstream id', () => {
const id = 'test-id';
const testId = 'test-subject';
render(_jsx(Modal, { ...defaultProps, "data-testid": testId, id: id, isOpen: true, onClose: () => { } }));
expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
});
it('passes any downstream className(s)', () => {
const className = 'first second third';
const testId = 'test-subject';
render(_jsx(Modal, { ...defaultProps, "data-testid": testId, className: className, isOpen: true, onClose: () => { } }));
expect(screen.getByTestId(testId)).toHaveClass('first');
expect(screen.getByTestId(testId)).toHaveClass('second');
expect(screen.getByTestId(testId)).toHaveClass('third');
});
it('passes any downstream inline style(s)', () => {
const style = { color: 'red' };
const testId = 'test-subject';
render(_jsx(Modal, { ...defaultProps, "data-testid": testId, style: style, isOpen: true, onClose: () => { } }));
expect(screen.getByTestId(testId)).toHaveStyle('color: red');
});
it('passes any downstream data-* attribute(s)', () => {
const testId = 'test-subject';
const testValue = 'product-1234-abcd-5678-efgh';
render(_jsx(Modal, { ...defaultProps, "data-testid": testId, "data-product": testValue, isOpen: true, onClose: () => { } }));
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
it('supports downstream @testing-library `screen.getByTestId`', () => {
const testId = 'test-subject';
render(_jsx(Modal, { ...defaultProps, "data-testid": testId, isOpen: true, onClose: () => { } }));
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
});
//# sourceMappingURL=Modal.test.js.map