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`] = `
+
+
+ Oops! There is some missing configuration, and short URLs shared with this domain will not work.
+
+ Check the
+
+ documentation
+
+ in order to find out what is missing.
+
+
+`;
+
+exports[` renders proper tooltip based on state 2`] = `
+
+ Congratulations! This domain is properly configured.
+