Port Cite web test suite to Cypress

Steps to implement:

 Copy over and adapt setup files, to install Cypress in the Cite code base.
 Port tests/selenium/specs/backlinks.js and supporting file cite.page.js to run under the Cypress environment, in a second patchset.
 Run the new suite in CI, replacing the previous selenium integration.
 Delete the selenium test suite.

Bug: T353436
Change-Id: Ie76371e18d8612daa7c7be741432c6f3e0b783b5

.gitignore

@@ -23,3 +23,8 @@ project.index
 sublime-*
 sftp-config.json
 .eslintcache
+
+/cypress/.cache
+/cypress/videos
+/cypress/screenshots
+/cypress/downloads

Gruntfile.js

@@ -21,7 +21,8 @@ module.exports = function ( grunt ) {
 			},
 			all: [
 				'**/*.{js,json}',
-				'!{vendor,node_modules}/**'
+				'!{vendor,node_modules}/**',
+				'!cypress/screenshots/**/*.js'
 			]
 		},
 		banana: conf.MessagesDirs,

cypress.config.js

@@ -0,0 +1,24 @@
+'use strict';
+
+/* eslint-env node */
+const { defineConfig } = require( 'cypress' );
+// const { mwApiCommands } = require( './cypress/support/MwApiPlugin.js' );
+
+const envLogDir = process.env.LOG_DIR ? process.env.LOG_DIR + '/Cite' : null;
+
+module.exports = defineConfig( {
+	e2e: {
+		supportFile: false,
+		baseUrl: process.env.MW_SERVER + process.env.MW_SCRIPT_PATH,
+		mediawikiAdminUsername: process.env.MEDIAWIKI_USER,
+		mediawikiAdminPassword: process.env.MEDIAWIKI_PASSWORD
+
+	},
+
+	retries: 2,
+
+	screenshotsFolder: envLogDir || 'cypress/screenshots',
+	video: true,
+	videosFolder: envLogDir || 'cypress/videos',
+	downloadsFolder: envLogDir || 'cypress/downloads'
+} );

cypress/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+	"root": true,
+	"extends": [
+		"wikimedia/server",
+		"plugin:cypress/recommended"
+	],
+	"parserOptions": {
+		"sourceType": "module"
+	}
+}
+

cypress/e2e/tests/backlinks.cy.js

