@kadconsulting/dry/dist/src/components/DateInputPicker/DateInputPicker.test.js

KAD Reusable Component Library

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
// // CLI Version 1.0.1
// Component Version 1.0.0
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import DateInputPicker from './DateInputPicker';
describe('DateInputPicker', () => {
    const defaultProps = {
        onChange: jest.fn(),
    };
    it('renders with a dry-prepended className', () => {
        // ARRANGE
        const { container } = render(_jsx(DateInputPicker, { ...defaultProps }));
        // ASSERT
        expect(container.firstChild).toHaveClass('date-input-picker');
    });
    it('passes a ref to its outermost element', async () => {
        // ARRANGE
        const Wrapper = () => {
            const ref = useRef(null);
            const [refWasPassed, setRefWasPassed] = useState(false);
            useEffect(() => {
                setRefWasPassed(!!ref.current);
            }, []);
            return (_jsxs(_Fragment, { children: [_jsx(DateInputPicker, { ref: ref, ...defaultProps }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
        };
        render(_jsx(Wrapper, {}));
        // ASSERT
        await waitFor(() => screen.getByText('Ref was passed!'));
    });
    it('passes a downstream id', () => {
        // ARRANGE
        const id = 'test-id';
        const testId = 'test-subject';
        // ACT
        render(_jsx(DateInputPicker, { "data-testid": testId, id: id, ...defaultProps }));
        // ASSERT
        expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
    });
    it('passes any downstream className(s)', () => {
        // ARRANGE
        const className = 'first second third';
        const testId = 'test-subject';
        // ACT
        render(_jsx(DateInputPicker, { "data-testid": testId, className: className, ...defaultProps }));
        // ASSERT
        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)', () => {
        // ARRANGE
        const style = { color: 'red' };
        const testId = 'test-subject';
        // ACT
        render(_jsx(DateInputPicker, { "data-testid": testId, style: style, ...defaultProps }));
        // ASSERT
        expect(screen.getByTestId(testId)).toHaveStyle('color: red');
    });
    it('passes any downstream data-* attribute(s)', () => {
        // ARRANGE
        const testId = 'test-subject';
        const testValue = 'product-1234-abcd-5678-efgh';
        // ACT
        render(_jsx(DateInputPicker, { "data-testid": testId, "data-product": testValue, ...defaultProps }));
        // ASSERT
        expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
    });
    it('supports downstream @testing-library `screen.getByTestId`', () => {
        // ARRANGE
        const testId = 'test-subject';
        // ACT
        render(_jsx(DateInputPicker, { "data-testid": testId, ...defaultProps }));
        // ASSERT
        expect(screen.getByTestId(testId)).toBeInTheDocument();
    });
    it('renders an input element of type date', () => {
        // ARRANGE
        render(_jsx(DateInputPicker, { ...defaultProps }));
        // ASSERT
        expect(screen.getByRole('textbox', { type: 'date' })).toBeInTheDocument();
    });
    it('calls onChange when a date is selected', () => {
        // ARRANGE
        const onChange = jest.fn();
        render(_jsx(DateInputPicker, { ...defaultProps, onChange: onChange }));
        const input = screen.getByRole('textbox', { type: 'date' });
        // ACT
        fireEvent.change(input, { target: { value: '2023-07-26' } });
        // ASSERT
        expect(onChange).toHaveBeenCalledWith(expect.any(Date));
    });
    it('formats the date correctly when a value is provided', () => {
        // ARRANGE
        const value = '2023-07-26';
        render(_jsx(DateInputPicker, { ...defaultProps, value: value }));
        const input = screen.getByRole('textbox', { type: 'date' });
        // ASSERT
        expect(input).toHaveValue('2023-07-26');
    });
    it('respects the minDate prop', () => {
        // ARRANGE
        const minDate = '2023-01-01';
        render(_jsx(DateInputPicker, { ...defaultProps, minDate: minDate }));
        const input = screen.getByRole('textbox', { type: 'date' });
        // ASSERT
        expect(input).toHaveAttribute('min', '2023-01-01');
    });
    it('respects the maxDate prop', () => {
        // ARRANGE
        const maxDate = '2023-12-31';
        render(_jsx(DateInputPicker, { ...defaultProps, maxDate: maxDate }));
        const input = screen.getByRole('textbox', { type: 'date' });
        // ASSERT
        expect(input).toHaveAttribute('max', '2023-12-31');
    });
    it('handles null value correctly', () => {
        // ARRANGE
        render(_jsx(DateInputPicker, { ...defaultProps, value: null }));
        const input = screen.getByRole('textbox', { type: 'date' });
        // ASSERT
        expect(input).toHaveValue('');
    });
    it('handles invalid date input', () => {
        // ARRANGE
        const onChange = jest.fn();
        render(_jsx(DateInputPicker, { ...defaultProps, onChange: onChange }));
        const input = screen.getByRole('textbox', { type: 'date' });
        // ACT
        fireEvent.change(input, { target: { value: 'invalid-date' } });
        // ASSERT
        expect(onChange).toHaveBeenCalledWith(null);
    });
});
//# sourceMappingURL=DateInputPicker.test.js.map