From 55453b217b35da34c3966ec9c5e696e1b4d6eda0 Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Thu, 29 Sep 2022 12:37:30 +0200
Subject: [PATCH 01/10] admin frontend: merge components - functionality of
 slot compoments IsModerator and IsNotModerator is added to component
 ContributionMessagesListItem - the slot components are removed, since not
 required anymore

---
 .../slots/ContributionMessagesListItem.vue    | 37 +++++++++++++++----
 .../slots/IsModerator.vue                     | 37 -------------------
 .../slots/IsNotModerator.vue                  | 34 -----------------
 3 files changed, 29 insertions(+), 79 deletions(-)
 delete mode 100644 admin/src/components/ContributionMessages/slots/IsModerator.vue
 delete mode 100644 admin/src/components/ContributionMessages/slots/IsNotModerator.vue

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index fa5bdd940..b0630d0b4 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -1,19 +1,24 @@
 <template>
   <div class="contribution-messages-list-item">
-    <is-moderator v-if="message.isModerator" :message="message"></is-moderator>
-    <is-not-moderator v-else :message="message"></is-not-moderator>
+    <div v-if="message.isModerator" class="text-right is-moderator">
+      <b-avatar square :text="initialLetters" variant="warning"></b-avatar>
+      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
+      <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
+      <small class="ml-4 text-success">{{ $t('moderator') }}</small>
+      <div class="mt-2">{{ message.message }}</div>
+    </div>
+    <div v-else class="text-left is-not-moderator">
+      <b-avatar :text="initialLetters" variant="info"></b-avatar>
+      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
+      <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
+      <div class="mt-2">{{ message.message }}</div>
+    </div>
   </div>
 </template>
 <script>
-import IsModerator from '@/components/ContributionMessages/slots/IsModerator.vue'
-import IsNotModerator from '@/components/ContributionMessages/slots/IsNotModerator.vue'
 
 export default {
   name: 'ContributionMessagesListItem',
-  components: {
-    IsModerator,
-    IsNotModerator,
-  },
   props: {
     message: {
       type: Object,
@@ -25,3 +30,19 @@ export default {
   },
 }
 </script>
+<style>
+.is-not-moderator {
+  clear: both;
+  width: 75%;
+  margin-top: 20px;
+  /* background-color: rgb(261, 204, 221); */
+}
+.is-moderator {
+  clear: both;
+  float: right;
+  width: 75%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  /* background-color: rgb(255, 255, 128); */
+}
+</style>
diff --git a/admin/src/components/ContributionMessages/slots/IsModerator.vue b/admin/src/components/ContributionMessages/slots/IsModerator.vue
deleted file mode 100644
index 0224e042f..000000000
--- a/admin/src/components/ContributionMessages/slots/IsModerator.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="slot-is-moderator">
-    <div class="text-right">
-      <b-avatar square :text="initialLetters" variant="warning"></b-avatar>
-      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
-      <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-      <small class="ml-4 text-success">{{ $t('moderator') }}</small>
-      <div class="mt-2">{{ message.message }}</div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    message: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-  },
-  computed: {
-    initialLetters() {
-      return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
-    },
-  },
-}
-</script>
-<style>
-.slot-is-moderator {
-  clear: both;
-  float: right;
-  width: 75%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-</style>
diff --git a/admin/src/components/ContributionMessages/slots/IsNotModerator.vue b/admin/src/components/ContributionMessages/slots/IsNotModerator.vue
deleted file mode 100644
index 64946c557..000000000
--- a/admin/src/components/ContributionMessages/slots/IsNotModerator.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="slot-is-not-moderator">
-    <div>
-      <b-avatar :text="initialLetters" variant="info"></b-avatar>
-      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
-      <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-      <div class="mt-2">{{ message.message }}</div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    message: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-  },
-  computed: {
-    initialLetters() {
-      return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
-    },
-  },
-}
-</script>
-<style>
-.slot-is-not-moderator {
-  clear: both;
-  width: 75%;
-  margin-top: 20px;
-}
-</style>

