aboutsummaryrefslogtreecommitdiff
path: root/js/tests/unit/scrollspy.spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/tests/unit/scrollspy.spec.js')
-rw-r--r--js/tests/unit/scrollspy.spec.js1195
1 files changed, 720 insertions, 475 deletions
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index f64b8f1dc..fc44471c4 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -1,28 +1,71 @@
-import ScrollSpy from '../../src/scrollspy'
-import Manipulator from '../../src/dom/manipulator'
-import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
+import EventHandler from '../../src/dom/event-handler.js'
+import ScrollSpy from '../../src/scrollspy.js'
+import {
+ clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
describe('ScrollSpy', () => {
let fixtureEl
- const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, spy, cb }) => {
+ const getElementScrollSpy = element => element.scrollTo ?
+ spyOn(element, 'scrollTo').and.callThrough() :
+ spyOnProperty(element, 'scrollTop', 'set').and.callThrough()
+
+ const scrollTo = (el, height) => {
+ el.scrollTop = height
+ }
+
+ const onScrollStop = (callback, element, timeout = 30) => {
+ let handle = null
+ const onScroll = function () {
+ if (handle) {
+ window.clearTimeout(handle)
+ }
+
+ handle = setTimeout(() => {
+ element.removeEventListener('scroll', onScroll)
+ callback()
+ }, timeout + 1)
+ }
+
+ element.addEventListener('scroll', onScroll)
+ }
+
+ const getDummyFixture = () => {
+ return [
+ '<nav id="navBar" class="navbar">',
+ ' <ul class="nav">',
+ ' <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
+ ' </ul>',
+ '</nav>',
+ '<div class="content" data-bs-target="#navBar" style="overflow-y: auto">',
+ ' <div id="div-jsm-1">div 1</div>',
+ '</div>'
+ ].join('')
+ }
+
+ 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 scrollHeight = Math.ceil(contentEl.scrollTop + Manipulator.position(target).top) + paddingTop
-
- function listener() {
- expect(element.classList.contains('active')).toEqual(true)
- contentEl.removeEventListener('scroll', listener)
- expect(scrollSpy._process).toHaveBeenCalled()
- spy.calls.reset()
+ const paddingTop = 0
+ const parentOffset = getComputedStyle(contentEl).getPropertyValue('position') === 'relative' ? 0 : contentEl.offsetTop
+ const scrollHeight = (target.offsetTop - parentOffset) + paddingTop
+
+ contentEl.addEventListener('activate.bs.scrollspy', event => {
+ if (scrollSpy._activeTarget !== element) {
+ return
+ }
+
+ expect(element).toHaveClass('active')
+ expect(scrollSpy._activeTarget).toEqual(element)
+ expect(event.relatedTarget).toEqual(element)
cb()
- }
+ })
- contentEl.addEventListener('scroll', listener)
- contentEl.scrollTop = scrollHeight
+ setTimeout(() => { // in case we scroll something before the test
+ scrollTo(contentEl, scrollHeight)
+ }, 100)
}
beforeAll(() => {
@@ -53,28 +96,25 @@ describe('ScrollSpy', () => {
describe('constructor', () => {
it('should take care of element either passed as a CSS selector or DOM element', () => {
- fixtureEl.innerHTML = '<nav id="navigation"></nav><div class="content"></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const sSpyEl = fixtureEl.querySelector('#navigation')
- const sSpyBySelector = new ScrollSpy('#navigation')
+ const sSpyEl = fixtureEl.querySelector('.content')
+ const sSpyBySelector = new ScrollSpy('.content')
const sSpyByElement = new ScrollSpy(sSpyEl)
expect(sSpyBySelector._element).toEqual(sSpyEl)
expect(sSpyByElement._element).toEqual(sSpyEl)
})
- it('should not process element without target', () => {
+ it('should null, if element is not scrollable', () => {
fixtureEl.innerHTML = [
'<nav id="navigation" class="navbar">',
- ' <ul class="navbar-nav">',
- ' <li class="nav-item"><a class="nav-link active" id="one-link" href="#">One</a></li>',
- ' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
- ' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
+ ' <ul class="navbar-nav">' +
+ ' <li class="nav-item"><a class="nav-link active" id="one-link" href="#">One</a></li>' +
' </ul>',
'</nav>',
- '<div id="content" style="height: 200px; overflow-y: auto;">',
- ' <div id="two" style="height: 300px;"></div>',
- ' <div id="three" style="height: 10px;"></div>',
+ '<div id="content">',
+ ' <div id="1" style="height: 300px;">test</div>',
'</div>'
].join('')
@@ -82,533 +122,567 @@ describe('ScrollSpy', () => {
target: '#navigation'
})
- expect(scrollSpy._targets.length).toEqual(2)
+ expect(scrollSpy._observer.root).toBeNull()
+ expect(scrollSpy._rootElement).toBeNull()
})
- it('should only switch "active" class on current target', done => {
+ it('should respect threshold option', () => {
fixtureEl.innerHTML = [
- '<div id="root" class="active" style="display: block">',
- ' <div class="topbar">',
- ' <div class="topbar-inner">',
- ' <div class="container" id="ss-target">',
- ' <ul class="nav">',
- ' <li class="nav-item"><a href="#masthead">Overview</a></li>',
- ' <li class="nav-item"><a href="#detail">Detail</a></li>',
- ' </ul>',
- ' </div>',
- ' </div>',
- ' </div>',
- ' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
- ' <div style="height: 200px;">',
- ' <h4 id="masthead">Overview</h4>',
- ' <p style="height: 200px;"></p>',
- ' </div>',
- ' <div style="height: 200px;">',
- ' <h4 id="detail">Detail</h4>',
- ' <p style="height: 200px;"></p>',
- ' </div>',
- ' </div>',
+ '<ul id="navigation" class="navbar">',
+ ' <a class="nav-link active" id="one-link" href="#">One</a>' +
+ '</ul>',
+ '<div id="content">',
+ ' <div id="one-link">test</div>',
'</div>'
].join('')
- const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
- const rootEl = fixtureEl.querySelector('#root')
- const scrollSpy = new ScrollSpy(scrollSpyEl, {
- target: 'ss-target'
- })
-
- spyOn(scrollSpy, '_process').and.callThrough()
-
- scrollSpyEl.addEventListener('scroll', () => {
- expect(rootEl.classList.contains('active')).toEqual(true)
- expect(scrollSpy._process).toHaveBeenCalled()
- done()
+ const scrollSpy = new ScrollSpy('#content', {
+ target: '#navigation',
+ threshold: [1]
})
- scrollSpyEl.scrollTop = 350
+ expect(scrollSpy._observer.thresholds).toEqual([1])
})
- it('should only switch "active" class on current target specified w element', done => {
+ it('should respect threshold option markup', () => {
fixtureEl.innerHTML = [
- '<div id="root" class="active" style="display: block">',
- ' <div class="topbar">',
- ' <div class="topbar-inner">',
- ' <div class="container" id="ss-target">',
- ' <ul class="nav">',
- ' <li class="nav-item"><a href="#masthead">Overview</a></li>',
- ' <li class="nav-item"><a href="#detail">Detail</a></li>',
- ' </ul>',
- ' </div>',
- ' </div>',
- ' </div>',
- ' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
- ' <div style="height: 200px;">',
- ' <h4 id="masthead">Overview</h4>',
- ' <p style="height: 200px;"></p>',
- ' </div>',
- ' <div style="height: 200px;">',
- ' <h4 id="detail">Detail</h4>',
- ' <p style="height: 200px;"></p>',
- ' </div>',
- ' </div>',
+ '<ul id="navigation" class="navbar">',
+ ' <a class="nav-link active" id="one-link" href="#">One</a>' +
+ '</ul>',
+ '<div id="content" data-bs-threshold="0,0.2,1">',
+ ' <div id="one-link">test</div>',
'</div>'
].join('')
- const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
- const rootEl = fixtureEl.querySelector('#root')
- const scrollSpy = new ScrollSpy(scrollSpyEl, {
- target: fixtureEl.querySelector('#ss-target')
+ const scrollSpy = new ScrollSpy('#content', {
+ target: '#navigation'
})
- spyOn(scrollSpy, '_process').and.callThrough()
-
- scrollSpyEl.addEventListener('scroll', () => {
- expect(rootEl.classList.contains('active')).toEqual(true)
- expect(scrollSpy._process).toHaveBeenCalled()
- done()
- })
+ // See https://stackoverflow.com/a/45592926
+ const expectToBeCloseToArray = (actual, expected) => {
+ expect(actual.length).toBe(expected.length)
+ for (const x of actual) {
+ const i = actual.indexOf(x)
+ expect(x).withContext(`[${i}]`).toBeCloseTo(expected[i])
+ }
+ }
- scrollSpyEl.scrollTop = 350
+ expectToBeCloseToArray(scrollSpy._observer.thresholds, [0, 0.2, 1])
})
- it('should correctly select middle navigation option when large offset is used', done => {
+ it('should not take count to not visible sections', () => {
fixtureEl.innerHTML = [
- '<div id="header" style="height: 500px;"></div>',
'<nav id="navigation" class="navbar">',
- ' <ul class="navbar-nav">',
- ' <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
- ' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
- ' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
- ' </ul>',
+ ' <ul class="navbar-nav">',
+ ' <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
+ ' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
+ ' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
+ ' </ul>',
'</nav>',
'<div id="content" style="height: 200px; overflow-y: auto;">',
- ' <div id="one" style="height: 500px;"></div>',
- ' <div id="two" style="height: 300px;"></div>',
- ' <div id="three" style="height: 10px;"></div>',
+ ' <div id="one" style="height: 300px;">test</div>',
+ ' <div id="two" hidden style="height: 300px;">test</div>',
+ ' <div id="three" style="display: none;">test</div>',
'</div>'
].join('')
- const contentEl = fixtureEl.querySelector('#content')
- const scrollSpy = new ScrollSpy(contentEl, {
- target: '#navigation',
- offset: Manipulator.position(contentEl).top
- })
-
- spyOn(scrollSpy, '_process').and.callThrough()
-
- contentEl.addEventListener('scroll', () => {
- expect(fixtureEl.querySelector('#one-link').classList.contains('active')).toEqual(false)
- expect(fixtureEl.querySelector('#two-link').classList.contains('active')).toEqual(true)
- expect(fixtureEl.querySelector('#three-link').classList.contains('active')).toEqual(false)
- expect(scrollSpy._process).toHaveBeenCalled()
- done()
+ const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
+ target: '#navigation'
})
- contentEl.scrollTop = 550
+ expect(scrollSpy._observableSections.size).toBe(1)
+ expect(scrollSpy._targetLinks.size).toBe(1)
})
- it('should add the active class to the correct element', done => {
+ it('should not process element without target', () => {
fixtureEl.innerHTML = [
- '<nav class="navbar">',
- ' <ul class="nav">',
- ' <li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>',
- ' <li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>',
+ '<nav id="navigation" class="navbar">',
+ ' <ul class="navbar-nav">',
+ ' <li class="nav-item"><a class="nav-link active" id="one-link" href="#">One</a></li>',
+ ' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
+ ' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
' </ul>',
'</nav>',
- '<div class="content" style="overflow: auto; height: 50px">',
- ' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
- ' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
+ '<div id="content" style="height: 200px; overflow-y: auto;">',
+ ' <div id="two" style="height: 300px;">test</div>',
+ ' <div id="three" style="height: 10px;">test2</div>',
'</div>'
].join('')
- const contentEl = fixtureEl.querySelector('.content')
- const scrollSpy = new ScrollSpy(contentEl, {
- 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()
- })
- }
+ const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
+ target: '#navigation'
})
- })
- it('should add the active class to the correct element (nav markup)', done => {
- fixtureEl.innerHTML = [
- '<nav class="navbar">',
- ' <nav class="nav">',
- ' <a class="nav-link" id="a-1" href="#div-1">div 1</a>',
- ' <a class="nav-link" id="a-2" href="#div-2">div 2</a>',
- ' </nav>',
- '</nav>',
- '<div class="content" style="overflow: auto; height: 50px">',
- ' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
- ' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
- '</div>'
- ].join('')
+ expect(scrollSpy._targetLinks).toHaveSize(2)
+ })
- const contentEl = fixtureEl.querySelector('.content')
- const scrollSpy = new ScrollSpy(contentEl, {
- 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()
- })
- }
+ it('should only switch "active" class on current target', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '<div id="root" class="active" style="display: block">',
+ ' <div class="topbar">',
+ ' <div class="topbar-inner">',
+ ' <div class="container" id="ss-target">',
+ ' <ul class="nav">',
+ ' <li class="nav-item"><a href="#masthead">Overview</a></li>',
+ ' <li class="nav-item"><a href="#detail">Detail</a></li>',
+ ' </ul>',
+ ' </div>',
+ ' </div>',
+ ' </div>',
+ ' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
+ ' <div style="height: 200px;" id="masthead">Overview</div>',
+ ' <div style="height: 200px;" id="detail">Detail</div>',
+ ' </div>',
+ '</div>'
+ ].join('')
+
+ const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
+ const rootEl = fixtureEl.querySelector('#root')
+ const scrollSpy = new ScrollSpy(scrollSpyEl, {
+ target: 'ss-target'
+ })
+
+ const spy = spyOn(scrollSpy, '_process').and.callThrough()
+
+ onScrollStop(() => {
+ expect(rootEl).toHaveClass('active')
+ expect(spy).toHaveBeenCalled()
+ resolve()
+ }, scrollSpyEl)
+
+ scrollTo(scrollSpyEl, 350)
})
})
- it('should add the active class to the correct element (list-group markup)', done => {
- fixtureEl.innerHTML = [
- '<nav class="navbar">',
- ' <div class="list-group">',
- ' <a class="list-group-item" id="a-1" href="#div-1">div 1</a>',
- ' <a class="list-group-item" id="a-2" href="#div-2">div 2</a>',
- ' </div>',
- '</nav>',
- '<div class="content" style="overflow: auto; height: 50px">',
- ' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
- ' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
- '</div>'
- ].join('')
-
- const contentEl = fixtureEl.querySelector('.content')
- const scrollSpy = new ScrollSpy(contentEl, {
- 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()
- })
- }
+ it('should not process data if `activeTarget` is same as given target', () => {
+ return new Promise((resolve, reject) => {
+ fixtureEl.innerHTML = [
+ '<nav class="navbar">',
+ ' <ul class="nav">',
+ ' <li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>',
+ ' <li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>',
+ ' </ul>',
+ '</nav>',
+ '<div class="content" style="overflow: auto; height: 50px">',
+ ' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
+ ' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
+ '</div>'
+ ].join('')
+
+ const contentEl = fixtureEl.querySelector('.content')
+ const scrollSpy = new ScrollSpy(contentEl, {
+ offset: 0,
+ target: '.navbar'
+ })
+
+ const triggerSpy = spyOn(EventHandler, 'trigger').and.callThrough()
+
+ scrollSpy._activeTarget = fixtureEl.querySelector('#a-1')
+ testElementIsActiveAfterScroll({
+ elementSelector: '#a-1',
+ targetSelector: '#div-1',
+ contentEl,
+ scrollSpy,
+ cb: reject
+ })
+
+ setTimeout(() => {
+ expect(triggerSpy).not.toHaveBeenCalled()
+ resolve()
+ }, 100)
})
})
- it('should clear selection if above the first section', done => {
- fixtureEl.innerHTML = [
- '<div id="header" style="height: 500px;"></div>',
- '<nav id="navigation" class="navbar">',
- ' <ul class="navbar-nav">',
- ' <li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>',
- ' <li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>',
- ' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
- ' </ul>',
- '</nav>',
- '<div id="content" style="height: 200px; overflow-y: auto;">',
- ' <div id="spacer" style="height: 100px;"></div>',
- ' <div id="one" style="height: 100px;"></div>',
- ' <div id="two" style="height: 100px;"></div>',
- ' <div id="three" style="height: 100px;"></div>',
- ' <div id="spacer" style="height: 100px;"></div>',
- '</div>'
- ].join('')
-
- const contentEl = fixtureEl.querySelector('#content')
- const scrollSpy = new ScrollSpy(contentEl, {
- target: '#navigation',
- offset: Manipulator.position(contentEl).top
+ it('should only switch "active" class on current target specified w element', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '<div id="root" class="active" style="display: block">',
+ ' <div class="topbar">',
+ ' <div class="topbar-inner">',
+ ' <div class="container" id="ss-target">',
+ ' <ul class="nav">',
+ ' <li class="nav-item"><a href="#masthead">Overview</a></li>',
+ ' <li class="nav-item"><a href="#detail">Detail</a></li>',
+ ' </ul>',
+ ' </div>',
+ ' </div>',
+ ' </div>',
+ ' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
+ ' <div style="height: 200px;" id="masthead">Overview</div>',
+ ' <div style="height: 200px;" id="detail">Detail</div>',
+ ' </div>',
+ '</div>'
+ ].join('')
+
+ const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
+ const rootEl = fixtureEl.querySelector('#root')
+ const scrollSpy = new ScrollSpy(scrollSpyEl, {
+ target: fixtureEl.querySelector('#ss-target')
+ })
+
+ const spy = spyOn(scrollSpy, '_process').and.callThrough()
+
+ onScrollStop(() => {
+ expect(rootEl).toHaveClass('active')
+ expect(scrollSpy._activeTarget).toEqual(fixtureEl.querySelector('[href="#detail"]'))
+ expect(spy).toHaveBeenCalled()
+ resolve()
+ }, scrollSpyEl)
+
+ scrollTo(scrollSpyEl, 350)
})
- const spy = spyOn(scrollSpy, '_process').and.callThrough()
-
- let firstTime = true
-
- contentEl.addEventListener('scroll', () => {
- const active = fixtureEl.querySelector('.active')
+ })
- expect(spy).toHaveBeenCalled()
- spy.calls.reset()
- if (firstTime) {
- expect(fixtureEl.querySelectorAll('.active').length).toEqual(1)
- expect(active.getAttribute('id')).toEqual('two-link')
- firstTime = false
- contentEl.scrollTop = 0
- } else {
- expect(active).toBeNull()
- done()
- }
+ it('should add the active class to the correct element', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '<nav class="navbar">',
+ ' <ul class="nav">',
+ ' <li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>',
+ ' <li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>',
+ ' </ul>',
+ '</nav>',
+ '<div class="content" style="overflow: auto; height: 50px">',
+ ' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
+ ' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
+ '</div>'
+ ].join('')
+
+ const contentEl = fixtureEl.querySelector('.content')
+ const scrollSpy = new ScrollSpy(contentEl, {
+ offset: 0,
+ target: '.navbar'
+ })
+
+ testElementIsActiveAfterScroll({
+ elementSelector: '#a-1',
+ targetSelector: '#div-1',
+ contentEl,
+ scrollSpy,
+ cb() {
+ testElementIsActiveAfterScroll({
+ elementSelector: '#a-2',
+ targetSelector: '#div-2',
+ contentEl,
+ scrollSpy,
+ cb: resolve
+ })
+ }
+ })
})
-
- contentEl.scrollTop = 201
})
- it('should not clear selection if above the first section and first section is at the top', done => {
- fixtureEl.innerHTML = [
- '<div id="header" style="height: 500px;"></div>',
- '<nav id="navigation" class="navbar">',
- ' <ul class="navbar-nav">',
- ' <li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>',
- ' <li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>',
- ' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
- ' </ul>',
- '</nav>',
- '<div id="content" style="height: 200px; overflow-y: auto;">',
- ' <div id="one" style="height: 100px;"></div>',
- ' <div id="two" style="height: 100px;"></div>',
- ' <div id="three" style="height: 100px;"></div>',
- ' <div id="spacer" style="height: 100px;"></div>',
- '</div>'
- ].join('')
-
- const negativeHeight = -10
- const startOfSectionTwo = 101
- const contentEl = fixtureEl.querySelector('#content')
- const scrollSpy = new ScrollSpy(contentEl, {
- target: '#navigation',
- offset: contentEl.offsetTop
+ it('should add to nav the active class to the correct element (nav markup)', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '<nav class="navbar">',
+ ' <nav class="nav">',
+ ' <a class="nav-link" id="a-1" href="#div-1">div 1</a>',
+ ' <a class="nav-link" id="a-2" href="#div-2">div 2</a>',
+ ' </nav>',
+ '</nav>',
+ '<div class="content" style="overflow: auto; height: 50px">',
+ ' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
+ ' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
+ '</div>'
+ ].join('')
+
+ const contentEl = fixtureEl.querySelector('.content')
+ const scrollSpy = new ScrollSpy(contentEl, {
+ offset: 0,
+ target: '.navbar'
+ })
+
+ testElementIsActiveAfterScroll({
+ elementSelector: '#a-1',
+ targetSelector: '#div-1',
+ contentEl,
+ scrollSpy,
+ cb() {
+ testElementIsActiveAfterScroll({
+ elementSelector: '#a-2',
+ targetSelector: '#div-2',
+ contentEl,
+ scrollSpy,
+ cb: resolve
+ })
+ }
+ })
})
- const spy = spyOn(scrollSpy, '_process').and.callThrough()
-
- let firstTime = true
-
- contentEl.addEventListener('scroll', () => {
- const active = fixtureEl.querySelector('.active')
+ })
- expect(spy).toHaveBeenCalled()
- spy.calls.reset()
- if (firstTime) {
- expect(fixtureEl.querySelectorAll('.active').length).toEqual(1)
- expect(active.getAttribute('id')).toEqual('two-link')
- firstTime = false
- contentEl.scrollTop = negativeHeight
- } else {
- expect(fixtureEl.querySelectorAll('.active').length).toEqual(1)
- expect(active.getAttribute('id')).toEqual('one-link')
- done()
- }
+ it('should add to list-group, the active class to the correct element (list-group markup)', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '<nav class="navbar">',
+ ' <div class="list-group">',
+ ' <a class="list-group-item" id="a-1" href="#div-1">div 1</a>',
+ ' <a class="list-group-item" id="a-2" href="#div-2">div 2</a>',
+ ' </div>',
+ '</nav>',
+ '<div class="content" style="overflow: auto; height: 50px">',
+ ' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
+ ' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
+ '</div>'
+ ].join('')
+
+ const contentEl = fixtureEl.querySelector('.content')
+ const scrollSpy = new ScrollSpy(contentEl, {
+ offset: 0,
+ target: '.navbar'
+ })
+
+ testElementIsActiveAfterScroll({
+ elementSelector: '#a-1',
+ targetSelector: '#div-1',
+ contentEl,
+ scrollSpy,
+ cb() {
+ testElementIsActiveAfterScroll({
+ elementSelector: '#a-2',
+ targetSelector: '#div-2',
+ contentEl,
+ scrollSpy,
+ cb: resolve
+ })
+ }
+ })
})
-
- contentEl.scrollTop = startOfSectionTwo
})
- it('should correctly select navigation element on backward scrolling when each target section height is 100%', done => {
- fixtureEl.innerHTML = [
- '<nav class="navbar">',
- ' <ul class="nav">',
- ' <li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>',
- ' <li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>',
- ' <li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>',
- ' <li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>',
- ' <li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>',
- ' </ul>',
- '</nav>',
- '<div class="content" style="position: relative; overflow: auto; height: 100px">',
- ' <div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>',
- ' <div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>',
- ' <div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>',
- ' <div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>',
- ' <div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>',
- '</div>'
- ].join('')
-
- const contentEl = fixtureEl.querySelector('.content')
- const scrollSpy = new ScrollSpy(contentEl, {
- offset: 0,
- target: '.navbar'
- })
- const spy = spyOn(scrollSpy, '_process').and.callThrough()
-
- testElementIsActiveAfterScroll({
- elementSelector: '#li-100-5',
- targetSelector: '#div-100-5',
- scrollSpy,
- spy,
- contentEl,
- cb() {
- contentEl.scrollTop = 0
- testElementIsActiveAfterScroll({
- elementSelector: '#li-100-4',
- targetSelector: '#div-100-4',
- scrollSpy,
- spy,
- contentEl,
- cb() {
- contentEl.scrollTop = 0
- testElementIsActiveAfterScroll({
- elementSelector: '#li-100-3',
- targetSelector: '#div-100-3',
- scrollSpy,
- spy,
- contentEl,
- cb() {
- contentEl.scrollTop = 0
- testElementIsActiveAfterScroll({
- elementSelector: '#li-100-2',
- targetSelector: '#div-100-2',
- scrollSpy,
- spy,
- contentEl,
- cb() {
- contentEl.scrollTop = 0
- testElementIsActiveAfterScroll({
- elementSelector: '#li-100-1',
- targetSelector: '#div-100-1',
- scrollSpy,
- spy,
- contentEl,
- cb: done
- })
- }
- })
- }
- })
- }
- })
- }
+ it('should clear selection if above the first section', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '<div id="header" style="height: 500px;"></div>',
+ '<nav id="navigation" class="navbar">',
+ ' <ul class="navbar-nav">',
+ ' <li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>',
+ ' <li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>',
+ ' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
+ ' </ul>',
+ '</nav>',
+ '<div id="content" style="height: 200px; overflow-y: auto;">',
+ ' <div id="spacer" style="height: 200px;"></div>',
+ ' <div id="one" style="height: 100px;">text</div>',
+ ' <div id="two" style="height: 100px;">text</div>',
+ ' <div id="three" style="height: 100px;">text</div>',
+ ' <div id="spacer" style="height: 100px;"></div>',
+ '</div>'
+ ].join('')
+
+ const contentEl = fixtureEl.querySelector('#content')
+ const scrollSpy = new ScrollSpy(contentEl, {
+ target: '#navigation',
+ offset: contentEl.offsetTop
+ })
+ const spy = spyOn(scrollSpy, '_process').and.callThrough()
+
+ onScrollStop(() => {
+ const active = () => fixtureEl.querySelector('.active')
+ expect(spy).toHaveBeenCalled()
+
+ expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
+ expect(active().getAttribute('id')).toEqual('two-link')
+ onScrollStop(() => {
+ expect(active()).toBeNull()
+ resolve()
+ }, contentEl)
+ scrollTo(contentEl, 0)
+ }, contentEl)
+
+ scrollTo(contentEl, 200)
})
})
- it('should allow passed in option offset method: offset', () => {
- fixtureEl.innerHTML = [
- '<nav class="navbar">',
- ' <ul class="nav">',
- ' <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
- ' <li class="nav-item"><a id="li-jsm-2" class="nav-link" href="#div-jsm-2">div 2</a></li>',
- ' <li class="nav-item"><a id="li-jsm-3" class="nav-link" href="#div-jsm-3">div 3</a></li>',
- ' </ul>',
- '</nav>',
- '<div class="content" style="position: relative; overflow: auto; height: 100px">',
- ' <div id="div-jsm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>',
- ' <div id="div-jsm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>',
- ' <div id="div-jsm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>',
- '</div>'
- ].join('')
-
- const contentEl = fixtureEl.querySelector('.content')
- const targetEl = fixtureEl.querySelector('#div-jsm-2')
- const scrollSpy = new ScrollSpy(contentEl, {
- target: '.navbar',
- offset: 0,
- method: 'offset'
+ it('should not clear selection if above the first section and first section is at the top', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '<div id="header" style="height: 500px;"></div>',
+ '<nav id="navigation" class="navbar">',
+ ' <ul class="navbar-nav">',
+ ' <li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>',
+ ' <li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>',
+ ' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
+ ' </ul>',
+ '</nav>',
+ '<div id="content" style="height: 150px; overflow-y: auto;">',
+ ' <div id="one" style="height: 100px;">test</div>',
+ ' <div id="two" style="height: 100px;">test</div>',
+ ' <div id="three" style="height: 100px;">test</div>',
+ ' <div id="spacer" style="height: 100px;">test</div>',
+ '</div>'
+ ].join('')
+
+ const negativeHeight = 0
+ const startOfSectionTwo = 101
+ const contentEl = fixtureEl.querySelector('#content')
+ // eslint-disable-next-line no-unused-vars
+ const scrollSpy = new ScrollSpy(contentEl, {
+ target: '#navigation',
+ rootMargin: '0px 0px -50%'
+ })
+
+ onScrollStop(() => {
+ const activeId = () => fixtureEl.querySelector('.active').getAttribute('id')
+
+ expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
+ expect(activeId()).toEqual('two-link')
+ scrollTo(contentEl, negativeHeight)
+
+ onScrollStop(() => {
+ expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
+ expect(activeId()).toEqual('one-link')
+ resolve()
+ }, contentEl)
+
+ scrollTo(contentEl, 0)
+ }, contentEl)
+
+ scrollTo(contentEl, startOfSectionTwo)
})
+ })
- expect(scrollSpy._offsets[1]).toEqual(Manipulator.offset(targetEl).top)
- expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.position(targetEl).top)
+ it('should correctly select navigation element on backward scrolling when each target section height is 100%', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '<nav class="navbar">',
+ ' <ul class="nav">',
+ ' <li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>',
+ ' <li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>',
+ ' <li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>',
+ ' <li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>',
+ ' <li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>',
+ ' </ul>',
+ '</nav>',
+ '<div class="content" style="position: relative; overflow: auto; height: 100px">',
+ ' <div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>',
+ ' <div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>',
+ ' <div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>',
+ ' <div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>',
+ ' <div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>',
+ '</div>'
+ ].join('')
+
+ const contentEl = fixtureEl.querySelector('.content')
+ const scrollSpy = new ScrollSpy(contentEl, {
+ offset: 0,
+ target: '.navbar'
+ })
+
+ scrollTo(contentEl, 0)
+ testElementIsActiveAfterScroll({
+ elementSelector: '#li-100-5',
+ targetSelector: '#div-100-5',
+ contentEl,
+ scrollSpy,
+ cb() {
+ scrollTo(contentEl, 0)
+ testElementIsActiveAfterScroll({
+ elementSelector: '#li-100-2',
+ targetSelector: '#div-100-2',
+ contentEl,
+ scrollSpy,
+ cb() {
+ scrollTo(contentEl, 0)
+ testElementIsActiveAfterScroll({
+ elementSelector: '#li-100-3',
+ targetSelector: '#div-100-3',
+ contentEl,
+ scrollSpy,
+ cb() {
+ scrollTo(contentEl, 0)
+ testElementIsActiveAfterScroll({
+ elementSelector: '#li-100-2',
+ targetSelector: '#div-100-2',
+ contentEl,
+ scrollSpy,
+ cb() {
+ scrollTo(contentEl, 0)
+ testElementIsActiveAfterScroll({
+ elementSelector: '#li-100-1',
+ targetSelector: '#div-100-1',
+ contentEl,
+ scrollSpy,
+ cb: resolve
+ })
+ }
+ })
+ }
+ })
+ }
+ })
+ }
+ })
+ })
})
+ })
- it('should allow passed in option offset method: position', () => {
- fixtureEl.innerHTML = [
- '<nav class="navbar">',
- ' <ul class="nav">',
- ' <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
- ' <li class="nav-item"><a id="li-jsm-2" class="nav-link" href="#div-jsm-2">div 2</a></li>',
- ' <li class="nav-item"><a id="li-jsm-3" class="nav-link" href="#div-jsm-3">div 3</a></li>',
- ' </ul>',
- '</nav>',
- '<div class="content" style="position: relative; overflow: auto; height: 100px">',
- ' <div id="div-jsm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>',
- ' <div id="div-jsm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>',
- ' <div id="div-jsm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>',
- '</div>'
- ].join('')
+ describe('refresh', () => {
+ it('should disconnect existing observer', () => {
+ fixtureEl.innerHTML = getDummyFixture()
- const contentEl = fixtureEl.querySelector('.content')
- const targetEl = fixtureEl.querySelector('#div-jsm-2')
- const scrollSpy = new ScrollSpy(contentEl, {
- target: '.navbar',
- offset: 0,
- method: 'position'
- })
+ const el = fixtureEl.querySelector('.content')
+ const scrollSpy = new ScrollSpy(el)
+
+ const spy = spyOn(scrollSpy._observer, 'disconnect')
+
+ scrollSpy.refresh()
- expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.offset(targetEl).top)
- expect(scrollSpy._offsets[1]).toEqual(Manipulator.position(targetEl).top)
+ expect(spy).toHaveBeenCalled()
})
})
describe('dispose', () => {
it('should dispose a scrollspy', () => {
- fixtureEl.innerHTML = '<div style="display: none;"></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const divEl = fixtureEl.querySelector('div')
- spyOn(divEl, 'addEventListener').and.callThrough()
- spyOn(divEl, 'removeEventListener').and.callThrough()
+ const el = fixtureEl.querySelector('.content')
+ const scrollSpy = new ScrollSpy(el)
- const scrollSpy = new ScrollSpy(divEl)
- expect(divEl.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), jasmine.any(Boolean))
+ expect(ScrollSpy.getInstance(el)).not.toBeNull()
scrollSpy.dispose()
- expect(divEl.removeEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), jasmine.any(Boolean))
+ expect(ScrollSpy.getInstance(el)).toBeNull()
})
})
describe('jQueryInterface', () => {
it('should create a scrollspy', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
jQueryMock.elements = [div]
- jQueryMock.fn.scrollspy.call(jQueryMock)
+ jQueryMock.fn.scrollspy.call(jQueryMock, { target: '#navBar' })
expect(ScrollSpy.getInstance(div)).not.toBeNull()
})
it('should create a scrollspy with given config', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
jQueryMock.elements = [div]
- jQueryMock.fn.scrollspy.call(jQueryMock, { offset: 15 })
- spyOn(ScrollSpy.prototype, 'constructor')
- expect(ScrollSpy.prototype.constructor).not.toHaveBeenCalledWith(div, { offset: 15 })
+ jQueryMock.fn.scrollspy.call(jQueryMock, { rootMargin: '100px' })
+ const spy = spyOn(ScrollSpy.prototype, 'constructor')
+ expect(spy).not.toHaveBeenCalledWith(div, { rootMargin: '100px' })
const scrollspy = ScrollSpy.getInstance(div)
expect(scrollspy).not.toBeNull()
- expect(scrollspy._config.offset).toBe(15)
+ expect(scrollspy._config.rootMargin).toEqual('100px')
})
it('should not re create a scrollspy', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
const scrollSpy = new ScrollSpy(div)
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
@@ -620,12 +694,12 @@ describe('ScrollSpy', () => {
})
it('should call a scrollspy method', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
const scrollSpy = new ScrollSpy(div)
- spyOn(scrollSpy, 'refresh')
+ const spy = spyOn(scrollSpy, 'refresh')
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
jQueryMock.elements = [div]
@@ -633,13 +707,13 @@ describe('ScrollSpy', () => {
jQueryMock.fn.scrollspy.call(jQueryMock, 'refresh')
expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)
- expect(scrollSpy.refresh).toHaveBeenCalled()
+ expect(spy).toHaveBeenCalled()
})
it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
const action = 'undefinedMethod'
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
@@ -649,29 +723,60 @@ describe('ScrollSpy', () => {
jQueryMock.fn.scrollspy.call(jQueryMock, action)
}).toThrowError(TypeError, `No method named "${action}"`)
})
+
+ it('should throw error on protected method', () => {
+ fixtureEl.innerHTML = getDummyFixture()
+
+ const div = fixtureEl.querySelector('.content')
+ const action = '_getConfig'
+
+ jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
+ jQueryMock.elements = [div]
+
+ expect(() => {
+ jQueryMock.fn.scrollspy.call(jQueryMock, action)
+ }).toThrowError(TypeError, `No method named "${action}"`)
+ })
+
+ it('should throw error if method "constructor" is being called', () => {
+ fixtureEl.innerHTML = getDummyFixture()
+
+ const div = fixtureEl.querySelector('.content')
+ const action = 'constructor'
+
+ jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
+ jQueryMock.elements = [div]
+
+ expect(() => {
+ jQueryMock.fn.scrollspy.call(jQueryMock, action)
+ }).toThrowError(TypeError, `No method named "${action}"`)
+ })
})
describe('getInstance', () => {
it('should return scrollspy instance', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
- const scrollSpy = new ScrollSpy(div)
+ const div = fixtureEl.querySelector('.content')
+ const scrollSpy = new ScrollSpy(div, { target: fixtureEl.querySelector('#navBar') })
expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)
expect(ScrollSpy.getInstance(div)).toBeInstanceOf(ScrollSpy)
})
it('should return null if there is no instance', () => {
- expect(ScrollSpy.getInstance(fixtureEl)).toEqual(null)
+ fixtureEl.innerHTML = getDummyFixture()
+
+ const div = fixtureEl.querySelector('.content')
+ expect(ScrollSpy.getInstance(div)).toBeNull()
})
})
describe('getOrCreateInstance', () => {
it('should return scrollspy instance', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
const scrollspy = new ScrollSpy(div)
expect(ScrollSpy.getOrCreateInstance(div)).toEqual(scrollspy)
@@ -680,20 +785,20 @@ describe('ScrollSpy', () => {
})
it('should return new instance when there is no scrollspy instance', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
- expect(ScrollSpy.getInstance(div)).toEqual(null)
+ expect(ScrollSpy.getInstance(div)).toBeNull()
expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy)
})
it('should return new instance when there is no scrollspy instance with given configuration', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
- expect(ScrollSpy.getInstance(div)).toEqual(null)
+ expect(ScrollSpy.getInstance(div)).toBeNull()
const scrollspy = ScrollSpy.getOrCreateInstance(div, {
offset: 1
})
@@ -703,9 +808,9 @@ describe('ScrollSpy', () => {
})
it('should return the instance when exists without given configuration', () => {
- fixtureEl.innerHTML = '<div></div>'
+ fixtureEl.innerHTML = getDummyFixture()
- const div = fixtureEl.querySelector('div')
+ const div = fixtureEl.querySelector('.content')
const scrollspy = new ScrollSpy(div, {
offset: 1
})
@@ -723,13 +828,153 @@ describe('ScrollSpy', () => {
describe('event handler', () => {
it('should create scrollspy on window load event', () => {
- fixtureEl.innerHTML = '<div data-bs-spy="scroll"></div>'
+ fixtureEl.innerHTML = [
+ '<div id="nav"></div>' +
+ '<div id="wrapper" data-bs-spy="scroll" data-bs-target="#nav" style="overflow-y: auto"></div>'
+ ].join('')
- const scrollSpyEl = fixtureEl.querySelector('div')
+ const scrollSpyEl = fixtureEl.querySelector('#wrapper')
window.dispatchEvent(createEvent('load'))
expect(ScrollSpy.getInstance(scrollSpyEl)).not.toBeNull()
})
})
+
+ describe('SmoothScroll', () => {
+ it('should not enable smoothScroll', () => {
+ fixtureEl.innerHTML = getDummyFixture()
+ const offSpy = spyOn(EventHandler, 'off').and.callThrough()
+ const onSpy = spyOn(EventHandler, 'on').and.callThrough()
+
+ const div = fixtureEl.querySelector('.content')
+ const target = fixtureEl.querySelector('#navBar')
+ // eslint-disable-next-line no-new
+ new ScrollSpy(div, {
+ offset: 1
+ })
+
+ expect(offSpy).not.toHaveBeenCalledWith(target, 'click.bs.scrollspy')
+ expect(onSpy).not.toHaveBeenCalledWith(target, 'click.bs.scrollspy')
+ })
+
+ it('should enable smoothScroll', () => {
+ fixtureEl.innerHTML = getDummyFixture()
+ const offSpy = spyOn(EventHandler, 'off').and.callThrough()
+ const onSpy = spyOn(EventHandler, 'on').and.callThrough()
+
+ const div = fixtureEl.querySelector('.content')
+ const target = fixtureEl.querySelector('#navBar')
+ // eslint-disable-next-line no-new
+ new ScrollSpy(div, {
+ offset: 1,
+ smoothScroll: true
+ })
+
+ expect(offSpy).toHaveBeenCalledWith(target, 'click.bs.scrollspy')
+ expect(onSpy).toHaveBeenCalledWith(target, 'click.bs.scrollspy', '[href]', jasmine.any(Function))
+ })
+
+ it('should not smoothScroll to element if it not handles a scrollspy section', () => {
+ fixtureEl.innerHTML = [
+ '<nav id="navBar" class="navbar">',
+ ' <ul class="nav">',
+ ' <a id="anchor-1" href="#div-jsm-1">div 1</a></li>',
+ ' <a id="anchor-2" href="#foo">div 2</a></li>',
+ ' </ul>',
+ '</nav>',
+ '<div class="content" data-bs-target="#navBar" style="overflow-y: auto">',
+ ' <div id="div-jsm-1">div 1</div>',
+ '</div>'
+ ].join('')
+
+ const div = fixtureEl.querySelector('.content')
+ // eslint-disable-next-line no-new
+ new ScrollSpy(div, {
+ offset: 1,
+ smoothScroll: true
+ })
+
+ const clickSpy = getElementScrollSpy(div)
+
+ fixtureEl.querySelector('#anchor-2').click()
+ expect(clickSpy).not.toHaveBeenCalled()
+ })
+
+ it('should call `scrollTop` if element doesn\'t not support `scrollTo`', () => {
+ fixtureEl.innerHTML = getDummyFixture()
+
+ const div = fixtureEl.querySelector('.content')
+ const link = fixtureEl.querySelector('[href="#div-jsm-1"]')
+ delete div.scrollTo
+ const clickSpy = getElementScrollSpy(div)
+ // eslint-disable-next-line no-new
+ new ScrollSpy(div, {
+ offset: 1,
+ smoothScroll: true
+ })
+
+ link.click()
+ expect(clickSpy).toHaveBeenCalled()
+ })
+
+ it('should smoothScroll to the proper observable element on anchor click', done => {
+ fixtureEl.innerHTML = getDummyFixture()
+
+ const div = fixtureEl.querySelector('.content')
+ const link = fixtureEl.querySelector('[href="#div-jsm-1"]')
+ const observable = fixtureEl.querySelector('#div-jsm-1')
+ const clickSpy = getElementScrollSpy(div)
+ // eslint-disable-next-line no-new
+ new ScrollSpy(div, {
+ offset: 1,
+ smoothScroll: true
+ })
+
+ setTimeout(() => {
+ if (div.scrollTo) {
+ expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'smooth' })
+ } else {
+ expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop)
+ }
+
+ done()
+ }, 100)
+ link.click()
+ })
+
+ it('should smoothscroll to observable with anchor link that contains a french word as id', done => {
+ fixtureEl.innerHTML = [
+ '<nav id="navBar" class="navbar">',
+ ' <ul class="nav">',
+ ' <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#présentation">div 1</a></li>',
+ ' </ul>',
+ '</nav>',
+ '<div class="content" data-bs-target="#navBar" style="overflow-y: auto">',
+ ' <div id="présentation">div 1</div>',
+ '</div>'
+ ].join('')
+
+ const div = fixtureEl.querySelector('.content')
+ const link = fixtureEl.querySelector('[href="#présentation"]')
+ const observable = fixtureEl.querySelector('#présentation')
+ const clickSpy = getElementScrollSpy(div)
+ // eslint-disable-next-line no-new
+ new ScrollSpy(div, {
+ offset: 1,
+ smoothScroll: true
+ })
+
+ setTimeout(() => {
+ if (div.scrollTo) {
+ expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'smooth' })
+ } else {
+ expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop)
+ }
+
+ done()
+ }, 100)
+ link.click()
+ })
+ })
})
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-05 23:39:57 +0000