mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-23 18:29:49 +00:00
80a111d0e4
We want the link that the user has clicked inside the TOC to be "active" (e.g. bolded) regardless of whether the browser's scroll position corresponds to that section. Therefore, we need to temporarily ignore section observer until the browser has finished scrolling to the section (if needed). However, because the scroll event happens asyncronously after the user clicks on a link and may not even happen at all (e.g. the user has scrolled all the way to the bottom and clicks a section that is already in the viewport), determining when we should resume section observer is a bit tricky. Because a scroll event may not even be triggered after clicking the link, we instead allow the browser to perform a maximum number of repaints before resuming sectionObserver. Per T297614#7687656, Firefox wasn't consistently activating the table of contents section that the user clicked even after waiting 2 frames. After further investigation, it sometimes waits up to 3 frames before painting the new scroll position so we have that as the limit. Bug: T297614 Change-Id: If3632529f58c15348a7200258f4f5999ea0dadc4
34 lines
716 B
JavaScript
34 lines
716 B
JavaScript
const deferUntilFrame = require( '../../resources/skins.vector.es6/deferUntilFrame.js' );
|
|
|
|
describe( 'deferUntilFrame.js', () => {
|
|
let /** @type {jest.SpyInstance} */ spy;
|
|
|
|
beforeEach( () => {
|
|
spy = jest.spyOn( window, 'requestAnimationFrame' ).mockImplementation( ( cb ) => {
|
|
setTimeout( () => {
|
|
cb( 1 );
|
|
} );
|
|
|
|
return 1;
|
|
} );
|
|
} );
|
|
|
|
afterEach( () => {
|
|
spy.mockRestore();
|
|
} );
|
|
|
|
it( 'does not fire rAF if `0` is passed', done => {
|
|
deferUntilFrame( () => {
|
|
expect( spy ).toHaveBeenCalledTimes( 0 );
|
|
done();
|
|
}, 0 );
|
|
} );
|
|
|
|
it( 'fires rAF the specified number of times', done => {
|
|
deferUntilFrame( () => {
|
|
expect( spy ).toHaveBeenCalledTimes( 3 );
|
|
done();
|
|
}, 3 );
|
|
} );
|
|
} );
|