diff options
Diffstat (limited to 'spec/javascripts/fly_out_nav_spec.js')
-rw-r--r-- | spec/javascripts/fly_out_nav_spec.js | 133 |
1 files changed, 132 insertions, 1 deletions
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js index d3c6dafe460..0fdaa2d8663 100644 --- a/spec/javascripts/fly_out_nav_spec.js +++ b/spec/javascripts/fly_out_nav_spec.js @@ -1,6 +1,22 @@ -import { calculateTop } from '~/fly_out_nav'; +import { + calculateTop, + setMouseOutTimeout, + getHideTimeoutInterval, + hideSubLevelItems, + showSubLevelItems, +} from '~/fly_out_nav'; describe('Fly out sidebar navigation', () => { + let el; + beforeEach(() => { + el = document.createElement('div'); + document.body.appendChild(el); + }); + + afterEach(() => { + el.remove(); + }); + describe('calculateTop', () => { it('returns boundingRect top', () => { const boundingRect = { @@ -24,4 +40,119 @@ describe('Fly out sidebar navigation', () => { ).toBe(window.innerHeight - 50); }); }); + + describe('setMouseOutTimeout', () => { + it('sets hideTimeoutInterval to 150 when inside sub items', () => { + el.innerHTML = '<div class="sidebar-sub-level-items"><div class="js-test"></div></div>'; + + setMouseOutTimeout(el.querySelector('.js-test')); + + expect( + getHideTimeoutInterval(), + ).toBe(150); + }); + + it('resets hideTimeoutInterval when not inside sub items', () => { + setMouseOutTimeout(el); + + expect( + getHideTimeoutInterval(), + ).toBe(0); + }); + }); + + 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(() => { + el.innerHTML = '<div class="sidebar-sub-level-items"></div>'; + }); + + 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', () => { + showSubLevelItems(el); + + expect( + el.querySelector('.sidebar-sub-level-items').style.transform, + ).toBe(`translate3d(0px, ${el.offsetTop}px, 0px)`); + }); + + it('sets is-above when element is above', () => { + const subItems = el.querySelector('.sidebar-sub-level-items'); + subItems.style.height = '5000px'; + el.style.position = 'relative'; + el.style.top = '1000px'; + + spyOn(el.classList, 'add'); + + showSubLevelItems(el); + + expect( + el.classList.add, + ).toHaveBeenCalledWith('is-above'); + }); + }); }); |