diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2017-08-21 11:51:02 +0300 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2017-08-21 11:51:02 +0300 |
commit | 237d26b9d6ca4c4d60010dc8b2db29cdfb8b4e42 (patch) | |
tree | 08efccbd5d49a28ca489c3e56c63e14fe6984d4a /spec | |
parent | 55b15c21335242154c23e1b04cf34bd76371ae33 (diff) | |
parent | 150e8b30f9b80c3f207a60d93d875dd6933c5064 (diff) |
Merge branch 'fly-out-update-for-stable' into '9-5-stable'
Fixes the stable branches fly out nav JS
See merge request !13683
Diffstat (limited to 'spec')
-rw-r--r-- | spec/javascripts/fly_out_nav_spec.js | 189 |
1 files changed, 38 insertions, 151 deletions
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js index 2e81a1b056b..e13c4629214 100644 --- a/spec/javascripts/fly_out_nav_spec.js +++ b/spec/javascripts/fly_out_nav_spec.js @@ -1,16 +1,11 @@ -import Cookies from 'js-cookie'; import { calculateTop, + hideSubLevelItems, showSubLevelItems, canShowSubItems, canShowActiveSubItems, - mouseEnterTopItems, - mouseLeaveTopItem, - setOpenMenu, - mousePos, - getHideSubItemsInterval, - documentMouseMove, getHeaderHeight, + setSidebar, } from '~/fly_out_nav'; import bp from '~/breakpoints'; @@ -24,14 +19,11 @@ describe('Fly out sidebar navigation', () => { document.body.appendChild(el); spyOn(bp, 'getBreakpointSize').and.callFake(() => breakpointSize); - - setOpenMenu(null); }); afterEach(() => { - document.body.innerHTML = ''; + el.remove(); breakpointSize = 'lg'; - mousePos.length = 0; }); describe('calculateTop', () => { @@ -58,153 +50,61 @@ describe('Fly out sidebar navigation', () => { }); }); - describe('getHideSubItemsInterval', () => { + describe('hideSubLevelItems', () => { beforeEach(() => { - el.innerHTML = '<div class="sidebar-sub-level-items" style="position: fixed; top: 0; left: 100px; height: 150px;"></div>'; + el.innerHTML = '<div class="sidebar-sub-level-items"></div>'; }); - it('returns 0 if currentOpenMenu is nil', () => { - expect( - getHideSubItemsInterval(), - ).toBe(0); - }); - - 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, - }); + it('hides subitems', () => { + hideSubLevelItems(el); expect( - getHideSubItemsInterval(), - ).toBe(0); + el.querySelector('.sidebar-sub-level-items').style.display, + ).toBe(''); }); - it('returns 0 when mouse is below sub-items', () => { - const subItems = el.querySelector('.sidebar-sub-level-items'); - - showSubLevelItems(el); - documentMouseMove({ - clientX: el.getBoundingClientRect().left, - clientY: el.getBoundingClientRect().top, - }); - documentMouseMove({ - clientX: el.getBoundingClientRect().left, - clientY: (el.getBoundingClientRect().top - subItems.getBoundingClientRect().height) + 50, - }); - - expect( - getHideSubItemsInterval(), - ).toBe(0); - }); + it('does not hude subitems on mobile', () => { + breakpointSize = 'xs'; - 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, - }); - console.log(el); + hideSubLevelItems(el); expect( - getHideSubItemsInterval(), - ).toBe(300); + el.querySelector('.sidebar-sub-level-items').style.display, + ).not.toBe('none'); }); - }); - describe('mouseLeaveTopItem', () => { - beforeEach(() => { + it('removes is-over class', () => { spyOn(el.classList, 'remove'); - }); - - it('removes is-over class if currentOpenMenu is null', () => { - mouseLeaveTopItem(el); - - expect( - el.classList.remove, - ).toHaveBeenCalledWith('is-over'); - }); - - 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); + hideSubLevelItems(el); expect( el.classList.remove, ).toHaveBeenCalledWith('is-over'); }); - 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>'; - - setOpenMenu(el.querySelector('.sidebar-sub-level-items')); - mouseLeaveTopItem(el); - - expect( - el.classList.remove, - ).not.toHaveBeenCalled(); - }); - }); - - describe('mouseEnterTopItems', () => { - beforeEach(() => { - jasmine.clock().install(); - - el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute; top: 0; left: 100px; height: 200px;"></div>'; - }); - - afterEach(() => { - jasmine.clock().uninstall(); - }); - - it('shows sub-items after 0ms if no menu is open', () => { - mouseEnterTopItems(el); + it('removes is-above class from sub-items', () => { + const subItems = el.querySelector('.sidebar-sub-level-items'); - expect( - getHideSubItemsInterval(), - ).toBe(0); + spyOn(subItems.classList, 'remove'); - jasmine.clock().tick(0); + hideSubLevelItems(el); expect( - el.querySelector('.sidebar-sub-level-items').style.display, - ).toBe('block'); + subItems.classList.remove, + ).toHaveBeenCalledWith('is-above'); }); - it('shows sub-items after 300ms if a menu is currently open', () => { - documentMouseMove({ - clientX: el.getBoundingClientRect().left, - clientY: el.getBoundingClientRect().top, - }); - - setOpenMenu(el.querySelector('.sidebar-sub-level-items')); + it('does nothing if el has no sub-items', () => { + el.innerHTML = ''; - documentMouseMove({ - clientX: el.getBoundingClientRect().left + 20, - clientY: el.getBoundingClientRect().top + 10, - }); - - mouseEnterTopItems(el); - - expect( - getHideSubItemsInterval(), - ).toBe(300); + spyOn(el.classList, 'remove'); - jasmine.clock().tick(300); + hideSubLevelItems(el); expect( - el.querySelector('.sidebar-sub-level-items').style.display, - ).toBe('block'); + el.classList.remove, + ).not.toHaveBeenCalledWith(); }); }); @@ -233,7 +133,7 @@ describe('Fly out sidebar navigation', () => { ).not.toBe('block'); }); - it('shows sub-items', () => { + it('does not shows sub-items', () => { showSubLevelItems(el); expect( @@ -283,7 +183,7 @@ describe('Fly out sidebar navigation', () => { describe('canShowActiveSubItems', () => { afterEach(() => { - Cookies.remove('sidebar_collapsed'); + setSidebar(null); }); it('returns true by default', () => { @@ -292,36 +192,23 @@ describe('Fly out sidebar navigation', () => { ).toBeTruthy(); }); - it('returns false when cookie is false & element is active', () => { - Cookies.set('sidebar_collapsed', 'false'); + it('returns false when active & expanded sidebar', () => { + const sidebar = document.createElement('div'); 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'); + setSidebar(sidebar); expect( canShowActiveSubItems(el), - ).toBeTruthy(); + ).toBeFalsy(); }); - it('returns true when element is active & breakpoint is sm', () => { - breakpointSize = 'sm'; + it('returns true when active & collapsed sidebar', () => { + const sidebar = document.createElement('div'); + sidebar.classList.add('sidebar-icons-only'); el.classList.add('active'); - expect( - canShowActiveSubItems(el), - ).toBeTruthy(); - }); - - it('returns true when element is active & breakpoint is md', () => { - breakpointSize = 'md'; - el.classList.add('active'); + setSidebar(sidebar); expect( canShowActiveSubItems(el), |