2017-08-01 07:49:03 +00:00
|
|
|
import {
|
|
|
|
calculateTop,
|
|
|
|
hideSubLevelItems,
|
|
|
|
showSubLevelItems,
|
|
|
|
} from '~/fly_out_nav';
|
2017-07-19 09:36:08 +00:00
|
|
|
|
|
|
|
describe('Fly out sidebar navigation', () => {
|
2017-08-01 07:49:03 +00:00
|
|
|
let el;
|
|
|
|
beforeEach(() => {
|
|
|
|
el = document.createElement('div');
|
2017-08-01 11:41:55 +00:00
|
|
|
el.style.position = 'relative';
|
2017-08-01 07:49:03 +00:00
|
|
|
document.body.appendChild(el);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
el.remove();
|
|
|
|
});
|
|
|
|
|
2017-07-19 09:36:08 +00:00
|
|
|
describe('calculateTop', () => {
|
|
|
|
it('returns boundingRect top', () => {
|
|
|
|
const boundingRect = {
|
|
|
|
top: 100,
|
2017-07-24 15:14:29 +00:00
|
|
|
height: 100,
|
2017-07-19 09:36:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
expect(
|
|
|
|
calculateTop(boundingRect, 100),
|
|
|
|
).toBe(100);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns boundingRect - bottomOverflow', () => {
|
|
|
|
const boundingRect = {
|
2017-07-24 15:14:29 +00:00
|
|
|
top: window.innerHeight - 50,
|
|
|
|
height: 100,
|
2017-07-19 09:36:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
expect(
|
|
|
|
calculateTop(boundingRect, 100),
|
2017-07-24 15:14:29 +00:00
|
|
|
).toBe(window.innerHeight - 50);
|
2017-07-19 09:36:08 +00:00
|
|
|
});
|
|
|
|
});
|
2017-08-01 07:49:03 +00: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('none');
|
|
|
|
});
|
|
|
|
|
|
|
|
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 11:41:55 +00:00
|
|
|
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
|
2017-08-01 07:49:03 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('adds is-over class to el', () => {
|
|
|
|
spyOn(el.classList, 'add');
|
|
|
|
|
|
|
|
showSubLevelItems(el);
|
|
|
|
|
|
|
|
expect(
|
|
|
|
el.classList.add,
|
|
|
|
).toHaveBeenCalledWith('is-over');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows sub-items', () => {
|
|
|
|
showSubLevelItems(el);
|
|
|
|
|
|
|
|
expect(
|
|
|
|
el.querySelector('.sidebar-sub-level-items').style.display,
|
|
|
|
).toBe('block');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets transform of sub-items', () => {
|
2017-08-01 11:41:55 +00:00
|
|
|
const subItems = el.querySelector('.sidebar-sub-level-items');
|
2017-08-01 07:49:03 +00:00
|
|
|
showSubLevelItems(el);
|
|
|
|
|
|
|
|
expect(
|
2017-08-01 11:41:55 +00:00
|
|
|
subItems.style.transform,
|
|
|
|
).toBe(`translate3d(0px, ${el.getBoundingClientRect().top}px, 0px)`);
|
2017-08-01 07:49:03 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('sets is-above when element is above', () => {
|
|
|
|
const subItems = el.querySelector('.sidebar-sub-level-items');
|
2017-08-01 10:55:37 +00:00
|
|
|
subItems.style.height = `${window.innerHeight + el.offsetHeight}px`;
|
|
|
|
el.style.top = `${window.innerHeight - el.offsetHeight}px`;
|
2017-08-01 07:49:03 +00:00
|
|
|
|
2017-08-01 10:55:37 +00:00
|
|
|
spyOn(subItems.classList, 'add');
|
2017-08-01 07:49:03 +00:00
|
|
|
|
|
|
|
showSubLevelItems(el);
|
|
|
|
|
|
|
|
expect(
|
2017-08-01 10:55:37 +00:00
|
|
|
subItems.classList.add,
|
2017-08-01 07:49:03 +00:00
|
|
|
).toHaveBeenCalledWith('is-above');
|
|
|
|
});
|
|
|
|
});
|
2017-07-19 09:36:08 +00:00
|
|
|
});
|