Display and test notification counter

webapp/components/notifications/NotificationMenu.spec.js

@@ -8,50 +8,20 @@ const localVue = createLocalVue()
 localVue.use(Styleguide)
 localVue.filter('truncate', string => string)
 
-config.stubs['dropdown'] = '<span><slot /></span>'
+config.stubs['dropdown'] = '<span class="dropdown"><slot /></span>'
 
 describe('NotificationMenu.vue', () => {
   let wrapper
   let Wrapper
   let mocks
   let data
-
   beforeEach(() => {
     mocks = {
       $t: jest.fn()
     }
     data = () => {
       return {
-        notifications: [
+        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'
-              }
-            }
-          }
-        ]
       }
     }
   })
@@ -65,12 +35,58 @@ describe('NotificationMenu.vue', () => {
       })
     }
 
-    beforeEach(() => {
+    it('counter displays 0', () => {
       wrapper = Wrapper()
+      expect(wrapper.find('ds-button-stub').text()).toEqual('0')
     })
 
-    it('displays the total number of notifications', () => {
+    it('no dropdown is rendered', () => {
-      expect(wrapper.find('ds-button-stub').text()).toEqual('2')
+      wrapper = Wrapper()
+      expect(wrapper.contains('.dropdown')).toBe(false)
+    })
+
+    describe('given some notifications', () => {
+      beforeEach(() => {
+        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'
+                  }
+                }
+              }
+            ]
+          }
+        }
+      })
+
+      it('displays the total number of notifications', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('ds-button-stub').text()).toEqual('2')
+      })
     })
   })
 })

webapp/components/notifications/NotificationMenu.vue

@@ -1,5 +1,15 @@
 <template>
-  <dropdown class="notifications-menu">
+  <ds-button
+    v-if="totalNotifications <= 0"
+    disabled
+    icon="bell"
+  >
+    {{ totalNotifications }}
+  </ds-button>
+  <dropdown
+    v-else
+    class="notifications-menu"
+  >
     <template
       slot="default"
       slot-scope="{toggleMenu}"