From 899b74d60a4b83317fc4c1e8fbcef5810e3d1cb8 Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Thu, 29 Sep 2022 12:39:21 +0200
Subject: [PATCH 02/10] wallet frontend: merge components - functionality of
 slot compoments IsModerator and IsNotModerator is added to component
 ContributionMessagesListItem - the slot components are removed, since not
 required anymore

---
 .../ContributionMessagesListItem.vue          | 39 ++++++++++++++-----
 .../slots/IsModerator.vue                     | 34 ----------------
 .../slots/IsNotModerator.vue                  | 36 -----------------
 3 files changed, 30 insertions(+), 79 deletions(-)
 delete mode 100644 frontend/src/components/ContributionMessages/slots/IsModerator.vue
 delete mode 100644 frontend/src/components/ContributionMessages/slots/IsNotModerator.vue

diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 5fde8f825..85d371250 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -1,19 +1,24 @@
 <template>
   <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 v-if="isNotModerator" class="is-not-moderator text-right">
+      <b-avatar :text="initialLetters" variant="info"></b-avatar>
+      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
+      <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
+      <div class="mt-2">{{ message.message }}</div>
+    </div>
+    <div v-else class="is-moderator text-left">
+      <b-avatar square :text="initialLetters" variant="warning"></b-avatar>
+      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
+      <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
+      <small class="ml-4 text-success">{{ $t('community.moderator') }}</small>
+      <div class="mt-2">{{ message.message }}</div>
+    </div>
   </div>
 </template>
-<script>
-import IsModerator from '@/components/ContributionMessages/slots/IsModerator.vue'
-import IsNotModerator from '@/components/ContributionMessages/slots/IsNotModerator.vue'
 
+<script>
 export default {
   name: 'ContributionMessagesListItem',
-  components: {
-    IsModerator,
-    IsNotModerator,
-  },
   props: {
     message: {
       type: Object,
@@ -36,3 +41,19 @@ export default {
   },
 }
 </script>
+<style>
+.is-not-moderator {
+  float: right;
+  background-color: rgb(261, 204, 221);
+  width: 75%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  clear: both;
+}
+.is-moderator {
+  clear: both;
+  background-color: rgb(255, 255, 128);
+  width: 75%;
+  margin-top: 20px;
+}
+</style>
diff --git a/frontend/src/components/ContributionMessages/slots/IsModerator.vue b/frontend/src/components/ContributionMessages/slots/IsModerator.vue
deleted file mode 100644
index 343b92d97..000000000
--- a/frontend/src/components/ContributionMessages/slots/IsModerator.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="slot-is-moderator">
-    <b-avatar square :text="initialLetters" variant="warning"></b-avatar>
-    <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
-    <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-    <small class="ml-4 text-success">{{ $t('community.moderator') }}</small>
-    <div class="mt-2">{{ message.message }}</div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    message: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-  },
-  computed: {
-    initialLetters() {
-      return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
-    },
-  },
-}
-</script>
-<style>
-.slot-is-moderator {
-  clear: both;
-  /* background-color: rgb(255, 242, 227); */
-  width: 75%;
-  margin-top: 20px;
-}
-</style>
diff --git a/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue b/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue
deleted file mode 100644
index 8efca7270..000000000
--- a/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="slot-is-not-moderator">
-    <div class="text-right">
-      <b-avatar :text="initialLetters" variant="info"></b-avatar>
-      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
-      <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-      <div class="mt-2">{{ message.message }}</div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    message: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-  },
-  computed: {
-    initialLetters() {
-      return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
-    },
-  },
-}
-</script>
-<style>
-.slot-is-not-moderator {
-  float: right;
-  width: 75%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  clear: both;
-}
-</style>

From 14aa976e5a1c1ce19e6807a250f0dba54bfcfa3a Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Tue, 4 Oct 2022 12:11:23 +0200
Subject: [PATCH 03/10] wallet frontend: adapt unit tests for merged components
 - add tests to ContributionMessagesListItem.spec.js - remove slots tests

