63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
import { DatePicker } from '../../src/components/DatePicker';
|
|
|
|
describe('DatePicker', () => {
|
|
it('supports datetime-local type and change callback', () => {
|
|
const onChange = vi.fn();
|
|
render(<DatePicker label="Schedule" type="datetime-local" value="" onChange={onChange} />);
|
|
|
|
const input = screen.getByLabelText('Schedule') as HTMLInputElement;
|
|
expect(input.type).toBe('datetime-local');
|
|
|
|
fireEvent.change(input, { target: { value: '2031-05-20T14:30' } });
|
|
expect(onChange).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('supports date type and disabled state', () => {
|
|
render(
|
|
<DatePicker
|
|
label="Publish date"
|
|
type="date"
|
|
value="2031-05-20"
|
|
onChange={() => {}}
|
|
disabled
|
|
/>,
|
|
);
|
|
|
|
const input = screen.getByLabelText('Publish date') as HTMLInputElement;
|
|
expect(input.type).toBe('date');
|
|
expect(input).toBeDisabled();
|
|
});
|
|
|
|
it('renders right icon and error message', () => {
|
|
const { container } = render(
|
|
<DatePicker
|
|
label="Schedule"
|
|
type="datetime-local"
|
|
value=""
|
|
onChange={() => {}}
|
|
rightIcon={<span data-testid="right-icon">R</span>}
|
|
error="Invalid date"
|
|
inputClassName="custom-input"
|
|
/>,
|
|
);
|
|
|
|
const input = container.querySelector('input');
|
|
expect(input).toBeInstanceOf(HTMLInputElement);
|
|
expect(screen.getByTestId('right-icon')).toBeInTheDocument();
|
|
expect(input).toHaveClass('pr-10');
|
|
expect(input).toHaveClass('custom-input');
|
|
expect(screen.getByText('Invalid date')).toBeInTheDocument();
|
|
});
|
|
|
|
it('supports inline layout', () => {
|
|
const { container } = render(
|
|
<DatePicker label="Start time" type="time" value="09:00" onChange={() => {}} layout="inline" />,
|
|
);
|
|
|
|
expect(container.querySelector('label')).toHaveClass('inline-flex');
|
|
expect(container.querySelector('label > div')).not.toHaveClass('mt-1');
|
|
});
|
|
});
|