Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/153652
Change subject: Notification overlay Messages and Alerts sections
......................................................................
Notification overlay Messages and Alerts sections
Shift to new API to support 2 tab view
When a new has no messages they will see the old style overlay with
Notifications heading. I have added tests to assure this is the case!
TODO in follow up patches
1) Add the mark as read button only in message view
2) Note currently the tabs do not refresh when notifications is clear.
We need some kind of EventEmitter to make this sort of thing easier.
Change-Id: I62b590e81cd3fe867c4c13959cb43466aacfe2d5
---
M Resources.php
M i18n/en.json
M i18n/qqq.json
M modules/base/ext.echo.base.js
M modules/overlay/ext.echo.overlay.js
M modules/overlay/ext.echo.overlay.less
M tests/qunit/overlay/test_ext.echo.overlay.js
7 files changed, 375 insertions(+), 205 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/52/153652/1
diff --git a/Resources.php b/Resources.php
index c7f686f..c7f3e2f 100644
--- a/Resources.php
+++ b/Resources.php
@@ -70,13 +70,13 @@
'mediawiki.language',
),
'messages' => array(
- 'echo-overlay-title',
- 'echo-overlay-title-overflow',
'echo-overlay-link',
- 'echo-none',
'echo-mark-all-as-read',
'echo-more-info',
'echo-feedback',
+ 'echo-notification-alert',
+ 'echo-notification-message',
+ 'echo-email-batch-bullet'
),
),
'ext.echo.overlay.init' => $echoResourceTemplate + array(
diff --git a/i18n/en.json b/i18n/en.json
index f6d70b1..c186527 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -46,8 +46,6 @@
"tooltip-pt-notifications": "Your notifications",
"echo-specialpage": "Notifications",
"echo-anon": "To receive notifications, [$1 create an account] or [$2 log
in].",
- "echo-none": "You have no notifications.",
- "echo-more-info": "More info",
"echo-feedback": "Feedback",
"echo-quotation-marks": "\"$1\"",
"notification-link-text-view-message": "View message",
@@ -94,9 +92,9 @@
"echo-email-batch-body-default": "You have a new notification.",
"echo-email-footer-default": "$2\n\nTo control which emails we send you,
check your
preferences:\n{{canonicalurl:{{#special:Preferences}}#mw-prefsection-echo}}\n\n$1",
"echo-email-footer-default-html": "To control which emails we send you, <a
href=\"$2\" style=\"text-decoration:none; color: #3868B0;\">check your
preferences</a>.<br />\n$1",
+ "echo-notification-alert": "Alerts",
+ "echo-notification-message": "Messages",
"echo-overlay-link": "All notifications",
- "echo-overlay-title": "<b>Notifications</b>",
- "echo-overlay-title-overflow": "<b>{{PLURAL:$1|Notifications}}</b>
(showing $1 of $2 unread)",
"echo-mark-all-as-read": "Mark all as read",
"echo-date-today": "Today",
"echo-date-yesterday": "Yesterday",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 59cc389..06ef5a9 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -112,6 +112,8 @@
"echo-email-batch-body-default": "Default message for Echo e-mail
digest notifications",
"echo-email-footer-default": "Default footer content for Echo text
e-mail notifications. Parameters:\n* $1 - the address of the organization that
sent the email\n* $2 - \"-------...\"
({{msg-mw|echo-email-batch-separator}})\n\nFor HTML version, see
{{msg-mw|echo-email-footer-default-html}}.",
"echo-email-footer-default-html": "Default footer content for Echo html
e-mail notifications. Parameters:\n* $1 - the address of the organization that
sent the email\n* $2 - the URL to the notification preference page\nFor
plain-text version, see {{msg-mw|Echo-email-footer-default}}.",
+ "echo-notification-alert": "Label for alert notifications tab in Echo
overlay.",
+ "echo-notification-message": "Label for message notifications tab in
Echo overlay.",
"echo-overlay-link": "Link to \"all notifications\" at the bottom of
the overlay.\n{{Identical|All notifications}}",
"echo-overlay-title": "Title at the top of the notifications overlay.
Should include bold tags.",
"echo-overlay-title-overflow": "Title at the top of the notifications
overlay when there are additional unread notifications that are not being
shown.\n\nParameters:\n* $1 - the number of unread notifications being shown\n*
$2 - the total number of unread notifications that exist",
diff --git a/modules/base/ext.echo.base.js b/modules/base/ext.echo.base.js
index 1ad5d39..da3a90f 100644
--- a/modules/base/ext.echo.base.js
+++ b/modules/base/ext.echo.base.js
@@ -1,4 +1,4 @@
-( function ( mw ) {
+( function ( mw, $ ) {
'use strict';
mw.echo = {
@@ -61,6 +61,13 @@
mw.loader.using( 'ext.eventLogging', function() {
mw.eventLog.logEvent( 'EchoInteraction', myEvt
);
} );
+ },
+ /**
+ * @method
+ * @return jQuery element corresponding to the badge reflecting
the notification count
+ */
+ getBadge: function() {
+ return $( '.mw-echo-notifications-badge' );
}
};
@@ -74,4 +81,4 @@
} );
} );
}
-} )( mediaWiki );
+} )( mediaWiki, jQuery );
diff --git a/modules/overlay/ext.echo.overlay.js
b/modules/overlay/ext.echo.overlay.js
index 8c34d95..1aaf0a1 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -7,144 +7,55 @@
function EchoOverlay( apiResultNotifications ) {
this.api = mw.echo.overlay.api;
+ // set internal properties
+ this.tabs = [];
this._buildOverlay( apiResultNotifications );
}
- EchoOverlay.prototype = {
- /**
- * @var array a list of unread notification ids that are
visible in the UI
- */
+ function EchoOverlayTab( name, notifications ) {
+ this.api = mw.echo.overlay.api;
+ this.name = name;
+ this.unread = [];
+ this._buildList( notifications );
+ }
+
+ EchoOverlayTab.prototype = {
unread: [],
- /**
- * @var object current count status of notification types
- */
- notificationCount: {
- /* @var integer length of all notifications (both
unread and read) that will be visible in the overlay */
- all: 0,
- /* @var string a string representation the current
number of unread notifications (1, 99, 99+) */
- unread: '0',
- /* @var integer the total number of all unread
notifications including those not in the overlay */
- unreadRaw: 0
+ getUnreadIds: function() {
+ return this.unread;
},
/**
- * @param newCount formatted count
- * @param rawCount unformatted count
+ * Mark all unread notifications as read
+ * @method
+ * @return jQuery.Deferred
*/
- updateCount: function ( newCount, rawCount ) {
- var $badge = $( '.mw-echo-notifications-badge' );
- $badge.text( newCount );
-
- if ( rawCount !== '0' && rawCount !== 0 ) {
- $badge.addClass( 'mw-echo-unread-notifications'
);
+ markAsRead: function() {
+ var self = this;
+ // only need to mark as read if there is unread item
+ if ( this.unread.length ) {
+ return this.api.post(
mw.echo.desktop.appendUseLang( {
+ 'action' : 'echomarkread',
+ 'list' : this.unread.join( '|' ),
+ 'token': mw.user.tokens.get(
'editToken' )
+ } ) ).then( function ( result ) {
+ return
result.query.echomarkread[self.name];
+ } );
} else {
- $badge.removeClass(
'mw-echo-unread-notifications' );
+ return new $.Deferred();
}
- this.notificationCount.unread = newCount;
- this.notificationCount.unreadRaw = rawCount;
},
-
- configuration: mw.config.get( 'wgEchoOverlayConfiguration' ),
-
- _getFooterElement: function() {
- var $prefLink = $( '#pt-preferences a' ),
- $overlayFooter = $( '<div>' )
- .attr( 'id', 'mw-echo-overlay-footer' );
-
- // add link to notifications archive
- $overlayFooter.append(
- $( '<a>' )
- .attr( 'id', 'mw-echo-overlay-link' )
- .addClass( 'mw-echo-grey-link' )
- .attr( 'href', getUrl(
'Special:Notifications' ) )
- .text( mw.msg( 'echo-overlay-link' ) )
- .click( function () {
- mw.echo.logInteraction(
'ui-archive-link-click', 'flyout' );
- } )
- .hover(
- function() {
- $( this ).removeClass(
'mw-echo-grey-link' );
- },
- function() {
- $( this ).addClass(
'mw-echo-grey-link' );
- }
- )
- );
-
- // add link to notification preferences
- $overlayFooter.append(
- $( '<a>' )
- .html( $prefLink.html() )
- .attr( 'id',
'mw-echo-overlay-pref-link' )
- .addClass( 'mw-echo-grey-link' )
- .attr( 'href', $prefLink.attr( 'href' )
+ '#mw-prefsection-echo' )
- .click( function () {
- mw.echo.logInteraction(
'ui-prefs-click', 'flyout' );
- } )
- .hover(
- function() {
- $( this ).removeClass(
'mw-echo-grey-link' );
- },
- function() {
- $( this ).addClass(
'mw-echo-grey-link' );
- }
- )
- );
- return $overlayFooter;
- },
-
- _getTitleElement: function() {
- var titleText,
- counter = this.notificationCount,
- notificationsCount = counter.all,
- unreadRawTotalCount = counter.unreadRaw,
- unreadTotalCount = counter.unread,
- unreadCount = this.unread.length,
- $title = $( '<div>' ).addClass(
'mw-echo-overlay-title' );
-
- if ( notificationsCount > 0 ) {
- if ( unreadRawTotalCount > unreadCount ) {
- titleText = mw.msg(
- 'echo-overlay-title-overflow',
- mw.language.convertNumber(
unreadCount ),
- mw.language.convertNumber(
unreadTotalCount )
- );
- } else {
- titleText = mw.msg(
'echo-overlay-title' );
- }
- } else {
- titleText = mw.msg( 'echo-none' );
- }
-
- // Add the header to the title area
- $( '<div>' )
- .attr( 'id', 'mw-echo-overlay-title-text' )
- .html( titleText )
- .appendTo( $title );
-
- // Add help button
- $( '<a>' )
- .attr( 'href', mw.config.get( 'wgEchoHelpPage'
) )
- .attr( 'title', mw.msg( 'echo-more-info' ) )
- .attr( 'id', 'mw-echo-overlay-moreinfo-link' )
- .attr( 'target', '_blank' )
- .click( function () {
- mw.echo.logInteraction(
'ui-help-click', 'flyout' );
- } )
- .appendTo( $title );
- return $title;
- },
-
/**
* Builds an Echo notifications list
* @method
- * @param object as returned by the api of notification items
+ * @param string tabName the tab
+ * @param object notifications as returned by the api of
notification items
* @return jQuery element
*/
- _buildNotificationList: function( notifications ) {
+ _buildList: function( notifications ) {
var self = this,
$ul = $( '<ul>' ).addClass(
'mw-echo-notifications' )
+ .data( 'tab', this )
.css( 'max-height', $( window
).height() - 134 );
-
$.each( notifications.index, function ( index, id ) {
var $wrapper,
@@ -209,52 +120,178 @@
mw.echo.setUpDismissability( $li );
}
} );
+ this.$el = $ul;
+ }
+ };
+
+ EchoOverlay.prototype = {
+ /**
+ * @var string the name of the tab that is currently active
+ */
+ activeTabName: 'alert',
+ /**
+ * @var array a list of EchoOverlayTabs
+ */
+ tabs: [],
+ /**
+ * @var object current count status of notification types
+ */
+ notificationCount: {
+ /* @var integer length of all notifications (both
unread and read) that will be visible in the overlay */
+ all: 0,
+ /* @var string a string representation the current
number of unread notifications (1, 99, 99+) */
+ unread: '0',
+ /* @var integer the total number of all unread
notifications including those not in the overlay */
+ unreadRaw: 0
+ },
+
+ /**
+ * FIXME: This should be pulled out of EchoOverlay and use an
EventEmitter.
+ * @param newCount formatted count
+ * @param rawCount unformatted count
+ */
+ updateBadgeCount: function ( newCount, rawCount ) {
+ var $badge = mw.echo.getBadge();
+ $badge.text( newCount );
+
+ if ( rawCount !== '0' && rawCount !== 0 ) {
+ $badge.addClass( 'mw-echo-unread-notifications'
);
+ } else {
+ $badge.removeClass(
'mw-echo-unread-notifications' );
+ }
+ this.notificationCount.unread = newCount;
+ this.notificationCount.unreadRaw = rawCount;
+ },
+
+ configuration: mw.config.get( 'wgEchoOverlayConfiguration' ),
+
+ _getFooterElement: function() {
+ var $prefLink = $( '#pt-preferences a' ),
+ $overlayFooter = $( '<div>' )
+ .attr( 'id', 'mw-echo-overlay-footer' );
+
+ // add link to notifications archive
+ $overlayFooter.append(
+ $( '<a>' )
+ .attr( 'id', 'mw-echo-overlay-link' )
+ .addClass( 'mw-echo-grey-link' )
+ .attr( 'href', getUrl(
'Special:Notifications' ) )
+ .text( mw.msg( 'echo-overlay-link' ) )
+ .click( function () {
+ mw.echo.logInteraction(
'ui-archive-link-click', 'flyout' );
+ } )
+ .hover(
+ function() {
+ $( this ).removeClass(
'mw-echo-grey-link' );
+ },
+ function() {
+ $( this ).addClass(
'mw-echo-grey-link' );
+ }
+ )
+ );
+
+ // add link to notification preferences
+ $overlayFooter.append(
+ $( '<a>' )
+ .html( $prefLink.html() )
+ .attr( 'id',
'mw-echo-overlay-pref-link' )
+ .addClass( 'mw-echo-grey-link' )
+ .attr( 'href', $prefLink.attr( 'href' )
+ '#mw-prefsection-echo' )
+ .click( function () {
+ mw.echo.logInteraction(
'ui-prefs-click', 'flyout' );
+ } )
+ .hover(
+ function() {
+ $( this ).removeClass(
'mw-echo-grey-link' );
+ },
+ function() {
+ $( this ).addClass(
'mw-echo-grey-link' );
+ }
+ )
+ );
+ return $overlayFooter;
+ },
+
+ _showTabList: function( tab ) {
+ var $lists = this.$el.find( '.mw-echo-notifications'
).hide(),
+ self = this;
+
+ this.activeTabName = tab.name;
+ $lists.each( function() {
+ if ( $( this ).data( 'tab' ).name === tab.name
) {
+ $( this ).show();
+ tab.markAsRead().done( function( data )
{
+ self.updateBadgeCount(
data.count, data.rawcount );
+ } );
+ }
+ } );
+ },
+
+ _getTabsElement: function() {
+ var $li,
+ $ul = $( '<ul>' ), self = this;
+
+ $.each( this.tabs, function( i, echoTab ) {
+ var
+ tabName = echoTab.name,
+ // @todo: Pass the number of unread
messages
+ label = mw.msg( 'echo-notification-' +
tabName );
+
+ $li = $( '<li>' )
+ .on( 'click', function() {
+ var $this = $( this );
+ $ul.find( 'li' ).removeClass(
'mw-echo-section-current' );
+ $this.addClass(
'mw-echo-section-current' );
+ self._showTabList( $this.data(
'tab' ) );
+ } )
+ .data( 'tab', echoTab )
+ .addClass( i === 0 ?
'mw-echo-section-current' : '' )
+ .text( label )
+ .appendTo( $ul );
+ } );
return $ul;
},
+ getUnreadCount: function() {
+ var count = 0;
+ $.each( this.tabs, function( i, tab ) {
+ count += tab.getUnreadIds().length;
+ } );
+ return count;
+ },
+
+ _getTitleElement: function() {
+ var tabs = this._getTabsElement(),
+ $title = $( '<div>' ).addClass(
'mw-echo-overlay-title' );
+
+ $title.append( tabs );
+ this._showTabList( this.tabs[0] );
+
+ return $title;
+ },
+
_buildOverlay: function ( notifications ) {
- var $ul,
- $overlay = $( '<div>' ).addClass(
'mw-echo-overlay' ),
- self = this;
-
- this.notificationCount.all = notifications.index.length;
- if ( this.notificationCount.all !== undefined ) {
- self.updateCount( notifications.count,
notifications.rawcount );
- }
-
- $ul = self._buildNotificationList( notifications );
- self._getTitleElement().
- appendTo( $overlay );
-
- if ( $ul.find( 'li' ).length ) {
- $ul.appendTo( $overlay );
- }
-
- $overlay.append( self._getFooterElement() );
- self.markAsRead();
+ var tabs,
+ self = this,
+ $overlay = $( '<div>' ).addClass(
'mw-echo-overlay' );
this.$el = $overlay;
- },
- /**
- * Mark a list of notifications as read
- * @method
- */
- markAsRead: function() {
- var self = this;
- // only need to mark as read if there is unread item
- if ( this.unread.length ) {
- this.api.post( mw.echo.desktop.appendUseLang( {
- 'action' : 'echomarkread',
- 'list' : this.unread.join( '|' ),
- 'token': mw.user.tokens.get(
'editToken' )
- } ) ).done( function ( result ) {
- var count;
- if ( result.query.echomarkread.count
!== undefined ) {
- count =
result.query.echomarkread.count;
- self.updateCount( count,
result.query.echomarkread.rawcount );
- }
- } );
+
+ if ( notifications.message.index.length ) {
+ tabs = [ 'message', 'alert' ];
+ } else {
+ tabs = [ 'alert' ];
}
+
+ $.each( tabs, function( i, tabName ) {
+ var tab = new EchoOverlayTab( tabName,
notifications[tabName] );
+ self.$el.append( tab.$el );
+ self.tabs.push( tab );
+ self.notificationCount.all +=
notifications[tabName].index.length;
+ } );
+
+ $overlay.prepend( this._getTitleElement() );
+ $overlay.append( this._getFooterElement() );
}
};
@@ -276,6 +313,8 @@
var apiData = {
'action' : 'query',
'meta' : 'notifications',
+ notsections : 'alert|message',
+ notgroupbysection: 1,
'notformat' : 'flyout',
'notlimit' : this.notificationLimit,
'notprop' : 'index|list|count'
diff --git a/modules/overlay/ext.echo.overlay.less
b/modules/overlay/ext.echo.overlay.less
index dfc8ef6..4761b70 100644
--- a/modules/overlay/ext.echo.overlay.less
+++ b/modules/overlay/ext.echo.overlay.less
@@ -25,6 +25,7 @@
#p-personal {
+ .mw-echo-overlay-title ul,
ul.mw-echo-notifications {
// override #p-personal ul in core
padding: 0;
@@ -43,6 +44,10 @@
}
.mw-echo-overlay {
+ .mw-echo-section-current {
+ font-weight: bold;
+ }
+
a.mw-echo-grey-link {
color: #6D6D6D;
}
@@ -106,6 +111,24 @@
border-bottom: 1px solid #DDDDDD;
}
+/* override #p-personal li*/
+#p-personal .mw-echo-overlay-title li {
+ font-size: 1em;
+ margin-left: 0;
+}
+
+.mw-echo-overlay-title li {
+ &::after {
+ content: " ยท ";
+ padding: 0 .25em;
+ }
+ &:last-child {
+ &::after {
+ content: '';
+ }
+ }
+}
+
#mw-echo-overlay-title-text {
display: inline;
zoom: 1;
diff --git a/tests/qunit/overlay/test_ext.echo.overlay.js
b/tests/qunit/overlay/test_ext.echo.overlay.js
index 5ee1f82..f3f3c1d 100644
--- a/tests/qunit/overlay/test_ext.echo.overlay.js
+++ b/tests/qunit/overlay/test_ext.echo.overlay.js
@@ -1,67 +1,168 @@
( function( $, mw ) {
QUnit.module( 'ext.echo.overlay', {
setup: function() {
- var ApiStub = function() {};
+ this.$badge = $( '<a class="mw-echo-notifications-badge
mw-echo-unread-notifications">1</a>' );
+ this.sandbox.stub( mw.echo, 'getBadge' ).returns(
this.$badge );
+ // Kill any existing overlays to avoid clashing with
other tests
+ $( '.mw-echo-overlay' ).remove();
+
+ var ApiStub = function( mode ) {
+ this.mode = mode;
+ };
ApiStub.prototype = {
- post: function() {
- return $.Deferred().resolve( {
- query: {
- echomarkread: {
- count: 0
- }
- }
- } );
+ post: function( data ) {
+ return new $.Deferred().resolve(
this.getNewNotificationCountData( data ) );
},
get: function() {
- return new $.Deferred().resolve( {
+ var data = this.getData();
+ if ( this.mode === 1 ) {
+
data.query.notifications.message = {
+ index: [ 100 ],
+ list: {
+ 100: {
+ '*':
'Jon sent you a message on the Flow board Talk:XYZ',
+ read:
'20140805211446',
+
category: 'message',
+ id: 100,
+ type:
'message'
+ }
+ }
+ };
+ }
+ return $.Deferred().resolve( data );
+ },
+ getNewNotificationCountData: function( data ) {
+ var alertCount, messageCount,
+ rawCount = 0,
+ count = 0;
+
+ messageCount = {
+ count: '0',
+ rawcount: 0
+ };
+ if ( data.list === '100' ) {
+ alertCount = {
+ count: '1',
+ rawcount: 1
+ };
+ count = 1;
+ rawCount = 1;
+ } else {
+ alertCount = {
+ count: '0',
+ rawcount: 0
+ };
+ }
+ data = {
+ query: {
+ echomarkread: {
+ alert:
alertCount,
+ message:
messageCount,
+ rawcount:
rawCount,
+ count: count
+ }
+ }
+ };
+ return data;
+ },
+ getData: function() {
+ return {
query: {
notifications: {
- index: [ 70, 71
],
count: '1',
rawcount: 1,
- list: {
- 70: {
-
'*': 'Jon mentioned you.',
-
agent: { id: 212, name: 'Jon' },
-
category: 'mention',
-
id: 70,
-
read: '20140805211446',
-
timestamp: {
-
unix: '1407273276'
+ message: {
+ index:
[],
+ list: {}
+ },
+ alert: {
+ index:
[ 70, 71 ],
+ list: {
+
70: {
+
'*': 'Jon mentioned you.',
+
agent: { id: 212, name: 'Jon' },
+
category: 'mention',
+
id: 70,
+
read: '20140805211446',
+
timestamp: {
+
unix: '1407273276'
+
},
+
title: {
+
full: 'Spiders'
+
},
+
type: 'mention'
},
-
title: {
-
full: 'Spiders'
-
},
-
type: 'mention'
- },
- 71: {
-
'*': 'X talked to you.',
-
category: 'edit-user-talk',
-
id: 71,
-
type: 'edit-user-talk'
+
71: {
+
'*': 'X talked to you.',
+
category: 'edit-user-talk',
+
id: 71,
+
type: 'edit-user-talk'
+
}
}
}
}
}
- } );
+ };
}
};
- this.sandbox.stub( mw.echo.overlay, 'api', new
ApiStub() );
+ this.ApiStub = ApiStub;
}
} );
- QUnit.test( 'mw.echo.overlay.buildOverlay', 5, function( assert ) {
+ QUnit.test( 'mw.echo.overlay.buildOverlay', 7, function( assert ) {
var $overlay;
+ this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub() );
mw.echo.overlay.buildOverlay( function( $o ) {
$overlay = $o;
} );
- assert.strictEqual( $overlay.find( 'ul' ).length, 1, 'Overlay
contains a list of notifications.' );
- assert.strictEqual( $overlay.find( 'li' ).length, 2, 'There are
two notifications.' );
+ assert.strictEqual( $overlay.find( '.mw-echo-overlay-title ul
li' ).length, 1, 'Only one tab in header' );
+ assert.strictEqual( $overlay.find( 'ul.mw-echo-notifications'
).length, 1, 'Overlay contains a list of notifications.' );
+ assert.strictEqual( $overlay.find( 'ul.mw-echo-notifications
li' ).length, 2, 'There are two notifications.' );
assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length,
1, 'There is one unread notification.' );
assert.strictEqual( $overlay.find( '#mw-echo-overlay-footer a'
).length, 2,
'There is a footer with 2 links to preferences and all
notifications.' );
- assert.strictEqual( $overlay.find(
'a#mw-echo-overlay-moreinfo-link' ).length, 1,
- 'There is a help link.' );
+ assert.strictEqual( this.$badge.text(),
+ '0', 'The alerts are marked as read once opened.' );
+ assert.strictEqual( this.$badge.hasClass(
'mw-echo-unread-notifications' ),
+ false, 'The badge no longer indicates new messages.' );
+ } );
+
+ QUnit.test( 'mw.echo.overlay.buildOverlay with messages', 5, function(
assert ) {
+ var $overlay;
+ this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 1
) );
+ mw.echo.overlay.buildOverlay( function( $o ) {
+ $overlay = $o;
+ } );
+ assert.strictEqual( $overlay.find( '.mw-echo-overlay-title ul
li' ).length, 2, 'There are two tabs in header' );
+ assert.strictEqual( $overlay.find( '.mw-echo-notifications'
).length, 2, 'Overlay contains 2 lists of notifications.' );
+ assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li'
).eq( 0 ).hasClass( 'mw-echo-section-current' ),
+ true, 'First tab is the selected tab upon opening.' );
+ assert.strictEqual( this.$badge.text(),
+ '1', 'The label stays as 1 until you switch tabs.' );
+ assert.strictEqual( this.$badge.hasClass(
'mw-echo-unread-notifications' ),
+ true, 'The notification button class is not updated
until you switch to alert tab.' );
+ } );
+
+ QUnit.test( 'Switch tabs on overlay. No unread messages, 1 unread
alert.', 4, function( assert ) {
+ var $overlay, $tabs;
+
+ this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 1
) );
+ mw.echo.overlay.buildOverlay( function( $o ) {
+ $overlay = $o;
+ $tabs = $overlay.find( '.mw-echo-overlay-title li' );
+ } );
+
+ // switch to 2nd tab
+ $overlay.find( '.mw-echo-overlay-title li' ).eq( 1 ).trigger(
'click' );
+
+ assert.strictEqual( $tabs.eq( 0 ).hasClass(
'mw-echo-section-current' ),
+ false, 'First tab is now the selected tab.' );
+ assert.strictEqual( $tabs.eq( 1 ).hasClass(
'mw-echo-section-current' ),
+ true, 'Second tab is now the selected tab.' );
+ assert.strictEqual( this.$badge.text(),
+ '0', 'The label is now set to 0.' );
+ assert.strictEqual( this.$badge.hasClass(
'mw-echo-unread-notifications' ),
+ false, 'There are now zero unread notifications.' );
} );
}( jQuery, mediaWiki ) );
--
To view, visit https://gerrit.wikimedia.org/r/153652
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I62b590e81cd3fe867c4c13959cb43466aacfe2d5
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: two_tabs
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
