Implement suggestions of Matt

webapp/components/Notification/Notification.spec.js

@@ -63,7 +63,7 @@ describe('Notification', () => {
 
     it('renders reason', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('.reason-text-for-test').text()).toEqual(
+      expect(wrapper.find('[data-test="reason-text"]').text()).toEqual(
         'notifications.reason.commented_on_post',
       )
     })
@@ -113,7 +113,7 @@ describe('Notification', () => {
 
     it('renders reason', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('.reason-text-for-test').text()).toEqual(
+      expect(wrapper.find('[data-test="reason-text"]').text()).toEqual(
         'notifications.reason.mentioned_in_post',
       )
     })
@@ -163,7 +163,7 @@ describe('Notification', () => {
 
     it('renders reason', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('.reason-text-for-test').text()).toEqual(
+      expect(wrapper.find('[data-test="reason-text"]').text()).toEqual(
         'notifications.reason.mentioned_in_comment',
       )
     })
@@ -225,7 +225,7 @@ describe('Notification', () => {
 
     it('renders reason', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('.reason-text-for-test').text()).toEqual(
+      expect(wrapper.find('[data-test="reason-text"]').text()).toEqual(
         'notifications.reason.filed_report_on_resource.user',
       )
     })

webapp/components/Notification/Notification.vue

@@ -4,7 +4,7 @@
       <ds-space margin-bottom="x-small">
         <user-teaser :user="notificationData.triggerer" :date-time="notificationData.createdAt" />
       </ds-space>
-      <ds-text class="reason-text-for-test" color="soft">
+      <ds-text data-test="reason-text" color="soft">
         <base-icon
           v-if="notificationData.report"
           name="balance-scale"
@@ -26,10 +26,7 @@
       </ds-text>
     </client-only>
     <ds-space margin-bottom="x-small" />
-    <nuxt-link
-      :to="notificationData.linkTo"
-      @click.native="$emit('read')"
-    >
+    <nuxt-link :to="notificationData.linkTo" @click.native="$emit('read')">
       <ds-space margin-bottom="x-small">
         <ds-card
           :header="(notificationData.post || notificationData.comment) && notificationData.title"

webapp/components/NotificationsTable/NotificationsTable.spec.js

@@ -106,7 +106,7 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders a link to the post', () => {
-          const postLink = firstRowNotification.find('a.notification-link-for-test')
+          const postLink = firstRowNotification.find('[data-test="notification-title-link"]')
           expect(postLink.text()).toEqual(postNotification.from.title)
         })
 
@@ -136,7 +136,7 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders a link to the post', () => {
-          const postLink = secondRowNotification.find('a.notification-link-for-test')
+          const postLink = secondRowNotification.find('[data-test="notification-title-link"]')
           expect(postLink.text()).toEqual(commentNotification.from.post.title)
         })
 
@@ -153,7 +153,7 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders me as the triggerer', () => {
-          const triggererName = thirdRowNotification.find('.userName-for-test')
+          const triggererName = thirdRowNotification.find('[data-test="userName"]')
           expect(triggererName.text()).toEqual('myName')
         })
 
@@ -166,7 +166,7 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders a link to the user', () => {
-          const userLink = thirdRowNotification.find('a.notification-link-for-test')
+          const userLink = thirdRowNotification.find('[data-test="notification-title-link"]')
           expect(userLink.text()).toEqual(reportNotification.from.filed[0].reportedResource.name)
         })
 
@@ -204,7 +204,7 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('clicking on a Post link emits `markNotificationAsRead`', () => {
-          wrapper.find('a.notification-link-for-test').trigger('click')
+          wrapper.find('[data-test="notification-title-link"]').trigger('click')
           expect(wrapper.emitted().markNotificationAsRead[0][0]).toEqual(postNotification.from.id)
         })
 

webapp/components/NotificationsTable/NotificationsTable.vue

@@ -40,8 +40,7 @@
     </template>
     <template #post="scope">
       <nuxt-link
-        data-testid="notification-link"
-        class="notification-link-for-test"
+        data-test="notification-title-link"
         :class="{ 'notification-status': scope.row.read }"
         :to="scope.row.linkTo"
         @click.native="markNotificationAsRead(scope.row.id)"
@@ -121,11 +120,9 @@ export default {
       }
     },
     notificationsData() {
-      const data = []
-      this.notifications.forEach(notification => {
-        data.push(extractNotificationDataOfCurrentUser(notification, this.currentUser))
-      })
-      return data
+      return this.notifications.map(notification =>
+        extractNotificationDataOfCurrentUser(notification, this.currentUser),
+      )
     },
   },
   methods: {

webapp/components/UserTeaser/UserTeaser.vue

@@ -20,14 +20,14 @@
         <div class="info">
           <span class="text">
             <span class="slug">{{ userSlug }}</span>
-            <span class="userName-for-test" v-if="dateTime">{{ userName }}</span>
+            <span data-test="userName" v-if="dateTime">{{ userName }}</span>
           </span>
           <span v-if="dateTime" class="text">
             <base-icon name="clock" />
             <hc-relative-date-time :date-time="dateTime" />
             <slot name="dateTime"></slot>
           </span>
-          <span v-else class="text userName-for-test">{{ userName }}</span>
+          <span v-else data-test="userName" class="text">{{ userName }}</span>
         </div>
       </nuxt-link>
     </template>