diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js index c02829b25..468ce578a 100644 --- a/cypress/integration/common/steps.js +++ b/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 => { diff --git a/cypress/integration/notifications/Mentions.feature b/cypress/integration/notifications/Mentions.feature index 08eddcacd..1cf265624 100644 --- a/cypress/integration/notifications/Mentions.feature +++ b/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 + diff --git a/webapp/components/NotificationMenu/NotificationMenu.spec.js b/webapp/components/NotificationMenu/NotificationMenu.spec.js index 8020c8bb4..a44d7a94d 100644 --- a/webapp/components/NotificationMenu/NotificationMenu.spec.js +++ b/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) }) }) diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue index d00ab2837..fb047a0c3 100644 --- a/webapp/components/NotificationMenu/NotificationMenu.vue +++ b/webapp/components/NotificationMenu/NotificationMenu.vue @@ -1,7 +1,11 @@