From d143d629edb9c21b59b791d2ac70071b3383ea6f Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Wed, 4 Dec 2019 01:17:14 +0100
Subject: [PATCH] Use data-test attributes, make test more resilient

as suggested by @mattwr18
---
 .../_new/features/ReportRow/ReportRow.vue     | 20 +++++++---------
 .../ReportsTable/ReportsTable.spec.js         | 24 ++++++++++---------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/webapp/components/_new/features/ReportRow/ReportRow.vue b/webapp/components/_new/features/ReportRow/ReportRow.vue
index 55b1e0872..a2d90b6b3 100644
--- a/webapp/components/_new/features/ReportRow/ReportRow.vue
+++ b/webapp/components/_new/features/ReportRow/ReportRow.vue
@@ -1,12 +1,5 @@
 <template>
-  <tbody
-    :class="{
-      'report-row': true,
-      'report-comment': isComment,
-      'report-post': isPost,
-      'report-user': isUser,
-    }"
-  >
+  <tbody class="report-row" :data-test="dataTest">
     <tr>
       <!-- Icon Column -->
       <td class="ds-table-col">
@@ -24,7 +17,7 @@
       </td>
 
       <!-- Content Column -->
-      <td class="ds-table-col report-content">
+      <td class="ds-table-col" data-test="report-content">
         <client-only v-if="isUser">
           <hc-user :user="report.resource" :showAvatar="false" :trunc="30" />
         </client-only>
@@ -34,7 +27,7 @@
       </td>
 
       <!-- Author Column -->
-      <td class="ds-table-col report-author">
+      <td class="ds-table-col" data-test="report-author">
         <client-only v-if="!isUser">
           <hc-user :user="report.resource.author" :showAvatar="false" :trunc="30" />
         </client-only>
@@ -42,7 +35,7 @@
       </td>
 
       <!-- Status Column -->
-      <td class="ds-table-col report-reviewer">
+      <td class="ds-table-col" data-test="report-reviewer">
         <span class="status-line">
           <base-icon :name="statusIconName" :class="isDisabled ? 'ban' : 'no-ban'" />
           {{ statusText }}
@@ -60,7 +53,7 @@
 
       <!-- Decision Column -->
       <td class="ds-table-col">
-        <b v-if="report.closed" class="report-closed">
+        <b v-if="report.closed" data-test="report-closed">
           {{ $t('moderation.reports.decided') }}
         </b>
         <ds-button
@@ -105,6 +98,9 @@ export default {
     }
   },
   computed: {
+    dataTest() {
+      return `report-${this.report.resource.__typename}`.toLowerCase()
+    },
     isPost() {
       return this.report.resource.__typename === 'Post'
     },
diff --git a/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js b/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js
index f5a250033..7825b9a16 100644
--- a/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js
+++ b/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js
@@ -60,7 +60,7 @@ describe('ReportsTable', () => {
       describe('Comment', () => {
         let commentRow
         beforeEach(() => {
-          commentRow = wrapper.find('.report-comment')
+          commentRow = wrapper.find('[data-test="report-comment"]')
         })
 
         it('renders a comments icon', () => {
@@ -69,12 +69,12 @@ describe('ReportsTable', () => {
         })
 
         it('renders a link to the post, with the comment contentExcerpt', () => {
-          const postLink = commentRow.find('.report-content a')
+          const postLink = commentRow.find('[data-test="report-content"] a')
           expect(postLink.text()).toEqual('@peter-lustig Lorem ipsum dolor sit amet, …')
         })
 
         it('renders the author', () => {
-          const username = commentRow.find('.report-author b')
+          const username = commentRow.find('[data-test="report-author"] b')
           expect(username.text()).toEqual('Louie')
         })
 
@@ -93,7 +93,7 @@ describe('ReportsTable', () => {
           })
 
           it('renders the moderator who reviewed the resource', () => {
-            const username = commentRow.find('.report-reviewer')
+            const username = commentRow.find('[data-test="report-reviewer"]')
             expect(username.text()).toContain('@moderator')
           })
         })
@@ -117,7 +117,7 @@ describe('ReportsTable', () => {
       describe('Post', () => {
         let postRow
         beforeEach(() => {
-          postRow = wrapper.find('.report-post')
+          postRow = wrapper.find('[data-test="report-post"]')
         })
 
         it('renders a bookmark icon', () => {
@@ -126,12 +126,12 @@ describe('ReportsTable', () => {
         })
 
         it('renders a link to the post', () => {
-          const postLink = postRow.find('.report-content a')
+          const postLink = postRow.find('[data-test="report-content"] a')
           expect(postLink.text()).toEqual("I'm a bigoted post!")
         })
 
         it('renders the author', () => {
-          const username = postRow.find('.report-author')
+          const username = postRow.find('[data-test="report-author"]')
           expect(username.text()).toContain('Dagobert')
         })
 
@@ -170,7 +170,7 @@ describe('ReportsTable', () => {
       describe('User', () => {
         let userRow
         beforeEach(() => {
-          userRow = wrapper.find('.report-user')
+          userRow = wrapper.find('[data-test="report-user"]')
         })
 
         it('renders a bookmark icon', () => {
@@ -179,7 +179,7 @@ describe('ReportsTable', () => {
         })
 
         it('renders a link to the user profile', () => {
-          const userLink = userRow.find('.report-content a')
+          const userLink = userRow.find('[data-test="report-content"] a')
           expect(userLink.text()).toContain('Abusive user')
         })
 
@@ -198,14 +198,16 @@ describe('ReportsTable', () => {
           })
 
           it('renders the moderator who reviewed the resource', () => {
-            const username = userRow.find('.report-reviewer')
+            const username = userRow.find('[data-test="report-reviewer"]')
             expect(username.text()).toContain('Peter Lustig')
           })
         })
 
         describe('give report has been closed', () => {
           it('renders Decided text', () => {
-            expect(userRow.find('.report-closed').text()).toEqual('moderation.reports.decided')
+            expect(userRow.find('[data-test="report-closed"]').text()).toEqual(
+              'moderation.reports.decided',
+            )
           })
         })
       })