Migrated UseExistingIfFoundInfoIcon test from enzyme to react testing library

This commit is contained in:
Alejandro Celaya 2022-05-02 18:54:19 +02:00
parent e837ee5225
commit c00aaa9018
3 changed files with 9 additions and 21 deletions

View file

@ -12,7 +12,7 @@ import { SelectedServer } from '../servers/data';
import { TagsSelectorProps } from '../tags/helpers/TagsSelector'; import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
import { DomainSelectorProps } from '../domains/DomainSelector'; import { DomainSelectorProps } from '../domains/DomainSelector';
import { formatIsoDate } from '../utils/helpers/date'; import { formatIsoDate } from '../utils/helpers/date';
import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon'; import { UseExistingIfFoundInfoIcon } from './UseExistingIfFoundInfoIcon';
import { ShortUrlData } from './data'; import { ShortUrlData } from './data';
import { ShortUrlFormCheckboxGroup } from './helpers/ShortUrlFormCheckboxGroup'; import { ShortUrlFormCheckboxGroup } from './helpers/ShortUrlFormCheckboxGroup';
import './ShortUrlForm.scss'; import './ShortUrlForm.scss';

View file

@ -36,7 +36,7 @@ const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void })
</Modal> </Modal>
); );
const UseExistingIfFoundInfoIcon = () => { export const UseExistingIfFoundInfoIcon = () => {
const [isModalOpen, toggleModal] = useToggle(); const [isModalOpen, toggleModal] = useToggle();
return ( return (
@ -48,5 +48,3 @@ const UseExistingIfFoundInfoIcon = () => {
</> </>
); );
}; };
export default UseExistingIfFoundInfoIcon;

View file

@ -1,22 +1,12 @@
import { mount, ReactWrapper } from 'enzyme'; import { fireEvent, render, screen } from '@testing-library/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { UseExistingIfFoundInfoIcon } from '../../src/short-urls/UseExistingIfFoundInfoIcon';
import { Modal } from 'reactstrap';
import UseExistingIfFoundInfoIcon from '../../src/short-urls/UseExistingIfFoundInfoIcon';
describe('<UseExistingIfFoundInfoIcon />', () => { describe('<UseExistingIfFoundInfoIcon />', () => {
let wrapped: ReactWrapper; it('shows modal when icon is clicked', async () => {
render(<UseExistingIfFoundInfoIcon />);
beforeEach(() => { expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
wrapped = mount(<UseExistingIfFoundInfoIcon />); fireEvent.click(screen.getByTitle('What does this mean?').firstChild as Node);
}); expect(await screen.findByRole('dialog')).toBeInTheDocument();
afterEach(() => wrapped.unmount());
it('shows modal when icon is clicked', () => {
const icon = wrapped.find(FontAwesomeIcon);
expect(wrapped.find(Modal).prop('isOpen')).toEqual(false);
icon.simulate('click');
expect(wrapped.find(Modal).prop('isOpen')).toEqual(true);
}); });
}); });