---
 .../ContributionMessagesListItem.spec.js      | 127 +++++++++++++++---
 .../ContributionMessagesListItem.vue          |   4 +-
 .../slots/IsModerator.spec.js                 |  49 -------
 .../slots/IsNotModerator.spec.js              |  49 -------
 4 files changed, 110 insertions(+), 119 deletions(-)
 delete mode 100644 frontend/src/components/ContributionMessages/slots/IsModerator.spec.js
 delete mode 100644 frontend/src/components/ContributionMessages/slots/IsNotModerator.spec.js

diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
index b9f6f0029..74cab882d 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
@@ -1,29 +1,29 @@
 import { mount } from '@vue/test-utils'
 import ContributionMessagesList from './ContributionMessagesList.vue'
+import ContributionMessagesListItem from './ContributionMessagesListItem.vue'
 
 const localVue = global.localVue
+let wrapper
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $d: jest.fn((d) => d),
+  $store: {
+    state: {
+      firstName: 'Peter',
+      lastName: 'Lustig',
+    },
+  },
+}
 
 describe('ContributionMessagesList', () => {
-  let wrapper
-
-  const mocks = {
-    $t: jest.fn((t) => t),
-    $d: jest.fn((d) => d),
-    $store: {
-      state: {
-        firstName: 'Peter',
-        lastName: 'Lustig',
-      },
-    },
-  }
-
   const propsData = {
     contributionId: 42,
-    state: 'PENDING0',
+    state: 'PENDING',
     messages: [
       {
         id: 111,
-        message: 'asd asda sda sda',
+        message: 'Lorem ipsum?',
         createdAt: '2022-08-29T12:23:27.000Z',
         updatedAt: null,
         type: 'DIALOG',
@@ -32,10 +32,21 @@ describe('ContributionMessagesList', () => {
         userId: 107,
         __typename: 'ContributionMessage',
       },
+      {
+        id: 113,
+        message: 'Asda sdad ad asdasd, das Ass das Das. ',
+        createdAt: '2022-08-29T12:25:34.000Z',
+        updatedAt: null,
+        type: 'DIALOG',
+        userFirstName: 'Bibi',
+        userLastName: 'Bloxberg',
+        userId: 108,
+        __typename: 'ContributionMessage',
+      },
     ],
   }
 
-  const Wrapper = () => {
+  const ListWrapper = () => {
     return mount(ContributionMessagesList, {
       localVue,
       mocks,
@@ -45,11 +56,89 @@ describe('ContributionMessagesList', () => {
 
   describe('mount', () => {
     beforeEach(() => {
-      wrapper = Wrapper()
+      wrapper = ListWrapper()
     })
 
-    it('has a DIV .contribution-messages-list-item', () => {
-      expect(wrapper.find('div.contribution-messages-list-item').exists()).toBe(true)
+    it('has two DIV .contribution-messages-list-item elements', () => {
+      expect(wrapper.findAll('div.contribution-messages-list-item').length).toBe(2)
+    })
+  })
+})
+
+describe('ContributionMessagesListItem', () => {
+  describe('if message author has moderator role', () => {
+    const propsData = {
+      message: {
+        id: 113,
+        message: 'Asda sdad ad asdasd, das Ass das Das. ',
+        createdAt: '2022-08-29T12:25:34.000Z',
+        updatedAt: null,
+        type: 'DIALOG',
+        userFirstName: 'Bibi',
+        userLastName: 'Bloxberg',
+        userId: 108,
+        __typename: 'ContributionMessage',
+      },
+    }
+
+    const ItemWrapper = () => {
+      return mount(ContributionMessagesListItem, {
+        localVue,
+        mocks,
+        propsData,
+      })
+    }
+
+    describe('mount', () => {
+      beforeAll(() => {
+        wrapper = ItemWrapper()
+      })
+
+      it('has a DIV .is-moderator.text-left', () => {
+        expect(wrapper.find('div.is-moderator.text-left').exists()).toBe(true)
+      })
+
+      it('props.message.default', () => {
+        expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+      })
+    })
+  })
+
+  describe('if message author does not have moderator role', () => {
+    const propsData = {
+      message: {
+        id: 111,
+        message: 'Lorem ipsum?',
+        createdAt: '2022-08-29T12:23:27.000Z',
+        updatedAt: null,
+        type: 'DIALOG',
+        userFirstName: 'Peter',
+        userLastName: 'Lustig',
+        userId: 107,
+        __typename: 'ContributionMessage',
+      },
+    }
+
+    const ModeratorItemWrapper = () => {
+      return mount(ContributionMessagesListItem, {
+        localVue,
+        mocks,
+        propsData,
+      })
+    }
+
+    describe('mount', () => {
+      beforeAll(() => {
+        wrapper = ModeratorItemWrapper()
+      })
+
+      it('has a DIV .is-not-moderator.text-right', () => {
+        expect(wrapper.find('div.is-not-moderator.text-right').exists()).toBe(true)
+      })
+
+      it('props.message.default', () => {
+        expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+      })
     })
   })
 })
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 85d371250..e2bc50be6 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -44,7 +44,7 @@ export default {
 <style>
 .is-not-moderator {
   float: right;
-  background-color: rgb(261, 204, 221);
+  /* background-color: rgb(261, 204, 221); */
   width: 75%;
   margin-top: 20px;
   margin-bottom: 20px;
@@ -52,7 +52,7 @@ export default {
 }
 .is-moderator {
   clear: both;
-  background-color: rgb(255, 255, 128);
+  /* background-color: rgb(255, 255, 128); */
   width: 75%;
   margin-top: 20px;
 }
diff --git a/frontend/src/components/ContributionMessages/slots/IsModerator.spec.js b/frontend/src/components/ContributionMessages/slots/IsModerator.spec.js
deleted file mode 100644
index b1e09da94..000000000
--- a/frontend/src/components/ContributionMessages/slots/IsModerator.spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-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),
-    $d: jest.fn((d) => d),
-  }
-
-  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/IsNotModerator.spec.js b/frontend/src/components/ContributionMessages/slots/IsNotModerator.spec.js
deleted file mode 100644
index 24152ad1e..000000000
--- a/frontend/src/components/ContributionMessages/slots/IsNotModerator.spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-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),
-    $d: jest.fn((d) => d),
-  }
-
-  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({})
-    })
-  })
-})

From b82bfb6b1259e6c2a407582e56a3111119dd3541 Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Tue, 4 Oct 2022 17:12:11 +0200
Subject: [PATCH 04/10] admin frontend: adapt unit tests for merged components
 - add tests to ContributionMessagesListItem.spec.js - remove tests for
 removed components

---
 .../ContributionMessagesListItem.spec.js      | 110 ++++++++++++------
 .../slots/IsModerator.spec.js                 |  49 --------
 .../slots/IsNotModerator.spec.js              |  49 --------
 3 files changed, 73 insertions(+), 135 deletions(-)
 delete mode 100644 admin/src/components/ContributionMessages/slots/IsModerator.spec.js
 delete mode 100644 admin/src/components/ContributionMessages/slots/IsNotModerator.spec.js

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
index 7cca315d7..bfb127bc4 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
@@ -9,50 +9,86 @@ describe('ContributionMessagesListItem', () => {
   const mocks = {
     $t: jest.fn((t) => t),
     $d: jest.fn((d) => d),
-    $store: {
-      state: {
-        moderator: {
-          id: 107,
-        },
+  }
+
+  describe('if message author has moderator role', () => {
+    const propsData = {
+      contributionId: 42,
+      state: 'PENDING',
+      message: {
+        id: 111,
+        message: 'Lorem ipsum?',
+        createdAt: '2022-08-29T12:23:27.000Z',
+        updatedAt: null,
+        type: 'DIALOG',
+        userFirstName: 'Peter',
+        userLastName: 'Lustig',
+        userId: 107,
+        isModerator: true,
+        __typename: 'ContributionMessage',
       },
-    },
-  }
+    }
 
-  const propsData = {
-    contributionId: 42,
-    state: 'PENDING0',
-    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 ModeratorItemWrapper = () => {
+      return mount(ContributionMessagesListItem, {
+        localVue,
+        mocks,
+        propsData,
+      })
+    }
 
-  const Wrapper = () => {
-    return mount(ContributionMessagesListItem, {
-      localVue,
-      mocks,
-      propsData,
+    describe('mount', () => {
+      beforeAll(() => {
+        wrapper = ModeratorItemWrapper()
+      })
+
+      it('has a DIV .text-right.is-moderator', () => {
+        expect(wrapper.find('div.text-right.is-moderator').exists()).toBe(true)
+      })
+
+      it('props.message.default', () => {
+        expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+      })
     })
-  }
+  })
 
-  describe('mount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
+  describe('if message author does not have moderator role', () => {
+    const propsData = {
+      contributionId: 42,
+      state: 'PENDING',
+      message: {
+        id: 113,
+        message: 'Asda sdad ad asdasd, das Ass das Das. ',
+        createdAt: '2022-08-29T12:25:34.000Z',
+        updatedAt: null,
+        type: 'DIALOG',
+        userFirstName: 'Bibi',
+        userLastName: 'Bloxberg',
+        userId: 108,
+        __typename: 'ContributionMessage',
+      },
+    }
 
-    it('has a DIV .contribution-messages-list-item', () => {
-      expect(wrapper.find('div.contribution-messages-list-item').exists()).toBe(true)
-    })
+    const ItemWrapper = () => {
+      return mount(ContributionMessagesListItem, {
+        localVue,
+        mocks,
+        propsData,
+      })
+    }
 
-    it('props.message.default', () => {
-      expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+    describe('mount', () => {
+      beforeAll(() => {
+        wrapper = ItemWrapper()
+      })
+
+      it('has a DIV .text-left.is-not-moderator', () => {
+        expect(wrapper.find('div.text-left.is-not-moderator').exists()).toBe(true)
+      })
+
+      it('props.message.default', () => {
+        expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+      })
     })
   })
 })
diff --git a/admin/src/components/ContributionMessages/slots/IsModerator.spec.js b/admin/src/components/ContributionMessages/slots/IsModerator.spec.js
deleted file mode 100644
index b1e09da94..000000000
--- a/admin/src/components/ContributionMessages/slots/IsModerator.spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-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),
-    $d: jest.fn((d) => d),
-  }
-
-  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/admin/src/components/ContributionMessages/slots/IsNotModerator.spec.js b/admin/src/components/ContributionMessages/slots/IsNotModerator.spec.js
deleted file mode 100644
index 24152ad1e..000000000
--- a/admin/src/components/ContributionMessages/slots/IsNotModerator.spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-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),
-    $d: jest.fn((d) => d),
-  }
-
-  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({})
-    })
-  })
-})

