Merge "QA: Port Notifications browser test to Node.js"
This commit is contained in:
commit
6cd23276b2
|
@ -180,6 +180,20 @@
|
||||||
|
|
||||||
.notifications-overlay.navigation-drawer {
|
.notifications-overlay.navigation-drawer {
|
||||||
left: @rightDrawerLeftOffset;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,19 +14,5 @@
|
||||||
.mw-echo-notification {
|
.mw-echo-notification {
|
||||||
padding: 1.75em @contentPaddingTablet;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -58,7 +58,7 @@ Example: https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/501792
|
||||||
## Step 2 - add boilerplate for missing steps
|
## Step 2 - add boilerplate for missing steps
|
||||||
Run the feature in cucumber
|
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:
|
You will get warnings such as:
|
||||||
|
|
|
@ -5,10 +5,6 @@ Feature: Notification
|
||||||
Given I am logged into the mobile website
|
Given I am logged into the mobile website
|
||||||
And I have no notifications
|
And I have no notifications
|
||||||
When I click on the notification icon
|
When I click on the notification icon
|
||||||
And the notifications overlay appears
|
|
||||||
|
|
||||||
@smoke
|
|
||||||
Scenario: Opening notifications
|
|
||||||
Then I should see the notifications overlay
|
Then I should see the notifications overlay
|
||||||
|
|
||||||
Scenario: Closing notifications (overlay button)
|
Scenario: Closing notifications (overlay button)
|
|
@ -1,7 +1,14 @@
|
||||||
const assert = require( 'assert' ),
|
const assert = require( 'assert' ),
|
||||||
Api = require( 'wdio-mediawiki/Api' ),
|
Api = require( 'wdio-mediawiki/Api' ),
|
||||||
|
ArticlePageWithOverlay = require( '../support/pages/article_page_with_overlay' ),
|
||||||
{ ArticlePage, UserLoginPage, api } = require( '../support/world.js' );
|
{ 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 = () => {
|
const login = () => {
|
||||||
return api.loginGetEditToken( {
|
return api.loginGetEditToken( {
|
||||||
username: browser.options.username,
|
username: browser.options.username,
|
||||||
|
@ -64,7 +71,30 @@ const iShouldSeeAToastNotification = () => {
|
||||||
ArticlePage.notification_element.waitForVisible();
|
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 = {
|
module.exports = {
|
||||||
|
waitForPropagation,
|
||||||
|
iSeeAnOverlay, iDoNotSeeAnOverlay,
|
||||||
|
iClickTheOverlayCloseButton,
|
||||||
|
iClickTheBrowserBackButton,
|
||||||
createPage, createPages,
|
createPage, createPages,
|
||||||
pageExists, iAmOnAPageThatDoesNotExist, iShouldSeeAToastNotification,
|
pageExists, iAmOnAPageThatDoesNotExist, iShouldSeeAToastNotification,
|
||||||
iAmLoggedIntoTheMobileWebsite,
|
iAmLoggedIntoTheMobileWebsite,
|
||||||
|
|
|
@ -2,16 +2,11 @@ const { api, ArticlePage } = require( '../support/world' );
|
||||||
const Api = require( 'wdio-mediawiki/Api' );
|
const Api = require( 'wdio-mediawiki/Api' );
|
||||||
const {
|
const {
|
||||||
iAmOnPage,
|
iAmOnPage,
|
||||||
|
waitForPropagation,
|
||||||
createPages,
|
createPages,
|
||||||
createPage
|
createPage
|
||||||
} = require( './common_steps' );
|
} = 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 iAmInAWikiThatHasCategories = ( title ) => {
|
||||||
const msg = 'This page is used by Selenium to test category related features.',
|
const msg = 'This page is used by Selenium to test category related features.',
|
||||||
wikitext = `
|
wikitext = `
|
||||||
|
|
|
@ -7,7 +7,7 @@ const { defineSupportCode } = require( 'cucumber' ),
|
||||||
iGoToAPageThatHasLanguages } = require( './create_page_api_steps' ),
|
iGoToAPageThatHasLanguages } = require( './create_page_api_steps' ),
|
||||||
{
|
{
|
||||||
pageExists, iAmOnAPageThatDoesNotExist, iShouldSeeAToastNotification,
|
pageExists, iAmOnAPageThatDoesNotExist, iShouldSeeAToastNotification,
|
||||||
iAmUsingTheMobileSite,
|
iAmUsingTheMobileSite, iClickTheBrowserBackButton,
|
||||||
iAmLoggedIntoTheMobileWebsite,
|
iAmLoggedIntoTheMobileWebsite,
|
||||||
iAmOnPage, iAmInBetaMode
|
iAmOnPage, iAmInBetaMode
|
||||||
} = require( './common_steps' ),
|
} = require( './common_steps' ),
|
||||||
|
@ -21,6 +21,10 @@ const { defineSupportCode } = require( 'cucumber' ),
|
||||||
iTypeIntoTheEditor, iClickContinue, iClickSubmit, iSayOkayInTheConfirmDialog,
|
iTypeIntoTheEditor, iClickContinue, iClickSubmit, iSayOkayInTheConfirmDialog,
|
||||||
theTextOfTheFirstHeadingShouldBe, thereShouldBeARedLinkWithText
|
theTextOfTheFirstHeadingShouldBe, thereShouldBeARedLinkWithText
|
||||||
} = require( './editor_steps' ),
|
} = require( './editor_steps' ),
|
||||||
|
{ iHaveNoNotifications, iClickOnTheNotificationIcon,
|
||||||
|
iShouldSeeTheNotificationsOverlay, iClickTheNotificationsOverlayCloseButton,
|
||||||
|
iShouldNotSeeTheNotificationsOverlay
|
||||||
|
} = require( './notification_steps' ),
|
||||||
{
|
{
|
||||||
iClickOnTheHistoryLinkInTheLastModifiedBar
|
iClickOnTheHistoryLinkInTheLastModifiedBar
|
||||||
} = require( './history_steps' );
|
} = require( './history_steps' );
|
||||||
|
@ -48,6 +52,7 @@ defineSupportCode( function ( { Then, When, Given } ) {
|
||||||
|
|
||||||
Given( /^I am logged into the mobile website$/, iAmLoggedIntoTheMobileWebsite );
|
Given( /^I am logged into the mobile website$/, iAmLoggedIntoTheMobileWebsite );
|
||||||
Then( /^I should see a toast notification$/, iShouldSeeAToastNotification );
|
Then( /^I should see a toast notification$/, iShouldSeeAToastNotification );
|
||||||
|
When( /I click the browser back button/, iClickTheBrowserBackButton );
|
||||||
|
|
||||||
// Page steps
|
// Page steps
|
||||||
Given( /^I am in a wiki that has categories$/, () => {
|
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 added content$/, iShouldSeeAddedContent );
|
||||||
Then( /^I should see "(.*?)" as removed content$/, iShouldSeeRemovedContent );
|
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
|
// Category steps
|
||||||
When( /^I click on the category button$/, iClickOnTheCategoryButton );
|
When( /^I click on the category button$/, iClickOnTheCategoryButton );
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
};
|
|
@ -10,6 +10,7 @@ const MinervaPage = require( './minerva_page' );
|
||||||
|
|
||||||
class ArticlePage extends MinervaPage {
|
class ArticlePage extends MinervaPage {
|
||||||
|
|
||||||
|
get notifications_button_element() { return $( '.user-button' ); }
|
||||||
get category_element() { return $( '.category-button' ); }
|
get category_element() { return $( '.category-button' ); }
|
||||||
get edit_link_element() { return $( '#ca-edit' ); }
|
get edit_link_element() { return $( '#ca-edit' ); }
|
||||||
get first_heading_element() { return $( '#section_0' ); }
|
get first_heading_element() { return $( '#section_0' ); }
|
||||||
|
|
|
@ -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();
|
|
@ -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();
|
||||||
|
} );
|
||||||
|
} );
|
Loading…
Reference in New Issue