Add config for Selenium and basic tests

This is some sort of Hello World for selenium. This patch adds the
config files and a couple of very basic tests.

Bug: T214478
Change-Id: I8193b4edb40332bea1d08e24ec020bf36004320d

.gitignore

@@ -23,3 +23,4 @@ project.index
 ## Sublime
 sublime-*
 sftp-config.json
+/tests/selenium/log

package.json

@@ -2,7 +2,8 @@
 	"private": true,
 	"description": "Build tools for the AbuseFilter mediawiki extension.",
 	"scripts": {
-		"test": "grunt test"
+		"test": "grunt test",
+		"selenium-test": "wdio tests/selenium/wdio.conf.js"
 	},
 	"devDependencies": {
 		"eslint-config-wikimedia": "0.13.1",
@@ -11,6 +12,10 @@
 		"grunt-eslint": "22.0.0",
 		"grunt-stylelint": "0.11.0",
 		"stylelint": "10.1.0",
-		"stylelint-config-wikimedia": "0.6.0"
+		"stylelint-config-wikimedia": "0.6.0",
+		"wdio-mediawiki": "0.4.0",
+		"wdio-mocha-framework": "0.6.4",
+		"wdio-spec-reporter": "0.1.5",
+		"webdriverio": "4.14.0"
 	}
 }

tests/selenium/.eslintrc.json

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

tests/selenium/README.md

@@ -0,0 +1,33 @@
+# 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/AbuseFilter
+    vagrant up
+    vagrant roles enable abusefilter
+    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]
+
+Filter by file name and test name:
+
+    npm run selenium-test -- --spec tests/selenium/specs/[FILE-NAME] --mochaOpts.grep [TEST-NAME]

tests/selenium/pageobjects/viewedit.page.js

@@ -0,0 +1,11 @@
+const Page = require( 'wdio-mediawiki/Page' );
+
+class ViewEditPage extends Page {
+	get title() { return browser.element( '#firstHeading' ); }
+	get filterId() { return browser.element( '#mw-abusefilter-edit-id .mw-input' ); }
+	get hiddenEditor() { return browser.element( '#wpFilterRules' ); }
+	open( id ) {
+		super.openTitle( 'Special:AbuseFilter/' + id );
+	}
+}
+module.exports = new ViewEditPage();

tests/selenium/pageobjects/viewlist.page.js

@@ -0,0 +1,10 @@
+const Page = require( 'wdio-mediawiki/Page' );
+
+class ViewListPage extends Page {
+	get title() { return browser.element( '#firstHeading' ); }
+	get newFilterButton() { return browser.element( '.oo-ui-buttonElement a' ); }
+	open() {
+		super.openTitle( 'Special:AbuseFilter' );
+	}
+}
+module.exports = new ViewListPage();

tests/selenium/specs/ViewEdit.basic.js

@@ -0,0 +1,28 @@
+var assert = require( 'assert' ),
+	LoginPage = require( 'wdio-mediawiki/LoginPage' ),
+	ViewEditPage = require( '../pageobjects/viewedit.page' );
+
+describe( 'Special:AbuseFilter/new', function () {
+	it( 'the main elements should be correct', function () {
+		LoginPage.loginAdmin();
+		ViewEditPage.open( 'new' );
+
+		assert.equal(
+			ViewEditPage.title.getText(),
+			'Editing abuse filter',
+			'the title should be correct'
+		);
+
+		assert.equal(
+			ViewEditPage.filterId.getText(),
+			'New filter',
+			'the filter ID should be correct for a new filter'
+		);
+
+		assert.equal(
+			ViewEditPage.hiddenEditor.getAttribute( 'value' ),
+			'',
+			'the hidden rules editor should be empty'
+		);
+	} );
+} );

tests/selenium/specs/ViewList.basic.js

@@ -0,0 +1,19 @@
+var assert = require( 'assert' ),
+	LoginPage = require( 'wdio-mediawiki/LoginPage' ),
+	ViewListPage = require( '../pageobjects/viewlist.page' );
+
+describe( 'Special:AbuseFilter', function () {
+	it( 'page should exist on installation', function () {
+		ViewListPage.open();
+		assert.equal( ViewListPage.title.getText(), 'Abuse filter management' );
+	} );
+	it( 'page should have the button for creating a new filter', function () {
+		LoginPage.loginAdmin();
+		ViewListPage.open();
+		assert.equal( ViewListPage.newFilterButton.getText(), 'Create a new filter' );
+		assert.notEqual(
+			ViewListPage.newFilterButton.getAttribute( 'href' ).indexOf( 'Special:AbuseFilter/new' ),
+			-1
+		);
+	} );
+} );

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 capturing 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' );
+		}
+	}
+};