From 5d3ec46d1ae61a8e591eaf4df7f178ce6200c709 Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Tue, 4 Oct 2022 17:21:12 +0200
Subject: [PATCH 05/10] fix linting

---
 .../ContributionMessages/slots/ContributionMessagesListItem.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index b0630d0b4..2b2d7ccab 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -16,7 +16,6 @@
   </div>
 </template>
 <script>
-
 export default {
   name: 'ContributionMessagesListItem',
   props: {

From d37b8d3e50ab9e87512c76e59b646ab097b0bd82 Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Wed, 5 Oct 2022 17:08:39 +0200
Subject: [PATCH 06/10] remove default prop value from
 ContributionMessagesListItem

---
 .../slots/ContributionMessagesListItem.spec.js            | 8 --------
 .../slots/ContributionMessagesListItem.vue                | 3 ---
 .../ContributionMessagesListItem.spec.js                  | 8 --------
 .../ContributionMessages/ContributionMessagesListItem.vue | 3 ---
 4 files changed, 22 deletions(-)

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
index bfb127bc4..8357cabeb 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
@@ -45,10 +45,6 @@ describe('ContributionMessagesListItem', () => {
       it('has a DIV .text-right.is-moderator', () => {
         expect(wrapper.find('div.text-right.is-moderator').exists()).toBe(true)
       })
-
-      it('props.message.default', () => {
-        expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
-      })
     })
   })
 
