Merge pull request #3219 from Human-Connection/2823-zero-bell-to-all-notifications-page

feat: zero bell to all notifications page [2823]

cypress/integration/common/steps.js

@@ -422,14 +422,13 @@ When("mention {string} in the text", mention => {
     .click();
 });
 
-Then("the notification gets marked as read", () => {
-  cy.get(".notifications-menu-popover .notification")
-    .first()
-    .should("have.class", "--read");
+Then("the unread counter is removed", () => {
+  cy.get('.notifications-menu .counter-icon').should('not.exist');
 });
 
-Then("there are no notifications in the top menu", () => {
-  cy.get(".notifications-menu").should("contain", "0");
+Then("the notification menu button links to the all notifications page", () => {
+  cy.get(".notifications-menu").click();
+  cy.location("pathname").should("contain", "/notifications");
 });
 
 Given("there is an annoying user called {string}", name => {

cypress/integration/notifications/Mentions.feature

@@ -24,6 +24,6 @@ Feature: Notification for a mention
     And see 1 unread notifications in the top menu
     And open the notification menu and click on the first item
     Then I get to the post page of ".../hey-matt"
-    And the notification gets marked as read
-    But when I refresh the page
-    Then there are no notifications in the top menu
+    And the unread counter is removed
+    And the notification menu button links to the all notifications page    
+

webapp/components/NotificationMenu/NotificationMenu.spec.js

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

webapp/components/NotificationMenu/NotificationMenu.vue

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