Notification icon should not show NaN for persian Wikipedia

Bug: T172755
Change-Id: I2884c8daed3fe0e0d05c746ec6319956b7426957

includes/skins/SkinMinerva.php

@@ -365,6 +365,7 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
 		// Set user button to empty string by default
 		$tpl->set( 'secondaryButtonData', '' );
 		$notificationsTitle = '';
+		$count = 0;
 		$countLabel = '';
 		$isZero = true;
 		$hasUnseen = false;
@@ -411,7 +412,8 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
 				'notificationIconClass' => MinervaUI::iconClass( 'notifications' ),
 				'title' => $notificationsMsg,
 				'url' => $url,
-				'notificationCount' => $countLabel,
+				'notificationCountRaw' => $count,
+				'notificationCountString' => $countLabel,
 				'isNotificationCountZero' => $isZero,
 				'hasNotifications' => $hasUnseen,
 				'hasUnseenNotifications' => $hasUnseen

includes/skins/minerva.mustache

@@ -32,4 +32,4 @@
 		{{>footer}}
 	</div>
 </div>
-<!-- v:8 -->
+<!-- v:8.1 -->

includes/skins/secondaryButton.mustache

@@ -10,8 +10,8 @@
   class="notification-count user-button {{#hasUnseenNotifications}}notification-unseen{{/hasUnseenNotifications}}
     {{#isNotificationCountZero}}zero{{/isNotificationCountZero}}">
 	<div class="circle">
-		 <span>
+		 <span data-notification-count="{{notificationCountRaw}}">
-			{{notificationCount}}
+			{{notificationCountString}}
 		</span>
 	</div>
 </a>

resources/skins.minerva.notifications.badge/NotificationBadge.js

@@ -14,6 +14,7 @@
 	 */
 	function NotificationBadge( options ) {
 		var $el,
+			count = 0,
 			el = options.el;
 
 		if ( el ) {
@@ -22,11 +23,12 @@
 			options.hasNotifications = options.hasUnseenNotifications;
 			options.title = $el.find( 'a' ).attr( 'title' );
 			options.url = $el.find( 'a' ).attr( 'href' );
-			options.notificationCount = parseInt( $el.find( 'span' ).text(), 10 );
+			count = Number( $el.find( 'span' ).data( 'notification-count' ) );
 		}
 		View.call( this, options );
 		this.url = this.$el.find( 'a' ).attr( 'href' );
 		this._bindOverlayManager();
+		this.setCount( count );
 	}
 
 	OO.mfExtend( NotificationBadge, View, {
@@ -35,14 +37,14 @@
 		 * @cfg {String} defaults.notificationIconClass e.g. mw-ui-icon for icon
 		 * @cfg {String} defaults.loadingIconHtml for spinner
 		 * @cfg {Boolean} defaults.hasUnseenNotifications whether the user has unseen notifications
-		 * @cfg {Number} defaults.notificationCount number of unread notifications
+		 * @cfg {Number} defaults.notificationCountRaw number of unread notifications
-		 */
+	 */
 		defaults: {
 			notificationIconClass: notificationIcon.getClassName(),
 			loadingIconHtml: icons.spinner().toHtmlString(),
 			hasNotifications: false,
 			hasUnseenNotifications: false,
-			notificationCount: 0
+			notificationCountRaw: 0
 		},
 		isBorderBox: false,
 		/**
@@ -126,7 +128,13 @@
 		 * @param {Number} count
 		 */
 		setCount: function ( count ) {
-			this.options.notificationCount = count;
+			if ( count > 100 ) {
+				count = 100;
+			}
+			this.options.notificationCountRaw = count;
+			this.options.notificationCountString = mw.message( 'echo-badge-count',
+				mw.language.convertNumber( count )
+			).text();
 			this.options.isNotificationCountZero = count === 0;
 			this.render();
 		},

skin.json

@@ -325,6 +325,9 @@
 			]
 		},
 		"skins.minerva.notifications.badge": {
+			"messages": [
+				"echo-badge-count"
+			],
 			"dependencies": [
 				"mediawiki.router",
 				"mobile.startup"

tests/phpunit/skins/SkinMinervaTest.php

@@ -284,6 +284,7 @@ class SkinMinervaTest extends MediaWikiTestCase {
 		$title,
 		$notificationsMsg,
 		$notificationsTitle,
+		$count,
 		$countLabel,
 		$isZero,
 		$hasUnseen
@@ -294,7 +295,8 @@ class SkinMinervaTest extends MediaWikiTestCase {
 			'url' => SpecialPage::getTitleFor( $notificationsTitle )
 				->getLocalURL(
 					[ 'returnto' => $title->getPrefixedText() ] ),
-			'notificationCount' => $countLabel,
+			'notificationCountRaw' => $count,
+			'notificationCountString' => $countLabel,
 			'isNotificationCountZero' => $isZero,
 			'hasNotifications' => $hasUnseen,
 			'hasUnseenNotifications' => $hasUnseen
@@ -319,6 +321,7 @@ class SkinMinervaTest extends MediaWikiTestCase {
 				$title,
 				'Show my notifications',
 				'Notifications',
+				110,
 				'99+',
 				false,
 				true
@@ -331,6 +334,7 @@ class SkinMinervaTest extends MediaWikiTestCase {
 				$title,
 				'Show my notifications',
 				'Notifications',
+				3,
 				'3',
 				false,
 				false
@@ -343,6 +347,7 @@ class SkinMinervaTest extends MediaWikiTestCase {
 				$title,
 				'Show my notifications',
 				'Notifications',
+				5,
 				'5',
 				false,
 				false
@@ -353,6 +358,7 @@ class SkinMinervaTest extends MediaWikiTestCase {
 				$title,
 				'Show my notifications',
 				'Notifications',
+				0,
 				'0',
 				true,
 				false
@@ -379,6 +385,7 @@ class SkinMinervaTest extends MediaWikiTestCase {
 				$title,
 				'You have new messages on your talk page',
 				'Mytalk',
+				0,
 				'',
 				true,
 				false

tests/qunit/skins.minerva.notifications.badge/test_NotificationBadge.js

@@ -15,7 +15,7 @@
 				overlayManager: this.OverlayManager,
 				hasNotifications: true,
 				hasUnseenNotifications: true,
-				notificationCount: 5
+				notificationCountRawRaw: 5
 			} );
 		initialClassExpectationsMet = badge.$el.find( '.mw-ui-icon' ).length === 0 &&
 			badge.$el.find( '.zero' ).length === 0;
@@ -23,11 +23,28 @@
 		badge.setCount( 0 );
 		assert.ok( initialClassExpectationsMet, 'No icon and no zero class' );
 		assert.ok( badge.$el.find( '.zero' ).length === 1, 'A zero class is present on the badge' );
+		badge.setCount( 105 );
+		assert.ok( badge.options.notificationCountRawRaw, 100,
+			'Number is capped to 100.' );
+	} );
+
+	QUnit.test( '#setCount (Eastern Arabic numerals)', function ( assert ) {
+		var badge = new NotificationBadge( {
+			overlayManager: this.OverlayManager,
+			el: $( '<div><a title="n" href="/" class="notification-unseen"><div class="circle"><span>۲</span></div></a></div>' )
+		} );
+		assert.ok( badge.options.notificationCountRawRaw, 2,
+			'Number is parsed from Eastern Arabic numerals' );
+		assert.ok( badge.options.notificationCountRawRawString, '۲',
+			'Number will be rendered in Eastern Arabic numerals' );
+		badge.setCount( 5 );
+		assert.ok( badge.options.notificationCountRawRawString, '۵',
+			'Number will be rendered in Eastern Arabic numerals' );
 	} );
 
 	QUnit.test( '#render [hasUnseenNotifications]', function ( assert ) {
 		var badge = new NotificationBadge( {
-			notificationCount: 0,
+			notificationCountRawRaw: 0,
 			overlayManager: this.OverlayManager,
 			hasNotifications: false,
 			hasUnseenNotifications: false
@@ -37,7 +54,7 @@
 
 	QUnit.test( '#markAsSeen', function ( assert ) {
 		var badge = new NotificationBadge( {
-			notificationCount: 2,
+			notificationCountRawRaw: 2,
 			overlayManager: this.OverlayManager,
 			hasNotifications: true,
 			hasUnseenNotifications: true