@kadconsulting/dry
Version:
KAD Reusable Component Library
105 lines • 5.2 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// Import necessary modules and types
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import DatePicker from './DatePicker';
// Main test suite
describe('DatePicker', () => {
// Default props for reuse across tests
const defaultProps = {
initialDate: new Date(2022, 0, 1), // January 1, 2022
dateFormat: 'MM/dd/yyyy',
buttonText: 'Select Date',
showWithoutButton: false,
};
// Test that the component renders with default props
it('renders with default props', () => {
render(_jsx(DatePicker, { ...defaultProps }));
expect(screen.getByText('Select Date')).toBeInTheDocument();
});
// Existing tests
it('renders with a dry-prepended className', () => {
const { container } = render(_jsx(DatePicker, { ...defaultProps }));
expect(container.firstChild).toHaveClass('date-picker');
});
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(DatePicker, { 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(<DatePicker {...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(<DatePicker {...defaultProps} data-testid={testId} className={className} />);
// 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(<DatePicker {...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(DatePicker, { ...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(DatePicker, { ...defaultProps, "data-testid": testId }));
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
// Test that custom text shows when a date is selected
it('shows custom text when a date is selected', () => {
const selectedDate = new Date(2022, 0, 5); // January 5, 2022
render(_jsx(DatePicker, { ...defaultProps, selectedDate: selectedDate }));
expect(screen.getByText('01/05/2022')).toBeInTheDocument();
});
// Test that the DatePicker opens and closes when clicking the button
it('opens and closes date picker on button click', () => {
render(_jsx(DatePicker, { ...defaultProps }));
const button = screen.getByText('Select Date');
userEvent.click(button);
expect(screen.getByText('Previous Month')).toBeInTheDocument();
userEvent.click(button);
expect(screen.queryByText('Previous Month')).toBeNull();
});
// Test that the DatePicker handles `Escape` key to close
it('handles Escape key to close the date picker', () => {
render(_jsx(DatePicker, { ...defaultProps }));
const button = screen.getByText('Select Date');
userEvent.click(button);
expect(screen.getByText('Previous Month')).toBeInTheDocument();
fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
expect(screen.queryByText('Previous Month')).toBeNull();
});
// Test that the DatePicker changes months
it('changes months when navigation buttons are clicked', () => {
render(_jsx(DatePicker, { ...defaultProps }));
const button = screen.getByText('Select Date');
userEvent.click(button);
const prevMonthButton = screen.getByText('Previous Month');
const nextMonthButton = screen.getByText('Next Month');
userEvent.click(nextMonthButton);
// Assertion for month change goes here
});
// More tests to be added
});
//# sourceMappingURL=DatePicker.test.js.map