Add browser tests for linking the main backlink

This also includes putting the backling tests in their
own file due to the common setup needed.

Bug: T205271
Change-Id: Ica98c31bf0fddde9eb80f9c53b3dc089cb60e30c

tests/selenium/pageobjects/cite.page.js

@@ -1,8 +1,15 @@
 const Page = require( 'wdio-mediawiki/Page' );
 
 class CitePage extends Page {
-	getCiteLink( num ) { return browser.elements( '#mw-content-text .reference a' ).value[ num - 1 ]; }
+	getReference( num ) { return browser.elements( '#mw-content-text .reference' ).value[ num - 1 ]; }
+	getCiteBacklink( num ) { return browser.element( '.references li:nth-of-type(' + num + ') .mw-cite-up-arrow-backlink' ); }
 	getCiteSubBacklink( num ) { return browser.element( '.mw-cite-backlink sup:nth-of-type(' + num + ') a' ); }
+
+	getFragmentFromLink( linkElement ) {
+		// the href includes the full url so slice the fragment from it
+		let href = linkElement.getAttribute( 'href' );
+		return href.slice( href.indexOf( '#' ) + 1 );
+	}
 }
 
 module.exports = new CitePage();

tests/selenium/specs/backlinks.js

@@ -0,0 +1,77 @@
+var assert = require( 'assert' ),
+	Api = require( 'wdio-mediawiki/Api' ),
+	CitePage = require( '../pageobjects/cite.page' ),
+	Util = require( 'wdio-mediawiki/Util' );
+
+describe( 'Cite backlinks', function () {
+	var title;
+
+	before( function () {
+		title = Util.getTestString( 'CiteTest-title-' );
+
+		browser.call( function () {
+			return Api.edit(
+				title,
+				'abc<ref name="a">reftext</ref>\n\ndef<ref name="a" />\n\n' +
+				'ghi<ref>reftext2</ref>\n\n' +
+				'<references />'
+			);
+		} );
+	} );
+
+	beforeEach( function () {
+		CitePage.openTitle( title );
+		browser.pause( 300 ); // make sure JS is loaded
+	} );
+
+	it( 'are highlighted in the reference list when there are multiple used references', function () {
+		CitePage.getReference( 2 ).click();
+		assert(
+			CitePage.getCiteSubBacklink( 2 ).getAttribute( 'class' )
+				.indexOf( 'mw-cite-targeted-backlink' ) !== -1,
+			'the jump mark symbol of the backlink is highlighted'
+		);
+	} );
+
+	it( 'clickable up arrow is hidden by default when there are multiple backlinks', function () {
+		assert(
+			!CitePage.getCiteBacklink( 1 ).isVisible(),
+			'the up-pointing arrow in the reference line is not linked'
+		);
+	} );
+
+	it( 'clickable up arrow shows when jumping to multiple used references', function () {
+		CitePage.getReference( 2 ).click();
+		assert(
+			CitePage.getCiteBacklink( 1 ).isVisible(),
+			'the up-pointing arrow in the reference line is linked'
+		);
+
+		assert.strictEqual(
+			CitePage.getFragmentFromLink( CitePage.getCiteBacklink( 1 ) ),
+			CitePage.getReference( 2 ).getAttribute( 'id' ),
+			'the up-pointing arrow in the reference line is linked to the clicked reference'
+		);
+	} );
+
+	it( 'use the last clicked target for the clickable up arrow on multiple used references', function () {
+		CitePage.getReference( 2 ).click();
+		CitePage.getReference( 1 ).click();
+
+		assert.strictEqual(
+			CitePage.getFragmentFromLink( CitePage.getCiteBacklink( 1 ) ),
+			CitePage.getReference( 1 ).getAttribute( 'id' ),
+			'the up-pointing arrow in the reference line is linked to the last clicked reference'
+		);
+	} );
+
+	it( 'clickable up arrow is hidden when jumping back from multiple used references', function () {
+		CitePage.getReference( 2 ).click();
+		CitePage.getCiteBacklink( 1 ).click();
+
+		assert(
+			!CitePage.getCiteBacklink( 1 ).isVisible(),
+			'the up-pointing arrow in the reference line is not linked'
+		);
+	} );
+} );

tests/selenium/specs/cite.js

@@ -1,38 +1,9 @@
 var assert = require( 'assert' ),
-	Api = require( 'wdio-mediawiki/Api' ),
-	CitePage = require( '../pageobjects/cite.page' ),
-	Util = require( 'wdio-mediawiki/Util' ),
 	VersionPage = require( '../pageobjects/version.page' );
 
 describe( 'Cite', function () {
-	var title;
-
-	before( function () {
-		title = Util.getTestString( 'CiteTest-title-' );
-
-		browser.call( function () {
-			return Api.edit(
-				title,
-				'abc<ref name="a">reftext</ref>\n\ndef<ref name="a" />\n\n<references />'
-			);
-		} );
-	} );
-
 	it( 'is configured correctly', function () {
 		VersionPage.open();
 		assert( VersionPage.extension.isExisting() );
 	} );
-
-	it( 'highlights the jump mark symbol in the reference list', function () {
-		CitePage.openTitle( title );
-
-		browser.pause( 300 ); // make sure JS is loaded
-
-		CitePage.getCiteLink( 2 ).click();
-		assert(
-			CitePage.getCiteSubBacklink( 2 ).getAttribute( 'class' )
-				.indexOf( 'mw-cite-targeted-backlink' ) !== -1,
-			'the jump mark symbol of the backlink is highlighted'
-		);
-	} );
 } );