tests(Cypress): migrate-selenium test for suggested edits navigation on homepage

This is laying the groundwork for migrating the more complex tests
link-suggestions and image-suggestions to Cypress (and CC2.0).

After considering it more, I decided to keep the pattern of a
PageObjectModel for the homepage because this page is sufficiently
complex and the identifiers we use are often so obscure that this makes
sense to me.

This is partly a departure from a (very opinionated) blog
article by Cypress:
https://www.cypress.io/blog/stop-using-page-objects-and-start-using-app-actions
However, that article is mainly about _setting up_ the environment for
test, less about the actual test. We still use stable interfaces where
possible for setting up the test-specific environment (maintenance
scripts, mw.Api for login and setting user options, etc.).

Also, the discussion here articulated well some of the concerns I had about
that overall approach:
https://old.reddit.com/r/softwaretesting/comments/y1j8rq/should_i_use_page_objects_with_cypress/

The pages are extracted from
tests/selenium/fixtures/SuggestedEditsContent.xml

The `DecoratingTaskSuggesterFactory` has been added, because what is
currently in the selenium-version of the thing is causing an error in
the javascript console in the browser. Selenium doesn't care about that,
but we are intentionally failing Cypress tests on errors in the console.
Thus setting it up in a way that is a bit closer to production and thus
fulfilling the expectations of other code.

Bug: T380581
Change-Id: I608484c5d0565fafea14d4f777e820d0f72d53ad

Author: micgro42

.gitignore

@@ -11,3 +11,4 @@
 /cypress/screenshots
 /cypress/.cache
 .DS_Store
+.env

cypress.config.ts

@@ -4,6 +4,7 @@ import { mwApiCommands } from './cypress/support/MwApiPlugin';
 // eslint-disable-next-line n/no-missing-import
 import LocalSettingsSetup from './cypress/support/LocalSettingsSetup';
 import * as installCypressLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter';
+import * as childProcess from 'child_process';
 
 const envLogDir = process.env.LOG_DIR ? process.env.LOG_DIR + '/GrowthExperiments' : null;
 
