@kadconsulting/dry
Version:
KAD Reusable Component Library
150 lines • 6.39 kB
JavaScript
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 React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import TimePicker from './TimePicker';
import { act } from 'react-dom/test-utils';
describe('TimePicker', () => {
it('renders with a dry-prepended className', () => {
// ARRANGE
const { container } = render(_jsx(TimePicker, { value: '', onChange: () => { } }));
// ASSERT
expect(container.firstChild).toHaveClass('dry-timepicker');
});
it('passes a ref to its outermost element', async () => {
// ARRANGE
const Wrapper = () => {
const ref = React.useRef(null);
const [refWasPassed, setRefWasPassed] = React.useState(false);
React.useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (_jsxs(_Fragment, { children: [_jsx(TimePicker, { ref: ref, value: '', onChange: () => { } }), 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(TimePicker, { "data-testid": testId, id: id, value: '', onChange: () => { } }));
// 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(TimePicker, { "data-testid": testId, className: className, value: '', onChange: () => { } }));
// 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(TimePicker, { "data-testid": testId, style: style, value: '', onChange: () => { } }));
// 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(TimePicker, { "data-testid": testId, "data-product": testValue, value: '', onChange: () => { } }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
it('supports downstream @testing-library `screen.getByTestId`', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(TimePicker, { "data-testid": testId, value: '', onChange: () => { } }));
// ASSERT
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
it('renders an input of type "time"', () => {
// ARRANGE & ACT
render(_jsx(TimePicker, { value: '', onChange: () => { } }));
// ASSERT
expect(screen.getByRole('textbox', { type: 'time' })).toBeInTheDocument();
});
it('displays the initial value correctly', () => {
// ARRANGE
const initialValue = '14:30';
// ACT
render(_jsx(TimePicker, { value: initialValue, onChange: () => { } }));
// ASSERT
expect(screen.getByRole('textbox', { type: 'time' })).toHaveValue(initialValue);
});
it('calls onChange when the time is changed', async () => {
// ARRANGE
const handleChange = jest.fn();
render(_jsx(TimePicker, { value: '', onChange: handleChange }));
const input = screen.getByRole('textbox', { type: 'time' });
// ACT
await act(async () => {
await userEvent.type(input, '15:45');
});
// ASSERT
expect(handleChange).toHaveBeenCalledWith('15:45');
});
it('handles empty string as initial value', () => {
// ARRANGE & ACT
render(_jsx(TimePicker, { value: '', onChange: () => { } }));
// ASSERT
expect(screen.getByRole('textbox', { type: 'time' })).toHaveValue('');
});
it('handles undefined as initial value', () => {
// ARRANGE & ACT
render(_jsx(TimePicker, { value: undefined, onChange: () => { } }));
// ASSERT
expect(screen.getByRole('textbox', { type: 'time' })).toHaveValue('');
});
it('updates value when prop changes', () => {
// ARRANGE
const { rerender } = render(_jsx(TimePicker, { value: '12:00', onChange: () => { } }));
// ACT
rerender(_jsx(TimePicker, { value: '14:30', onChange: () => { } }));
// ASSERT
expect(screen.getByRole('textbox', { type: 'time' })).toHaveValue('14:30');
});
it('disables the input when disabled prop is true', () => {
// ARRANGE & ACT
render(_jsx(TimePicker, { value: '', onChange: () => { }, disabled: true }));
// ASSERT
expect(screen.getByRole('textbox', { type: 'time' })).toBeDisabled();
});
it('applies custom className to the wrapper div', () => {
// ARRANGE
const customClass = 'custom-time-picker';
// ACT
const { container } = render(_jsx(TimePicker, { value: '', onChange: () => { }, className: customClass }));
// ASSERT
expect(container.firstChild).toHaveClass(customClass);
});
it('converts time to Denver time zone', async () => {
// ARRANGE
const handleChange = jest.fn();
render(_jsx(TimePicker, { value: '', onChange: handleChange }));
const input = screen.getByRole('textbox', { type: 'time' });
// ACT
await act(async () => {
await userEvent.type(input, '15:45');
});
// ASSERT
expect(handleChange).toHaveBeenCalledWith(expect.stringMatching(/\d{2}:\d{2}/));
});
});
//# sourceMappingURL=TimePicker.test.js.map