@@ -85,10 +81,6 @@ describe('ContributionMessagesListItem', () => {
       it('has a DIV .text-left.is-not-moderator', () => {
         expect(wrapper.find('div.text-left.is-not-moderator').exists()).toBe(true)
       })
-
-      it('props.message.default', () => {
-        expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
-      })
     })
   })
 })
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 2b2d7ccab..796ff5f30 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -22,9 +22,6 @@ export default {
     message: {
       type: Object,
       required: true,
-      default() {
-        return {}
-      },
     },
   },
 }
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
index 74cab882d..cdf60b7ab 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
@@ -97,10 +97,6 @@ describe('ContributionMessagesListItem', () => {
       it('has a DIV .is-moderator.text-left', () => {
         expect(wrapper.find('div.is-moderator.text-left').exists()).toBe(true)
       })
-
-      it('props.message.default', () => {
-        expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
-      })
     })
   })
 
@@ -135,10 +131,6 @@ describe('ContributionMessagesListItem', () => {
       it('has a DIV .is-not-moderator.text-right', () => {
         expect(wrapper.find('div.is-not-moderator.text-right').exists()).toBe(true)
       })
-
-      it('props.message.default', () => {
-        expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
-      })
     })
   })
 })
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index e2bc50be6..6c2e555f2 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -23,9 +23,6 @@ export default {
     message: {
       type: Object,
       required: true,
-      default() {
-        return {}
-      },
     },
   },
   data() {

From 1bd90cf427776e44ea478a9a11dcfbdf8845239a Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Thu, 6 Oct 2022 10:14:36 +0200
Subject: [PATCH 07/10] wallet frontend: add tests for
 ContributionMessagesListItem

---
 .../ContributionMessagesListItem.spec.js      | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
index cdf60b7ab..c05962d6f 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
@@ -97,6 +97,30 @@ describe('ContributionMessagesListItem', () => {
       it('has a DIV .is-moderator.text-left', () => {
         expect(wrapper.find('div.is-moderator.text-left').exists()).toBe(true)
       })
+
+      it('has the complete user name', () => {
+        expect(wrapper.find('div.is-moderator.text-left > span:nth-child(2)').text()).toBe(
+          'Bibi Bloxberg',
+        )
+      })
+
+      it('has the message creation date', () => {
+        expect(wrapper.find('div.is-moderator.text-left > span:nth-child(3)').text()).toBe(
+          'Mon Aug 29 2022 12:25:34 GMT+0000 (Koordinierte Weltzeit)',
+        )
+      })
+
+      it('has the moderator label', () => {
+        expect(wrapper.find('div.is-moderator.text-left > small:nth-child(4)').text()).toBe(
+          'community.moderator',
+        )
+      })
+
+      it('has the message', () => {
+        expect(wrapper.find('div.is-moderator.text-left > div:nth-child(5)').text()).toBe(
+          'Asda sdad ad asdasd, das Ass das Das.',
+        )
+      })
     })
   })
 
