gitlab-org--gitlab-foss/spec/javascripts/fly_out_nav_spec.js

231 lines
5.2 KiB
JavaScript
Raw Normal View History

import Cookies from 'js-cookie';
2017-08-01 03:49:03 -04:00
import {
calculateTop,
hideSubLevelItems,
showSubLevelItems,
2017-08-02 05:22:13 -04:00
canShowSubItems,
canShowActiveSubItems,
2017-08-01 03:49:03 -04:00
} from '~/fly_out_nav';
import bp from '~/breakpoints';
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
spyOn(bp, 'getBreakpointSize').and.callFake(() => breakpointSize);
2017-08-01 03:49:03 -04:00
});
afterEach(() => {
el.remove();
2017-08-02 05:22:13 -04:00
breakpointSize = 'lg';
2017-08-01 03:49:03 -04:00
});
describe('calculateTop', () => {
it('returns boundingRect top', () => {
const boundingRect = {
top: 100,
height: 100,
};
expect(
calculateTop(boundingRect, 100),
).toBe(100);
});
it('returns boundingRect - bottomOverflow', () => {
const boundingRect = {
top: window.innerHeight - 50,
height: 100,
};
expect(
calculateTop(boundingRect, 100),
).toBe(window.innerHeight - 50);
});
});
2017-08-01 03:49:03 -04:00
describe('hideSubLevelItems', () => {
beforeEach(() => {
el.innerHTML = '<div class="sidebar-sub-level-items"></div>';
});
it('hides subitems', () => {
hideSubLevelItems(el);
expect(
el.querySelector('.sidebar-sub-level-items').style.display,
).toBe('');
2017-08-01 03:49:03 -04:00
});
2017-08-02 05:22:13 -04:00
it('does not hude subitems on mobile', () => {
breakpointSize = 'xs';
2017-08-02 05:22:13 -04:00
hideSubLevelItems(el);
expect(
el.querySelector('.sidebar-sub-level-items').style.display,
).not.toBe('none');
});
2017-08-01 03:49:03 -04:00
it('removes is-over class', () => {
spyOn(el.classList, 'remove');
hideSubLevelItems(el);
expect(
el.classList.remove,
).toHaveBeenCalledWith('is-over');
});
it('removes is-above class from sub-items', () => {
const subItems = el.querySelector('.sidebar-sub-level-items');
spyOn(subItems.classList, 'remove');
hideSubLevelItems(el);
expect(
subItems.classList.remove,
).toHaveBeenCalledWith('is-above');
});
it('does nothing if el has no sub-items', () => {
el.innerHTML = '';
spyOn(el.classList, 'remove');
hideSubLevelItems(el);
expect(
el.classList.remove,
).not.toHaveBeenCalledWith();
});
});
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);
expect(
el.classList.add,
).toHaveBeenCalledWith('is-over');
});
2017-08-02 05:22:13 -04:00
it('does not show sub-items on mobile', () => {
breakpointSize = 'xs';
2017-08-02 05:22:13 -04:00
showSubLevelItems(el);
expect(
el.querySelector('.sidebar-sub-level-items').style.display,
).not.toBe('block');
});
it('does not shows sub-items', () => {
2017-08-01 03:49:03 -04:00
showSubLevelItems(el);
expect(
el.querySelector('.sidebar-sub-level-items').style.display,
).toBe('block');
});
it('sets transform of sub-items', () => {
2017-08-01 07:41:55 -04:00
const subItems = el.querySelector('.sidebar-sub-level-items');
2017-08-01 03:49:03 -04:00
showSubLevelItems(el);
expect(
2017-08-01 07:41:55 -04:00
subItems.style.transform,
2017-08-01 08:13:27 -04:00
).toBe(`translate3d(0px, ${Math.floor(el.getBoundingClientRect().top)}px, 0px)`);
2017-08-01 03:49:03 -04:00
});
it('sets is-above when element is above', () => {
const subItems = el.querySelector('.sidebar-sub-level-items');
subItems.style.height = `${window.innerHeight + el.offsetHeight}px`;
el.style.top = `${window.innerHeight - el.offsetHeight}px`;
2017-08-01 03:49:03 -04:00
spyOn(subItems.classList, 'add');
2017-08-01 03:49:03 -04:00
showSubLevelItems(el);
expect(
subItems.classList.add,
2017-08-01 03:49:03 -04:00
).toHaveBeenCalledWith('is-above');
});
});
2017-08-02 05:22:13 -04:00
describe('canShowSubItems', () => {
it('returns true if on desktop size', () => {
expect(
canShowSubItems(),
).toBeTruthy();
});
it('returns false if on mobile size', () => {
breakpointSize = 'xs';
2017-08-02 05:22:13 -04:00
expect(
canShowSubItems(),
).toBeFalsy();
});
});
describe('canShowActiveSubItems', () => {
afterEach(() => {
Cookies.remove('sidebar_collapsed');
});
it('returns true by default', () => {
expect(
canShowActiveSubItems(el),
).toBeTruthy();
});
it('returns false when cookie is false & element is active', () => {
Cookies.set('sidebar_collapsed', 'false');
el.classList.add('active');
expect(
canShowActiveSubItems(el),
).toBeFalsy();
});
it('returns true when cookie is false & element is active', () => {
Cookies.set('sidebar_collapsed', 'true');
el.classList.add('active');
expect(
canShowActiveSubItems(el),
).toBeTruthy();
});
it('returns true when element is active & breakpoint is sm', () => {
breakpointSize = 'sm';
el.classList.add('active');
expect(
canShowActiveSubItems(el),
).toBeTruthy();
});
it('returns true when element is active & breakpoint is md', () => {
breakpointSize = 'md';
el.classList.add('active');
expect(
canShowActiveSubItems(el),
).toBeTruthy();
});
});
});