Refactor and harden PostCard component

webapp/components/PostCard/index.vue

@@ -76,6 +76,8 @@
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 import { randomBytes } from 'crypto'
+import RemoveLinks from '~/mixins/removeLinks.js'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'HcPostCard',
@@ -90,18 +92,16 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      user: 'auth/user'
+    }),
     excerpt() {
-      // remove all links from excerpt to prevent issues with the serounding link
+      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
-      let excerpt = this.post.contentExcerpt.replace(/<a.*>(.+)<\/a>/gim, '$1')
-      // do not display content that is only linebreaks
-      if (excerpt.replace(/<br>/gim, '').trim() === '') {
-        excerpt = ''
-      }
-
-      return excerpt
     },
     isAuthor() {
-      return this.$store.getters['auth/user'].id === this.post.author.id
+      const { author } = this.post
+      if (!author) return false
+      return this.user.id === this.post.author.id
     }
   },
   methods: {

webapp/components/PostCard/spec.js

@@ -0,0 +1,60 @@
+import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
+import PostCard from '.'
+import Styleguide from '@human-connection/styleguide'
+import Vuex from 'vuex'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
+
+describe('PostCard', () => {
+  let wrapper
+  let stubs
+  let mocks
+  let propsData
+  let getters
+
+  beforeEach(() => {
+    propsData = {}
+    stubs = {
+      NuxtLink: RouterLinkStub
+    }
+    mocks = {
+      $t: jest.fn()
+    }
+    getters = {
+      'auth/user': () => {
+        return {}
+      }
+    }
+  })
+
+  const Wrapper = () => {
+    const store = new Vuex.Store({
+      getters
+    })
+    return mount(PostCard, {
+      stubs,
+      mocks,
+      propsData,
+      store,
+      localVue
+    })
+  }
+
+  describe('given a post', () => {
+    beforeEach(() => {
+      propsData.post= {
+        title: "It's a title"
+      }
+    })
+
+    it('renders title', () => {
+      expect(Wrapper().text()).toContain("It's a title")
+    })
+  })
+})

webapp/mixins/removeLinks.js

@@ -0,0 +1,15 @@
+export default {
+  methods: {
+    removeLinks(content){
+      if (!content) return ''
+      // remove all links from excerpt to prevent issues with the surrounding link
+      let excerpt = content.replace(/<a.*>(.+)<\/a>/gim, '$1')
+      // do not display content that is only linebreaks
+      if (excerpt.replace(/<br>/gim, '').trim() === '') {
+        excerpt = ''
+      }
+
+      return excerpt
+    }
+  }
+}

webapp/pages/index.vue

@@ -34,7 +34,7 @@
 <script>
 import gql from 'graphql-tag'
 import uniqBy from 'lodash/uniqBy'
-import HcPostCard from '~/components/PostCard.vue'
+import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
 
 export default {

webapp/pages/post/_id/_slug/more-info.vue

@@ -56,7 +56,7 @@
 
 <script>
 import gql from 'graphql-tag'
-import HcPostCard from '~/components/PostCard.vue'
+import HcPostCard from '~/components/PostCard'
 import HcEmpty from '~/components/Empty.vue'
 
 export default {

webapp/pages/profile/_id/_slug.vue

@@ -323,7 +323,7 @@
 import uniqBy from 'lodash/uniqBy'
 
 import User from '~/components/User'
-import HcPostCard from '~/components/PostCard.vue'
+import HcPostCard from '~/components/PostCard'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'