Change: render link to /notifications when no new notifications

This commit is contained in:
Raphael Beer 2020-02-26 14:03:11 +01:00
parent 0185951834
commit be6c737452
No known key found for this signature in database
GPG Key ID: C1AC5E018B25EF11
2 changed files with 20 additions and 11 deletions

View File

@ -1,4 +1,4 @@
import { config, mount } from '@vue/test-utils' import { config, mount, RouterLinkStub } from '@vue/test-utils'
import NotificationMenu from './NotificationMenu' import NotificationMenu from './NotificationMenu'
const localVue = global.localVue const localVue = global.localVue
@ -11,6 +11,7 @@ describe('NotificationMenu.vue', () => {
let wrapper let wrapper
let mocks let mocks
let data let data
let stubs
beforeEach(() => { beforeEach(() => {
mocks = { mocks = {
$t: jest.fn(), $t: jest.fn(),
@ -20,6 +21,9 @@ describe('NotificationMenu.vue', () => {
notifications: [], notifications: [],
} }
} }
stubs = {
NuxtLink: RouterLinkStub
}
}) })
describe('mount', () => { describe('mount', () => {
@ -28,12 +32,14 @@ describe('NotificationMenu.vue', () => {
data, data,
mocks, mocks,
localVue, localVue,
stubs
}) })
} }
it('counter displays 0', () => { it('renders as link without counter', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('.count').text()).toEqual('0') expect(wrapper.is('a.notifications-menu')).toBe(true)
expect(() => wrapper.get('.count')).toThrow()
}) })
it('no dropdown is rendered', () => { it('no dropdown is rendered', () => {
@ -41,7 +47,7 @@ describe('NotificationMenu.vue', () => {
expect(wrapper.contains('.dropdown')).toBe(false) expect(wrapper.contains('.dropdown')).toBe(false)
}) })
describe('given only unread notifications', () => { describe('given only read notifications', () => {
beforeEach(() => { beforeEach(() => {
data = () => { data = () => {
return { return {
@ -65,14 +71,15 @@ describe('NotificationMenu.vue', () => {
} }
}) })
it('counter displays 0', () => { it('renders as link without counter', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('.count').text()).toEqual('0') expect(wrapper.is('a.notifications-menu')).toBe(true)
expect(() => wrapper.get('.count')).toThrow()
}) })
it('counter is not colored', () => { it('no dropdown is rendered', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('.count').classes()).toContain('--inactive') expect(wrapper.contains('.dropdown')).toBe(false)
}) })
}) })

View File

@ -1,7 +1,9 @@
<template> <template>
<base-button v-if="!notifications.length" class="notifications-menu" disabled ghost circle> <nuxt-link v-if="!unreadNotificationsCount" :to="{ name: 'notifications' }">
<counter-icon icon="bell" :count="unreadNotificationsCount" danger /> <base-button class="notifications-menu" ghost circle>
</base-button> <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</base-button>
</nuxt-link>
<dropdown v-else class="notifications-menu" offset="8" :placement="placement"> <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
<template slot="default" slot-scope="{ toggleMenu }"> <template slot="default" slot-scope="{ toggleMenu }">
<base-button @click="toggleMenu" ghost circle> <base-button @click="toggleMenu" ghost circle>