@kadconsulting/dry
Version:
KAD Reusable Component Library
160 lines • 7 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, fireEvent, within, } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import AttachmentsModal from './AttachmentsModal';
import { AllowedFileTypes } from '../Attachments/AttachmentsTypes';
// Mock the Attachments component
jest.mock('../Attachments/Attachments', () => {
return jest.fn(({ onFilesSelected }) => (_jsx("div", { "data-testid": 'mock-attachments', children: _jsx("input", { type: 'file', onChange: (e) => onFilesSelected(Array.from(e.target.files || [])) }) })));
});
describe('AttachmentsModal', () => {
const defaultProps = {
isOpen: true,
closeModal: jest.fn(),
onSubmit: jest.fn(),
id: 'test-attachments-modal',
};
beforeEach(() => {
jest.clearAllMocks();
});
// ARRANGE
it('renders when isOpen is true and does not render when false', () => {
// ACT
const { rerender } = render(_jsx(AttachmentsModal, { ...defaultProps }));
// ASSERT
expect(screen.getByRole('dialog')).toBeInTheDocument();
// ACT
rerender(_jsx(AttachmentsModal, { ...defaultProps, isOpen: false }));
// ASSERT
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
// ARRANGE
it('calls closeModal when cancel button is clicked', () => {
// ACT
render(_jsx(AttachmentsModal, { ...defaultProps }));
const cancelButton = screen.getByText('Cancel');
fireEvent.click(cancelButton);
// ASSERT
expect(defaultProps.closeModal).toHaveBeenCalledTimes(1);
});
// ARRANGE
it('calls onSubmit with selected files when "Attach files" button is clicked', async () => {
// ACT
render(_jsx(AttachmentsModal, { ...defaultProps }));
const fileInput = within(screen.getByTestId('mock-attachments')).getByRole('textbox');
const file = new File(['hello'], 'hello.png', { type: 'image/png' });
await userEvent.upload(fileInput, file);
const attachButton = screen.getByText('Attach files');
fireEvent.click(attachButton);
// ASSERT
expect(defaultProps.onSubmit).toHaveBeenCalledWith([file]);
expect(defaultProps.closeModal).toHaveBeenCalledTimes(1);
});
// ARRANGE
it('clears selected files when modal is closed and reopened', async () => {
// ACT
const { rerender } = render(_jsx(AttachmentsModal, { ...defaultProps }));
const fileInput = within(screen.getByTestId('mock-attachments')).getByRole('textbox');
const file = new File(['hello'], 'hello.png', { type: 'image/png' });
await userEvent.upload(fileInput, file);
// Close the modal
rerender(_jsx(AttachmentsModal, { ...defaultProps, isOpen: false }));
// Reopen the modal
rerender(_jsx(AttachmentsModal, { ...defaultProps, isOpen: true }));
const attachButton = screen.getByText('Attach files');
fireEvent.click(attachButton);
// ASSERT
expect(defaultProps.onSubmit).toHaveBeenCalledWith([]);
});
// ARRANGE
it('renders with correct header and subheader text', () => {
// ACT
render(_jsx(AttachmentsModal, { ...defaultProps }));
// ASSERT
expect(screen.getByText('Upload and attach files')).toBeInTheDocument();
expect(screen.getByText('Upload and attach files to this project.')).toBeInTheDocument();
});
// ARRANGE
it('passes correct file types to Attachments component', () => {
// ACT
render(_jsx(AttachmentsModal, { ...defaultProps }));
const mockAttachments = screen.getByTestId('mock-attachments');
// ASSERT
expect(mockAttachments).toHaveAttribute('filetypes', JSON.stringify([
AllowedFileTypes.SVG,
AllowedFileTypes.PNG,
AllowedFileTypes.JPG,
AllowedFileTypes.GIF,
]));
});
// ARRANGE
it('renders with a dry-prepended className', () => {
// ACT
const { container } = render(_jsx(AttachmentsModal, { ...defaultProps }));
// ASSERT
expect(container.firstChild).toHaveClass('dry-attachments-modal');
});
// ARRANGE
it('passes a ref to its outermost element', async () => {
// ACT
const Wrapper = () => {
const ref = useRef(null);
const [refWasPassed, setRefWasPassed] = useState(false);
useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (_jsxs(_Fragment, { children: [_jsx(AttachmentsModal, { ref: ref, ...defaultProps }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
// ASSERT
await waitFor(() => screen.getByText('Ref was passed!'));
});
// ARRANGE
it('passes a downstream id', () => {
// ACT
const id = 'test-id';
const testId = 'test-subject';
render(_jsx(AttachmentsModal, { ...defaultProps, "data-testid": testId, id: id }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
});
// ARRANGE
it('passes any downstream className(s)', () => {
// ACT
const className = 'first second third';
const testId = 'test-subject';
render(_jsx(AttachmentsModal, { ...defaultProps, "data-testid": testId, className: className }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveClass('first');
expect(screen.getByTestId(testId)).toHaveClass('second');
expect(screen.getByTestId(testId)).toHaveClass('third');
});
// ARRANGE
it('passes any downstream data-* attribute(s)', () => {
// ACT
const testId = 'test-subject';
const testValue = 'product-1234-abcd-5678-efgh';
render(_jsx(AttachmentsModal, { ...defaultProps, "data-testid": testId, "data-product": testValue }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
// ARRANGE
it('supports downstream @testing-library `screen.getByTestId`', () => {
// ACT
const testId = 'test-subject';
render(_jsx(AttachmentsModal, { ...defaultProps, "data-testid": testId }));
// ASSERT
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
// ARRANGE
it('disables "Attach files" button and shows note when under development', () => {
// ACT
render(_jsx(AttachmentsModal, { ...defaultProps }));
const attachButton = screen.getByText('Attach files');
// ASSERT
expect(attachButton).toBeDisabled();
expect(screen.getByText('Under development - coming soon!')).toBeInTheDocument();
});
});
//# sourceMappingURL=AttachmentsModal.test.js.map