forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-02-28 04:36:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added dynamic tooltip placement in DomainStatusIcon based on media query

Browse Source
This commit is contained in:
Alejandro Celaya
2021-12-28 23:14:55 +01:00
parent 0268bb6930
commit aba1972d0d
4 changed files with 42 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
test/domains/helpers/DomainStatusIcon.test.tsx
View File

@@ -4,11 +4,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes, faCheck, faCircleNotch } from '@fortawesome/free-solid-svg-icons';
import { DomainStatus } from '../../../src/domains/data';
import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon';
import { MediaMatcher } from '../../../src/utils/types';
import { Mock } from 'ts-mockery';
describe('<DomainStatusIcon />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (status: DomainStatus) => {
wrapper = shallow(<DomainStatusIcon status={status} />);
const createWrapper = (status: DomainStatus, matchMedia?: MediaMatcher) => {
wrapper = shallow(<DomainStatusIcon status={status} matchMedia={matchMedia} />);
return wrapper;
};
@@ -54,4 +56,16 @@ describe('<DomainStatusIcon />', () => {
expect(faIcon.prop('icon')).toEqual(expectedIcon);
expect(faIcon.prop('spin')).toEqual(false);
});
it.each([
[ true, 'top-sart' ],
[ false, 'left' ],
])('places the tooltip properly based on query match', (isMobile, expectedPlacement) => {
const mediaMatch = jest.fn().mockReturnValue(Mock.of<MediaQueryList>({ matches: isMobile }));
const wrapper = createWrapper('valid', mediaMatch);
const tooltip = wrapper.find(UncontrolledTooltip);
expect(tooltip).toHaveLength(1);
expect(tooltip.prop('placement')).toEqual(expectedPlacement);
});
});