Update Test page content and add test case for TOC scrollable indicat…

…or (#155)

Co-authored-by: bwang <bwang@wikimedia.org>

Dockerfile.database

@@ -2,7 +2,7 @@ FROM mariadb:10.6.7
 
 COPY src/seedDb.sh /docker-entrypoint-initdb.d/
 
-ARG database="database_2022-10-07_10-53-14-0600(MDT).tar.gz"
+ARG database="database_2023-01-11_12-42-02-0600(CST).tar.gz"
 
 RUN apt-get update && apt-get install -y \
 	curl \

configDesktop.js

@@ -45,6 +45,15 @@ const tests = [
 		path: '/wiki/Test',
 		selectors: [ 'html' ]
 	},
+	{
+		label: 'Test expanded scrolled TOC (#vector-2022, #sidebar-closed, #scroll-toc)',
+		path: '/wiki/Test',
+		selectors: [ 'viewport' ],
+		viewports: [
+			VIEWPORT_DESKTOP,
+			VIEWPORT_DESKTOP_WIDE
+		]
+	},
 	{
 		label: 'Special:BlankPage (#vector-2022, #sidebar-open)',
 		path: '/wiki/Special:BlankPage'

src/engine-scripts/puppet/onReady.js

@@ -26,6 +26,10 @@ module.exports = async ( page, scenario ) => {
 		await require( './collapsedTocState' )( page, hashtags );
 	}
 
+	if ( hashtags.includes( '#scroll-toc' ) ) {
+		await require( './scrollToc.js' )( page );
+	}
+
 	// These only apply to Minerva
 	if ( hashtags.includes( '#minerva' ) ) {
 		await require( './minerva/mainMenuState' )( page, hashtags );

src/engine-scripts/puppet/scrollToc.js

@@ -0,0 +1,13 @@
+module.exports = async ( page ) => {
+	await page.evaluate( () => {
+		const tocElement = document.getElementById( 'vector-toc' );
+		const tocToggleBtns = tocElement.querySelectorAll( '.vector-toc-toggle' );
+		for ( const btn of tocToggleBtns ) {
+			btn.click();
+		}
+		tocElement.scrollBy( 0, tocElement.scrollHeight );
+		// Scroll up 30px from the bottom of the TOC to allow the scrollable indicator to show
+		tocElement.scrollBy( 0, -30 );
+		return true;
+	} );
+};