debian-mirror-gitlab/spec/frontend_integration/fly_out_nav_browser_spec.js

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

367 lines
9.4 KiB
JavaScript
Raw Normal View History

2020-03-13 15:44:24 +05:30
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
2021-03-11 19:13:27 +05:30
import { SIDEBAR_COLLAPSED_CLASS } from '~/contextual_sidebar';
2017-09-10 17:25:29 +05:30
import {
calculateTop,
showSubLevelItems,
canShowSubItems,
canShowActiveSubItems,
mouseEnterTopItems,
mouseLeaveTopItem,
getOpenMenu,
setOpenMenu,
mousePos,
getHideSubItemsInterval,
documentMouseMove,
getHeaderHeight,
setSidebar,
subItemsMouseLeave,
} from '~/fly_out_nav';
describe('Fly out sidebar navigation', () => {
let el;
let breakpointSize = 'lg';
2021-11-11 11:23:49 +05:30
const OLD_SIDEBAR_WIDTH = 200;
const CONTAINER_INITIAL_BOUNDING_RECT = {
x: 8,
y: 8,
width: 769,
height: 0,
top: 8,
right: 777,
bottom: 8,
left: 8,
};
const SUB_ITEMS_INITIAL_BOUNDING_RECT = {
x: 148,
y: 8,
width: 0,
height: 150,
top: 8,
right: 148,
bottom: 158,
left: 148,
};
const mockBoundingClientRect = (elem, rect) => {
jest.spyOn(elem, 'getBoundingClientRect').mockReturnValue(rect);
};
const findSubItems = () => document.querySelector('.sidebar-sub-level-items');
const mockBoundingRects = () => {
const subItems = findSubItems();
mockBoundingClientRect(el, CONTAINER_INITIAL_BOUNDING_RECT);
mockBoundingClientRect(subItems, SUB_ITEMS_INITIAL_BOUNDING_RECT);
};
const mockSidebarFragment = (styleProps = '') =>
`<div class="sidebar-sub-level-items" style="${styleProps}"></div>`;
2017-09-10 17:25:29 +05:30
beforeEach(() => {
el = document.createElement('div');
el.style.position = 'relative';
document.body.appendChild(el);
2021-11-11 11:23:49 +05:30
jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockImplementation(() => breakpointSize);
2017-09-10 17:25:29 +05:30
});
afterEach(() => {
document.body.innerHTML = '';
breakpointSize = 'lg';
mousePos.length = 0;
2018-03-17 18:26:18 +05:30
setSidebar(null);
2017-09-10 17:25:29 +05:30
});
describe('calculateTop', () => {
it('returns boundingRect top', () => {
const boundingRect = {
top: 100,
height: 100,
};
2018-12-13 13:39:08 +05:30
expect(calculateTop(boundingRect, 100)).toBe(100);
2017-09-10 17:25:29 +05:30
});
});
describe('getHideSubItemsInterval', () => {
beforeEach(() => {
2021-11-11 11:23:49 +05:30
el.innerHTML = mockSidebarFragment('position: fixed; top: 0; left: 100px; height: 150px;');
mockBoundingRects();
2017-09-10 17:25:29 +05:30
});
it('returns 0 if currentOpenMenu is nil', () => {
2021-11-11 11:23:49 +05:30
setOpenMenu(null);
2018-12-13 13:39:08 +05:30
expect(getHideSubItemsInterval()).toBe(0);
2017-09-10 17:25:29 +05:30
});
2018-03-17 18:26:18 +05:30
it('returns 0 if mousePos is empty', () => {
2018-12-13 13:39:08 +05:30
expect(getHideSubItemsInterval()).toBe(0);
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
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,
});
2018-12-13 13:39:08 +05:30
expect(getHideSubItemsInterval()).toBe(0);
2017-09-10 17:25:29 +05:30
});
it('returns 0 when mouse is below sub-items', () => {
2021-11-11 11:23:49 +05:30
const subItems = findSubItems();
2017-09-10 17:25:29 +05:30
showSubLevelItems(el);
documentMouseMove({
clientX: el.getBoundingClientRect().left,
clientY: el.getBoundingClientRect().top,
});
documentMouseMove({
clientX: el.getBoundingClientRect().left,
2018-12-13 13:39:08 +05:30
clientY: el.getBoundingClientRect().top - subItems.getBoundingClientRect().height + 50,
2017-09-10 17:25:29 +05:30
});
2018-12-13 13:39:08 +05:30
expect(getHideSubItemsInterval()).toBe(0);
2017-09-10 17:25:29 +05:30
});
it('returns 300 when mouse is moved towards sub-items', () => {
documentMouseMove({
clientX: el.getBoundingClientRect().left,
clientY: el.getBoundingClientRect().top,
});
2021-11-11 11:23:49 +05:30
2017-09-10 17:25:29 +05:30
showSubLevelItems(el);
documentMouseMove({
clientX: el.getBoundingClientRect().left + 20,
clientY: el.getBoundingClientRect().top + 10,
});
2018-12-13 13:39:08 +05:30
expect(getHideSubItemsInterval()).toBe(300);
2017-09-10 17:25:29 +05:30
});
});
describe('mouseLeaveTopItem', () => {
beforeEach(() => {
2021-11-11 11:23:49 +05:30
jest.spyOn(el.classList, 'remove');
2017-09-10 17:25:29 +05:30
});
it('removes is-over class if currentOpenMenu is null', () => {
2021-11-11 11:23:49 +05:30
setOpenMenu(null);
2017-09-10 17:25:29 +05:30
mouseLeaveTopItem(el);
2018-12-13 13:39:08 +05:30
expect(el.classList.remove).toHaveBeenCalledWith('is-over');
2017-09-10 17:25:29 +05:30
});
it('removes is-over class if currentOpenMenu is null & there are sub-items', () => {
2021-11-11 11:23:49 +05:30
setOpenMenu(null);
el.innerHTML = mockSidebarFragment('position: absolute');
2017-09-10 17:25:29 +05:30
mouseLeaveTopItem(el);
2018-12-13 13:39:08 +05:30
expect(el.classList.remove).toHaveBeenCalledWith('is-over');
2017-09-10 17:25:29 +05:30
});
it('does not remove is-over class if currentOpenMenu is the passed in sub-items', () => {
2021-11-11 11:23:49 +05:30
setOpenMenu(null);
el.innerHTML = mockSidebarFragment('position: absolute');
2017-09-10 17:25:29 +05:30
2021-11-11 11:23:49 +05:30
setOpenMenu(findSubItems());
2017-09-10 17:25:29 +05:30
mouseLeaveTopItem(el);
2018-12-13 13:39:08 +05:30
expect(el.classList.remove).not.toHaveBeenCalled();
2017-09-10 17:25:29 +05:30
});
});
describe('mouseEnterTopItems', () => {
beforeEach(() => {
2021-11-11 11:23:49 +05:30
el.innerHTML = mockSidebarFragment(
`position: absolute; top: 0; left: 100px; height: ${OLD_SIDEBAR_WIDTH}px;`,
);
mockBoundingRects();
2017-09-10 17:25:29 +05:30
});
2022-07-16 23:28:13 +05:30
it('shows sub-items after 0ms if no menu is open', () => {
2021-11-11 11:23:49 +05:30
const subItems = findSubItems();
2017-09-10 17:25:29 +05:30
mouseEnterTopItems(el);
2018-12-13 13:39:08 +05:30
expect(getHideSubItemsInterval()).toBe(0);
2017-09-10 17:25:29 +05:30
2022-07-16 23:28:13 +05:30
return new Promise((resolve) => {
setTimeout(() => {
expect(subItems.style.display).toBe('block');
resolve();
});
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
});
2022-07-16 23:28:13 +05:30
it('shows sub-items after 300ms if a menu is currently open', () => {
2021-11-11 11:23:49 +05:30
const subItems = findSubItems();
2017-09-10 17:25:29 +05:30
documentMouseMove({
clientX: el.getBoundingClientRect().left,
clientY: el.getBoundingClientRect().top,
});
2021-11-11 11:23:49 +05:30
setOpenMenu(subItems);
2017-09-10 17:25:29 +05:30
documentMouseMove({
clientX: el.getBoundingClientRect().left + 20,
clientY: el.getBoundingClientRect().top + 10,
});
2018-03-17 18:26:18 +05:30
mouseEnterTopItems(el, 0);
2017-09-10 17:25:29 +05:30
2022-07-16 23:28:13 +05:30
return new Promise((resolve) => {
setTimeout(() => {
expect(subItems.style.display).toBe('block');
resolve();
});
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
});
});
describe('showSubLevelItems', () => {
beforeEach(() => {
2021-11-11 11:23:49 +05:30
el.innerHTML = mockSidebarFragment('position: absolute');
2017-09-10 17:25:29 +05:30
});
it('adds is-over class to el', () => {
2021-11-11 11:23:49 +05:30
jest.spyOn(el.classList, 'add');
2017-09-10 17:25:29 +05:30
showSubLevelItems(el);
2018-12-13 13:39:08 +05:30
expect(el.classList.add).toHaveBeenCalledWith('is-over');
2017-09-10 17:25:29 +05:30
});
it('does not show sub-items on mobile', () => {
breakpointSize = 'xs';
showSubLevelItems(el);
2021-11-11 11:23:49 +05:30
expect(findSubItems().style.display).not.toBe('block');
2017-09-10 17:25:29 +05:30
});
it('shows sub-items', () => {
showSubLevelItems(el);
2021-11-11 11:23:49 +05:30
expect(findSubItems().style.display).toBe('block');
2017-09-10 17:25:29 +05:30
});
2018-03-17 18:26:18 +05:30
it('shows collapsed only sub-items if icon only sidebar', () => {
2021-11-11 11:23:49 +05:30
const subItems = findSubItems();
2018-03-17 18:26:18 +05:30
const sidebar = document.createElement('div');
2019-09-04 21:01:54 +05:30
sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
2018-03-17 18:26:18 +05:30
subItems.classList.add('is-fly-out-only');
setSidebar(sidebar);
showSubLevelItems(el);
2021-11-11 11:23:49 +05:30
expect(findSubItems().style.display).toBe('block');
2018-03-17 18:26:18 +05:30
});
it('does not show collapsed only sub-items if icon only sidebar', () => {
2021-11-11 11:23:49 +05:30
const subItems = findSubItems();
2018-03-17 18:26:18 +05:30
subItems.classList.add('is-fly-out-only');
showSubLevelItems(el);
2018-12-13 13:39:08 +05:30
expect(subItems.style.display).not.toBe('block');
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
it('sets transform of sub-items', () => {
2018-03-17 18:26:18 +05:30
const sidebar = document.createElement('div');
2021-11-11 11:23:49 +05:30
const subItems = findSubItems();
2018-03-17 18:26:18 +05:30
2021-11-11 11:23:49 +05:30
sidebar.style.width = `${OLD_SIDEBAR_WIDTH}px`;
2018-03-17 18:26:18 +05:30
document.body.appendChild(sidebar);
setSidebar(sidebar);
2017-09-10 17:25:29 +05:30
showSubLevelItems(el);
2018-12-13 13:39:08 +05:30
expect(subItems.style.transform).toBe(
2021-11-11 11:23:49 +05:30
`translate3d(${OLD_SIDEBAR_WIDTH}px, ${
2021-03-08 18:12:59 +05:30
Math.floor(el.getBoundingClientRect().top) - getHeaderHeight()
2021-11-11 11:23:49 +05:30
}px, 0)`,
2018-12-13 13:39:08 +05:30
);
2017-09-10 17:25:29 +05:30
});
it('sets is-above when element is above', () => {
2021-11-11 11:23:49 +05:30
const subItems = findSubItems();
mockBoundingRects();
2017-09-10 17:25:29 +05:30
subItems.style.height = `${window.innerHeight + el.offsetHeight}px`;
el.style.top = `${window.innerHeight - el.offsetHeight}px`;
2021-11-11 11:23:49 +05:30
jest.spyOn(subItems.classList, 'add');
2017-09-10 17:25:29 +05:30
showSubLevelItems(el);
2018-12-13 13:39:08 +05:30
expect(subItems.classList.add).toHaveBeenCalledWith('is-above');
2017-09-10 17:25:29 +05:30
});
});
describe('canShowSubItems', () => {
it('returns true if on desktop size', () => {
2022-08-27 11:52:29 +05:30
expect(canShowSubItems()).toBe(true);
2017-09-10 17:25:29 +05:30
});
it('returns false if on mobile size', () => {
breakpointSize = 'xs';
2022-08-27 11:52:29 +05:30
expect(canShowSubItems()).toBe(false);
2017-09-10 17:25:29 +05:30
});
});
describe('canShowActiveSubItems', () => {
it('returns true by default', () => {
2022-08-27 11:52:29 +05:30
expect(canShowActiveSubItems(el)).toBe(true);
2017-09-10 17:25:29 +05:30
});
it('returns false when active & expanded sidebar', () => {
const sidebar = document.createElement('div');
el.classList.add('active');
setSidebar(sidebar);
2022-08-27 11:52:29 +05:30
expect(canShowActiveSubItems(el)).toBe(false);
2017-09-10 17:25:29 +05:30
});
it('returns true when active & collapsed sidebar', () => {
const sidebar = document.createElement('div');
2019-09-04 21:01:54 +05:30
sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
2017-09-10 17:25:29 +05:30
el.classList.add('active');
setSidebar(sidebar);
2022-08-27 11:52:29 +05:30
expect(canShowActiveSubItems(el)).toBe(true);
2017-09-10 17:25:29 +05:30
});
});
describe('subItemsMouseLeave', () => {
beforeEach(() => {
2021-11-11 11:23:49 +05:30
el.innerHTML = mockSidebarFragment('position: absolute');
2017-09-10 17:25:29 +05:30
2021-11-11 11:23:49 +05:30
setOpenMenu(findSubItems());
2017-09-10 17:25:29 +05:30
});
it('hides subMenu if element is not hovered', () => {
subItemsMouseLeave(el);
2018-12-13 13:39:08 +05:30
expect(getOpenMenu()).toBeNull();
2017-09-10 17:25:29 +05:30
});
it('does not hide subMenu if element is hovered', () => {
el.classList.add('is-over');
subItemsMouseLeave(el);
2018-12-13 13:39:08 +05:30
expect(getOpenMenu()).not.toBeNull();
2017-09-10 17:25:29 +05:30
});
});
});