Make beginning bold on scroll

Bug: T301254
Change-Id: I4469575ea8590ae22023b98c3dbd31bc672d5766

resources/skins.vector.es6/config.json

@@ -0,0 +1,4 @@
+{
+	"@doc": "This file describes the shape of the AB config. It exists to support jest",
+	"wgVectorWebABTestEnrollment": {}
+}

resources/skins.vector.es6/main.js

@@ -14,6 +14,30 @@ const
 	TOC_SECTION_ID_PREFIX = 'toc-',
 	ABTestConfig = require( /** @type {string} */ ( './config.json' ) ).wgVectorWebABTestEnrollment || {};
 
+/**
+ * @callback OnIntersection
+ * @param {HTMLElement} element The section that triggered the new intersection change.
+ */
+
+/**
+ * @ignore
+ * @param {Function} changeActiveSection
+ * @return {OnIntersection}
+ */
+const getHeadingIntersectionHandler = ( changeActiveSection ) => {
+	/**
+	 * @param {HTMLElement} section
+	 */
+	return ( section ) => {
+		const headline = section.classList.contains( 'mw-body-content' ) ?
+			section :
+			section.querySelector( HEADLINE_SELECTOR );
+		if ( headline ) {
+			changeActiveSection( `${TOC_SECTION_ID_PREFIX}${headline.id}` );
+		}
+	};
+};
+
 /**
  * @return {void}
  */
@@ -126,18 +150,15 @@ const main = () => {
 		}
 	} );
 	const sectionObserver = initSectionObserver( {
-		elements: bodyContent.querySelectorAll( 'h1, h2, h3, h4, h5, h6' ),
+		elements: bodyContent.querySelectorAll( 'h1, h2, h3, h4, h5, h6, .mw-body-content' ),
 		topMargin: targetElement ? targetElement.getBoundingClientRect().height : 0,
-		onIntersection: ( section ) => {
-			const headline = section.querySelector( HEADLINE_SELECTOR );
-
-			if ( headline ) {
-				tableOfContents.changeActiveSection( TOC_SECTION_ID_PREFIX + headline.id );
-			}
-		}
+		onIntersection: getHeadingIntersectionHandler( tableOfContents.changeActiveSection )
 	} );
 };
 
 module.exports = {
-	main: main
+	main,
+	test: {
+		getHeadingIntersectionHandler
+	}
 };

tests/jest/skins.vector.es6/main.test.js

@@ -0,0 +1,28 @@
+const { test } = require( '../../../resources/skins.vector.es6/main.js' );
+
+describe( 'main.js', () => {
+	it( 'getHeadingIntersectionHandler', () => {
+		const section = document.createElement( 'div' );
+		section.setAttribute( 'class', 'mw-body-content' );
+		section.setAttribute( 'id', 'mw-content-text' );
+		const heading = document.createElement( 'h2' );
+		const headline = document.createElement( 'span' );
+		headline.classList.add( 'mw-headline' );
+		headline.setAttribute( 'id', 'headline' );
+		heading.appendChild( headline );
+		section.appendChild(
+			heading
+		);
+
+		[
+			[ section, 'toc-mw-content-text' ],
+			[ heading, 'toc-headline' ]
+		].forEach( ( testCase ) => {
+			const node = /** @type {HTMLElement} */ ( testCase[ 0 ] );
+			const fn = jest.fn();
+			const handler = test.getHeadingIntersectionHandler( fn );
+			handler( node );
+			expect( fn ).toHaveBeenCalledWith( testCase[ 1 ] );
+		} );
+	} );
+} );