Use data-test attributes, make test more resilient

as suggested by @mattwr18
This commit is contained in:
roschaefer 2019-12-04 01:17:14 +01:00
parent 84f574aaa0
commit d143d629ed
2 changed files with 21 additions and 23 deletions

View File

@ -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'
},

View File

@ -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',
)
})
})
})