diff options
author | GeoSot <geo.sotis@gmail.com> | 2022-04-13 20:29:13 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-13 20:29:13 +0300 |
commit | ece16012270a9ef7781ce9269cb151c5e5961734 (patch) | |
tree | 2c0a639899c08835b58ab805d21149ccb45c1ca8 /js | |
parent | cfd2f3f7787ba22feb78d916956f6f73746f3ee3 (diff) |
Revamp Scrollspy using Intersection observer (#33421)
* Revamp scrollspy to use IntersectionObserver
* Add smooth scroll support
* Update scrollspy.js/md
* move functionality to method
* Update scrollspy.js
* Add SmoothScroll to docs example
* Refactor Using `Maps` and smaller methods
* Update scrollspy.md/js
* Update scrollspy.spec.js
* Support backwards compatibility
* minor optimizations
* Merge activation functionality
* Update scrollspy.md
* Update scrollspy.js
* Rewording some of the documentation changes
* Update scrollspy.js
* Update scrollspy.md
* tweaking calculation functionality & drop text that suggests, to deactivate target when wrapper is not visible
* tweak calculation
* Fix lint
* Support scrollspy in body & tests
* change doc example to a more valid solution
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Diffstat (limited to 'js')
-rw-r--r-- | js/src/dom/manipulator.js | 16 | ||||
-rw-r--r-- | js/src/scrollspy.js | 264 | ||||
-rw-r--r-- | js/tests/unit/dom/manipulator.spec.js | 82 | ||||
-rw-r--r-- | js/tests/unit/scrollspy.spec.js | 617 |
4 files changed, 527 insertions, 452 deletions
diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js index e3ee293c7d..5e6ad92ae7 100644 --- a/js/src/dom/manipulator.js +++ b/js/src/dom/manipulator.js @@ -57,22 +57,6 @@ const Manipulator = { getDataAttribute(element, key) { return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`)) - }, - - offset(element) { - const rect = element.getBoundingClientRect() - - return { - top: rect.top + window.pageYOffset, - left: rect.left + window.pageXOffset - } - }, - - position(element) { - return { - top: element.offsetTop, - left: element.offsetLeft - } } } diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 029970ed2a..71c111a941 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -5,9 +5,8 @@ * -------------------------------------------------------------------------- */ -import { defineJQueryPlugin, getElement, getSelectorFromElement } from './util/index' +import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index' import EventHandler from './dom/event-handler' -import Manipulator from './dom/manipulator' import SelectorEngine from './dom/selector-engine' import BaseComponent from './base-component' @@ -21,34 +20,34 @@ const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' const EVENT_ACTIVATE = `activate${EVENT_KEY}` -const EVENT_SCROLL = `scroll${EVENT_KEY}` +const EVENT_CLICK = `click${EVENT_KEY}` const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item' const CLASS_NAME_ACTIVE = 'active' const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]' +const SELECTOR_TARGET_LINKS = '[href]' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_NAV_LINKS = '.nav-link' const SELECTOR_NAV_ITEMS = '.nav-item' const SELECTOR_LIST_ITEMS = '.list-group-item' -const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}` +const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_NAV_ITEMS} > ${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}` const SELECTOR_DROPDOWN = '.dropdown' const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle' -const METHOD_OFFSET = 'offset' -const METHOD_POSITION = 'position' - const Default = { - offset: 10, - method: 'auto', - target: '' + offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons + rootMargin: '0px 0px -25%', + smoothScroll: false, + target: null } const DefaultType = { - offset: 'number', - method: 'string', - target: '(string|element)' + offset: '(number|null)', // TODO v6 @deprecated, keep it for backwards compatibility reasons + rootMargin: 'string', + smoothScroll: 'boolean', + target: 'element' } /** @@ -58,16 +57,18 @@ const DefaultType = { class ScrollSpy extends BaseComponent { constructor(element, config) { super(element, config) - this._scrollElement = this._element.tagName === 'BODY' ? window : this._element - this._offsets = [] - this._targets = [] - this._activeTarget = null - this._scrollHeight = 0 - - EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process()) - this.refresh() - this._process() + // this._element is the observablesContainer and config.target the menu links wrapper + this._targetLinks = new Map() + this._observableSections = new Map() + this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element + this._activeTarget = null + this._observer = null + this._previousScrollData = { + visibleEntryTop: 0, + parentScrollTop: 0 + } + this.refresh() // initialize } // Getters @@ -85,145 +86,168 @@ class ScrollSpy extends BaseComponent { // Public refresh() { - this._offsets = [] - this._targets = [] - this._scrollHeight = this._getScrollHeight() - - const autoMethod = this._scrollElement === this._scrollElement.window ? METHOD_OFFSET : METHOD_POSITION - const offsetMethod = this._config.method === 'auto' ? autoMethod : this._config.method - const offsetBase = offsetMethod === METHOD_POSITION ? this._getScrollTop() : 0 - const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target) - .map(element => { - const targetSelector = getSelectorFromElement(element) - const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null - - if (!target) { - return null - } + this._initializeTargetsAndObservables() + this._maybeEnableSmoothScroll() - const targetBCR = target.getBoundingClientRect() - - return targetBCR.width || targetBCR.height ? - [Manipulator[offsetMethod](target).top + offsetBase, targetSelector] : - null - }) - .filter(Boolean) - .sort((a, b) => a[0] - b[0]) + if (this._observer) { + this._observer.disconnect() + } else { + this._observer = this._getNewObserver() + } - for (const target of targets) { - this._offsets.push(target[0]) - this._targets.push(target[1]) + for (const section of this._observableSections.values()) { + this._observer.observe(section) } } dispose() { - EventHandler.off(this._scrollElement, EVENT_KEY) + this._observer.disconnect() super.dispose() } // Private - _configAfterMerge(config) { - config.target = getElement(config.target) || document.documentElement + // TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case + config.target = getElement(config.target) || document.body return config } - _getScrollTop() { - return this._scrollElement === window ? - this._scrollElement.pageYOffset : - this._scrollElement.scrollTop - } + _maybeEnableSmoothScroll() { + if (!this._config.smoothScroll) { + return + } - _getScrollHeight() { - return this._scrollElement.scrollHeight || Math.max( - document.body.scrollHeight, - document.documentElement.scrollHeight - ) - } + // unregister any previous listeners + EventHandler.off(this._config.target, EVENT_CLICK) + + EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => { + const observableSection = this._observableSections.get(event.target.hash) + if (observableSection) { + event.preventDefault() + const root = this._rootElement || window + const height = observableSection.offsetTop - this._element.offsetTop + if (root.scrollTo) { + root.scrollTo({ top: height }) + return + } - _getOffsetHeight() { - return this._scrollElement === window ? - window.innerHeight : - this._scrollElement.getBoundingClientRect().height + // Chrome 60 doesn't support `scrollTo` + root.scrollTop = height + } + }) } - _process() { - const scrollTop = this._getScrollTop() + this._config.offset - const scrollHeight = this._getScrollHeight() - const maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight() + _getNewObserver() { + const options = { + root: this._rootElement, + threshold: [0.1, 0.5, 1], + rootMargin: this._getRootMargin() + } + + return new IntersectionObserver(entries => this._observerCallback(entries), options) + } - if (this._scrollHeight !== scrollHeight) { - this.refresh() + // The logic of selection + _observerCallback(entries) { + const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`) + const activate = entry => { + this._previousScrollData.visibleEntryTop = entry.target.offsetTop + this._process(targetElement(entry)) } - if (scrollTop >= maxScroll) { - const target = this._targets[this._targets.length - 1] + const parentScrollTop = (this._rootElement || document.documentElement).scrollTop + const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop + this._previousScrollData.parentScrollTop = parentScrollTop + + for (const entry of entries) { + if (!entry.isIntersecting) { + this._activeTarget = null + this._clearActiveClass(targetElement(entry)) - if (this._activeTarget !== target) { - this._activate(target) + continue } - return - } + const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop + // if we are scrolling down, pick the bigger offsetTop + if (userScrollsDown && entryIsLowerThanPrevious) { + activate(entry) + // if parent isn't scrolled, let's keep the first visible item, breaking the iteration + if (!parentScrollTop) { + return + } - if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) { - this._activeTarget = null - this._clear() - return + continue + } + + // if we are scrolling up, pick the smallest offsetTop + if (!userScrollsDown && !entryIsLowerThanPrevious) { + activate(entry) + } } + } + + // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only + _getRootMargin() { + return this._config.offset ? `${this._config.offset}px 0px -30%` : this._config.rootMargin + } + + _initializeTargetsAndObservables() { + this._targetLinks = new Map() + this._observableSections = new Map() + + const targetLinks = SelectorEngine.find(SELECTOR_TARGET_LINKS, this._config.target) - for (const i of this._offsets.keys()) { - const isActiveTarget = this._activeTarget !== this._targets[i] && - scrollTop >= this._offsets[i] && - (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1]) + for (const anchor of targetLinks) { + // ensure that the anchor has an id and is not disabled + if (!anchor.hash || isDisabled(anchor)) { + continue + } + + const observableSection = SelectorEngine.findOne(anchor.hash, this._element) - if (isActiveTarget) { - this._activate(this._targets[i]) + // ensure that the observableSection exists & is visible + if (isVisible(observableSection)) { + this._targetLinks.set(anchor.hash, anchor) + this._observableSections.set(anchor.hash, observableSection) } } } - _activate(target) { - this._activeTarget = target - - this._clear() + _process(target) { + if (this._activeTarget === target) { + return + } - const queries = SELECTOR_LINK_ITEMS.split(',') - .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`) + this._clearActiveClass(this._config.target) + this._activeTarget = target + target.classList.add(CLASS_NAME_ACTIVE) + this._activateParents(target) - const link = SelectorEngine.findOne(queries.join(','), this._config.target) + EventHandler.trigger(this._element, EVENT_ACTIVATE, { relatedTarget: target }) + } - link.classList.add(CLASS_NAME_ACTIVE) - if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) { - SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN)) + _activateParents(target) { + // Activate dropdown parents + if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) { + SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN)) .classList.add(CLASS_NAME_ACTIVE) - } else { - for (const listGroup of SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)) { - // Set triggered links parents as active - // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor - for (const item of SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)) { - item.classList.add(CLASS_NAME_ACTIVE) - } + return + } - // Handle special case when .nav-link is inside .nav-item - for (const navItem of SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)) { - for (const item of SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)) { - item.classList.add(CLASS_NAME_ACTIVE) - } - } + for (const listGroup of SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)) { + // Set triggered links parents as active + // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor + for (const item of SelectorEngine.prev(listGroup, SELECTOR_LINK_ITEMS)) { + item.classList.add(CLASS_NAME_ACTIVE) } } - - EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, { - relatedTarget: target - }) } - _clear() { - const activeNodes = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target) - .filter(node => node.classList.contains(CLASS_NAME_ACTIVE)) + _clearActiveClass(parent) { + parent.classList.remove(CLASS_NAME_ACTIVE) + const activeNodes = SelectorEngine.find(`${SELECTOR_TARGET_LINKS}.${CLASS_NAME_ACTIVE}`, parent) for (const node of activeNodes) { node.classList.remove(CLASS_NAME_ACTIVE) } @@ -238,7 +262,7 @@ class ScrollSpy extends BaseComponent { return } - if (typeof data[config] === 'undefined') { + if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { throw new TypeError(`No method named "${config}"`) } @@ -253,7 +277,7 @@ class ScrollSpy extends BaseComponent { EventHandler.on(window, EVENT_LOAD_DATA_API, () => { for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) { - new ScrollSpy(spy) // eslint-disable-line no-new + ScrollSpy.getOrCreateInstance(spy) } }) diff --git a/js/tests/unit/dom/manipulator.spec.js b/js/tests/unit/dom/manipulator.spec.js index 95af902ff5..2ed1995b60 100644 --- a/js/tests/unit/dom/manipulator.spec.js +++ b/js/tests/unit/dom/manipulator.spec.js @@ -105,86 +105,4 @@ describe('Manipulator', () => { expect(Manipulator.getDataAttribute(div, 'test')).toEqual(1) }) }) - - describe('offset', () => { - it('should return an object with two properties top and left, both numbers', () => { - fixtureEl.innerHTML = '<div></div>' - - const div = fixtureEl.querySelector('div') - const offset = Manipulator.offset(div) - - expect(offset).toBeDefined() - expect(offset.top).toEqual(jasmine.any(Number)) - expect(offset.left).toEqual(jasmine.any(Number)) - }) - - it('should return offset relative to attached element\'s offset', () => { - const top = 500 - const left = 1000 - - fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>` - - const div = fixtureEl.querySelector('div') - const offset = Manipulator.offset(div) - const fixtureOffset = Manipulator.offset(fixtureEl) - - expect(offset).toEqual({ - top: fixtureOffset.top + top, - left: fixtureOffset.left + left - }) - }) - - it('should not change offset when viewport is scrolled', () => { - return new Promise(resolve => { - const top = 500 - const left = 1000 - const scrollY = 200 - const scrollX = 400 - - fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>` - - const div = fixtureEl.querySelector('div') - const offset = Manipulator.offset(div) - - // append an element that forces scrollbars on the window so we can scroll - const { defaultView: win, body } = fixtureEl.ownerDocument - const forceScrollBars = document.createElement('div') - forceScrollBars.style.cssText = 'position:absolute;top:5000px;left:5000px;width:1px;height:1px' - body.append(forceScrollBars) - - const scrollHandler = () => { - expect(window.pageYOffset).toEqual(scrollY) - expect(window.pageXOffset).toEqual(scrollX) - - const newOffset = Manipulator.offset(div) - - expect(newOffset).toEqual({ - top: offset.top, - left: offset.left - }) - - win.removeEventListener('scroll', scrollHandler) - forceScrollBars.remove() - win.scrollTo(0, 0) - resolve() - } - - win.addEventListener('scroll', scrollHandler) - win.scrollTo(scrollX, scrollY) - }) - }) - }) - - describe('position', () => { - it('should return an object with two properties top and left, both numbers', () => { - fixtureEl.innerHTML = '<div></div>' - - const div = fixtureEl.querySelector('div') - const position = Manipulator.position(div) - - expect(position).toBeDefined() - expect(position.top).toEqual(jasmine.any(Number)) - expect(position.left).toEqual(jasmine.any(Number)) - }) - }) }) diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index 96ef3aedf1..778c37a381 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' + +/** Test helpers */ import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture' +import EventHandler from '../../src/dom/event-handler' 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 + 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 + } - function listener() { expect(element).toHaveClass('active') - contentEl.removeEventListener('scroll', listener) - expect(scrollSpy._process).toHaveBeenCalled() - spy.calls.reset() + 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,16 +96,60 @@ 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 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>' + + ' </ul>', + '</nav>', + '<div id="content">', + ' <div id="1" style="height: 300px;">test</div>', + '</div>' + ].join('') + + const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), { + target: '#navigation' + }) + + expect(scrollSpy._observer.root).toBeNull() + expect(scrollSpy._rootElement).toBeNull() + }) + + it('should not take count to not visible sections', () => { + 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">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: 300px;">test</div>', + ' <div id="two" hidden style="height: 300px;">test</div>', + ' <div id="three" style="display: none;">test</div>', + '</div>' + ].join('') + + const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), { + target: '#navigation' + }) + + expect(scrollSpy._observableSections.size).toBe(1) + expect(scrollSpy._targetLinks.size).toBe(1) + }) + it('should not process element without target', () => { fixtureEl.innerHTML = [ '<nav id="navigation" class="navbar">', @@ -73,8 +160,8 @@ describe('ScrollSpy', () => { ' </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="two" style="height: 300px;">test</div>', + ' <div id="three" style="height: 10px;">test2</div>', '</div>' ].join('') @@ -82,7 +169,7 @@ describe('ScrollSpy', () => { target: '#navigation' }) - expect(scrollSpy._targets).toHaveSize(2) + expect(scrollSpy._targetLinks).toHaveSize(2) }) it('should only switch "active" class on current target', () => { @@ -100,14 +187,8 @@ describe('ScrollSpy', () => { ' </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 style="height: 200px;" id="masthead">Overview</div>', + ' <div style="height: 200px;" id="detail">Detail</div>', ' </div>', '</div>' ].join('') @@ -120,13 +201,52 @@ describe('ScrollSpy', () => { spyOn(scrollSpy, '_process').and.callThrough() - scrollSpyEl.addEventListener('scroll', () => { + onScrollStop(() => { expect(rootEl).toHaveClass('active') expect(scrollSpy._process).toHaveBeenCalled() resolve() + }, scrollSpyEl) + + scrollTo(scrollSpyEl, 350) + }) + }) + + 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' }) - scrollSpyEl.scrollTop = 350 + 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) }) }) @@ -145,14 +265,8 @@ describe('ScrollSpy', () => { ' </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 style="height: 200px;" id="masthead">Overview</div>', + ' <div style="height: 200px;" id="detail">Detail</div>', ' </div>', '</div>' ].join('') @@ -165,51 +279,14 @@ describe('ScrollSpy', () => { spyOn(scrollSpy, '_process').and.callThrough() - scrollSpyEl.addEventListener('scroll', () => { + onScrollStop(() => { expect(rootEl).toHaveClass('active') + expect(scrollSpy._activeTarget).toEqual(fixtureEl.querySelector('[href="#detail"]')) expect(scrollSpy._process).toHaveBeenCalled() resolve() - }) - - scrollSpyEl.scrollTop = 350 - }) - }) - - it('should correctly select middle navigation option when large offset is used', () => { - 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 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>' - ].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')).not.toHaveClass('active') - expect(fixtureEl.querySelector('#two-link')).toHaveClass('active') - expect(fixtureEl.querySelector('#three-link')).not.toHaveClass('active') - expect(scrollSpy._process).toHaveBeenCalled() - resolve() - }) + }, scrollSpyEl) - contentEl.scrollTop = 550 + scrollTo(scrollSpyEl, 350) }) }) @@ -233,21 +310,18 @@ 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: resolve }) } @@ -255,7 +329,7 @@ describe('ScrollSpy', () => { }) }) - it('should add the active class to the correct element (nav markup)', () => { + it('should add to nav the active class to the correct element (nav markup)', () => { return new Promise(resolve => { fixtureEl.innerHTML = [ '<nav class="navbar">', @@ -275,21 +349,18 @@ 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: resolve }) } @@ -297,7 +368,7 @@ describe('ScrollSpy', () => { }) }) - it('should add the active class to the correct element (list-group markup)', () => { + 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">', @@ -317,21 +388,18 @@ 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: resolve }) } @@ -351,10 +419,10 @@ describe('ScrollSpy', () => { ' </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: 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('') @@ -362,29 +430,24 @@ describe('ScrollSpy', () => { const contentEl = fixtureEl.querySelector('#content') const scrollSpy = new ScrollSpy(contentEl, { target: '#navigation', - offset: Manipulator.position(contentEl).top + offset: contentEl.offsetTop }) const spy = spyOn(scrollSpy, '_process').and.callThrough() - let firstTime = true - - contentEl.addEventListener('scroll', () => { - const active = fixtureEl.querySelector('.active') - + onScrollStop(() => { + const active = () => fixtureEl.querySelector('.active') expect(spy).toHaveBeenCalled() - spy.calls.reset() - if (firstTime) { - expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1) - expect(active.getAttribute('id')).toEqual('two-link') - firstTime = false - contentEl.scrollTop = 0 - } else { - expect(active).toBeNull() + + expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1) + expect(active().getAttribute('id')).toEqual('two-link') + onScrollStop(() => { + expect(active()).toBeNull() resolve() - } - }) + }, contentEl) + scrollTo(contentEl, 0) + }, contentEl) - contentEl.scrollTop = 201 + scrollTo(contentEl, 200) }) }) @@ -399,43 +462,40 @@ describe('ScrollSpy', () => { ' <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 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 = -10 + 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', - offset: contentEl.offsetTop + rootMargin: '0px 0px -50%' }) - const spy = spyOn(scrollSpy, '_process').and.callThrough() - let firstTime = true + onScrollStop(() => { + const activeId = () => fixtureEl.querySelector('.active').getAttribute('id') - contentEl.addEventListener('scroll', () => { - const active = fixtureEl.querySelector('.active') + expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1) + expect(activeId()).toEqual('two-link') + scrollTo(contentEl, negativeHeight) - expect(spy).toHaveBeenCalled() - spy.calls.reset() - if (firstTime) { - expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1) - expect(active.getAttribute('id')).toEqual('two-link') - firstTime = false - contentEl.scrollTop = negativeHeight - } else { + onScrollStop(() => { expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1) - expect(active.getAttribute('id')).toEqual('one-link') + expect(activeId()).toEqual('one-link') resolve() - } - }) + }, contentEl) - contentEl.scrollTop = startOfSectionTwo + scrollTo(contentEl, 0) + }, contentEl) + + scrollTo(contentEl, startOfSectionTwo) }) }) @@ -465,46 +525,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, + scrollSpy, cb() { - contentEl.scrollTop = 0 + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ - elementSelector: '#li-100-4', - targetSelector: '#div-100-4', - scrollSpy, - spy, + elementSelector: '#li-100-2', + targetSelector: '#div-100-2', contentEl, + scrollSpy, cb() { - contentEl.scrollTop = 0 + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ elementSelector: '#li-100-3', targetSelector: '#div-100-3', - scrollSpy, - spy, contentEl, + scrollSpy, cb() { - contentEl.scrollTop = 0 + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ elementSelector: '#li-100-2', targetSelector: '#div-100-2', - scrollSpy, - spy, contentEl, + scrollSpy, cb() { - contentEl.scrollTop = 0 + scrollTo(contentEl, 0) testElementIsActiveAfterScroll({ elementSelector: '#li-100-1', targetSelector: '#div-100-1', - scrollSpy, - spy, contentEl, + scrollSpy, cb: resolve }) } @@ -517,116 +572,73 @@ describe('ScrollSpy', () => { }) }) }) + }) - 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' - }) + describe('refresh', () => { + it('should disconnect existing observer', () => { + fixtureEl.innerHTML = getDummyFixture() - expect(scrollSpy._offsets[1]).toEqual(Manipulator.offset(targetEl).top) - expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.position(targetEl).top) - }) + const el = fixtureEl.querySelector('.content') + const scrollSpy = new ScrollSpy(el) - 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('') + spyOn(scrollSpy._observer, 'disconnect') - const contentEl = fixtureEl.querySelector('.content') - const targetEl = fixtureEl.querySelector('#div-jsm-2') - const scrollSpy = new ScrollSpy(contentEl, { - target: '.navbar', - offset: 0, - method: 'position' - }) + scrollSpy.refresh() - expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.offset(targetEl).top) - expect(scrollSpy._offsets[1]).toEqual(Manipulator.position(targetEl).top) + expect(scrollSpy._observer.disconnect).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 }) + jQueryMock.fn.scrollspy.call(jQueryMock, { rootMargin: '100px' }) spyOn(ScrollSpy.prototype, 'constructor') - expect(ScrollSpy.prototype.constructor).not.toHaveBeenCalledWith(div, { offset: 15 }) + expect(ScrollSpy.prototype.constructor).not.toHaveBeenCalledWith(div, { rootMargin: '100px' }) const scrollspy = ScrollSpy.getInstance(div) expect(scrollspy).not.toBeNull() - expect(scrollspy._config.offset).toEqual(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 @@ -638,9 +650,9 @@ 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') @@ -655,9 +667,9 @@ describe('ScrollSpy', () => { }) 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 @@ -667,29 +679,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)).toBeNull() + 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) @@ -698,18 +741,18 @@ 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)).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)).toBeNull() const scrollspy = ScrollSpy.getOrCreateInstance(div, { @@ -721,9 +764,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 }) @@ -741,13 +784,119 @@ 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 }) + } else { + expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop) + } + + done() + }, 100) + link.click() + }) + }) }) |