Add some component tests, rename files

- with new naming schema

webapp/components/Editor/Editor.spec.js

@@ -16,6 +16,22 @@ describe('Editor.vue', () => {
   let mocks
   let getters
 
+  const Wrapper = () => {
+    const store = new Vuex.Store({
+      getters,
+    })
+    return (wrapper = mount(Editor, {
+      mocks,
+      propsData,
+      localVue,
+      sync: false,
+      stubs: {
+        transition: false,
+      },
+      store,
+    }))
+  }
+
   beforeEach(() => {
     propsData = {}
     mocks = {
@@ -26,25 +42,10 @@ describe('Editor.vue', () => {
         return 'some cool placeholder'
       },
     }
+    wrapper = Wrapper()
   })
 
   describe('mount', () => {
-    let Wrapper = () => {
-      const store = new Vuex.Store({
-        getters,
-      })
-      return (wrapper = mount(Editor, {
-        mocks,
-        propsData,
-        localVue,
-        sync: false,
-        stubs: {
-          transition: false,
-        },
-        store,
-      }))
-    }
-
     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 Notification from '../Notification'
+import NotificationList from './NotificationList'
+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
-    v-if="totalNotifications <= 0"
-    class="notifications-menu"
-    disabled
-    icon="bell"
-  >{{ totalNotifications }}</ds-button>
+  <ds-button v-if="totalNotifications <= 0" class="notifications-menu" 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'