diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
new file mode 100644
index 000000000..0de18778f
--- /dev/null
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils'
+import ContributionMessagesList from './ContributionMessagesList.vue'
+
+const localVue = global.localVue
+
+describe('ContributionMessagesList', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        firstName: 'Peter',
+        lastName: 'Lustig',
+      },
+    },
+  }
+
+  const propsData = {
+    contributionId: 42,
+    state: 'PENDING0',
+    messages: [
+      {
+        id: 111,
+        message: 'asd asda sda sda',
+        createdAt: '2022-08-29T12:23:27.000Z',
+        updatedAt: null,
+        type: 'DIALOG',
+        userFirstName: 'Peter',
+        userLastName: 'Lustig',
+        userId: 107,
+        __typename: 'ContributionMessage',
+      },
+    ],
+  }
+
+  const Wrapper = () => {
+    return mount(ContributionMessagesList, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV .contribution-messages-list-item', () => {
+      expect(wrapper.find('div.contribution-messages-list-item').exists()).toBe(true)
+    })
+  })
+})
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index d28357a31..5fde8f825 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="contribution-messages-list-item">
     <is-not-moderator v-if="isNotModerator" :message="message"></is-not-moderator>
     <is-moderator v-else :message="message"></is-moderator>
   </div>
diff --git a/frontend/src/components/ContributionMessages/slots/IsModerator.spec.js b/frontend/src/components/ContributionMessages/slots/IsModerator.spec.js
new file mode 100644
index 000000000..b9706b543
--- /dev/null
+++ b/frontend/src/components/ContributionMessages/slots/IsModerator.spec.js
@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import IsModerator from './IsModerator.vue'
+
+const localVue = global.localVue
+
+describe('IsModerator', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const propsData = {
+    message: {
+      id: 111,
+      message: 'asd asda sda sda',
+      createdAt: '2022-08-29T12:23:27.000Z',
+      updatedAt: null,
+      type: 'DIALOG',
+      userFirstName: 'Peter',
+      userLastName: 'Lustig',
+      userId: 107,
+      __typename: 'ContributionMessage',
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(IsModerator, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV .slot-is-moderator', () => {
+      expect(wrapper.find('div.slot-is-moderator').exists()).toBe(true)
+    })
+
+    it('props.message.default', () => {
+      expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+    })
+  })
+})
diff --git a/frontend/src/components/ContributionMessages/slots/IsModerator.vue b/frontend/src/components/ContributionMessages/slots/IsModerator.vue
index 08ae8ab4f..59c059654 100644
--- a/frontend/src/components/ContributionMessages/slots/IsModerator.vue
+++ b/frontend/src/components/ContributionMessages/slots/IsModerator.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="slot-is-moderator">
-    <b-avatar
-      square
-      :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
-      variant="warning"
-    ></b-avatar>
+    <b-avatar square :text="moderatorName" variant="warning"></b-avatar>
     <span class="ml-2 mr-2">
       {{ message.userFirstName }} {{ message.userLastName }}
       <small class="ml-4 text-success">{{ $t('community.moderator') }}</small>
@@ -22,6 +18,11 @@ export default {
       },
     },
   },
+  computed: {
+    moderatorName() {
+      return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
+    },
+  },
 }
 </script>
 <style>
diff --git a/frontend/src/components/ContributionMessages/slots/IsNotModerator.spec.js b/frontend/src/components/ContributionMessages/slots/IsNotModerator.spec.js
new file mode 100644
index 000000000..434736993
--- /dev/null
+++ b/frontend/src/components/ContributionMessages/slots/IsNotModerator.spec.js
@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import IsNotModerator from './IsNotModerator.vue'
+
+const localVue = global.localVue
+
+describe('IsNotModerator', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const propsData = {
+    message: {
+      id: 113,
+      message: 'asda sdad ad asdasd ',
+      createdAt: '2022-08-29T12:25:34.000Z',
+      updatedAt: null,
+      type: 'DIALOG',
+      userFirstName: 'Bibi',
+      userLastName: 'Bloxberg',
+      userId: 108,
+      __typename: 'ContributionMessage',
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(IsNotModerator, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV .slot-is-not-moderator', () => {
+      expect(wrapper.find('div.slot-is-not-moderator').exists()).toBe(true)
+    })
+
+    it('props.message.default', () => {
+      expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+    })
+  })
+})
diff --git a/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue b/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue
index d3cad8ca2..8ec4b36d5 100644
--- a/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue
+++ b/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="slot-is-not-moderator">
     <div class="text-right">
-      <b-avatar
-        :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
-        variant="info"
-      ></b-avatar>
+      <b-avatar :text="userName" variant="info"></b-avatar>
       <span class="ml-2 mr-2 text-bold">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
@@ -22,6 +19,11 @@ export default {
       },
     },
   },
+  computed: {
+    userName() {
+      return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
+    },
+  },
 }
 </script>
 <style>