RemoveLinks is better suited as a filter

Unfortunately with `v-html` you cannot use filters directly in
handlebars.
See: https://github.com/nuxt/nuxt.js/issues/231

I also fixed the tests even **without** mocking vue-filters.js plugin 👍

webapp/components/PostCard/index.vue

@@ -76,7 +76,6 @@
 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 {
@@ -96,7 +95,7 @@ export default {
       user: 'auth/user'
     }),
     excerpt() {
-      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
+      return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     isAuthor() {
       const { author } = this.post

webapp/components/PostCard/spec.js

@@ -2,11 +2,13 @@ import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
 import PostCard from '.'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.use(Filters)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'

webapp/components/notifications/Notification/index.vue

@@ -2,11 +2,11 @@
   <ds-space margin-bottom="x-small">
     <no-ssr>
       <ds-space margin-bottom="x-small">
-      <hc-user
+        <hc-user
-        :user="post.author"
+          :user="post.author"
-        :date-time="post.createdAt"
+          :date-time="post.createdAt"
-        :trunc="35"
+          :trunc="35"
-      />
+        />
       </ds-space>
       <ds-text color="soft">
         {{ $t("notifications.menu.mentioned") }}
@@ -38,7 +38,6 @@
 
 <script>
 import HcUser from '~/components/User'
-import RemoveLinks from '~/mixins/removeLinks'
 
 export default {
   name: 'Notification',
@@ -53,7 +52,7 @@ export default {
   },
   computed: {
     excerpt() {
-      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
+      return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     post() {
       return this.notification.post || {}

webapp/components/notifications/Notification/spec.js

@@ -1,10 +1,12 @@
 import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
 import Notification from '.'
 import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
+localVue.use(Filters)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 

webapp/components/notifications/NotificationList/spec.js

@@ -9,6 +9,7 @@ import NotificationList from '.'
 import Notification from '../Notification'
 import Vue from 'vue'
 import Vuex from 'vuex'
+import Filters from '~/plugins/vue-filters'
 
 import Styleguide from '@human-connection/styleguide'
 
@@ -16,6 +17,7 @@ const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'

webapp/components/notifications/NotificationMenu/spec.js

@@ -2,10 +2,12 @@ import { config, shallowMount, createLocalVue } from '@vue/test-utils'
 import NotificationMenu from '.'
 
 import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
+localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['dropdown'] = '<span class="dropdown"><slot /></span>'

webapp/mixins/removeLinks.js

@@ -1,15 +0,0 @@
-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/plugins/vue-filters.js

@@ -6,7 +6,7 @@ import formatRelative from 'date-fns/formatRelative'
 import addSeconds from 'date-fns/addSeconds'
 import accounting from 'accounting'
 
-export default ({ app }) => {
+export default ({ app = {} }) => {
   const locales = {
     en: enUS,
     de: de,
@@ -88,6 +88,17 @@ export default ({ app }) => {
           return index === 0 ? letter.toUpperCase() : letter.toLowerCase()
         })
         .replace(/\s+/g, '')
+    },
+    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
     }
   })