From 9882898f9236dc267cd87e91c1e2100cfb3153a6 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Wed, 6 Aug 2014 12:29:17 -0700
Subject: [PATCH] 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!

Later patches will:
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
---
 Resources.php                                |   6 +-
 i18n/en.json                                 |   2 +
 i18n/qqq.json                                |   2 +
 modules/base/ext.echo.base.js                |  11 +-
 modules/overlay/ext.echo.overlay.js          | 357 ++++++++++---------
 modules/overlay/ext.echo.overlay.less        |  23 ++
 tests/qunit/overlay/test_ext.echo.overlay.js | 175 +++++++--
 7 files changed, 375 insertions(+), 201 deletions(-)

diff --git a/Resources.php b/Resources.php
index c7f686f8d..c7f3e2f2b 100644
--- a/Resources.php
+++ b/Resources.php
@@ -70,13 +70,13 @@ $wgResourceModules += array(
 			'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 f6d70b1b4..b951e0ff8 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -94,6 +94,8 @@
     "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)",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 59cc389aa..06ef5a958 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 1ad5d3960..da3a90fb1 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 8c34d950e..1aaf0a1d9 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -7,145 +7,56 @@
 
 	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,
 					data = notifications.list[id],
@@ -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 dfc8ef645..4761b7040 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 5ee1f8278..f3f3c1ddc 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 ) );