@kadconsulting/dry/dist/next/esm/src/components/Attachments/Attachments.test.js

KAD Reusable Component Library

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 } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Attachments from './Attachments';
import { AllowedFileTypes } from './AttachmentsTypes';
describe('Attachments', () => {
    // Mocked callback function to handle file selection
    const mockOnFilesSelected = jest.fn();
    const defaultProps = {
        onFilesSelected: mockOnFilesSelected,
        fileTypes: [AllowedFileTypes.PNG, AllowedFileTypes.JPG],
        selectedFiles: [],
    };
    beforeEach(() => {
        jest.clearAllMocks();
    });
    // ... add tests for className, id, data-testid, etc.
    it('renders with a dry-prepended className', () => {
        const { container } = render(_jsx(Attachments, { ...defaultProps }));
        expect(container.firstChild).toHaveClass('dry-attachments');
    });
    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(Attachments, { ref: ref, ...defaultProps }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
        };
        render(_jsx(Wrapper, {}));
        await waitFor(() => screen.getByText('Ref was passed!'));
    });
    it('passes a downstream id', () => {
        const id = 'test-id';
        const testId = 'test-subject';
        render(_jsx(Attachments, { ...defaultProps, "data-testid": testId, id: id }));
        expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
    });
    it('passes any downstream className(s)', () => {
        const className = 'first second third';
        const testId = 'test-subject';
        render(_jsx(Attachments, { ...defaultProps, "data-testid": testId, className: className }));
        expect(screen.getByTestId(testId)).toHaveClass('first', 'second', 'third');
    });
    it('passes any downstream inline style(s)', () => {
        const style = { color: 'red' };
        const testId = 'test-subject';
        render(_jsx(Attachments, { ...defaultProps, "data-testid": testId, style: style }));
        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(Attachments, { ...defaultProps, "data-testid": testId, "data-product": testValue }));
        expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
    });
    it('supports downstream @testing-library `screen.getByTestId`', () => {
        const testId = 'test-subject';
        render(_jsx(Attachments, { ...defaultProps, "data-testid": testId }));
        expect(screen.getByTestId(testId)).toBeInTheDocument();
    });
    // Custom tests for Attachments functionalities
    it('opens file dialog when button is clicked', () => {
        render(_jsx(Attachments, { ...defaultProps }));
        const fileInput = screen.getByLabelText(/Upload/i);
        jest.spyOn(fileInput, 'click');
        userEvent.click(screen.getByText('Click to upload'));
        expect(fileInput.click).toHaveBeenCalled();
    });
    it('calls the onFilesSelected prop when files are selected via input', () => {
        render(_jsx(Attachments, { ...defaultProps }));
        const fileInput = screen.getByLabelText(/Upload/i);
        const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
        userEvent.upload(fileInput, file);
        expect(mockOnFilesSelected).toHaveBeenCalledWith([file]);
    });
    it('calls the onFilesSelected prop when files are dropped', () => {
        render(_jsx(Attachments, { ...defaultProps }));
        const dropzone = screen.getByText('Click to upload').parentElement;
        const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
        fireEvent.drop(dropzone, {
            dataTransfer: {
                files: [file],
            },
        });
        expect(mockOnFilesSelected).toHaveBeenCalledWith([file]);
    });
    it('removes file when remove button is clicked', () => {
        const existingFiles = [
            new File(['existing'], 'existing-file.png', { type: 'image/png' }),
        ];
        render(_jsx(Attachments, { ...defaultProps, selectedFiles: existingFiles }));
        userEvent.click(screen.getByText('x'));
        expect(mockOnFilesSelected).toHaveBeenCalledWith([]);
    });
});
//# sourceMappingURL=Attachments.test.js.map