@@ -131,6 +155,24 @@ describe('ContributionMessagesListItem', () => {
       it('has a DIV .is-not-moderator.text-right', () => {
         expect(wrapper.find('div.is-not-moderator.text-right').exists()).toBe(true)
       })
+
+      it('has the complete user name', () => {
+        expect(wrapper.find('div.is-not-moderator.text-right > span:nth-child(2)').text()).toBe(
+          'Peter Lustig',
+        )
+      })
+
+      it('has the message creation date', () => {
+        expect(wrapper.find('div.is-not-moderator.text-right > span:nth-child(3)').text()).toBe(
+          'Mon Aug 29 2022 12:23:27 GMT+0000 (Koordinierte Weltzeit)',
+        )
+      })
+
+      it('has the message', () => {
+        expect(wrapper.find('div.is-not-moderator.text-right > div:nth-child(4)').text()).toBe(
+          'Lorem ipsum?',
+        )
+      })
     })
   })
 })

From 11f320ba3ffcac7ed1ef3810206a48f00adae27a Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Thu, 6 Oct 2022 10:23:47 +0200
Subject: [PATCH 08/10] admin frontend: add tests for
 ContributionMessagesListItem

---
 .../ContributionMessagesListItem.spec.js      | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
index 8357cabeb..0c9ba2739 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
@@ -45,6 +45,30 @@ describe('ContributionMessagesListItem', () => {
       it('has a DIV .text-right.is-moderator', () => {
         expect(wrapper.find('div.text-right.is-moderator').exists()).toBe(true)
       })
+
+      it('has the complete user name', () => {
+        expect(wrapper.find('div.text-right.is-moderator > span:nth-child(2)').text()).toBe(
+          'Peter Lustig',
+        )
+      })
+
+      it('has the message creation date', () => {
+        expect(wrapper.find('div.text-right.is-moderator > span:nth-child(3)').text()).toBe(
+          'Mon Aug 29 2022 12:23:27 GMT+0000 (Koordinierte Weltzeit)',
+        )
+      })
+
+      it('has the moderator label', () => {
+        expect(wrapper.find('div.text-right.is-moderator > small:nth-child(4)').text()).toBe(
+          'moderator',
+        )
+      })
+
+      it('has the message', () => {
+        expect(wrapper.find('div.text-right.is-moderator > div:nth-child(5)').text()).toBe(
+          'Lorem ipsum?',
+        )
+      })
     })
   })
 
