Merge branch 'main' of github.com:wikimedia/pixel into thanks

configDesktop.js

@@ -151,10 +151,6 @@ const tests = [
 		label: 'Search in header (#vector-2022, #search-focus)',
 		path: '/wiki/Test'
 	},
-	{
-		label: 'Search loading in header (#vector-2022, #search-focus, #search-offline)',
-		path: '/wiki/Test'
-	},
 	{
 		label: 'Search in sticky header (#logged-in, #vector-2022, #scroll, #search-sticky, #search-focus)',
 		path: '/wiki/Test',

configLogin.js

@@ -0,0 +1,64 @@
+const utils = require( './utils' );
+
+const {
+	VIEWPORT_PHONE,
+	VIEWPORT_TABLET,
+	VIEWPORT_DESKTOP,
+	VIEWPORT_DESKTOP_WIDE,
+	VIEWPORT_DESKTOP_WIDEST
+} = require( './viewports' );
+
+const scenarios = utils.makeScenariosForSkins( [
+	{
+		label: 'Login',
+		path: '/wiki/Special:UserLogin',
+		hashtags: [],
+		selectors: [ 'viewport' ]
+	},
+	{
+		label: 'Create account',
+		path: '/wiki/Special:CreateAccount',
+		hashtags: [],
+		selectors: [ 'viewport' ]
+	},
+	{
+		label: 'login when logged in',
+		hashtags: [ 'logged-in' ],
+		path: '/wiki/Special:UserLogin',
+		selectors: [ 'viewport' ]
+	},
+	{
+		label: 'create account when logged in',
+		hashtags: [ 'logged-in' ],
+		path: '/wiki/Special:CreateAccount',
+		selectors: [ 'viewport' ]
+	}
+], [ 'vector-2022', 'vector', 'minerva' ] ).map( ( s ) => Object.assign( {}, s, {
+	misMatchThreshold: 0.05
+} ) );
+
+module.exports = {
+	id: 'MediaWiki',
+	viewports: [
+		VIEWPORT_PHONE,
+		VIEWPORT_TABLET,
+		VIEWPORT_DESKTOP,
+		VIEWPORT_DESKTOP_WIDE,
+		VIEWPORT_DESKTOP_WIDEST
+	],
+	onBeforeScript: 'puppet/onBefore.js',
+	onReadyScript: 'puppet/onReady.js',
+	scenarios,
+	paths: utils.makePaths( 'login' ),
+	report: [],
+	engine: 'puppeteer',
+	engineOptions: {
+		args: [
+			'--no-sandbox'
+		]
+	},
+	asyncCaptureLimit: 10,
+	asyncCompareLimit: 50,
+	debug: false,
+	debugWindow: false
+};

configMobile.js

@@ -34,6 +34,26 @@ const tests = [
 	{
 		label: 'Non-existent user page (#minerva #mobile)',
 		path: '/wiki/User:Echo1'
+	},
+	{
+		label: 'Test language overlay (#minerva #mobile #click-language)',
+		path: '/wiki/Test'
+	},
+	{
+		label: 'Test CTADrawer (#minerva #mobile #click-watch)',
+		path: '/wiki/Test'
+	},
+	{
+		label: 'Test red link drawer (#minerva #mobile #click-redlink)',
+		path: '/wiki/Test'
+	},
+	{
+		label: 'Test (#minerva #mobile #logged-in #click-edit)',
+		path: '/wiki/Test'
+	},
+	{
+		label: 'Diff page logged in (#minerva #mobile #logged-in)',
+		path: '/wiki/Special:MobileDiff/335'
 	}
 ];
 

docker-compose.yml

@@ -70,6 +70,7 @@ services:
       - ./configDesktopDev.js:/pixel/configDesktopDev.js
       - ./configEcho.js:/pixel/configEcho.js
       - ./configCampaignEvents.js:/pixel/configCampaignEvents.js
+      - ./configLogin.js:/pixel/configLogin.js
       - ./configWebMaintained.js:/pixel/configWebMaintained.js
       - ./configMobile.js:/pixel/configMobile.js
       - ./configCodex.js:/pixel/configCodex.js

pixel.js

@@ -97,6 +97,8 @@ ${markerString}`
  */
 const getGroupConfig = ( groupName ) => {
 	switch ( groupName ) {
+		case 'login':
+			return 'configLogin.js';
 		case 'web-maintained':
 			return 'configWebMaintained.js';
 		case 'echo':

src/engine-scripts/puppet/minerva/clickBtn.js

@@ -0,0 +1,13 @@
+/**
+ * Open or close Vector-2022's sidebar.
+ *
+ * @param {import('puppeteer').Page} page
+ * @param {string} selector
+ */
+module.exports = async ( page, selector ) => {
+	await page.evaluate( async ( s ) => {
+		const btn = document.querySelector( s );
+		await btn.click();
+	}, selector );
+	await page.waitForSelector( '.drawer,.overlay' );
+};

src/engine-scripts/puppet/onReady.js

@@ -36,6 +36,21 @@ module.exports = async ( page, scenario ) => {
 	// These only apply to Minerva
 	if ( hashtags.includes( '#minerva' ) ) {
 		await require( './minerva/mainMenuState' )( page, hashtags );
+
+		const clickBtn = require( './minerva/clickBtn' );
+		// Run click handlers if necessary.
+		if ( hashtags.includes( '#click-edit' ) ) {
+			await clickBtn( page, '#ca-edit' );
+		}
+		if ( hashtags.includes( '#click-language' ) ) {
+			await clickBtn( page, '#language-selector a' );
+		}
+		if ( hashtags.includes( '#click-watch' ) ) {
+			await clickBtn( page, '#ca-watch' );
+		}
+		if ( hashtags.includes( '#click-redlink' ) ) {
+			await clickBtn( page, 'a.new' );
+		}
 	}
 
 	// Run Echo handlers if necessary.

src/engine-scripts/puppet/search.js

@@ -8,11 +8,6 @@ const fastForwardAnimations = require( './fastForwardAnimations' );
  * @param {string[]} hashtags
  */
 module.exports = async ( page, hashtags ) => {
-	const isOffline = hashtags.includes( '#search-offline' );
-	if ( isOffline ) {
-		await page.setOfflineMode( true );
-	}
-
 	const viewportWidth = page.viewport().width;
 	const isStickyHeaderScenario = hashtags.includes( '#search-sticky' );
 	const selectorSearchToggle = isStickyHeaderScenario ?
@@ -38,26 +33,16 @@ module.exports = async ( page, hashtags ) => {
 	await button.click();
 	// Focus the server side rendered search to trigger the loading of Vue.
 	await page.focus( selectorSearchInput );
-	if ( isOffline ) {
-		// type into the server side rendered input
-		page.keyboard.type( 't' );
-		// Wait for the loader to display
-		await page.waitForSelector( '.search-form__loader', {
-			visible: true
-		} );
-		await fastForwardAnimations( page );
-	} else {
-		// Make sure Codex kicked in.
-		await page.waitForSelector( '.cdx-typeahead-search' );
-		// Wait for Vue to load.
-		await moduleReady( page, 'vue' );
-		// focus and type into the newly added input
-		await page.focus( selectorSearchInput );
-		await page.keyboard.type( 't' );
-		// Wait for a search result to display.
-		await page.waitForSelector( selectorSearchSuggestion, {
-			visible: true,
-			timeout: 10000
-		} );
-	}
+	// Make sure Codex kicked in.
+	await page.waitForSelector( '.cdx-typeahead-search' );
+	// Wait for Vue to load.
+	await moduleReady( page, 'vue' );
+	// focus and type into the newly added input
+	await page.focus( selectorSearchInput );
+	await page.keyboard.type( 't' );
+	// Wait for a search result to display.
+	await page.waitForSelector( selectorSearchSuggestion, {
+		visible: true,
+		timeout: 10000
+	} );
 };