@@ -30,6 +31,25 @@ export default defineConfig( {
 			on( 'before:run', async () => {
 				LocalSettingsSetup.overrideLocalSettings();
 				await LocalSettingsSetup.restartPhpFpmService();
+
+				const ip = process.env.MW_INSTALL_PATH || '../..';
+				const command = process.env.MW_MAINTENANCE_COMMAND || 'php';
+				const maintScriptRunnerArgs = process.env.MW_MAINTENANCE_ARGS ? process.env.MW_MAINTENANCE_ARGS.split( ' ' ) : [ 'maintenance/run.php' ];
+				const maintScriptResult = childProcess.spawnSync(
+					command,
+					[
+						...maintScriptRunnerArgs,
+						'GrowthExperiments:PrepareBrowserTests',
+					],
+					{ cwd: ip },
+				);
+				console.log( 'stdout:' );
+				console.log( String( maintScriptResult.stdout ) );
+				console.log( 'stderr:' );
+				console.log( String( maintScriptResult.stderr ) );
+				if ( maintScriptResult.status !== 0 ) {
+					throw new Error( 'unable to run the maintenance script setting up the browser tests' );
+				}
 			} );
 			on( 'after:run', async () => {
 				LocalSettingsSetup.restoreLocalSettings();

cypress/.eslintrc.json

@@ -5,5 +5,8 @@
 	],
 	"parserOptions": {
 		"sourceType": "module"
+	},
+	"rules": {
+		"n/no-missing-import": "off"
 	}
 }

cypress/README.md

@@ -0,0 +1,37 @@
+# Cypress tests
+
+## Setup
+To run Cypress browser tests against a local mediawiki install, set these environment variables. Depending on your local
+setup, these might be different.
+```bash
+export MW_SERVER=http://default.mediawiki.mwdd.localhost:8080/
+export MW_SCRIPT_PATH=w/
+export MEDIAWIKI_USER=an_admin_username
+export MEDIAWIKI_PASSWORD=the_password_for_that_user
+```
+
+In running the tests in headless mode requires executing a maintenance script.
+If that works for your local setup in a non-standard way (i.e., not using `php` and `maintenance/run.php`),
+then you can configure your custom setup with further variables:
+```bash
+export MW_MAINTENANCE_COMMAND=mw
+export MW_MAINTENANCE_ARGS='docker mediawiki mwscript --'
+```
+
+## Run the tests
+### Headless like in CI
+Use this command to run the tests in a terminal:
+```bash
+npm run cypress:run
+```
+
+### With a GUI
+First prepare your local system by executing the `cypress/support/PrepareBrowserTestss.php` maintenance script.
+This will import some pages and recommendations into the system.
+
+Then open Cypress's GUI with this command:
+```bash
+npm run cypress:open
+```
+Some tests complete suggestions and edit pages, so it might be necessary to run the above script again before running
+those test again.

cypress/e2e/Homepage.cy.ts

@@ -0,0 +1,35 @@
+import Homepage from '../pageObjects/SpecialHomepage.page';
+
+const homepage = new Homepage();
+
+describe( 'Special:Homepage', () => {
+	it( 'Shows a suggested edits card and allows navigation forwards and backwards through queue', () => {
+		cy.task( 'MwApi:CreateUser', { usernamePrefix: 'Alice' } ).then( ( { username, password }: {
+			username: string;
+			password: string;
+		} ) => {
+			cy.loginViaApi( username, password );
+		} );
+		cy.setUserOptions( {
+			'growthexperiments-homepage-se-filters': JSON.stringify( [ 'copyedit' ] ),
+			'growthexperiments-tour-homepage-welcome': '1',
+			'growthexperiments-tour-homepage-discovery': '1',
+		} );
+
+		cy.visit( 'index.php?title=Special:Homepage' );
+
+		homepage.suggestedEditsCardTitle.should( 'have.text', 'Classical kemençe' );
+		homepage.suggestedEditsPreviousButton.should( 'have.attr', 'aria-disabled', 'true' );
+		homepage.suggestedEditsNextButton.should( 'not.have.attr', 'aria-disabled' );
+		homepage.suggestedEditsNextButton.click();
+		homepage.suggestedEditsCardTitle.should( 'have.text', 'Cretan lyra' );
+		homepage.suggestedEditsPreviousButton.click();
+		homepage.suggestedEditsPreviousButton.should( 'have.attr', 'aria-disabled', 'true' );
+
+		// Go to the end of queue card.
+		homepage.suggestedEditsNextButton.click();
+		homepage.suggestedEditsNextButton.click();
+		homepage.suggestedEditsCardTitle.should( 'have.text', 'No more suggestions' );
+		homepage.suggestedEditsNextButton.should( 'have.attr', 'aria-disabled', 'true' );
+	} );
+} );

cypress/pageObjects/SpecialHomepage.page.ts

@@ -0,0 +1,15 @@
+class SpecialHomepage {
+	public get suggestedEditsCardTitle(): ReturnType<typeof cy.get> {
+		return cy.get( '.se-card-title' );
+	}
+
+	public get suggestedEditsPreviousButton(): ReturnType<typeof cy.get> {
+		return cy.get( '.suggested-edits-previous .oo-ui-buttonElement-button' );
+	}
+
+	public get suggestedEditsNextButton(): ReturnType<typeof cy.get> {
+		return cy.get( '.suggested-edits-next .oo-ui-buttonElement-button' );
+	}
+}
+
+export default SpecialHomepage;

cypress/support/commands.ts

@@ -48,6 +48,15 @@ Cypress.Commands.add( 'saveCommunityConfigurationForm', ( editSummary: string ):
 	cy.contains( 'Your changes were saved' ).should( 'be.visible' );
 } );
 
+Cypress.Commands.add( 'setUserOptions', ( options ): void => {
+	cy.visit( '/index.php' );
+	cy.window().its( 'mw.Api' ).should( 'exist' );
+	cy.window().then( async ( { mw }: Cypress.AUTWindow & { mw: MediaWiki } ): Promise<void> => {
+		const api = new mw.Api();
+		await api.saveOptions( options );
+	} );
+} );
+
 /* eslint-disable @typescript-eslint/no-namespace */
 declare global {
 	namespace Cypress {
@@ -56,6 +65,7 @@ declare global {
 			loginAsAdmin(): Chainable<JQuery<HTMLElement>>;
 			logout(): Chainable<JQuery<HTMLElement>>;
 			saveCommunityConfigurationForm( editSummary: string ): Chainable<JQuery<HTMLElement>>;
+			setUserOptions( options: Record<string, string> ): Chainable<JQuery<HTMLElement>>;
 		}
 	}
 }

cypress/support/setupFixtures/GrowthExperiments.LocalSettings.php

@@ -1,20 +1,65 @@
 <?php
 
+use GrowthExperiments\GrowthExperimentsServices;
+use GrowthExperiments\HomepageModules\SuggestedEdits;
+use GrowthExperiments\NewcomerTasks\Task\Task;
+use GrowthExperiments\NewcomerTasks\TaskSuggester\DecoratingTaskSuggesterFactory;
+use GrowthExperiments\NewcomerTasks\TaskSuggester\QualityGateDecorator;
 use GrowthExperiments\NewcomerTasks\TaskSuggester\StaticTaskSuggesterFactory;
 use GrowthExperiments\NewcomerTasks\TaskSuggester\TaskSuggesterFactory;
+use GrowthExperiments\NewcomerTasks\TaskType\TemplateBasedTaskType;
 use MediaWiki\MediaWikiServices;
+use MediaWiki\Title\TitleValue;
 
 $wgGEUseCommunityConfigurationExtension = true;
 $wgGENewcomerTasksLinkRecommendationsEnabled = true;
 $wgGELinkRecommendationsFrontendEnabled = true;
 $wgGESurfacingStructuredTasksEnabled = true;
 
 $wgHooks['MediaWikiServices'][] = static function ( MediaWikiServices $services ) {
+	$copyEditTaskType = new TemplateBasedTaskType(
+		'copyedit',
+		GrowthExperiments\NewcomerTasks\TaskType\TaskType::DIFFICULTY_EASY,
+		[],
+		[ new TitleValue( NS_MAIN, 'Awkward' ) ]
+	);
+
 	# Mock the task suggester to specify what article(s) will be suggested.
 	$services->redefineService(
 		'GrowthExperimentsTaskSuggesterFactory',
-		static function () use ( $services ): TaskSuggesterFactory {
-			return new StaticTaskSuggesterFactory( [], $services->getTitleFactory() );
+		static function () use (
+			$copyEditTaskType,
+			$services
+		): TaskSuggesterFactory {
+			$staticSuggesterFactory = new StaticTaskSuggesterFactory( [
+				new Task( $copyEditTaskType, new TitleValue( NS_MAIN, 'Classical kemençe' ) ),
+				new Task( $copyEditTaskType, new TitleValue( NS_MAIN, 'Cretan lyra' ) )
+			], $services->getTitleFactory() );
+
+			$growthServices = GrowthExperimentsServices::wrap( $services );
+			$taskSuggesterFactory = new DecoratingTaskSuggesterFactory(
+				$staticSuggesterFactory,
+				$services->getObjectFactory(),
+				[
+					[
+						'class' => QualityGateDecorator::class,
+						'args' => [
+							$growthServices->getNewcomerTasksConfigurationLoader(),
+							$growthServices->getImageRecommendationSubmissionLogFactory(),
+							$growthServices->getSectionImageRecommendationSubmissionLogFactory(),
+							$growthServices->getLinkRecommendationSubmissionLogFactory(),
+							$growthServices->getGrowthExperimentsCampaignConfig()
+						]
+					],
+				]
+			);
+
+			return $taskSuggesterFactory;
 		}
 	);
 };
+
+// Activate suggested edits for new users, complete various tours.
+$wgHooks['UserGetDefaultOptions'][] = static function ( &$defaultOptions ) {
+	$defaultOptions[SuggestedEdits::ACTIVATED_PREF] = true;
+};

cypress/support/setupFixtures/pages/Classical kemençe

@@ -0,0 +1,107 @@
+{{For|instruments also called Kemençe|Kemenche}}
+{{DISPLAYTITLE:Classical ''kemençe''}}
+{{Template:Awkward}}
+{{Infobox instrument
+| name                  =
+| names                 =
+| image                 = Kemence Sezgin (1).jpg
+| image_capt            =
+| background            = string
+| classification        = stringed
+| hornbostel_sachs      = 321.321
+| hornbostel_sachs_desc = Necked bowl lute
+| inventors             =
+| developed             =
+| range                 =
+| related               = [[Byzantine lyra]], [[Gadulka]], [[Calabrian Lira]], [[Cretan lyra]], [[Lijerica]]
+| musicians             =
+| builders              =
+| articles              =
+}}
+
+The '''classical''' '''''kemenche''''' ({{lang-tr|Klasik kemençe}}), '''{{lang|tr|Armudî kemençe}}''' ('pear-shaped kemenche') or '''{{lang|el-Latn|Politiki lyra}}''' ({{lang-el|πολίτικη λύρα}}, 'Constantinopolitan lyre') is a pear-shaped bowed instrument that derived from the medieval Greek byzantine lyre.
+
+It was mainly used by [[Greeks|Greek]] immigrants from [[Asia Minor]] and in classical [[Ottoman Empire|Ottoman]] music. The instrument was also used earlier for popular music, such as early "Smyrna-Style" [[Rebetiko]] and played till nowadays. It has become the main bowed instrument of [[Ottoman classical music]] since the mid 19th century.
+
+==Etymology==
+
+The name ''Kemençe'' derives from the [[Persian language|Persian]] [[Kamancheh]], and means merely "small bow".<ref>{{cite journal|title=Middle East Focus |url=http://www.thestrad.com/downloads/Kamancheh.pdf |work=The Strad |date=July 2007 |pages=50–2 |quote=The Persian word for bow is kaman, and kamancheh is the diminutive form. }}{{dead link|date=August 2020|bot=medic}}{{cbignore|bot=medic}}</ref>
+
+The name ''lyra'' derives from the name of the ancient Greek [[lyre]] and was used in medieval times, see [[Byzantine lyra]].
+
+== Playing ==
+
+It is played in the downright position, by resting it between both knees or on one knee when sitting. It is always played "braccio", that is, with the tuning head uppermost. The kemenche bow is called the yay ({{lang-tr|Yay}}) and the ''doksar'' ({{lang-el|δοξάρι}}), the Greek term for bow.
+
+The strings are stopped by touching them by the side with the nails, like for many folk fiddles from Southeastern Europe to the Indian sub-continent, including the Indian [[sarangi]].
+
+== Construction ==
+
+[[File:Smyrna Trio.jpg|thumb|right|alt="Photo of Smyrna Style Trio (1930)|Smyrna style trio: K. Lambros, [[Roza Eskenazi|R. Eskenazi]], A. Tomboulis (Athens, 1930)]]
+
+Its pear-shaped body,  elliptical pegbox and neck are fashioned from a single piece of wood. Its sound-board has two D-shaped soundholes of some 4x3 cm, approximately 25 mm apart, the rounded side facing outwards. The bridge is placed between, one side resting on the face of the instrument and the other on the sound post. A small hole 3–4 mm in diameter is bored in the back, directly below the bridge, and a ‘back channel’ (‘sırt oluğu’) begins from a triangular raised area (‘mihrap’) which is an extension of the neck, widens in the middle, and ends in a point near the tailpiece (“kuyruk takozu”) to which the gut or metal strings are attached. There is no nut to equalize the vibrating lengths of the strings.
+
+The pegs, which are 14–15 cm long, form a triangle on the head, the middle string being 37–40 mm longer than the strings to either side of it. The vibrating lengths of the short strings are 25.5–26 cm. All the strings are of gut but the yegâh string is silver-wound. Today players may use synthetic racquet strings, aluminium-wound gut, synthetic silk or chromed steel violin strings.
+
+Formerly the head, neck and back channel might be inlaid with ivory, mother-of-pearl or tortoise shell. Some kemençes made for the palace or mansions by great makers such as Büyük İzmitli or Baron had their backs and even the edges of the sound holes completely covered with such inlays with engraved and inlaid motifs.
+
+==Related instruments==
+The [[Byzantine lyra]] (Latin: ''lira'') was a pear-shaped bowed string instrument. The [[Persian people|Persian]] geographer [[Ibn Khordadbeh|Ibn Khurradadhbih]] (d. 911) was the first to describe the Byzantine lyra as a typical Byzantine instrument (Margaret J. Kartomi, 1990).
+
+Variations of the instrument (sharing the same form and method of playing) exist through a vast area of the [[Mediterranean]] and the [[Balkans]]. Examples are the Bulgarian [[Gadulka]], the [[Calabrian Lira]] in Italy, the [[Cretan lyra|lyra]] of [[Crete]] and the [[Dodecanese]], the [[Lijerica]] of the Croatian Adriatic.
+
+== Notable kemençe and lyra virtuosi ==
+* [[Fahire Fersan]] (1900–1997)
+* [[Tamburi Cemil Bey]]  (1873–1916)
+* Derya Türkan
+* Sokratis Sinopoulos
+* Labros Leontaridis
+* İhsan Özgen
+* Cüneyd Orhon
+* Ruşen Ferit Kam
+
+==See also==
+*[[Byzantine lyra]]
+*[[Cretan lyra]]
+*[[Gadulka]]
+*[[Gudok]]
+*[[Ghaychak]]
+*[[Gusle]]
+*[[Rebab]]
+*[[Kamancheh]]
+*[[Kobyz]]
+*[[Rebec]]
+*[[Igil]]
+*[[Byzaanchy]]
+*[[Huqin]]
+*[[Violin family]]
+
+== References ==
+{{Reflist}}
+
+== Bibliography ==
+
+* Margaret J. Kartomi: On Concepts and Classifications of Musical Instruments. Chicago Studies in Ethnomusicology, University of Chicago Press, 1990.
+* The New Grove Dictionary of Musical Instruments: Londra, 1984.
+* M. Nazmi Özalp: Türk Sanat Mûsikîsi Sazlarından Kemençe, Ankara, tarihsiz (1985’ten önce).
+* Laurence Picken: Folk Musical Instruments of Turkey, Londra, 1975.
+* Rauf Yekta: Türk Musikisi (çev: Orhan Nasuhioğlu), İstanbul, 1986.
+
+==External links==
+{{Commons category|Klasik kemençe/Polítiki lýra}}
+* [http://www.turkishmusicportal.org/en/instruments/turkish-classical-music-kemence Kemençe]
+
+===Video===
+*[https://www.youtube.com/watch?v=HSEYQhJZNuI Classical kemençe video]
+
+{{Greek musical instruments}}
+{{Turkish musical instruments}}
+{{Authority control}}
+
+{{DEFAULTSORT:Classical kemence}}
+[[Category:Necked bowl lutes]]
+[[Category:Bowed instruments]]
+[[Category:Greek musical instruments]]
+[[Category:Turkish musical instruments]]
+[[Category:Instruments of Ottoman classical music]]
+[[Category:Instruments of Turkish makam music]]