diff --git a/test/domains/helpers/DomainStatusIcon.test.tsx b/test/domains/helpers/DomainStatusIcon.test.tsx index 7683a3b5..e7e1913b 100644 --- a/test/domains/helpers/DomainStatusIcon.test.tsx +++ b/test/domains/helpers/DomainStatusIcon.test.tsx @@ -1,73 +1,30 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { UncontrolledTooltip } from 'reactstrap'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { fireEvent, render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { faTimes, faCheck, faCircleNotch } from '@fortawesome/free-solid-svg-icons'; import { DomainStatus } from '../../../src/domains/data'; import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon'; describe('', () => { const matchMedia = jest.fn().mockReturnValue(Mock.of({ matches: false })); - let wrapper: ShallowWrapper; - const createWrapper = (status: DomainStatus) => { - wrapper = shallow(); - - return wrapper; - }; + const setUp = (status: DomainStatus) => render(); beforeEach(jest.clearAllMocks); - afterEach(() => wrapper?.unmount()); - it('renders loading icon when status is "validating"', () => { - const wrapper = createWrapper('validating'); - const tooltip = wrapper.find(UncontrolledTooltip); - const faIcon = wrapper.find(FontAwesomeIcon); - - expect(tooltip).toHaveLength(0); - expect(faIcon).toHaveLength(1); - expect(faIcon.prop('icon')).toEqual(faCircleNotch); - expect(faIcon.prop('spin')).toEqual(true); + it.each([ + ['validating' as DomainStatus], + ['invalid' as DomainStatus], + ['valid' as DomainStatus], + ])('renders expected icon and tooltip when status is not validating', (status) => { + const { container } = setUp(status); + expect(container.firstChild).toMatchSnapshot(); }); it.each([ - [ - 'invalid' as DomainStatus, - faTimes, - 'Oops! There is some missing configuration, and short URLs shared with this domain will not work.', - ], - ['valid' as DomainStatus, faCheck, 'Congratulations! This domain is properly configured.'], - ])('renders expected icon and tooltip when status is not validating', (status, expectedIcon, expectedText) => { - const wrapper = createWrapper(status); - const tooltip = wrapper.find(UncontrolledTooltip); - const faIcon = wrapper.find(FontAwesomeIcon); - const getTooltipText = (): string => { - const children = tooltip.prop('children'); + ['invalid' as DomainStatus], + ['valid' as DomainStatus], + ])('renders proper tooltip based on state', async (status) => { + const { container } = setUp(status); - if (typeof children === 'string') { - return children; - } - - return tooltip.find('span').html(); - }; - - expect(tooltip).toHaveLength(1); - expect(tooltip.prop('autohide')).toEqual(status === 'valid'); - expect(getTooltipText()).toContain(expectedText); - expect(faIcon).toHaveLength(1); - expect(faIcon.prop('icon')).toEqual(expectedIcon); - expect(faIcon.prop('spin')).toEqual(false); - }); - - it.each([ - [true, 'top-start'], - [false, 'left'], - ])('places the tooltip properly based on query match', (isMobile, expectedPlacement) => { - matchMedia.mockReturnValue(Mock.of({ matches: isMobile })); - - const wrapper = createWrapper('valid'); - const tooltip = wrapper.find(UncontrolledTooltip); - - expect(tooltip).toHaveLength(1); - expect(tooltip.prop('placement')).toEqual(expectedPlacement); + container.firstChild && fireEvent.mouseOver(container.firstChild); + expect(await screen.findByRole('tooltip')).toMatchSnapshot(); }); }); diff --git a/test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap b/test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap new file mode 100644 index 00000000..0b4d6173 --- /dev/null +++ b/test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap @@ -0,0 +1,89 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders expected icon and tooltip when status is not validating 1`] = ` + +`; + +exports[` renders expected icon and tooltip when status is not validating 2`] = ` + + + +`; + +exports[` renders expected icon and tooltip when status is not validating 3`] = ` + + + +`; + +exports[` renders proper tooltip based on state 1`] = ` + +`; + +exports[` renders proper tooltip based on state 2`] = ` + +`;