From e5ef4b9bb1d9c93b07b6d29780cbc5dbfd1b9a48 Mon Sep 17 00:00:00 2001 From: Nolan Lawson 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 @@ - {instanceIndicator} · {name}{notificationsIndicator} + {notificationsIndicator}{instanceIndicator} · {name} \ No newline at end of file + 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())