diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-26 12:11:15 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-26 12:11:15 +0300 |
commit | c8a7e4ada117b968f841c2bb300fadc421cb3e98 (patch) | |
tree | c7c84dd22cd56ea8ed228f91f4ab33c5a1e751fc /spec/frontend_integration | |
parent | b692f9afa047ef24c54ab185b499628d9873122a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend_integration')
-rw-r--r-- | spec/frontend_integration/lib/utils/browser_spec.js | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/spec/frontend_integration/lib/utils/browser_spec.js b/spec/frontend_integration/lib/utils/browser_spec.js new file mode 100644 index 00000000000..6c72e29076d --- /dev/null +++ b/spec/frontend_integration/lib/utils/browser_spec.js @@ -0,0 +1,94 @@ +import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils'; +import * as commonUtils from '~/lib/utils/common_utils'; + +describe('common_utils browser specific specs', () => { + const mockOffsetHeight = (elem, offsetHeight) => { + Object.defineProperty(elem, 'offsetHeight', { value: offsetHeight }); + }; + + const mockBoundingClientRect = (elem, rect) => { + jest.spyOn(elem, 'getBoundingClientRect').mockReturnValue(rect); + }; + + describe('contentTop', () => { + it('does not add height for fileTitle or compareVersionsHeader if screen is too small', () => { + jest.spyOn(breakpointInstance, 'isDesktop').mockReturnValue(false); + + setFixtures(` + <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); + }); + + it('adds height for fileTitle and compareVersionsHeader screen is large enough', () => { + jest.spyOn(breakpointInstance, 'isDesktop').mockReturnValue(true); + + setFixtures(` + <div class="diff-file file-title-flex-parent"> + blah blah blah + </div> + <div class="mr-version-controls"> + more blah blah blah + </div> + `); + + mockOffsetHeight(document.querySelector('.diff-file'), 100); + mockOffsetHeight(document.querySelector('.mr-version-controls'), 18); + expect(commonUtils.contentTop()).toBe(18); + }); + }); + + 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};`); + mockBoundingClientRect(el, { + x: 8, + y: 8, + width: 0, + height: 0, + top: 8, + right: 8, + bottom: 8, + left: 8, + }); + + 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;'); + mockBoundingClientRect(el, { + x: -1000, + y: -1000, + width: 0, + height: 0, + top: -1000, + right: -1000, + bottom: -1000, + left: -1000, + }); + + document.body.appendChild(el); + + expect(commonUtils.isInViewport(el)).toBe(false); + }); + }); +}); |