QA: Port Notifications browser test to Node.js

Uncover a bug and fix it in the process \o/ - it seems that the
close icon is misplaced between clicking the notifications icon
and loading the contents of the overlay - this confuses the webdriver
as the button is not clickable.

Bug: T219920
Change-Id: Ib4d076fd9b7ea1cd48b6b58940a50560eacd51a0
This commit is contained in:
jdlrobson 2019-04-08 14:11:33 -07:00
parent 7f2b69ac14
commit c16c20a394
12 changed files with 142 additions and 26 deletions

View File

@ -180,6 +180,20 @@
.notifications-overlay.navigation-drawer {
left: @rightDrawerLeftOffset;
.overlay-header {
padding-left: 0;
padding-right: 0;
margin: 0; // T210191
width: 100%; // T218731
// T170903
max-width: none;
.cancel {
// 0 because we want to have some tappable area to the left of the icon
left: 0;
}
}
}
}

View File

@ -14,19 +14,5 @@
.mw-echo-notification {
padding: 1.75em @contentPaddingTablet;
}
.overlay-header .cancel {
// 0 because we want to have some tappable area to the left of the icon
left: 0;
}
.overlay-header {
padding-left: 0;
padding-right: 0;
margin: 0; // T210191
width: 100%; // T218731
// T170903
max-width: none;
}
}
}

View File

@ -58,7 +58,7 @@ Example: https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/501792
## Step 2 - add boilerplate for missing steps
Run the feature in cucumber
```
./node_modules/.bin/wdio tests/selenium/wdio.conf.cucumber.js --spec tests/selenium/features/<name>.feature
npm run selenium-test-cucumber -- --spec tests/selenium/features/<name>.feature
```
You will get warnings such as:

View File

@ -5,10 +5,6 @@ Feature: Notification
Given I am logged into the mobile website
And I have no notifications
When I click on the notification icon
And the notifications overlay appears
@smoke
Scenario: Opening notifications
Then I should see the notifications overlay
Scenario: Closing notifications (overlay button)

View File