@@ -0,0 +1,82 @@
+import * as helpers from '../utils/functions.helper.js';
+
+const title = getTestString( 'CiteTest-title' );
+const encodedTitle = encodeURIComponent( title );
+
+function getTestString( prefix = '' ) {
+	return prefix + Math.random().toString();
+}
+
+describe( 'Cite backlinks test', () => {
+	before( () => {
+		cy.visit( '/' );
+
+		const wikiText = 'This is reference #1: <ref name="a">This is citation #1 for reference #1 and #2</ref><br> ' +
+			'This is reference #2: <ref name="a" /><br>' +
+			'This is reference #3: <ref>This is citation #2</ref><br>' +
+			'<references />';
+
+		// Rely on the retry behavior of Cypress assertions to use this as a "wait" until the specified conditions are met.
+		cy.window().should( 'have.property', 'mw' ).and( 'have.property', 'loader' ).and( 'have.property', 'using' );
+		cy.window().then( async ( win ) => {
+
+			await win.mw.loader.using( 'mediawiki.api' ).then(
+				async function () {
+					await new win.mw.Api().create( title, {}, wikiText );
+				}
+			);
+		} );
+	} );
+
+	beforeEach( () => {
+		// cy.visit( `/wiki/${ encodedTitle }` );
+		cy.visit( `/index.php?title=${ encodedTitle }` );
+	} );
+
+	it( 'hides clickable up arrow by default when there are multiple backlinks', () => {
+		helpers.getCiteMultiBacklink( 1 ).should( 'not.exist' );
+	} );
+
+	it( 'hides clickable up arrow when jumping back from multiple used references', () => {
+		helpers.getReference( 2 ).click();
+		helpers.getCiteMultiBacklink( 1 ).click();
+		// The up-pointing arrow in the reference line is not linked
+		helpers.getCiteMultiBacklink( 1 ).should( 'not.be.visible' );
+	} );
+
+	it( 'shows clickable up arrow when jumping to multiple used references', () => {
+		helpers.getReference( 2 ).click();
+		helpers.getCiteMultiBacklink( 1 ).should( 'be.visible' );
+
+		helpers.getFragmentFromLink( helpers.getCiteMultiBacklink( 1 ) ).then( ( linkFragment ) => {
+			helpers.getReference( 2 ).invoke( 'attr', 'id' ).should( 'eq', linkFragment );
+		} );
+	} );
+
+	it( 'highlights backlink in the reference list for the clicked reference when there are multiple used references', () => {
+		cy.get( '.mw-page-title-main' ).should( 'be.visible' );
+		helpers.getReference( 2 ).click();
+		helpers.getCiteSubBacklink( 2 ).should( 'have.class', 'mw-cite-targeted-backlink' );
+	} );
+
+	it( 'uses the last clicked target for the clickable up arrow on multiple used references', () => {
+		helpers.getReference( 2 ).click();
+		helpers.getReference( 1 ).click();
+
+		helpers.getFragmentFromLink( helpers.getCiteMultiBacklink( 1 ) ).then( ( linkFragment ) => {
+			helpers.getReference( 1 ).invoke( 'attr', 'id' ).then( ( referenceId ) => {
+				expect( linkFragment ).to.equal( referenceId );
+
+			} );
+		} );
+	} );
+
+	it( 'retains backlink visibility for unnamed references when interacting with other references', () => {
+		helpers.getReference( 3 ).click();
+		helpers.getCiteSingleBacklink( 2 ).click();
+		// Doesn' matter what is focused next, just needs to be something else
+		helpers.getReference( 1 ).click();
+		// The backlink of the unnamed reference is still visible
+		helpers.getCiteSingleBacklink( 2 ).should( 'be.visible' );
+	} );
+} );

cypress/e2e/utils/functions.helper.js

@@ -0,0 +1,22 @@
+export function getReference( num ) {
+	return cy.get( `#mw-content-text .reference:nth-of-type(${ num })` );
+
+}
+
+export function getCiteSubBacklink( num ) {
+	return cy.get( `.mw-cite-backlink sup:nth-of-type(${ num }) a` );
+}
+
+export function getCiteMultiBacklink( num ) {
+	return cy.get( `.references li:nth-of-type(${ num }) .mw-cite-up-arrow-backlink` );
+}
+
+export function getCiteSingleBacklink( num ) {
+	return cy.get( `.references li:nth-of-type(${ num }) .mw-cite-backlink a` );
+}
+
+export function getFragmentFromLink( linkElement ) {
+	return linkElement.invoke( 'attr', 'href' ).then( ( href ) => {
+		return href.split( '#' )[ 1 ];
+	} );
+}

package.json

@@ -3,8 +3,10 @@
 	"private": true,
 	"scripts": {
 		"selenium-daily": "npm run selenium-test",
-		"selenium-test": "wdio tests/selenium/wdio.conf.js",
+		"selenium-test": "cypress run",
-		"test": "grunt test"
+		"cypress:open": "cypress open",
+		"test": "grunt test",
+		"lint:fix": "grunt test --fix"
 	},
 	"devDependencies": {
 		"@wdio/cli": "7.30.1",
@@ -12,7 +14,9 @@
 		"@wdio/local-runner": "7.30.1",
 		"@wdio/mocha-framework": "7.26.0",
 		"@wdio/spec-reporter": "7.29.1",
+		"cypress": "^13.6.1",
 		"eslint-config-wikimedia": "0.26.0",
+		"eslint-plugin-cypress": "^2.15.1",
 		"grunt": "1.6.1",
 		"grunt-banana-checker": "0.11.0",
 		"grunt-eslint": "24.3.0",