2020-06-19 14:08:39 -04:00
|
|
|
// this file can't be migrated to jest because it relies on the browser to perform integration tests:
|
|
|
|
// (specifically getClientBoundingRect and mouse movements)
|
|
|
|
// see: https://gitlab.com/groups/gitlab-org/-/epics/895#what-if-theres-a-karma-spec-which-is-simply-unmovable-to-jest-ie-it-is-dependent-on-a-running-browser-environment
|
|
|
|
|
2019-12-23 07:08:18 -05:00
|
|
|
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
|
2017-08-01 03:49:03 -04:00
|
|
|
import {
|
|
|
|
calculateTop,
|
|
|
|
showSubLevelItems,
|
2017-08-02 05:22:13 -04:00
|
|
|
canShowSubItems,
|
2017-08-08 15:27:00 -04:00
|
|
|
canShowActiveSubItems,
|
2017-08-04 10:32:44 -04:00
|
|
|
mouseEnterTopItems,
|
|
|
|
mouseLeaveTopItem,
|
2017-08-30 06:48:33 -04:00
|
|
|
getOpenMenu,
|
2017-08-04 10:32:44 -04:00
|
|
|
setOpenMenu,
|
|
|
|
mousePos,
|
|
|
|
getHideSubItemsInterval,
|
|
|
|
documentMouseMove,
|
2017-08-10 04:10:25 -04:00
|
|
|
getHeaderHeight,
|
2017-08-19 15:41:23 -04:00
|
|
|
setSidebar,
|
2017-08-30 06:48:33 -04:00
|
|
|
subItemsMouseLeave,
|
2017-08-01 03:49:03 -04:00
|
|
|
} from '~/fly_out_nav';
|
2019-03-11 14:19:34 -04:00
|
|
|
import { SIDEBAR_COLLAPSED_CLASS } from '~/contextual_sidebar';
|
2017-07-19 05:36:08 -04:00
|
|
|
|
2017-08-10 08:24:03 -04:00
|
|
|
describe('Fly out sidebar navigation', () => {
|
2017-08-01 03:49:03 -04:00
|
|
|
let el;
|
2017-08-02 05:22:13 -04:00
|
|
|
let breakpointSize = 'lg';
|
|
|
|
|
2017-08-01 03:49:03 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
el = document.createElement('div');
|
2017-08-01 07:41:55 -04:00
|
|
|
el.style.position = 'relative';
|
2017-08-01 03:49:03 -04:00
|
|
|
document.body.appendChild(el);
|
2017-08-02 05:22:13 -04:00
|
|
|
|
2019-12-23 07:08:18 -05:00
|
|
|
spyOn(GlBreakpointInstance, 'getBreakpointSize').and.callFake(() => breakpointSize);
|
2017-08-04 10:32:44 -04:00
|
|
|
|
|
|
|
setOpenMenu(null);
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
2017-08-10 08:24:03 -04:00
|
|
|
document.body.innerHTML = '';
|
2017-08-02 05:22:13 -04:00
|
|
|
breakpointSize = 'lg';
|
2017-08-04 10:32:44 -04:00
|
|
|
mousePos.length = 0;
|
2017-09-01 03:41:31 -04:00
|
|
|
|
|
|
|
setSidebar(null);
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
2017-07-19 05:36:08 -04:00
|
|
|
describe('calculateTop', () => {
|
|
|
|
it('returns boundingRect top', () => {
|
|
|
|
const boundingRect = {
|
|
|
|
top: 100,
|
2017-07-24 11:14:29 -04:00
|
|
|
height: 100,
|
2017-07-19 05:36:08 -04:00
|
|
|
};
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(calculateTop(boundingRect, 100)).toBe(100);
|
2017-07-19 05:36:08 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns boundingRect - bottomOverflow', () => {
|
|
|
|
const boundingRect = {
|
2017-07-24 11:14:29 -04:00
|
|
|
top: window.innerHeight - 50,
|
|
|
|
height: 100,
|
2017-07-19 05:36:08 -04:00
|
|
|
};
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(calculateTop(boundingRect, 100)).toBe(window.innerHeight - 50);
|
2017-07-19 05:36:08 -04:00
|
|
|
});
|
|
|
|
});
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
describe('getHideSubItemsInterval', () => {
|
2017-08-01 03:49:03 -04:00
|
|
|
beforeEach(() => {
|
2018-10-17 03:13:26 -04:00
|
|
|
el.innerHTML =
|
|
|
|
'<div class="sidebar-sub-level-items" style="position: fixed; top: 0; left: 100px; height: 150px;"></div>';
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
it('returns 0 if currentOpenMenu is nil', () => {
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getHideSubItemsInterval()).toBe(0);
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
|
|
|
|
2017-09-18 10:42:41 -04:00
|
|
|
it('returns 0 if mousePos is empty', () => {
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getHideSubItemsInterval()).toBe(0);
|
2017-09-18 10:42:41 -04:00
|
|
|
});
|
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
it('returns 0 when mouse above sub-items', () => {
|
|
|
|
showSubLevelItems(el);
|
|
|
|
documentMouseMove({
|
|
|
|
clientX: el.getBoundingClientRect().left,
|
|
|
|
clientY: el.getBoundingClientRect().top,
|
|
|
|
});
|
|
|
|
documentMouseMove({
|
|
|
|
clientX: el.getBoundingClientRect().left,
|
|
|
|
clientY: el.getBoundingClientRect().top - 50,
|
|
|
|
});
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getHideSubItemsInterval()).toBe(0);
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
it('returns 0 when mouse is below sub-items', () => {
|
|
|
|
const subItems = el.querySelector('.sidebar-sub-level-items');
|
2017-08-02 05:22:13 -04:00
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
showSubLevelItems(el);
|
|
|
|
documentMouseMove({
|
|
|
|
clientX: el.getBoundingClientRect().left,
|
|
|
|
clientY: el.getBoundingClientRect().top,
|
|
|
|
});
|
|
|
|
documentMouseMove({
|
|
|
|
clientX: el.getBoundingClientRect().left,
|
2018-10-17 03:13:26 -04:00
|
|
|
clientY: el.getBoundingClientRect().top - subItems.getBoundingClientRect().height + 50,
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
2017-08-02 05:22:13 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getHideSubItemsInterval()).toBe(0);
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns 300 when mouse is moved towards sub-items', () => {
|
|
|
|
documentMouseMove({
|
|
|
|
clientX: el.getBoundingClientRect().left,
|
|
|
|
clientY: el.getBoundingClientRect().top,
|
|
|
|
});
|
|
|
|
showSubLevelItems(el);
|
|
|
|
documentMouseMove({
|
|
|
|
clientX: el.getBoundingClientRect().left + 20,
|
|
|
|
clientY: el.getBoundingClientRect().top + 10,
|
|
|
|
});
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getHideSubItemsInterval()).toBe(300);
|
2017-08-02 05:22:13 -04:00
|
|
|
});
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
2017-08-02 05:22:13 -04:00
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
describe('mouseLeaveTopItem', () => {
|
|
|
|
beforeEach(() => {
|
2017-08-01 03:49:03 -04:00
|
|
|
spyOn(el.classList, 'remove');
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
it('removes is-over class if currentOpenMenu is null', () => {
|
|
|
|
mouseLeaveTopItem(el);
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.classList.remove).toHaveBeenCalledWith('is-over');
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
it('removes is-over class if currentOpenMenu is null & there are sub-items', () => {
|
|
|
|
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
|
|
|
|
|
|
|
|
mouseLeaveTopItem(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.classList.remove).toHaveBeenCalledWith('is-over');
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
it('does not remove is-over class if currentOpenMenu is the passed in sub-items', () => {
|
|
|
|
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
setOpenMenu(el.querySelector('.sidebar-sub-level-items'));
|
|
|
|
mouseLeaveTopItem(el);
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.classList.remove).not.toHaveBeenCalled();
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
describe('mouseEnterTopItems', () => {
|
|
|
|
beforeEach(() => {
|
2018-10-17 03:13:26 -04:00
|
|
|
el.innerHTML =
|
|
|
|
'<div class="sidebar-sub-level-items" style="position: absolute; top: 0; left: 100px; height: 200px;"></div>';
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2020-12-23 16:10:24 -05:00
|
|
|
it('shows sub-items after 0ms if no menu is open', (done) => {
|
2017-08-04 10:32:44 -04:00
|
|
|
mouseEnterTopItems(el);
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getHideSubItemsInterval()).toBe(0);
|
2017-08-04 10:32:44 -04:00
|
|
|
|
2018-01-23 10:19:56 -05:00
|
|
|
setTimeout(() => {
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.querySelector('.sidebar-sub-level-items').style.display).toBe('block');
|
2017-08-04 10:32:44 -04:00
|
|
|
|
2018-01-23 10:19:56 -05:00
|
|
|
done();
|
|
|
|
});
|
2017-08-04 10:32:44 -04:00
|
|
|
});
|
|
|
|
|
2020-12-23 16:10:24 -05:00
|
|
|
it('shows sub-items after 300ms if a menu is currently open', (done) => {
|
2017-08-04 10:32:44 -04:00
|
|
|
documentMouseMove({
|
|
|
|
clientX: el.getBoundingClientRect().left,
|
|
|
|
clientY: el.getBoundingClientRect().top,
|
|
|
|
});
|
|
|
|
|
|
|
|
setOpenMenu(el.querySelector('.sidebar-sub-level-items'));
|
|
|
|
|
|
|
|
documentMouseMove({
|
|
|
|
clientX: el.getBoundingClientRect().left + 20,
|
|
|
|
clientY: el.getBoundingClientRect().top + 10,
|
|
|
|
});
|
|
|
|
|
2018-01-23 10:19:56 -05:00
|
|
|
mouseEnterTopItems(el, 0);
|
2017-08-04 10:32:44 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getHideSubItemsInterval()).toBe(300);
|
2017-08-04 10:32:44 -04:00
|
|
|
|
2018-01-23 10:19:56 -05:00
|
|
|
setTimeout(() => {
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.querySelector('.sidebar-sub-level-items').style.display).toBe('block');
|
2017-08-04 10:32:44 -04:00
|
|
|
|
2018-01-23 10:19:56 -05:00
|
|
|
done();
|
|
|
|
});
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('showSubLevelItems', () => {
|
|
|
|
beforeEach(() => {
|
2017-08-01 07:41:55 -04:00
|
|
|
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('adds is-over class to el', () => {
|
|
|
|
spyOn(el.classList, 'add');
|
|
|
|
|
|
|
|
showSubLevelItems(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.classList.add).toHaveBeenCalledWith('is-over');
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
2017-08-02 05:22:13 -04:00
|
|
|
it('does not show sub-items on mobile', () => {
|
2017-08-08 15:27:00 -04:00
|
|
|
breakpointSize = 'xs';
|
2017-08-02 05:22:13 -04:00
|
|
|
|
|
|
|
showSubLevelItems(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.querySelector('.sidebar-sub-level-items').style.display).not.toBe('block');
|
2017-08-02 05:22:13 -04:00
|
|
|
});
|
|
|
|
|
2017-08-04 10:32:44 -04:00
|
|
|
it('shows sub-items', () => {
|
2017-08-01 03:49:03 -04:00
|
|
|
showSubLevelItems(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.querySelector('.sidebar-sub-level-items').style.display).toBe('block');
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
2017-09-01 03:41:31 -04:00
|
|
|
it('shows collapsed only sub-items if icon only sidebar', () => {
|
|
|
|
const subItems = el.querySelector('.sidebar-sub-level-items');
|
|
|
|
const sidebar = document.createElement('div');
|
2019-03-11 14:19:34 -04:00
|
|
|
sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
|
2017-09-01 03:41:31 -04:00
|
|
|
subItems.classList.add('is-fly-out-only');
|
|
|
|
|
|
|
|
setSidebar(sidebar);
|
|
|
|
|
|
|
|
showSubLevelItems(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(el.querySelector('.sidebar-sub-level-items').style.display).toBe('block');
|
2017-09-01 03:41:31 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('does not show collapsed only sub-items if icon only sidebar', () => {
|
|
|
|
const subItems = el.querySelector('.sidebar-sub-level-items');
|
|
|
|
subItems.classList.add('is-fly-out-only');
|
|
|
|
|
|
|
|
showSubLevelItems(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(subItems.style.display).not.toBe('block');
|
2017-09-01 03:41:31 -04:00
|
|
|
});
|
|
|
|
|
2017-08-01 03:49:03 -04:00
|
|
|
it('sets transform of sub-items', () => {
|
2017-09-16 13:19:59 -04:00
|
|
|
const sidebar = document.createElement('div');
|
2017-08-01 07:41:55 -04:00
|
|
|
const subItems = el.querySelector('.sidebar-sub-level-items');
|
2017-09-16 13:19:59 -04:00
|
|
|
|
|
|
|
sidebar.style.width = '200px';
|
|
|
|
|
|
|
|
document.body.appendChild(sidebar);
|
|
|
|
|
|
|
|
setSidebar(sidebar);
|
2017-08-01 03:49:03 -04:00
|
|
|
showSubLevelItems(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(subItems.style.transform).toBe(
|
2020-12-23 07:10:26 -05:00
|
|
|
`translate3d(200px, ${
|
|
|
|
Math.floor(el.getBoundingClientRect().top) - getHeaderHeight()
|
|
|
|
}px, 0px)`,
|
2018-10-17 03:13:26 -04:00
|
|
|
);
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('sets is-above when element is above', () => {
|
|
|
|
const subItems = el.querySelector('.sidebar-sub-level-items');
|
2017-08-01 06:55:37 -04:00
|
|
|
subItems.style.height = `${window.innerHeight + el.offsetHeight}px`;
|
|
|
|
el.style.top = `${window.innerHeight - el.offsetHeight}px`;
|
2017-08-01 03:49:03 -04:00
|
|
|
|
2017-08-01 06:55:37 -04:00
|
|
|
spyOn(subItems.classList, 'add');
|
2017-08-01 03:49:03 -04:00
|
|
|
|
|
|
|
showSubLevelItems(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(subItems.classList.add).toHaveBeenCalledWith('is-above');
|
2017-08-01 03:49:03 -04:00
|
|
|
});
|
|
|
|
});
|
2017-08-02 05:22:13 -04:00
|
|
|
|
|
|
|
describe('canShowSubItems', () => {
|
|
|
|
it('returns true if on desktop size', () => {
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(canShowSubItems()).toBeTruthy();
|
2017-08-02 05:22:13 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns false if on mobile size', () => {
|
2017-08-08 15:27:00 -04:00
|
|
|
breakpointSize = 'xs';
|
2017-08-02 05:22:13 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(canShowSubItems()).toBeFalsy();
|
2017-08-02 05:22:13 -04:00
|
|
|
});
|
|
|
|
});
|
2017-08-08 15:27:00 -04:00
|
|
|
|
|
|
|
describe('canShowActiveSubItems', () => {
|
|
|
|
it('returns true by default', () => {
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(canShowActiveSubItems(el)).toBeTruthy();
|
2017-08-08 15:27:00 -04:00
|
|
|
});
|
|
|
|
|
2017-08-19 15:41:23 -04:00
|
|
|
it('returns false when active & expanded sidebar', () => {
|
|
|
|
const sidebar = document.createElement('div');
|
2017-08-08 15:27:00 -04:00
|
|
|
el.classList.add('active');
|
|
|
|
|
2017-08-19 15:41:23 -04:00
|
|
|
setSidebar(sidebar);
|
2017-08-08 15:27:00 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(canShowActiveSubItems(el)).toBeFalsy();
|
2017-08-08 15:27:00 -04:00
|
|
|
});
|
|
|
|
|
2017-08-19 15:41:23 -04:00
|
|
|
it('returns true when active & collapsed sidebar', () => {
|
|
|
|
const sidebar = document.createElement('div');
|
2019-03-11 14:19:34 -04:00
|
|
|
sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
|
2017-08-08 15:27:00 -04:00
|
|
|
el.classList.add('active');
|
|
|
|
|
2017-08-19 15:41:23 -04:00
|
|
|
setSidebar(sidebar);
|
2017-08-08 15:27:00 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(canShowActiveSubItems(el)).toBeTruthy();
|
2017-08-08 15:27:00 -04:00
|
|
|
});
|
|
|
|
});
|
2017-08-30 06:48:33 -04:00
|
|
|
|
|
|
|
describe('subItemsMouseLeave', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
|
|
|
|
|
|
|
|
setOpenMenu(el.querySelector('.sidebar-sub-level-items'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('hides subMenu if element is not hovered', () => {
|
|
|
|
subItemsMouseLeave(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getOpenMenu()).toBeNull();
|
2017-08-30 06:48:33 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('does not hide subMenu if element is hovered', () => {
|
|
|
|
el.classList.add('is-over');
|
|
|
|
subItemsMouseLeave(el);
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(getOpenMenu()).not.toBeNull();
|
2017-08-30 06:48:33 -04:00
|
|
|
});
|
|
|
|
});
|
2017-07-19 05:36:08 -04:00
|
|
|
});
|