I tried testing this function but not full covered. I am unsure how can I test it when i use addEventListener to listen scroll event
import _ from 'lodash'
const outlineScroll = (arg: any) => {
const currentMode = arg.currentMode
let headingEles = getHeadings(arg) // this is array [element.offsetTop]
let ele = arg.preview.element.style.display === 'none' ? arg[currentMode].element : arg.preview.element
const vditorOutline = arg.outline.element
let outline = arg.outline.element.querySelectorAll('.vditor-outline__content li span[data-target-id]')
let top = ele.scrollTop + 35
outline.forEach((item, i) => {
item.className = ''
if ( top >= headingEles[i] && top < headingEles[i+1]) {
item.className = 'vditor-content__active'
} else if (top >= headingEles[headingEles.length - 1]) {
outline[headingEles.length - 1].className = 'vditor-content__active'
}
if (item.className.includes('vditor-content__active')) {
if (item.offsetTop > (vditorOutline.clientHeight/10 * 9)) {
vditorOutline.scrollTo({
left: 0,
top: item.offsetTop - vditorOutline.clientHeight / 2,
behavior: "smooth"
})
} else if (item.offsetTop < vditorOutline.clientHeight) {
vditorOutline.scrollTo({
left: 0,
top: 0,
behavior: "smooth"
})
}
}
})
}
let throttle = _.throttle(outlineScroll, 300, {leading: false, trailing: true})
window.addEventListener('scroll', throttle, true)
and the function argments is object just like this:
{
currentMode: 'ir',
preview:{
element: '' // the value is a HTMLElement
},
outline:{
element: '' // the value is a HTMLElement
},
ir: {
element: '' // the value is a HTMLElement
}
}
so, how to expect the outline.forEach item.className and vditorOutline.scrollTo , i dont have any ideas