From e5ef4b9bb1d9c93b07b6d29780cbc5dbfd1b9a48 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 30 Dec 2018 14:51:03 -0800
Subject: [PATCH] fix: add better browser notification badges (#857)

* fix: add better browser notification badges

* fix test

* fix tests for real

* actually fix tests
---
 src/routes/_components/NavItem.html |  2 +-
 src/routes/_components/Title.html   |  6 ++---
 tests/spec/102-notifications.js     | 40 ++++++++++++++++++++++++++---
 tests/spec/105-deletes.js           |  2 +-
 tests/utils.js                      |  2 +-
 5 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html
index 68740387..e7e8db44 100644
--- a/src/routes/_components/NavItem.html
+++ b/src/routes/_components/NavItem.html
@@ -205,7 +205,7 @@
           res += ' (current page)'
         }
         if (name === 'notifications' && $numberOfNotifications) {
-          res += ` (${$numberOfNotifications})`
+          res += ` (${$numberOfNotifications} notification${$numberOfNotifications === 1 ? '' : 's'})`
         }
         return res
       },
diff --git a/src/routes/_components/Title.html b/src/routes/_components/Title.html
index 5d6104f0..bd1482c8 100644
--- a/src/routes/_components/Title.html
+++ b/src/routes/_components/Title.html
@@ -1,5 +1,5 @@
 <svelte:head>
-  <title>{instanceIndicator} · {name}{notificationsIndicator}</title>
+  <title>{notificationsIndicator}{instanceIndicator} · {name}</title>
 </svelte:head>
 <script>
   import { store } from '../_store/store'
@@ -17,8 +17,8 @@
         `${($isUserLoggedIn && !settingsPage && $currentInstance) ? $currentInstance : 'Pinafore'}`
       ),
       notificationsIndicator: ({ $hasNotifications, $numberOfNotifications }) => (
-        $hasNotifications ? ` (${$numberOfNotifications})` : ''
+        $hasNotifications ? `(${$numberOfNotifications}) ` : ''
       )
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/tests/spec/102-notifications.js b/tests/spec/102-notifications.js
index 18719c83..ef91f6d9 100644
--- a/tests/spec/102-notifications.js
+++ b/tests/spec/102-notifications.js
@@ -1,22 +1,27 @@
 import { loginAsFoobar } from '../roles'
 import {
-  getNthStatus, getTitleText, getUrl, homeNavButton, notificationsNavButton
+  getNthStatus, getNthStatusContent, getTitleText, getUrl, homeNavButton, notificationsNavButton
 } from '../utils'
 import { favoriteStatusAs, postAs } from '../serverActions'
 
 fixture`102-notifications.js`
   .page`http://localhost:4002`
 
-test('shows unread notifications', async t => {
+test('shows unread notification', async t => {
   let { id } = await postAs('foobar', 'somebody please favorite this to validate me')
   await loginAsFoobar(t)
   await t
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
     .expect(getTitleText()).eql('localhost:3000 · Home')
+    .expect(getNthStatusContent(0).innerText).contains('somebody please favorite this to validate me', {
+      timeout: 20000
+    })
   await favoriteStatusAs('admin', id)
   await t
-    .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (1)')
-    .expect(getTitleText()).eql('localhost:3000 · Home (1)')
+    .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (1 notification)', {
+      timeout: 20000
+    })
+    .expect(getTitleText()).eql('(1) localhost:3000 · Home')
     .click(notificationsNavButton)
     .expect(getUrl()).contains('/notifications')
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (current page)')
@@ -28,3 +33,30 @@ test('shows unread notifications', async t => {
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
     .expect(getTitleText()).eql('localhost:3000 · Home')
 })
+
+test('shows unread notifications, more than one', async t => {
+  let { id } = await postAs('foobar', 'I need lots of favorites on this one')
+  await loginAsFoobar(t)
+  await t
+    .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
+    .expect(getTitleText()).eql('localhost:3000 · Home')
+    .expect(getNthStatusContent(0).innerText).contains('I need lots of favorites on this one', {
+      timeout: 20000
+    })
+  await favoriteStatusAs('admin', id)
+  await favoriteStatusAs('quux', id)
+  await t
+    .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (2 notifications)', {
+      timeout: 20000
+    })
+    .expect(getTitleText()).eql('(2) localhost:3000 · Home')
+    .click(notificationsNavButton)
+    .expect(getUrl()).contains('/notifications')
+    .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (current page)')
+    .expect(getTitleText()).eql('localhost:3000 · Notifications')
+    .expect(getNthStatus(0).innerText).contains('I need lots of favorites on this one')
+  await t
+    .click(homeNavButton)
+    .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
+    .expect(getTitleText()).eql('localhost:3000 · Home')
+})
diff --git a/tests/spec/105-deletes.js b/tests/spec/105-deletes.js
index 24c080cd..543747d9 100644
--- a/tests/spec/105-deletes.js
+++ b/tests/spec/105-deletes.js
@@ -61,7 +61,7 @@ test('deleted statuses result in deleted notifications', async t => {
     .hover(getNthStatus(0))
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
   let status = await postAs('admin', "@foobar yo yo foobar what's up")
-  await t.expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (1)', { timeout })
+  await t.expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (1 notification)', { timeout })
   await deleteAs('admin', status.id)
   await t.expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications', { timeout })
 })
diff --git a/tests/utils.js b/tests/utils.js
index d4bdfe1d..8357975a 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -97,7 +97,7 @@ export const getActiveElementInsideNthStatus = exec(() => {
   return ''
 })
 
-export const getTitleText = exec(() => document.head.querySelector('title').innerHTML)
+export const getTitleText = exec(() => document.head.querySelector('title') && document.head.querySelector('title').innerHTML)
 
 export const goBack = exec(() => window.history.back())