@@ -81,6 +105,24 @@ describe('ContributionMessagesListItem', () => {
       it('has a DIV .text-left.is-not-moderator', () => {
         expect(wrapper.find('div.text-left.is-not-moderator').exists()).toBe(true)
       })
+
+      it('has the complete user name', () => {
+        expect(wrapper.find('div.is-not-moderator.text-left > span:nth-child(2)').text()).toBe(
+          'Bibi Bloxberg',
+        )
+      })
+
+      it('has the message creation date', () => {
+        expect(wrapper.find('div.is-not-moderator.text-left > span:nth-child(3)').text()).toBe(
+          'Mon Aug 29 2022 12:25:34 GMT+0000 (Koordinierte Weltzeit)',
+        )
+      })
+
+      it('has the message', () => {
+        expect(wrapper.find('div.is-not-moderator.text-left > div:nth-child(4)').text()).toBe(
+          'Asda sdad ad asdasd, das Ass das Das.',
+        )
+      })
     })
   })
 })

From 40e505f6e550e2ca40585d7c5fe98f5dd740f4b0 Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Thu, 6 Oct 2022 10:39:42 +0200
Subject: [PATCH 09/10] fix unit test error

---
 .../slots/ContributionMessagesListItem.spec.js                | 4 ++--
 .../ContributionMessages/ContributionMessagesListItem.spec.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
