mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated DomainStatusIcon test to react testing library
This commit is contained in:
Alejandro Celaya
parent
b1d51a4103
commit
d582a0f9e5
2 changed files with 104 additions and 58 deletions
|
|
@ -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('<DomainStatusIcon />', () => {
|
||||
const matchMedia = jest.fn().mockReturnValue(Mock.of<MediaQueryList>({ matches: false }));
|
||||
let wrapper: ShallowWrapper;
|
||||
const createWrapper = (status: DomainStatus) => {
|
||||
wrapper = shallow(<DomainStatusIcon status={status} matchMedia={matchMedia} />);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
const setUp = (status: DomainStatus) => render(<DomainStatusIcon status={status} matchMedia={matchMedia} />);
|
||||
|
||||
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<MediaQueryList>({ 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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-circle-notch fa-spin fa-fw "
|
||||
data-icon="circle-notch"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 2`] = `
|
||||
<span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-xmark fa-fw text-danger"
|
||||
data-icon="xmark"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 320 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 3`] = `
|
||||
<span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-check fa-fw text-muted"
|
||||
data-icon="check"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`<DomainStatusIcon /> renders proper tooltip based on state 1`] = `
|
||||
<div
|
||||
class="tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
Oops! There is some missing configuration, and short URLs shared with this domain will not work.
|
||||
<br />
|
||||
Check the
|
||||
<a
|
||||
href="https://slnk.to/multi-domain-docs"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
documentation
|
||||
</a>
|
||||
in order to find out what is missing.
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<DomainStatusIcon /> renders proper tooltip based on state 2`] = `
|
||||
<div
|
||||
class="tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
Congratulations! This domain is properly configured.
|
||||
</div>
|
||||
`;
|
||||
Loading…
Reference in a new issue