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

@@ -205,7 +205,7 @@
           res += ' (current page)'
         }
         if (name === 'notifications' && $numberOfNotifications) {
-          res += ` (${$numberOfNotifications})`
+          res += ` (${$numberOfNotifications} notification${$numberOfNotifications === 1 ? '' : 's'})`
         }
         return res
       },

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,7 +17,7 @@
         `${($isUserLoggedIn && !settingsPage && $currentInstance) ? $currentInstance : 'Pinafore'}`
       ),
       notificationsIndicator: ({ $hasNotifications, $numberOfNotifications }) => (
-        $hasNotifications ? ` (${$numberOfNotifications})` : ''
+        $hasNotifications ? `(${$numberOfNotifications}) ` : ''
       )
     }
   }

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(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (1 notification)', {
-    .expect(getTitleText()).eql('localhost:3000 · Home (1)')
+      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')
+})

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 })
 })

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())