Implement first test case for NotificationList

webapp/components/PostCard.vue

@@ -4,13 +4,12 @@
     :image="post.image"
     :class="{'post-card': true, 'disabled-content': post.disabled}"
   >
-    <a
+    <nuxt-link
-      v-router-link
       class="post-link"
-      :href="href(post)"
+      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
     >
       {{ post.title }}
-    </a>
+    </nuxt-link>
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
     <ds-space margin-bottom="large">

webapp/components/notifications/Notification.vue

@@ -1,8 +1,9 @@
 <template>
   <nuxt-link
     :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
+    @click.native="$emit('read')"
   >
-  <hc-post-card :post="post" />
+    <hc-post-card :post="post" />
   </nuxt-link>
 </template>
 
@@ -10,7 +11,7 @@
 import HcPostCard from '~/components/PostCard.vue'
 
 export default {
-  name: 'HcNotification',
+  name: 'Notification',
   components: {
     HcPostCard
   },

webapp/components/notifications/NotificationList.spec.js

@@ -0,0 +1,139 @@
+import {
+  config,
+  shallowMount,
+  mount,
+  createLocalVue,
+  RouterLinkStub
+} from '@vue/test-utils'
+import NotificationList from './NotificationList.vue'
+import Notification from './Notification.vue'
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+localVue.filter('truncate', string => string)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
+
+describe('NotificationList.vue', () => {
+  let wrapper
+  let Wrapper
+  let propsData
+  let mocks
+  let stubs
+  let getters
+  let actions
+  let user
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn()
+    }
+    stubs = {
+      NuxtLink: RouterLinkStub
+    }
+    actions = {
+      'notifications/markAsRead': jest.fn()
+    }
+    getters = {
+      'auth/user': () => {
+        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 = () => {
+      const store = new Vuex.Store({ getters, actions })
+      return shallowMount(NotificationList, {
+        store,
+        propsData,
+        mocks,
+        localVue
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders Notification.vue for each notification of the user', () => {
+      expect(wrapper.findAll(Notification)).toHaveLength(2)
+    })
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      const store = new Vuex.Store({ getters, actions })
+      return mount(NotificationList, {
+        store,
+        propsData,
+        mocks,
+        stubs,
+        localVue
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    describe('click on a notification', () => {
+      beforeEach(() => {
+        wrapper
+          .findAll('a')
+          .at(1)
+          .trigger('click')
+      })
+
+      it('marks notification as read', () => {
+        expect(actions['notifications/markAsRead'].mock.calls[0][1]).toEqual(42)
+      })
+
+      describe('given mutation resolves', () => {
+        it.skip('updates currentUser.notifications', () => {})
+      })
+
+      describe('given mutation rejects', () => {
+        it.skip('displays error warning', () => {})
+      })
+    })
+  })
+})

webapp/components/notifications/NotificationList.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <notification
+      v-for="notification in notifications"
+      :key="notification.id"
+      :notification="notification"
+      @read="markAsRead(42)"
+    />
+  </div>
+</template>
+
+<script>
+import Notification from './Notification'
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  name: 'NotificationList',
+  components: {
+    Notification
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'auth/user'
+    }),
+    notifications() {
+      return this.currentUser.notifications
+    }
+  },
+  methods: {
+    ...mapActions({
+      markAsRead: 'notifications/markAsRead'
+    })
+  }
+}
+</script>

webapp/layouts/default.vue

@@ -49,11 +49,7 @@
                   slot="popover"
                 >
                   <div class="notifications-menu-popover">
-                    <notification
+                    <notification-list />
-                      v-for="notification in notifications"
-                      :key="notification.id"
-                      :notification="notification"
-                    />
                   </div>
                 </template>
               </dropdown>
@@ -143,7 +139,7 @@ import LocaleSwitch from '~/components/LocaleSwitch'
 import Dropdown from '~/components/Dropdown'
 import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
-import Notification from '~/components/Notification'
+import NotificationList from '~/components/notifications/NotificationList'
 import seo from '~/components/mixins/seo'
 
 export default {
@@ -153,7 +149,7 @@ export default {
     SearchInput,
     Modal,
     LocaleSwitch,
-    Notification
+    NotificationList
   },
   mixins: [seo],
   data() {
@@ -162,9 +158,6 @@ export default {
     }
   },
   computed: {
-    notifications() {
-      return this.user.notifications
-    },
     ...mapGetters({
       user: 'auth/user',
       isLoggedIn: 'auth/isLoggedIn',

webapp/store/notifications.js

@@ -0,0 +1,5 @@
+export const actions = {
+  async markAsRead(_, notificationId) {
+    console.log('notificationId', notificationId)
+  }
+}