fix test ContributionMessagesListItem.spec.js

frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js

@@ -96,30 +96,26 @@ describe('ContributionMessagesListItem', () => {
         wrapper = ItemWrapper()
       })
 
-      it('has a DIV .is-moderator.text-left', () => {
-        expect(wrapper.find('div.is-moderator.text-left').exists()).toBe(true)
+      it('has a DIV .is-moderator', () => {
+        expect(wrapper.find('div.is-moderator').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',
-        )
+        expect(wrapper.find('span[data-test="username"]').text()).toBe('Bibi Bloxberg')
       })
 
       it('has the message creation date', () => {
-        expect(wrapper.find('div.is-moderator.text-left > span:nth-child(3)').text()).toMatch(
+        expect(wrapper.find('div[data-test="date"]').text()).toMatch(
           'Mon Aug 29 2022 12:25:34 GMT+0000',
         )
       })
 
       it('has the moderator label', () => {
-        expect(wrapper.find('div.is-moderator.text-left > small:nth-child(4)').text()).toBe(
-          'community.moderator',
-        )
+        expect(wrapper.find('span[data-test="moderator"]').text()).toBe('community.moderator')
       })
 
       it('has the message', () => {
-        expect(wrapper.find('div.is-moderator.text-left > div:nth-child(5)').text()).toBe(
+        expect(wrapper.find('div[data-test="message"]').text()).toBe(
           'Asda sdad ad asdasd, das Ass das Das.',
         )
       })
@@ -154,26 +150,22 @@ describe('ContributionMessagesListItem', () => {
         wrapper = ModeratorItemWrapper()
       })
 
-      it('has a DIV .is-not-moderator.text-right', () => {
-        expect(wrapper.find('div.is-not-moderator.text-right').exists()).toBe(true)
+      it('has a DIV .is-not-moderator', () => {
+        expect(wrapper.find('div.is-not-moderator').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',
-        )
+        expect(wrapper.find('div[data-test="username"]').text()).toBe('Peter Lustig')
       })
 
       it('has the message creation date', () => {
-        expect(wrapper.find('div.is-not-moderator.text-right > span:nth-child(3)').text()).toMatch(
+        expect(wrapper.find('div[data-test="date"]').text()).toMatch(
           'Mon Aug 29 2022 12:23:27 GMT+0000',
         )
       })
 
       it('has the message', () => {
-        expect(wrapper.find('div.is-not-moderator.text-right > div:nth-child(4)').text()).toBe(
-          'Lorem ipsum?',
-        )
+        expect(wrapper.find('div[data-test="message"]').text()).toBe('Lorem ipsum?')
       })
     })
   })
@@ -207,7 +199,7 @@ describe('ContributionMessagesListItem', () => {
       beforeEach(() => {
         propsData.message.message = 'https://gradido.net/de/'
         wrapper = ModeratorItemWrapper()
-        messageField = wrapper.find('div.is-not-moderator.text-right > div:nth-child(4)')
+        messageField = wrapper.find('div[data-test="message"]')
       })
 
       it('contains the link as text', () => {
@@ -224,7 +216,7 @@ describe('ContributionMessagesListItem', () => {
         propsData.message.message = `Here you find all you need to know about Gradido: https://gradido.net/de/
 and here is the link to the repository: https://github.com/gradido/gradido`
         wrapper = ModeratorItemWrapper()
-        messageField = wrapper.find('div.is-not-moderator.text-right > div:nth-child(4)')
+        messageField = wrapper.find('div[data-test="message"]')
       })
 
       it('contains the whole text', () => {
@@ -275,7 +267,7 @@ This message also contains a link: https://gradido.net/de/
       beforeEach(() => {
         jest.clearAllMocks()
         wrapper = itemWrapper()
-        messageField = wrapper.find('div.is-not-moderator.text-right > div:nth-child(4)')
+        messageField = wrapper.find('div[data-test="message"]')
       })
 
       it('renders the date', () => {

frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue

@@ -1,32 +1,32 @@
 <template>
   <div class="contribution-messages-list-item">
-    <div v-if="isNotModerator" class="text-right pr-4 pr-lg-0">
+    <div v-if="isNotModerator" class="text-right pr-4 pr-lg-0 is-not-moderator">
       <b-row class="mb-3">
         <b-col cols="10">
-          <div class="font-weight-bold">{{ storeName.username }}</div>
-          <div class="small">{{ $d(new Date(message.createdAt), 'short') }}</div>
-          <parse-message v-bind="message"></parse-message>
+          <div class="font-weight-bold" data-test="username">{{ storeName.username }}</div>
+          <div class="small" data-test="date">{{ $d(new Date(message.createdAt), 'short') }}</div>
+          <parse-message v-bind="message" data-test="message"></parse-message>
         </b-col>
         <b-col cols="2">
           <avatar :username="storeName.username" :initials="storeName.initials"></avatar>
         </b-col>
       </b-row>
-      <!-- <span class="ml-2 mr-2">{{ storeName.username }}</span>
-      <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span> -->
     </div>
     <div v-else>
-      <b-row class="mb-3 bg-f5 p-2">
+      <b-row class="mb-3 bg-f5 p-2 is-moderator">
         <b-col cols="2">
           <avatar :username="moderationName.username" :initials="moderationName.initials"></avatar>
         </b-col>
         <b-col cols="10">
           <div class="font-weight-bold">
-            {{ moderationName.username }}
-            <span class="ml-2 text-success small">{{ $t('community.moderator') }}</span>
+            <span data-test="username">{{ moderationName.username }}</span>
+            <span class="ml-2 text-success small" data-test="moderator">
+              {{ $t('community.moderator') }}
+            </span>
           </div>
 
-          <div class="small">{{ $d(new Date(message.createdAt), 'short') }}</div>
-          <parse-message v-bind="message"></parse-message>
+          <div class="small" data-test="date">{{ $d(new Date(message.createdAt), 'short') }}</div>
+          <parse-message v-bind="message" data-test="message"></parse-message>
         </b-col>
       </b-row>
     </div>
@@ -68,19 +68,3 @@ 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>