From a2ca2c031e835a11f78606d420a1e992b904db4c Mon Sep 17 00:00:00 2001 From: WMDE-Fisch Date: Wed, 27 Mar 2019 19:09:56 +0100 Subject: [PATCH] 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 --- .../ext.RevisionSlider.RevisionListView.js | 4 +- package.json | 10 +- tests/selenium/.eslintrc.json | 16 ++ tests/selenium/README.md | 34 ++++ tests/selenium/pageobjects/diff.page.js | 169 ++++++++++++++++++ tests/selenium/specs/filterhighlighting.js | 68 +++++++ tests/selenium/wdio.conf.js | 88 +++++++++ 7 files changed, 385 insertions(+), 4 deletions(-) create mode 100644 tests/selenium/.eslintrc.json create mode 100644 tests/selenium/README.md create mode 100644 tests/selenium/pageobjects/diff.page.js create mode 100644 tests/selenium/specs/filterhighlighting.js create mode 100644 tests/selenium/wdio.conf.js diff --git a/modules/ext.RevisionSlider.RevisionListView.js b/modules/ext.RevisionSlider.RevisionListView.js index a50213cf..c0537a62 100644 --- a/modules/ext.RevisionSlider.RevisionListView.js +++ b/modules/ext.RevisionSlider.RevisionListView.js @@ -393,7 +393,7 @@ userGender = 'unknown'; } - $userLine = $( '

' ).addClass( 'mw-revslider-highlightable-row' ).append( + $userLine = $( '

' ).addClass( 'mw-revslider-highlightable-row mw-revslider-username-row' ).append( $( '' ).text( mw.msg( 'revisionslider-label-username', userGender ) + mw.msg( 'colon-separator' ) ), $( '' ).append( $( '' ).addClass( 'mw-userlink' ).attr( 'href', mw.util.getUrl( this.getUserPage( userString ) ) ).text( this.stripInvalidCharacters( userString ) ) @@ -522,7 +522,7 @@ $tagLines = $( '

' ); for ( i = 0; i < tags.length; i++ ) { - $tagLine = $( '
' ).addClass( 'mw-revslider-highlightable-row' ).append( + $tagLine = $( '
' ).addClass( 'mw-revslider-highlightable-row mw-revslider-tag-row' ).append( tags[ i ], $tagBubble = $( '
' ).addClass( 'mw-revslider-bubble' ) .on( 'click mouseenter mouseleave', updateTagLineHighlighting ), diff --git a/package.json b/package.json index fe95bfc6..12cba323 100644 --- a/package.json +++ b/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" } } diff --git a/tests/selenium/.eslintrc.json b/tests/selenium/.eslintrc.json new file mode 100644 index 00000000..dd766c85 --- /dev/null +++ b/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 + } +} diff --git a/tests/selenium/README.md b/tests/selenium/README.md new file mode 100644 index 00000000..f4782f8c --- /dev/null +++ b/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] diff --git a/tests/selenium/pageobjects/diff.page.js b/tests/selenium/pageobjects/diff.page.js new file mode 100644 index 00000000..e53e218a --- /dev/null +++ b/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(); diff --git a/tests/selenium/specs/filterhighlighting.js b/tests/selenium/specs/filterhighlighting.js new file mode 100644 index 00000000..bbffeeef --- /dev/null +++ b/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' + ); + } ); + +} ); diff --git a/tests/selenium/wdio.conf.js b/tests/selenium/wdio.conf.js new file mode 100644 index 00000000..3b58beb6 --- /dev/null +++ b/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.`. + // 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' ); + } + } +};