Add node selenium tests for revision highlight feature

The patch adds a first package of node selenium tests including
test for the user and tag filters.

The classes for user- and tag-rows were re-added to have better
access via selectors.

Change-Id: I8c53d9c923820e177d83ee900cee08e93cd3f65b

modules/ext.RevisionSlider.RevisionListView.js

@@ -393,7 +393,7 @@
 				userGender = 'unknown';
 			}
 
-			$userLine = $( '<p>' ).addClass( 'mw-revslider-highlightable-row' ).append(
+			$userLine = $( '<p>' ).addClass( 'mw-revslider-highlightable-row mw-revslider-username-row' ).append(
 				$( '<strong>' ).text( mw.msg( 'revisionslider-label-username', userGender ) + mw.msg( 'colon-separator' ) ),
 				$( '<bdi>' ).append(
 					$( '<a>' ).addClass( 'mw-userlink' ).attr( 'href', mw.util.getUrl( this.getUserPage( userString ) ) ).text( this.stripInvalidCharacters( userString ) )
@@ -522,7 +522,7 @@
 			$tagLines = $( '<div>' );
 
 			for ( i = 0; i < tags.length; i++ ) {
-				$tagLine = $( '<div>' ).addClass( 'mw-revslider-highlightable-row' ).append(
+				$tagLine = $( '<div>' ).addClass( 'mw-revslider-highlightable-row mw-revslider-tag-row' ).append(
 					tags[ i ],
 					$tagBubble = $( '<div>' ).addClass( 'mw-revslider-bubble' )
 						.on( 'click mouseenter mouseleave', updateTagLineHighlighting ),

package.json

@@ -1,7 +1,8 @@
 {
 	"private": true,
 	"scripts": {
-		"test": "grunt test"
+		"test": "grunt test",
+		"selenium-test": "wdio tests/selenium/wdio.conf.js"
 	},
 	"devDependencies": {
 		"eslint-config-wikimedia": "0.10.1",
@@ -10,6 +11,11 @@
 		"grunt-eslint": "21.0.0",
 		"grunt-jsonlint": "1.1.0",
 		"grunt-stylelint": "0.10.1",
-		"stylelint-config-wikimedia": "0.5.0"
+		"mwbot": "1.0.10",
+		"stylelint-config-wikimedia": "0.5.0",
+		"wdio-mediawiki": "0.3.0",
+		"wdio-mocha-framework": "0.6.4",
+		"wdio-spec-reporter": "0.1.5",
+		"webdriverio": "4.14.4"
 	}
 }

tests/selenium/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+	"root": true,
+	"extends": [
+		"wikimedia/server"
+	],
+	"env": {
+		"mocha": true
+	},
+	"globals": {
+		"browser": false,
+		"mw": false
+	},
+	"rules": {
+		"no-console": 0
+	}
+}

tests/selenium/README.md

@@ -0,0 +1,34 @@
+# Selenium tests
+
+For more information see https://www.mediawiki.org/wiki/Selenium/Node.js and
+[PATH]/mediawiki/vagrant/mediawiki/tests/selenium/README.md.
+
+## Setup
+
+Set up MediaWiki-Vagrant:
+
+    cd [PATH]/mediawiki/vagrant/mediawiki/extensions/RevisionSlider
+    vagrant up
+    vagrant roles enable revisionslider
+    vagrant provision
+    npm install
+
+Chromedriver has to run in one terminal window:
+
+    chromedriver --url-base=wd/hub --port=4444
+
+## Run all specs
+
+In another terminal window:
+
+    npm run selenium-test
+
+## Run specific tests
+
+Filter by file name:
+
+    npm run selenium-test -- --spec tests/selenium/specs/[FILE-NAME].js
+
+Filter by file name and test name:
+
+    npm run selenium-test -- --spec tests/selenium/specs/[FILE-NAME.js] --mochaOpts.grep [TEST-NAME]

tests/selenium/pageobjects/diff.page.js

@@ -0,0 +1,169 @@
+const Page = require( 'wdio-mediawiki/Page' ),
+	Api = require( 'wdio-mediawiki/Api' ),
+	BlankPage = require( 'wdio-mediawiki/BlankPage' ),
+	Util = require( 'wdio-mediawiki/Util' ),
+	MWBot = require( 'mwbot' );
+
+class DiffPage extends Page {
+	get rsMain() { return browser.element( '.mw-revslider-revision-slider' ); }
+	get rsToggleButton() { return browser.element( '.mw-revslider-toggle-button' ); }
+
+	get rsUserFilterBubble() { return browser.element( '.mw-revslider-username-row .mw-revslider-bubble' ); }
+	get rsTagFilterBubble() { return browser.element( '.mw-revslider-tag-row:last-of-type .mw-revslider-bubble' ); }
+
+	getRevision( num ) { return browser.element( '.mw-revslider-revision[data-pos="' + num + '"]' ); }
+
+	resourceLoaderModuleStatus( moduleName, moduleStatus, errMsg ) {
+		// Word of caution: browser.waitUntil returns a Timer class NOT a Promise.
+		// Webdriver IO will run waitUntil synchronously so not returning it will
+		// block JavaScript execution while returning it will not.
+		// http://webdriver.io/api/utility/waitUntil.html
+		// https://github.com/webdriverio/webdriverio/blob/master/lib/utils/Timer.js
+		browser.waitUntil( () => {
+			const result = browser.execute( ( module ) => {
+				return typeof mw !== 'undefined' &&
+				mw.loader.getState( module.name ) === module.status;
+			}, { status: moduleStatus, name: moduleName } );
+			return result.value;
+		}, 10000, errMsg );
+	}
+
+	ready() {
+		this.resourceLoaderModuleStatus( 'ext.RevisionSlider.lazyJs', 'ready', 'RevisionSlider did not load' );
+	}
+
+	prepareFilterTests() {
+		let title = Util.getTestString( 'revisionslider-test-' );
+		BlankPage.open();
+		this.toggleHelpDialog( false );
+		this.hasPageWithDifferentEdits( title );
+		this.open( title );
+	}
+
+	openSlider() {
+		this.rsToggleButton.click();
+		this.rsMain.waitForVisible();
+	}
+
+	open( title ) {
+		super.openTitle( title, { type: 'revision', diff: '' } );
+	}
+
+	/**
+	 * @param {boolean} [show] Defaults to true.
+	 */
+	toggleHelpDialog( show ) {
+		let hide = show === false;
+		browser.localStorage( 'POST', { key: 'mw-revslider-hide-help-dialogue', value: hide ? '1' : '0' } );
+	}
+
+	/**
+	 * Will setup a test page with two user edits, one anonymous edit
+	 * and a tagged.
+	 *
+	 * @param {string} title Article to edit.
+	 */
+	hasPageWithDifferentEdits( title ) {
+		this.addTwoUserEditsToPage( title );
+		this.addTaggedOtherUserEditToPage( title );
+		this.addTaggedEditToPage( title );
+	}
+
+	/**
+	 * @param {string} title Article to edit.
+	 */
+	addTwoUserEditsToPage( title ) {
+		browser.call( function () {
+			return Api.edit(
+				title,
+				'RevisionSlider-Test-Text One'
+			);
+		} );
+		browser.call( function () {
+			return Api.edit(
+				title,
+				'RevisionSlider-Test-Text Two'
+			);
+		} );
+	}
+
+	/**
+	 * @param {string} title Article to edit.
+	 */
+	addTaggedEditToPage( title ) {
+		let bot = new MWBot();
+
+		browser.call( function () {
+			return bot.loginGetEditToken( {
+				apiUrl: `${browser.options.baseUrl}/api.php`,
+				username: browser.options.username,
+				password: browser.options.password
+			} ).then( function () {
+				return bot.edit(
+					title,
+					'',
+					'RevisionSlider-Test-Tagged',
+					{ tags: 'mw-blank' }
+				);
+			} );
+		} );
+	}
+
+	/**
+	 * @param {string} title Article to edit.
+	 */
+	addTaggedOtherUserEditToPage( title ) {
+		let bot = new MWBot();
+		let otherUser = Util.getTestString( 'User-' );
+		let otherUserPassword = Util.getTestString();
+		browser.call( function () {
+			return Api.createAccount( otherUser, otherUserPassword );
+		} );
+
+		browser.call( function () {
+			return bot.loginGetEditToken( {
+				apiUrl: `${browser.options.baseUrl}/api.php`,
+				username: otherUser,
+				password: otherUserPassword
+			} ).then( function () {
+				return bot.edit(
+					title,
+					'RevisionSlider-Test-Other-Text with tag',
+					'RevisionSlider-Test-Other-Tagged',
+					{ tags: 'mw-replace' }
+				);
+			} );
+		} );
+	}
+
+	dwellRevision( num ) {
+		browser.moveToObject( '.mw-revslider-revision[data-pos="' + num + '"]' );
+		browser.waitForVisible( '.mw-revslider-revision-tooltip-' + num );
+	}
+
+	abondonBubbleDwell() {
+		// make sure we do not dwell the line/bubble after clicking
+		browser.moveToObject( '.mw-revslider-revision-tooltip p:first-of-type' );
+	}
+
+	clickUserFilterBubble() {
+		this.rsUserFilterBubble.click();
+		this.abondonBubbleDwell();
+	}
+
+	clickTagFilterBubble() {
+		this.rsTagFilterBubble.click();
+		this.abondonBubbleDwell();
+	}
+
+	highlightsRevision( num ) {
+		return this.getRevision( num ).$( '..' )
+			.getAttribute( 'class' ).indexOf( 'mw-revslider-revision-highlight' ) !== -1;
+	}
+
+	highlightsBubble( el ) {
+		return el.getAttribute( 'class' ).indexOf( 'mw-revslider-highlite-bubble' ) !== -1;
+	}
+}
+
+module.exports = new DiffPage();

tests/selenium/specs/filterhighlighting.js

@@ -0,0 +1,68 @@
+var assert = require( 'assert' ),
+	DiffPage = require( '../pageobjects/diff.page' );
+
+describe( 'RevisionSlider filter highlighting', function () {
+
+	before( function () {
+		DiffPage.prepareFilterTests();
+	} );
+
+	beforeEach( function () {
+		DiffPage.ready();
+		DiffPage.openSlider();
+	} );
+
+	afterEach( function () {
+		browser.refresh();
+	} );
+
+	it( 'highlights revisions by the same user when I use the user filter', function () {
+		DiffPage.dwellRevision( 1 );
+		DiffPage.clickUserFilterBubble();
+
+		assert( DiffPage.highlightsBubble( DiffPage.rsUserFilterBubble ) );
+		assert(
+			DiffPage.highlightsRevision( 1 ) &&
+			DiffPage.highlightsRevision( 2 ) &&
+			DiffPage.highlightsRevision( 4 ),
+			'does highlight revisions from the selected user'
+		);
+		assert(
+			!DiffPage.highlightsRevision( 3 ),
+			'does not highlight revisions from a different user'
+		);
+	} );
+
+	it( 'stops highlighting revisions when the filter is clicked twice', function () {
+		DiffPage.dwellRevision( 1 );
+		DiffPage.clickUserFilterBubble();
+		DiffPage.clickUserFilterBubble();
+
+		assert( !DiffPage.highlightsBubble( DiffPage.rsUserFilterBubble ) );
+		assert(
+			!DiffPage.highlightsRevision( 1 ) &&
+			!DiffPage.highlightsRevision( 2 ) &&
+			!DiffPage.highlightsRevision( 3 ) &&
+			!DiffPage.highlightsRevision( 4 ),
+			'does not highlight any revisions'
+		);
+	} );
+
+	it( 'highlights revisions that have the same tag when I use the tag filter', function () {
+		DiffPage.dwellRevision( 4 );
+		DiffPage.clickTagFilterBubble();
+
+		assert( DiffPage.highlightsBubble( DiffPage.rsTagFilterBubble ) );
+		assert(
+			DiffPage.highlightsRevision( 4 ),
+			'does highlight revisions with the selected tag'
+		);
+		assert(
+			!DiffPage.highlightsRevision( 1 ) &&
+			!DiffPage.highlightsRevision( 2 ) &&
+			!DiffPage.highlightsRevision( 3 ),
+			'does not highlight revisions without the selected tag'
+		);
+	} );
+
+} );

tests/selenium/wdio.conf.js

@@ -0,0 +1,88 @@
+/**
+ * See also: http://webdriver.io/guide/testrunner/configurationfile.html
+ */
+const fs = require( 'fs' ),
+	saveScreenshot = require( 'wdio-mediawiki' ).saveScreenshot;
+
+exports.config = {
+	// ======
+	// Custom WDIO config specific to MediaWiki
+	// ======
+	// Use in a test as `browser.options.<key>`.
+	// Defaults are for convenience with MediaWiki-Vagrant
+
+	// Wiki admin
+	username: process.env.MEDIAWIKI_USER || 'Admin',
+	password: process.env.MEDIAWIKI_PASSWORD || 'vagrant',
+
+	// Base for browser.url() and Page#openTitle()
+	baseUrl: ( process.env.MW_SERVER || 'http://127.0.0.1:8080' ) + (
+		process.env.MW_SCRIPT_PATH || '/w'
+	),
+
+	// ==================
+	// Test Files
+	// ==================
+	specs: [
+		__dirname + '/specs/*.js'
+	],
+
+	// ============
+	// Capabilities
+	// ============
+	capabilities: [ {
+		// https://sites.google.com/a/chromium.org/chromedriver/capabilities
+		browserName: 'chrome',
+		maxInstances: 1,
+		chromeOptions: {
+			// If DISPLAY is set, assume developer asked non-headless or CI with Xvfb.
+			// Otherwise, use --headless (added in Chrome 59)
+			// https://chromium.googlesource.com/chromium/src/+/59.0.3030.0/headless/README.md
+			args: [
+				...( process.env.DISPLAY ? [] : [ '--headless' ] ),
+				// Chrome sandbox does not work in Docker
+				...( fs.existsSync( '/.dockerenv' ) ? [ '--no-sandbox' ] : [] )
+			]
+		}
+	} ],
+
+	// ===================
+	// Test Configurations
+	// ===================
+
+	// Level of verbosity: silent | verbose | command | data | result | error
+	logLevel: 'error',
+
+	// Setting this enables automatic screenshots for when a browser command fails
+	// It is also used by afterTest for capturig failed assertions.
+	screenshotPath: process.env.LOG_DIR || __dirname + '/log',
+
+	// Default timeout for each waitFor* command.
+	waitforTimeout: 10 * 1000,
+
+	// See also: http://webdriver.io/guide/testrunner/reporters.html
+	reporters: [ 'spec' ],
+
+	// See also: http://mochajs.org
+	mochaOpts: {
+		ui: 'bdd',
+		timeout: 60 * 1000
+	},
+
+	// =====
+	// Hooks
+	// =====
+
+	/**
+	 * Save a screenshot when test fails.
+	 *
+	 * @param {Object} test Mocha Test object
+	 */
+	afterTest: function ( test ) {
+		var filePath;
+		if ( !test.passed ) {
+			filePath = saveScreenshot( test.title );
+			console.log( '\n\tScreenshot: ' + filePath + '\n' );
+		}
+	}
+};