debian-mirror-gitlab/spec/frontend_integration/lib/utils/browser_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

100 lines
2.7 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
2022-07-16 23:28:13 +05:30
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2020-04-08 14:13:33 +05:30
import * as commonUtils from '~/lib/utils/common_utils';
describe('common_utils browser specific specs', () => {
2021-11-11 11:23:49 +05:30
const mockOffsetHeight = (elem, offsetHeight) => {
Object.defineProperty(elem, 'offsetHeight', { value: offsetHeight });
};
const mockBoundingClientRect = (elem, rect) => {
jest.spyOn(elem, 'getBoundingClientRect').mockReturnValue(rect);
};
2020-04-08 14:13:33 +05:30
describe('contentTop', () => {
it('does not add height for fileTitle or compareVersionsHeader if screen is too small', () => {
2021-11-11 11:23:49 +05:30
jest.spyOn(breakpointInstance, 'isDesktop').mockReturnValue(false);
2020-04-08 14:13:33 +05:30
2022-07-16 23:28:13 +05:30
setHTMLFixture(`
2020-04-08 14:13:33 +05:30
<div class="diff-file file-title-flex-parent">
blah blah blah
</div>
<div class="mr-version-controls">
more blah blah blah
</div>
`);
expect(commonUtils.contentTop()).toBe(0);
2022-07-16 23:28:13 +05:30
resetHTMLFixture();
2020-04-08 14:13:33 +05:30
});
it('adds height for fileTitle and compareVersionsHeader screen is large enough', () => {
2021-11-11 11:23:49 +05:30
jest.spyOn(breakpointInstance, 'isDesktop').mockReturnValue(true);
2020-04-08 14:13:33 +05:30
2022-07-16 23:28:13 +05:30
setHTMLFixture(`
2020-04-08 14:13:33 +05:30
<div class="diff-file file-title-flex-parent">
blah blah blah
</div>
<div class="mr-version-controls">
more blah blah blah
</div>
`);
2021-11-11 11:23:49 +05:30
mockOffsetHeight(document.querySelector('.diff-file'), 100);
mockOffsetHeight(document.querySelector('.mr-version-controls'), 18);
2020-04-08 14:13:33 +05:30
expect(commonUtils.contentTop()).toBe(18);
2022-07-16 23:28:13 +05:30
resetHTMLFixture();
2020-04-08 14:13:33 +05:30
});
});
describe('isInViewport', () => {
let el;
beforeEach(() => {
el = document.createElement('div');
});
afterEach(() => {
document.body.removeChild(el);
});
it('returns true when provided `el` is in viewport', () => {
el.setAttribute('style', `position: absolute; right: ${window.innerWidth + 0.2};`);
2021-11-11 11:23:49 +05:30
mockBoundingClientRect(el, {
x: 8,
y: 8,
width: 0,
height: 0,
top: 8,
right: 8,
bottom: 8,
left: 8,
});
2020-04-08 14:13:33 +05:30
document.body.appendChild(el);
expect(commonUtils.isInViewport(el)).toBe(true);
});
it('returns false when provided `el` is not in viewport', () => {
el.setAttribute('style', 'position: absolute; top: -1000px; left: -1000px;');
2021-11-11 11:23:49 +05:30
mockBoundingClientRect(el, {
x: -1000,
y: -1000,
width: 0,
height: 0,
top: -1000,
right: -1000,
bottom: -1000,
left: -1000,
});
2020-04-08 14:13:33 +05:30
document.body.appendChild(el);
expect(commonUtils.isInViewport(el)).toBe(false);
});
});
});