index 0c9ba2739..bb116afbe 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
@@ -54,7 +54,7 @@ describe('ContributionMessagesListItem', () => {
 
       it('has the message creation date', () => {
         expect(wrapper.find('div.text-right.is-moderator > span:nth-child(3)').text()).toBe(
-          'Mon Aug 29 2022 12:23:27 GMT+0000 (Koordinierte Weltzeit)',
+          'Mon Aug 29 2022 12:23:27 GMT+0000 (Coordinated Universal Time)',
         )
       })
 
@@ -114,7 +114,7 @@ describe('ContributionMessagesListItem', () => {
 
       it('has the message creation date', () => {
         expect(wrapper.find('div.is-not-moderator.text-left > span:nth-child(3)').text()).toBe(
-          'Mon Aug 29 2022 12:25:34 GMT+0000 (Koordinierte Weltzeit)',
+          'Mon Aug 29 2022 12:25:34 GMT+0000 (Coordinated Universal Time)',
         )
       })
 
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
index c05962d6f..5d5185e0f 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
@@ -106,7 +106,7 @@ describe('ContributionMessagesListItem', () => {
 
       it('has the message creation date', () => {
         expect(wrapper.find('div.is-moderator.text-left > span:nth-child(3)').text()).toBe(
-          'Mon Aug 29 2022 12:25:34 GMT+0000 (Koordinierte Weltzeit)',
+          'Mon Aug 29 2022 12:25:34 GMT+0000 (Coordinated Universal Time)',
         )
       })
 
@@ -164,7 +164,7 @@ describe('ContributionMessagesListItem', () => {
 
       it('has the message creation date', () => {
         expect(wrapper.find('div.is-not-moderator.text-right > span:nth-child(3)').text()).toBe(
-          'Mon Aug 29 2022 12:23:27 GMT+0000 (Koordinierte Weltzeit)',
+          'Mon Aug 29 2022 12:23:27 GMT+0000 (Coordinated Universal Time)',
         )
       })
 

From e93e8e6b0a4e8c7c7d9e13ed2db88ac18d2f96f5 Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Thu, 6 Oct 2022 18:23:54 +0200
Subject: [PATCH 10/10] fix language dependency in unit tests for
 ContributionMessagesListItem

---
 .../slots/ContributionMessagesListItem.spec.js            | 8 ++++----
 .../ContributionMessagesListItem.spec.js                  | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
index bb116afbe..b8aaba502 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
@@ -53,8 +53,8 @@ describe('ContributionMessagesListItem', () => {
       })
 
       it('has the message creation date', () => {
-        expect(wrapper.find('div.text-right.is-moderator > span:nth-child(3)').text()).toBe(
-          'Mon Aug 29 2022 12:23:27 GMT+0000 (Coordinated Universal Time)',
+        expect(wrapper.find('div.text-right.is-moderator > span:nth-child(3)').text()).toMatch(
+          'Mon Aug 29 2022 12:23:27 GMT+0000',
         )
       })
 
@@ -113,8 +113,8 @@ describe('ContributionMessagesListItem', () => {
       })
 
       it('has the message creation date', () => {
-        expect(wrapper.find('div.is-not-moderator.text-left > span:nth-child(3)').text()).toBe(
-          'Mon Aug 29 2022 12:25:34 GMT+0000 (Coordinated Universal Time)',
+        expect(wrapper.find('div.is-not-moderator.text-left > span:nth-child(3)').text()).toMatch(
+          'Mon Aug 29 2022 12:25:34 GMT+0000',
         )
       })
 
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
index 5d5185e0f..7504854d0 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
@@ -105,8 +105,8 @@ describe('ContributionMessagesListItem', () => {
       })
 
       it('has the message creation date', () => {
-        expect(wrapper.find('div.is-moderator.text-left > span:nth-child(3)').text()).toBe(
-          'Mon Aug 29 2022 12:25:34 GMT+0000 (Coordinated Universal Time)',
+        expect(wrapper.find('div.is-moderator.text-left > span:nth-child(3)').text()).toMatch(
+          'Mon Aug 29 2022 12:25:34 GMT+0000',
         )
       })
 
@@ -163,8 +163,8 @@ describe('ContributionMessagesListItem', () => {
       })
 
       it('has the message creation date', () => {
-        expect(wrapper.find('div.is-not-moderator.text-right > span:nth-child(3)').text()).toBe(
-          'Mon Aug 29 2022 12:23:27 GMT+0000 (Coordinated Universal Time)',
+        expect(wrapper.find('div.is-not-moderator.text-right > span:nth-child(3)').text()).toMatch(
+          'Mon Aug 29 2022 12:23:27 GMT+0000',
         )
       })