mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated DateInput test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-06-10 20:48:53 +02:00
parent 44a93ae556
commit 07cedd0bdb
1 changed files with 19 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
test/utils/DateInput.test.tsx
View file

@ -1,35 +1,34 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen, waitFor } from '@testing-library/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { DateInput, DateInputProps } from '../../src/utils/DateInput'; import { DateInput, DateInputProps } from '../../src/utils/DateInput';
describe('<DateInput />', () => { describe('<DateInput />', () => {
let wrapped: ShallowWrapper; const setUp = (props: Partial<DateInputProps> = {}) => ({
user: userEvent.setup(),
const createComponent = (props: Partial<DateInputProps> = {}) => { ...render(<DateInput {...Mock.of<DateInputProps>(props)} />),
wrapped = shallow(<DateInput {...Mock.of<DateInputProps>(props)} />);
return wrapped;
};
afterEach(() => wrapped?.unmount());
it('wraps a DatePicker', () => {
wrapped = createComponent();
}); });
it('shows calendar icon when input is not clearable', () => { it('shows calendar icon when input is not clearable', () => {
wrapped = createComponent({ isClearable: false }); setUp({ isClearable: false });
expect(wrapped.find(FontAwesomeIcon)).toHaveLength(1); expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
}); });
it('shows calendar icon when input is clearable but selected value is nil', () => { it('shows calendar icon when input is clearable but selected value is nil', () => {
wrapped = createComponent({ isClearable: true, selected: null }); setUp({ isClearable: true, selected: null });
expect(wrapped.find(FontAwesomeIcon)).toHaveLength(1); expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
}); });
it('does not show calendar icon when input is clearable', () => { it('does not show calendar icon when input is clearable', () => {
wrapped = createComponent({ isClearable: true, selected: new Date() }); setUp({ isClearable: true, selected: new Date() });
expect(wrapped.find(FontAwesomeIcon)).toHaveLength(0); expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
});
it('shows popper on element click', async () => {
const { user, container } = setUp({ placeholderText: 'foo' });
expect(container.querySelector('.react-datepicker')).not.toBeInTheDocument();
await user.click(screen.getByPlaceholderText('foo'));
await waitFor(() => expect(container.querySelector('.react-datepicker')).toBeInTheDocument());
}); });
}); });