diff options
author | Phil Hughes <me@iamphill.com> | 2017-09-25 11:40:40 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-09-25 11:40:40 +0100 |
commit | f389f9081f92b68d8d8369d29e8f05a65f47e9dc (patch) | |
tree | ebe268c563c3f7168ba82db888b9d82f3244b0be | |
parent | 65415e3208c29f52e3da6ccbdcdabcdf00bdb67b (diff) | |
download | gitlab-ce-f389f9081f92b68d8d8369d29e8f05a65f47e9dc.tar.gz |
refactor tests to actually test browser behaviour
-rw-r--r-- | app/assets/javascripts/lib/utils/sticky.js | 2 | ||||
-rw-r--r-- | spec/javascripts/lib/utils/sticky_spec.js | 85 |
2 files changed, 38 insertions, 49 deletions
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js index 2803939c7cd..64db42701ce 100644 --- a/app/assets/javascripts/lib/utils/sticky.js +++ b/app/assets/javascripts/lib/utils/sticky.js @@ -22,7 +22,7 @@ export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => { } else if (top > stickyTop && el.classList.contains('is-stuck')) { el.classList.remove('is-stuck'); - if (insertPlaceholder && el.nextElementSibling.classList.contains('sticky-placeholder')) { + if (insertPlaceholder && el.nextElementSibling && el.nextElementSibling.classList.contains('sticky-placeholder')) { el.nextElementSibling.remove(); } } diff --git a/spec/javascripts/lib/utils/sticky_spec.js b/spec/javascripts/lib/utils/sticky_spec.js index 5ffc41589e5..8ddf86c4ee4 100644 --- a/spec/javascripts/lib/utils/sticky_spec.js +++ b/spec/javascripts/lib/utils/sticky_spec.js @@ -1,86 +1,75 @@ import { isSticky } from '~/lib/utils/sticky'; describe('sticky', () => { - const el = { - offsetTop: 0, - classList: {}, - parentNode: {}, - nextElementSibling: {}, - }; - let isStuck = false; + let el; beforeEach(() => { - el.offsetTop = 0; - el.classList.add = jasmine.createSpy('classListAdd'); - el.classList.remove = jasmine.createSpy('classListRemove'); - el.classList.contains = jasmine.createSpy('classListContains').and.callFake(() => isStuck); - el.parentNode.insertBefore = jasmine.createSpy('insertBefore'); - el.nextElementSibling.remove = jasmine.createSpy('nextElementSibling'); - el.nextElementSibling.classList = { - contains: jasmine.createSpy('classListContains').and.returnValue(true), - }; - }); + document.body.innerHTML = ` + <div class="parent"> + <div id="js-sticky" style="position: relative;"></div> + </div> + `; - afterEach(() => { - isStuck = false; + el = document.getElementById('js-sticky'); }); - describe('classList.remove', () => { - it('does not call classList.remove when stuck', () => { - isSticky(el, 0, 0); + describe('when stuck', () => { + it('does not remove is-stuck class', () => { + isSticky(el, 0, el.offsetTop); + isSticky(el, 0, el.offsetTop); expect( - el.classList.remove, - ).not.toHaveBeenCalled(); + el.classList.contains('is-stuck'), + ).toBeTruthy(); }); - it('calls classList.remove when no longer stuck', () => { - isStuck = true; - - el.offsetTop = 10; - isSticky(el, 0, 0); + it('adds is-stuck class', () => { + isSticky(el, 0, el.offsetTop); expect( - el.classList.remove, - ).toHaveBeenCalledWith('is-stuck'); + el.classList.contains('is-stuck'), + ).toBeTruthy(); }); - it('removes placeholder when no longer stuck', () => { - isStuck = true; - - el.offsetTop = 10; - isSticky(el, 0, 0, true); + it('inserts placeholder element', () => { + isSticky(el, 0, el.offsetTop, true); expect( - el.nextElementSibling.remove, - ).toHaveBeenCalled(); + document.querySelector('.sticky-placeholder'), + ).not.toBeNull(); }); }); - describe('classList.add', () => { - it('calls classList.add when stuck', () => { + describe('when not stuck', () => { + it('removes is-stuck class', () => { + spyOn(el.classList, 'remove').and.callThrough(); + + isSticky(el, 0, el.offsetTop); isSticky(el, 0, 0); expect( - el.classList.add, + el.classList.remove, ).toHaveBeenCalledWith('is-stuck'); + expect( + el.classList.contains('is-stuck'), + ).toBeFalsy(); }); - it('does not call classList.add when not stuck', () => { - el.offsetTop = 10; + it('does not add is-stuck class', () => { isSticky(el, 0, 0); expect( - el.classList.add, - ).not.toHaveBeenCalled(); + el.classList.contains('is-stuck'), + ).toBeFalsy(); }); - it('inserts placeholder element when stuck', () => { + it('removes placeholder', () => { + isSticky(el, 0, el.offsetTop, true); isSticky(el, 0, 0, true); expect( - el.parentNode.insertBefore, - ).toHaveBeenCalled(); + document.querySelector('.sticky-placeholder'), + ).toBeNull(); }); }); }); |