diff options
Diffstat (limited to 'js/tests/unit')
| -rw-r--r-- | js/tests/unit/scrollspy.spec.js | 87 |
1 files changed, 41 insertions, 46 deletions
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index 248639e17..3412efaa1 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -7,6 +7,11 @@ import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fi describe('ScrollSpy', () => { let fixtureEl + const scrollTo = (el, height) => { + // el.scrollTo({ top: height }) + el.scrollTop = height + } + const onScrollStop = (callback, element, timeout = 30) => { let handle = null const onScroll = function () { @@ -36,25 +41,29 @@ describe('ScrollSpy', () => { ].join('') } - const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, spy, cb }) => { + const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, cb }) => { const element = fixtureEl.querySelector(elementSelector) const target = fixtureEl.querySelector(targetSelector) // add top padding to fix Chrome on Android failures - const paddingTop = 5 + const paddingTop = 0 const parentOffset = getComputedStyle(contentEl).getPropertyValue('position') === 'relative' ? 0 : contentEl.offsetTop const scrollHeight = (target.offsetTop - parentOffset) + paddingTop - function listener() { + contentEl.addEventListener('activate.bs.scrollspy', event => { + + if (scrollSpy._activeTarget !== element) { + return + } + expect(element.classList.contains('active')).toEqual(true) expect(scrollSpy._activeTarget).toEqual(element) - spy.calls.reset() + expect(event.relatedTarget).toEqual(element) cb() - } + }) setTimeout(() => { // in case we scroll something before the test - onScrollStop(listener, contentEl) - contentEl.scrollTo({ top: scrollHeight }) - }, 50) + scrollTo(contentEl, scrollHeight) + }, 100) } beforeAll(() => { @@ -151,7 +160,7 @@ describe('ScrollSpy', () => { done() }, scrollSpyEl) - scrollSpyEl.scrollTo({ top: 350 }) + scrollTo(scrollSpyEl, 350) }) it('should only switch "active" class on current target specified w element', done => { @@ -189,7 +198,7 @@ describe('ScrollSpy', () => { done() }, scrollSpyEl) - scrollSpyEl.scrollTo({ top: 350 }) + scrollTo(scrollSpyEl, 350) }) it('should correctly select middle navigation option when large offset is used', done => { @@ -225,7 +234,7 @@ describe('ScrollSpy', () => { done() }, contentEl) - contentEl.scrollTo({ top: 550 }) + scrollTo(contentEl, 550) }) it('should add the active class to the correct element', done => { @@ -247,22 +256,19 @@ describe('ScrollSpy', () => { offset: 0, target: '.navbar' }) - const spy = spyOn(scrollSpy, '_process').and.callThrough() testElementIsActiveAfterScroll({ elementSelector: '#a-1', targetSelector: '#div-1', contentEl, scrollSpy, - spy, cb: () => { testElementIsActiveAfterScroll({ elementSelector: '#a-2', targetSelector: '#div-2', contentEl, scrollSpy, - spy, - cb: () => done() + cb: done }) } }) @@ -287,22 +293,19 @@ describe('ScrollSpy', () => { offset: 0, target: '.navbar' }) - const spy = spyOn(scrollSpy, '_process').and.callThrough() testElementIsActiveAfterScroll({ elementSelector: '#a-1', targetSelector: '#div-1', contentEl, scrollSpy, - spy, cb: () => { testElementIsActiveAfterScroll({ elementSelector: '#a-2', targetSelector: '#div-2', contentEl, scrollSpy, - spy, - cb: () => done() + cb: done }) } }) @@ -327,22 +330,19 @@ describe('ScrollSpy', () => { offset: 0, target: '.navbar' }) - const spy = spyOn(scrollSpy, '_process').and.callThrough() testElementIsActiveAfterScroll({ elementSelector: '#a-1', targetSelector: '#div-1', contentEl, scrollSpy, - spy, cb: () => { testElementIsActiveAfterScroll({ elementSelector: '#a-2', targetSelector: '#div-2', contentEl, scrollSpy, - spy, - cb: () => done() + cb: done }) } }) @@ -382,10 +382,10 @@ describe('ScrollSpy', () => { expect(active()).toBeNull() done() }, contentEl) - contentEl.scrollTo({ top: 0 }) + scrollTo(contentEl, 0) }, contentEl) - contentEl.scrollTo({ top: 201 }) + scrollTo(contentEl, 201) }) it('should not clear selection if above the first section and first section is at the top', done => { @@ -428,10 +428,10 @@ describe('ScrollSpy', () => { done() }, contentEl) - contentEl.scrollTo({ top: 0 }) + scrollTo(contentEl, 0) }, contentEl) - contentEl.scrollTo({ top: startOfSectionTwo }) + scrollTo(contentEl, startOfSectionTwo) }) it('should correctly select navigation element on backward scrolling when each target section height is 100%', done => { @@ -459,46 +459,41 @@ describe('ScrollSpy', () => { offset: 0, target: '.navbar' }) - const spy = spyOn(scrollSpy, '_process').and.callThrough() + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ elementSelector: '#li-100-5', targetSelector: '#div-100-5', - scrollSpy, - spy, contentEl, - cb() { - contentEl.scrollTo({ top: 0 }) + scrollSpy, + cb: () => { + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ elementSelector: '#li-100-4', targetSelector: '#div-100-4', - scrollSpy, - spy, contentEl, - cb() { - contentEl.scrollTo({ top: 0 }) + scrollSpy, + cb: () => { + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ elementSelector: '#li-100-3', targetSelector: '#div-100-3', - scrollSpy, - spy, contentEl, - cb() { - contentEl.scrollTo({ top: 0 }) + scrollSpy, + cb: () => { + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ elementSelector: '#li-100-2', targetSelector: '#div-100-2', - scrollSpy, - spy, contentEl, - cb() { - contentEl.scrollTo({ top: 0 }) + scrollSpy, + cb: () => { + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ elementSelector: '#li-100-1', targetSelector: '#div-100-1', - scrollSpy, - spy, contentEl, + scrollSpy, cb: done }) } |