Display and test notification counter

webapp/components/notifications/NotificationMenu.spec.js

@@ -8,18 +8,45 @@ 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: []
+      }
+    }
+  })
+
+  describe('shallowMount', () => {
+    const Wrapper = () => {
+      return shallowMount(NotificationMenu, {
+        data,
+        mocks,
+        localVue
+      })
+    }
+
+    it('counter displays 0', () => {
+      wrapper = Wrapper()
+      expect(wrapper.find('ds-button-stub').text()).toEqual('0')
+    })
+
+    it('no dropdown is rendered', () => {
+      wrapper = Wrapper()
+      expect(wrapper.contains('.dropdown')).toBe(false)
+    })
+
+    describe('given some notifications', () => {
+      beforeEach(() => {
         data = () => {
           return {
             notifications: [
@@ -56,21 +83,10 @@ describe('NotificationMenu.vue', () => {
         }
       })
 
-  describe('shallowMount', () => {
-    const Wrapper = () => {
-      return shallowMount(NotificationMenu, {
-        data,
-        mocks,
-        localVue
-      })
-    }
-
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
       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}"