fix: add better browser notification badges (#857)

* fix: add better browser notification badges

* fix test

* fix tests for real

* actually fix tests
This commit is contained in:
Nolan Lawson 2018-12-30 14:51:03 -08:00 committed by GitHub
parent 795d6bce35
commit e5ef4b9bb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 10 deletions

View file

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

View file

@ -1,5 +1,5 @@
<svelte:head> <svelte:head>
<title>{instanceIndicator} · {name}{notificationsIndicator}</title> <title>{notificationsIndicator}{instanceIndicator} · {name}</title>
</svelte:head> </svelte:head>
<script> <script>
import { store } from '../_store/store' import { store } from '../_store/store'
@ -17,8 +17,8 @@
`${($isUserLoggedIn && !settingsPage && $currentInstance) ? $currentInstance : 'Pinafore'}` `${($isUserLoggedIn && !settingsPage && $currentInstance) ? $currentInstance : 'Pinafore'}`
), ),
notificationsIndicator: ({ $hasNotifications, $numberOfNotifications }) => ( notificationsIndicator: ({ $hasNotifications, $numberOfNotifications }) => (
$hasNotifications ? ` (${$numberOfNotifications})` : '' $hasNotifications ? `(${$numberOfNotifications}) ` : ''
) )
} }
} }
</script> </script>

View file

@ -1,22 +1,27 @@
import { loginAsFoobar } from '../roles' import { loginAsFoobar } from '../roles'
import { import {
getNthStatus, getTitleText, getUrl, homeNavButton, notificationsNavButton getNthStatus, getNthStatusContent, getTitleText, getUrl, homeNavButton, notificationsNavButton
} from '../utils' } from '../utils'
import { favoriteStatusAs, postAs } from '../serverActions' import { favoriteStatusAs, postAs } from '../serverActions'
fixture`102-notifications.js` fixture`102-notifications.js`
.page`http://localhost:4002` .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') let { id } = await postAs('foobar', 'somebody please favorite this to validate me')
await loginAsFoobar(t) await loginAsFoobar(t)
await t await t
.expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications') .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
.expect(getTitleText()).eql('localhost:3000 · Home') .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 favoriteStatusAs('admin', id)
await t 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) .click(notificationsNavButton)
.expect(getUrl()).contains('/notifications') .expect(getUrl()).contains('/notifications')
.expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (current page)') .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(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
.expect(getTitleText()).eql('localhost:3000 · Home') .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')
})

View file

@ -61,7 +61,7 @@ test('deleted statuses result in deleted notifications', async t => {
.hover(getNthStatus(0)) .hover(getNthStatus(0))
.expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications') .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
let status = await postAs('admin', "@foobar yo yo foobar what's up") 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 deleteAs('admin', status.id)
await t.expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications', { timeout }) await t.expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications', { timeout })
}) })

View file

@ -97,7 +97,7 @@ export const getActiveElementInsideNthStatus = exec(() => {
return '' 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()) export const goBack = exec(() => window.history.back())