Add some component tests, rename files

- with new naming schema

webapp/components/Editor/Editor.spec.js

@@ -16,20 +16,7 @@ describe('Editor.vue', () => {
   let mocks
   let getters
 
-  beforeEach(() => {
+  const Wrapper = () => {
-    propsData = {}
-    mocks = {
-      $t: () => {},
-    }
-    getters = {
-      'editor/placeholder': () => {
-        return 'some cool placeholder'
-      },
-    }
-  })
-
-  describe('mount', () => {
-    let Wrapper = () => {
     const store = new Vuex.Store({
       getters,
     })
@@ -45,6 +32,20 @@ describe('Editor.vue', () => {
     }))
   }
 
+  beforeEach(() => {
+    propsData = {}
+    mocks = {
+      $t: () => {},
+    }
+    getters = {
+      'editor/placeholder': () => {
+        return 'some cool placeholder'
+      },
+    }
+    wrapper = Wrapper()
+  })
+
+  describe('mount', () => {
     it('renders', () => {
       expect(Wrapper().is('div')).toBe(true)
     })
@@ -67,5 +68,31 @@ describe('Editor.vue', () => {
         )
       })
     })
+
+    describe('optional extensions', () => {
+      it('sets the Mention items to the users', () => {
+        propsData.users = [{ id: 'u345' }]
+        wrapper = Wrapper()
+        expect(wrapper.vm.editor.extensions.options.mention.items()).toEqual(propsData.users)
+      })
+
+      it('mentions is not an option when there are no users', () => {
+        expect(wrapper.vm.editor.extensions.options).toEqual(
+          expect.not.objectContaining({ mention: expect.anything() }),
+        )
+      })
+
+      it('sets the Hashtag items to the hashtags', () => {
+        propsData.hashtags = [{ id: 'Frieden' }]
+        wrapper = Wrapper()
+        expect(wrapper.vm.editor.extensions.options.hashtag.items()).toEqual(propsData.hashtags)
+      })
+
+      it('hashtags is not an option when there are no hashtags', () => {
+        expect(wrapper.vm.editor.extensions.options).toEqual(
+          expect.not.objectContaining({ hashtag: expect.anything() }),
+        )
+      })
+    })
   })
 })

webapp/components/Editor/Editor.vue

@@ -212,7 +212,7 @@ export default {
   data() {
     // Set array of optional extensions by analysing the props.
     let optionalExtensions = []
-    if (this.users) {
+    if (this.users && this.users.length) {
       optionalExtensions.push(
         new Mention({
           // a list of all suggested items
@@ -287,7 +287,7 @@ export default {
         }),
       )
     }
-    if (this.hashtags) {
+    if (this.hashtags && this.hashtags.length) {
       optionalExtensions.push(
         new Hashtag({
           // a list of all suggested items

webapp/components/notifications/Notification/Notification.spec.js

@@ -1,5 +1,5 @@
 import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
-import Notification from '.'
+import Notification from './Notification'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
 
@@ -49,6 +49,10 @@ describe('Notification', () => {
       expect(Wrapper().text()).toContain("It's a title")
     })
 
+    it('renders the contentExcerpt', () => {
+      expect(Wrapper().text()).toContain('@jenny-rostock is the best')
+    })
+
     it('has no class "read"', () => {
       expect(Wrapper().classes()).not.toContain('read')
     })

webapp/components/notifications/Notification/Notification.vue

@@ -69,7 +69,6 @@ export default {
       }
     },
     hashParam() {
-      // Wolle: console.log('this.post.id: ', this.post.id, 'this.comment.id: ', this.comment.id)
       return this.post.id ? {} : { hash: `#commentId-${this.comment.id}` }
     },
   },

webapp/components/notifications/NotificationList/NotificationList.spec.js

@@ -1,6 +1,6 @@
 import { config, shallowMount, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
-import NotificationList from '.'
+import NotificationList from './NotificationList'
-import Notification from '../Notification'
+import Notification from '../Notification/Notification'
 import Vuex from 'vuex'
 import Filters from '~/plugins/vue-filters'
 

webapp/components/notifications/NotificationList/NotificationList.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Notification from '../Notification'
+import Notification from '../Notification/Notification'
 
 export default {
   name: 'NotificationList',

webapp/components/notifications/NotificationMenu/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <ds-button
+  <ds-button v-if="totalNotifications <= 0" class="notifications-menu" disabled icon="bell">
-    v-if="totalNotifications <= 0"
+    {{ totalNotifications }}
-    class="notifications-menu"
+  </ds-button>
-    disabled
-    icon="bell"
-  >{{ totalNotifications }}</ds-button>
   <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
-      <ds-button primary icon="bell" @click.prevent="toggleMenu">{{ totalNotifications }}</ds-button>
+      <ds-button primary icon="bell" @click.prevent="toggleMenu">
+        {{ totalNotifications }}
+      </ds-button>
     </template>
     <template slot="popover">
       <div class="notifications-menu-popover">
@@ -18,7 +17,7 @@
 </template>
 
 <script>
-import NotificationList from '../NotificationList'
+import NotificationList from '../NotificationList/NotificationList'
 import Dropdown from '~/components/Dropdown'
 import gql from 'graphql-tag'