Proper notification counter

webapp/components/notifications/NotificationList.spec.js

@@ -26,7 +26,6 @@ describe('NotificationList.vue', () => {
   let Wrapper
   let mocks
   let stubs
-  let user
   let store
   let propsData
 

webapp/components/notifications/NotificationMenu.spec.js

@@ -0,0 +1,76 @@
+import { config, shallowMount, createLocalVue } from '@vue/test-utils'
+import NotificationMenu from './NotificationMenu.vue'
+
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+localVue.filter('truncate', string => string)
+
+config.stubs['dropdown'] = '<span><slot /></span>'
+
+describe('NotificationMenu.vue', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+  let data
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn()
+    }
+    data = () => {
+      return {
+        notifications: [
+          {
+            id: 'notification-41',
+            read: false,
+            post: {
+              id: 'post-1',
+              title: 'some post title',
+              contentExcerpt: 'this is a post content',
+              author: {
+                id: 'john-1',
+                slug: 'john-doe',
+                name: 'John Doe'
+              }
+            }
+          },
+          {
+            id: 'notification-42',
+            read: false,
+            post: {
+              id: 'post-2',
+              title: 'another post title',
+              contentExcerpt: 'this is yet another post content',
+              author: {
+                id: 'john-1',
+                slug: 'john-doe',
+                name: 'John Doe'
+              }
+            }
+          }
+        ]
+      }
+    }
+  })
+
+  describe('shallowMount', () => {
+    const Wrapper = () => {
+      return shallowMount(NotificationMenu, {
+        data,
+        mocks,
+        localVue
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('displays the total number of notifications', () => {
+      expect(wrapper.find('ds-button-stub').text()).toEqual('2')
+    })
+  })
+})

webapp/components/notifications/NotificationMenu.vue

@@ -9,7 +9,7 @@
         icon="bell"
         @click.prevent="toggleMenu"
       >
-        1
+        {{ totalNotifications }}
       </ds-button>
     </template>
     <template
@@ -57,6 +57,11 @@ export default {
     NotificationList,
     Dropdown
   },
+  computed: {
+    totalNotifications() {
+      return (this.notifications || []).length
+    }
+  },
   methods: {
     async markAsRead(notificationId) {
       const variables = { id: notificationId, read: true }