@ -1,7 +1,14 @@
const assert = require( 'assert' ),
Api = require( 'wdio-mediawiki/Api' ),
ArticlePageWithOverlay = require( '../support/pages/article_page_with_overlay' ),
{ ArticlePage, UserLoginPage, api } = require( '../support/world.js' );
const waitForPropagation = ( timeMs ) => {
// wait 2 seconds so the change can propogate.
const d = new Date();
browser.waitUntil( () => new Date() - d > timeMs );
};
const login = () => {
return api.loginGetEditToken( {
username: browser.options.username,
@ -64,7 +71,30 @@ const iShouldSeeAToastNotification = () => {
ArticlePage.notification_element.waitForVisible();
};
const iClickTheBrowserBackButton = () => {
browser.back();
};
const iClickTheOverlayCloseButton = () => {
waitForPropagation( 2000 );
ArticlePageWithOverlay.overlay_close_element.click();
};
const iSeeAnOverlay = () => {
ArticlePageWithOverlay.overlay_element.waitForVisible();
assert.strictEqual( ArticlePageWithOverlay.overlay_element.isVisible(), true );
};
const iDoNotSeeAnOverlay = () => {
browser.waitUntil( () => !ArticlePageWithOverlay.overlay_element.isVisible() );
assert.strictEqual( ArticlePageWithOverlay.overlay_element.isVisible(), false );
};
module.exports = {
waitForPropagation,
iSeeAnOverlay, iDoNotSeeAnOverlay,
iClickTheOverlayCloseButton,
iClickTheBrowserBackButton,
createPage, createPages,
pageExists, iAmOnAPageThatDoesNotExist, iShouldSeeAToastNotification,
iAmLoggedIntoTheMobileWebsite,

View File

@ -2,16 +2,11 @@ const { api, ArticlePage } = require( '../support/world' );
const Api = require( 'wdio-mediawiki/Api' );
const {
iAmOnPage,
waitForPropagation,
createPages,
createPage
} = require( './common_steps' );
const waitForPropagation = ( timeMs ) => {
// wait 2 seconds so the change can propogate.
const d = new Date();
browser.waitUntil( () => new Date() - d > timeMs );
};
const iAmInAWikiThatHasCategories = ( title ) => {
const msg = 'This page is used by Selenium to test category related features.',
wikitext = `

View File

@ -7,7 +7,7 @@ const { defineSupportCode } = require( 'cucumber' ),
iGoToAPageThatHasLanguages } = require( './create_page_api_steps' ),
{
pageExists, iAmOnAPageThatDoesNotExist, iShouldSeeAToastNotification,
iAmUsingTheMobileSite,
iAmUsingTheMobileSite, iClickTheBrowserBackButton,
iAmLoggedIntoTheMobileWebsite,
iAmOnPage, iAmInBetaMode
} = require( './common_steps' ),
@ -21,6 +21,10 @@ const { defineSupportCode } = require( 'cucumber' ),
iTypeIntoTheEditor, iClickContinue, iClickSubmit, iSayOkayInTheConfirmDialog,
theTextOfTheFirstHeadingShouldBe, thereShouldBeARedLinkWithText
} = require( './editor_steps' ),
{ iHaveNoNotifications, iClickOnTheNotificationIcon,
iShouldSeeTheNotificationsOverlay, iClickTheNotificationsOverlayCloseButton,
iShouldNotSeeTheNotificationsOverlay
} = require( './notification_steps' ),
{
iClickOnTheHistoryLinkInTheLastModifiedBar
} = require( './history_steps' );
@ -48,6 +52,7 @@ defineSupportCode( function ( { Then, When, Given } ) {
Given( /^I am logged into the mobile website$/, iAmLoggedIntoTheMobileWebsite );
Then( /^I should see a toast notification$/, iShouldSeeAToastNotification );
When( /I click the browser back button/, iClickTheBrowserBackButton );
// Page steps
Given( /^I am in a wiki that has categories$/, () => {
@ -67,6 +72,13 @@ defineSupportCode( function ( { Then, When, Given } ) {
Then( /^I should see "(.*?)" as added content$/, iShouldSeeAddedContent );
Then( /^I should see "(.*?)" as removed content$/, iShouldSeeRemovedContent );
// notifications
Then( /I have no notifications/, iHaveNoNotifications );
When( /I click on the notification icon/, iClickOnTheNotificationIcon );
When( /I click the notifications overlay close button/, iClickTheNotificationsOverlayCloseButton );
Then( /after 1 seconds I should not see the notifications overlay/, iShouldNotSeeTheNotificationsOverlay );
Then( /I should see the notifications overlay/, iShouldSeeTheNotificationsOverlay );
// Category steps
When( /^I click on the category button$/, iClickOnTheCategoryButton );

View File

@ -0,0 +1,32 @@
const ArticlePage = require( '../support/pages/article_page' );
const { iClickTheOverlayCloseButton, iSeeAnOverlay, iDoNotSeeAnOverlay } = require( './common_steps' );
const iHaveNoNotifications = () => {
ArticlePage.notifications_button_element.waitForVisible();
// This is somewhat hacky, but we don't want this test making use of
// Echo's APIs which may change
browser.execute( '$( function () { $( ".notification-count span" ).hide(); } );' );
};
const iClickOnTheNotificationIcon = () => {
ArticlePage.waitUntilResourceLoaderModuleReady( 'skins.minerva.notifications' );
ArticlePage.notifications_button_element.click();
};
const iShouldSeeTheNotificationsOverlay = () => {
iSeeAnOverlay();
};
const iClickTheNotificationsOverlayCloseButton = () => {
iClickTheOverlayCloseButton();
};
const iShouldNotSeeTheNotificationsOverlay = () => {
iDoNotSeeAnOverlay();
};
module.exports = {
iHaveNoNotifications, iClickOnTheNotificationIcon,
iShouldSeeTheNotificationsOverlay, iClickTheNotificationsOverlayCloseButton,
iShouldNotSeeTheNotificationsOverlay
};

View File

@ -10,6 +10,7 @@ const MinervaPage = require( './minerva_page' );
class ArticlePage extends MinervaPage {
get notifications_button_element() { return $( '.user-button' ); }
get category_element() { return $( '.category-button' ); }
get edit_link_element() { return $( '#ca-edit' ); }
get first_heading_element() { return $( '#section_0' ); }

View File

@ -0,0 +1,19 @@
/**
* Represents a generic article page with the editor overlay open
*
* @class ArticlePageWithOverlay
* @extends MinervaPage
* @example
* https://en.m.wikipedia.org/wiki/Barack_Obama#/editor/0
*/
const MinervaPage = require( './minerva_page' );
class ArticlePageWithOverlay extends MinervaPage {
get overlay_element() { return $( '.overlay' ); }
// overlay components
get overlay_close_element() { return $( '.overlay .cancel' ); }
}
module.exports = new ArticlePageWithOverlay();

View File

@ -0,0 +1,31 @@
const
{
iClickTheBrowserBackButton,
iAmLoggedIntoTheMobileWebsite
} = require( './../features/step_definitions/common_steps' ),
{ iHaveNoNotifications, iClickOnTheNotificationIcon,
iShouldSeeTheNotificationsOverlay, iClickTheNotificationsOverlayCloseButton,
iShouldNotSeeTheNotificationsOverlay
} = require( './../features/step_definitions/notification_steps' );
// @chrome @en.m.wikipedia.beta.wmflabs.org @extension-echo
// @firefox @vagrant @login
describe( 'Feature: Notification', () => {
beforeEach( () => {
iAmLoggedIntoTheMobileWebsite();
iHaveNoNotifications();
iClickOnTheNotificationIcon();
iShouldSeeTheNotificationsOverlay();
} );
it( 'Closing notifications (overlay button)', () => {
iClickTheNotificationsOverlayCloseButton();
iShouldNotSeeTheNotificationsOverlay();
} );
it( 'Closing notifications (browser button)', () => {
iClickTheBrowserBackButton();
iShouldNotSeeTheNotificationsOverlay();
} );
} );