Skip to content

Commit

Permalink
align tests | remove console info
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeoSot
GeoSot committed Jun 25, 2021
1 parent d0947a8 commit 27bef39
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 48 deletions.
22 changes: 11 additions & 11 deletions js/src/scrollspy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
* --------------------------------------------------------------------------
*/

import { defineJQueryPlugin, getElement, reflow, typeCheckConfig } from './util/index'
import {
defineJQueryPlugin,
getElement,
typeCheckConfig
} from './util/index'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
Expand All @@ -23,15 +27,15 @@ const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'

const Default = {
target: null,
offset: null, // @deprecated, only for backwards Compatibility reasons
rootMargin: '0px 0px -40%'
rootMargin: '0px 0px -40%',
target: null
}

const DefaultType = {
target: 'element',
offset: '(number|null)', // @deprecated, only for backwards Compatibility reasons
rootMargin: 'string'
rootMargin: 'string',
target: 'element'
}

const EVENT_ACTIVATE = `activate${EVENT_KEY}`
Expand All @@ -58,7 +62,7 @@ class ScrollSpy extends BaseComponent {
constructor(element, config) {
super(element)

// this._element is the observablesContainer
// this._element is the observablesContainer and config.target the menu-links wrapper
this._config = this._getConfig(config)

this._targetLinks = []
Expand All @@ -81,16 +85,14 @@ class ScrollSpy extends BaseComponent {
// Public

refresh() {
// `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
this._targetLinks = SelectorEngine
.find('[href]', this._config.target)
.find('[href]', this._config.target)// `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
.filter(el => el.hash.length > 0)// ensure that all have id

this._observableSections = this._targetLinks
.map(el => SelectorEngine.findOne(el.hash, this._element))
.filter(el => el)// filter nulls

reflow(this._element)
if (this._observer) {
this._observer.disconnect()
} else {
Expand All @@ -102,7 +104,6 @@ class ScrollSpy extends BaseComponent {

dispose() {
this._observer.disconnect()
EventHandler.off(this._scrollElement, EVENT_KEY)
super.dispose()
}

Expand Down Expand Up @@ -140,7 +141,6 @@ class ScrollSpy extends BaseComponent {
SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN))
.classList.add(CLASS_NAME_ACTIVE)
} else {
SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)
SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)
.forEach(listGroup => {
// Set triggered links parents as active
Expand Down
92 changes: 55 additions & 37 deletions js/tests/unit/scrollspy.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fi
describe('ScrollSpy', () => {
let fixtureEl

const onScrollStop = (callback, element, timeout = 100) => {
const onScrollStop = (callback, element, timeout = 30) => {
let handle = null
const onScroll = function () {
if (handle) {
Expand All @@ -17,7 +17,7 @@ describe('ScrollSpy', () => {
handle = setTimeout(() => {
element.removeEventListener('scroll', onScroll)
callback()
}, timeout + 10)
}, timeout + 1)
}

element.addEventListener('scroll', onScroll)
Expand All @@ -43,13 +43,8 @@ describe('ScrollSpy', () => {
const paddingTop = 5
const parentOffset = getComputedStyle(contentEl).getPropertyValue('position') === 'relative' ? 0 : contentEl.offsetTop
const scrollHeight = (target.offsetTop - parentOffset) + paddingTop
// eslint-disable-next-line no-console
console.warn('--------------')
// eslint-disable-next-line no-console
console.log(scrollHeight, target.offsetTop, contentEl.offsetTop)

function listener() {
// console.log(fixtureEl.innerHTML.replace(/</g, '\n <'), scrollHeight)
expect(element.classList.contains('active')).toEqual(true)
expect(scrollSpy._activeTarget).toEqual(element)
spy.calls.reset()
Expand All @@ -59,21 +54,15 @@ describe('ScrollSpy', () => {
setTimeout(() => { // in case we scroll something before the test
onScrollStop(listener, contentEl)
contentEl.scrollTo({ top: scrollHeight })
}, 5)
}, 50)
}

beforeAll(() => {
fixtureEl = getFixture()
})
beforeEach(() => {
// eslint-disable-next-line no-console
console.clear()
})

afterEach(() => {
clearFixture()
// eslint-disable-next-line no-console
console.log('------end--------')
})

describe('VERSION', () => {
Expand Down Expand Up @@ -142,15 +131,46 @@ 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 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'
})

spyOn(scrollSpy, '_process').and.callThrough()

onScrollStop(() => {
expect(rootEl.classList.contains('active')).toEqual(true)
expect(scrollSpy._process).toHaveBeenCalled()
done()
}, scrollSpyEl)

scrollSpyEl.scrollTo({ top: 350 })
})

it('should only switch "active" class on current target specified w element', done => {
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('')

Expand All @@ -169,30 +189,28 @@ describe('ScrollSpy', () => {
done()
}, scrollSpyEl)

scrollSpyEl.scrollTo({ top: 350, behavior: 'smooth' })
scrollSpyEl.scrollTo({ top: 350 })
})

it('should correctly select middle navigation option when large offset is used', done => {
fixtureEl.innerHTML = [
'<div id="wrapper">',
' <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>',
'<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('#wrapper', {
const scrollSpy = new ScrollSpy(fixtureEl, {
target: '#navigation',
offset: Manipulator.position(contentEl).top
})
Expand Down

0 comments on commit 27bef39

Please sign in to comment.