mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Add tests/Refactor
- Move tests which are not resource specific to own describe block, add test cases
This commit is contained in:
mattwr18
parent
fe63e42262
commit
7becb09ef7
187
webapp/components/features/ReportRow/ReportRow.spec.js
Normal file
187
webapp/components/features/ReportRow/ReportRow.spec.js
Normal file
@ -0,0 +1,187 @@
|
||||
import { config, mount, RouterLinkStub } from '@vue/test-utils'
|
||||
import Vuex from 'vuex'
|
||||
import ReportRow from './ReportRow.vue'
|
||||
import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
|
||||
import { reports } from '~/components/features/ReportsList/ReportsList.story.js'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
config.stubs['client-only'] = '<span><slot /></span>'
|
||||
|
||||
describe('ReportRow', () => {
|
||||
let propsData, mocks, stubs, getters, wrapper
|
||||
|
||||
beforeEach(() => {
|
||||
propsData = {}
|
||||
mocks = {
|
||||
$t: jest.fn(string => string),
|
||||
}
|
||||
stubs = {
|
||||
NuxtLink: RouterLinkStub,
|
||||
}
|
||||
getters = {
|
||||
'auth/user': () => {
|
||||
return { slug: 'awesome-user' }
|
||||
},
|
||||
'auth/isModerator': () => true,
|
||||
}
|
||||
})
|
||||
|
||||
describe('given a report ', () => {
|
||||
const Wrapper = () => {
|
||||
const store = new Vuex.Store({
|
||||
getters,
|
||||
})
|
||||
return mount(ReportRow, { propsData, mocks, stubs, localVue, store })
|
||||
}
|
||||
|
||||
describe('has not been closed', () => {
|
||||
let confirmButton
|
||||
beforeEach(() => {
|
||||
propsData = { ...propsData, report: reports[1] }
|
||||
wrapper = Wrapper()
|
||||
confirmButton = wrapper.find('.ds-button-danger')
|
||||
})
|
||||
|
||||
it('renders a confirm button', () => {
|
||||
expect(confirmButton.exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('emits confirm event', () => {
|
||||
confirmButton.trigger('click')
|
||||
expect(wrapper.emitted('confirm-report')).toHaveLength(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('has been closed', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { ...propsData, report: reports[2] }
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders a decided text', () => {
|
||||
const decidedTitle = wrapper
|
||||
.findAll('.title')
|
||||
.filter(title => title.text() === 'moderation.reports.decided')
|
||||
expect(decidedTitle.exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('has not been reviewed', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { ...propsData, report: reports[1] }
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders its current status', () => {
|
||||
expect(wrapper.find('.status-line').text()).toEqual('moderation.reports.enabled')
|
||||
})
|
||||
})
|
||||
|
||||
describe('has been reviewed', () => {
|
||||
describe('and disabled', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { ...propsData, report: reports[2] }
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
it('renders the disabled icon', () => {
|
||||
expect(
|
||||
wrapper
|
||||
.find('.status-line')
|
||||
.find(BaseIcon)
|
||||
.props().name,
|
||||
).toEqual('eye-slash')
|
||||
})
|
||||
|
||||
it('renders its current status', () => {
|
||||
expect(wrapper.find('.status-line').text()).toEqual('moderation.reports.disabledBy')
|
||||
})
|
||||
})
|
||||
|
||||
describe('and enabled', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { ...propsData, report: reports[0] }
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
it('renders the enabled icon', () => {
|
||||
expect(
|
||||
wrapper
|
||||
.find('.status-line')
|
||||
.find(BaseIcon)
|
||||
.props().name,
|
||||
).toEqual('eye')
|
||||
})
|
||||
|
||||
it('renders its current status', () => {
|
||||
expect(wrapper.find('.status-line').text()).toEqual('moderation.reports.enabledBy')
|
||||
})
|
||||
|
||||
it('renders the moderator who reviewed the resource', () => {
|
||||
const username = wrapper.find('[data-test="report-reviewer"]')
|
||||
expect(username.text()).toContain('@moderator')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('concerns a Comment', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { ...propsData, report: reports[0] }
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders a comments icon', () => {
|
||||
const commentsIcon = wrapper.find(BaseIcon).props().name
|
||||
expect(commentsIcon).toEqual('comments')
|
||||
})
|
||||
|
||||
it('renders a link to the post, with the comment contentExcerpt', () => {
|
||||
const postLink = wrapper.find('.title')
|
||||
expect(postLink.text()).toEqual('@peter-lustig Lorem ipsum dolor sit amet, …')
|
||||
})
|
||||
|
||||
it('renders the author', () => {
|
||||
const userSlug = wrapper.find('[data-test="report-author"]')
|
||||
expect(userSlug.text()).toContain('@louie')
|
||||
})
|
||||
})
|
||||
|
||||
describe('concerns a Post', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { ...propsData, report: reports[1] }
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders a bookmark icon', () => {
|
||||
const postIcon = wrapper.find(BaseIcon).props().name
|
||||
expect(postIcon).toEqual('bookmark')
|
||||
})
|
||||
|
||||
it('renders a link to the post', () => {
|
||||
const postLink = wrapper.find('.title')
|
||||
expect(postLink.text()).toEqual("I'm a bigoted post!")
|
||||
})
|
||||
|
||||
it('renders the author', () => {
|
||||
const username = wrapper.find('[data-test="report-author"]')
|
||||
expect(username.text()).toContain('@dagobert')
|
||||
})
|
||||
})
|
||||
|
||||
describe('concerns a User', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { ...propsData, report: reports[2] }
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders a user icon', () => {
|
||||
const userIcon = wrapper.find(BaseIcon).props().name
|
||||
expect(userIcon).toEqual('user')
|
||||
})
|
||||
|
||||
it('renders a link to the user profile', () => {
|
||||
const userLink = wrapper.find('[data-test="report-content"]')
|
||||
expect(userLink.text()).toContain('@abusive-user')
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
183
webapp/components/features/ReportRow/ReportRow.vue
Normal file
183
webapp/components/features/ReportRow/ReportRow.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<tbody class="report-row">
|
||||
<tr>
|
||||
<!-- Icon Column -->
|
||||
<td class="ds-table-col">
|
||||
<base-icon :name="iconName" :title="iconLabel" />
|
||||
</td>
|
||||
|
||||
<!-- Number of Filed Reports Column -->
|
||||
<td class="ds-table-col">
|
||||
<span class="user-count">
|
||||
{{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }}
|
||||
</span>
|
||||
<ds-button size="small" @click="showFiledReports = !showFiledReports">
|
||||
{{ $t('moderation.reports.moreDetails') }}
|
||||
</ds-button>
|
||||
</td>
|
||||
|
||||
<!-- Content Column -->
|
||||
<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>
|
||||
<nuxt-link v-else class="title" :to="linkTarget">
|
||||
{{ linkText | truncate(50) }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
|
||||
<!-- Author Column -->
|
||||
<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>
|
||||
<span v-else>—</span>
|
||||
</td>
|
||||
|
||||
<!-- Status Column -->
|
||||
<td class="ds-table-col" data-test="report-reviewer">
|
||||
<span class="status-line">
|
||||
<base-icon :name="statusIconName" :class="isDisabled ? '--disabled' : '--enabled'" />
|
||||
{{ statusText }}
|
||||
</span>
|
||||
<client-only v-if="report.reviewed">
|
||||
<hc-user
|
||||
:user="moderatorOfLatestReview"
|
||||
:showAvatar="false"
|
||||
:trunc="30"
|
||||
:date-time="report.updatedAt"
|
||||
/>
|
||||
</client-only>
|
||||
</td>
|
||||
|
||||
<!-- Decision Column -->
|
||||
<td class="ds-table-col">
|
||||
<span v-if="report.closed" class="title">
|
||||
{{ $t('moderation.reports.decided') }}
|
||||
</span>
|
||||
<ds-button
|
||||
v-else
|
||||
danger
|
||||
data-test="confirm"
|
||||
size="small"
|
||||
:icon="statusIconName"
|
||||
@click="$emit('confirm-report')"
|
||||
>
|
||||
{{ $t('moderation.reports.decideButton') }}
|
||||
</ds-button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="row">
|
||||
<td colspan="100%">
|
||||
<filed-reports-table :filed="report.filed" v-if="showFiledReports" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FiledReportsTable from '~/components/features/FiledReportsTable/FiledReportsTable'
|
||||
import HcUser from '~/components/User/User'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FiledReportsTable,
|
||||
HcUser,
|
||||
},
|
||||
props: {
|
||||
report: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFiledReports: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isPost() {
|
||||
return this.report.resource.__typename === 'Post'
|
||||
},
|
||||
isComment() {
|
||||
return this.report.resource.__typename === 'Comment'
|
||||
},
|
||||
isUser() {
|
||||
return this.report.resource.__typename === 'User'
|
||||
},
|
||||
isDisabled() {
|
||||
return this.report.resource.disabled
|
||||
},
|
||||
iconName() {
|
||||
if (this.isPost) return 'bookmark'
|
||||
else if (this.isComment) return 'comments'
|
||||
else if (this.isUser) return 'user'
|
||||
else return null
|
||||
},
|
||||
iconLabel() {
|
||||
if (this.isPost) return this.$t('report.contribution.type')
|
||||
else if (this.isComment) return this.$t('report.comment.type')
|
||||
else if (this.isUser) return this.$t('report.user.type')
|
||||
else return null
|
||||
},
|
||||
linkTarget() {
|
||||
const { id, slug } = this.isComment ? this.report.resource.post : this.report.resource
|
||||
return {
|
||||
name: 'post-id-slug',
|
||||
params: { id, slug },
|
||||
hash: this.isComment ? `#commentId-${this.report.resource.id}` : '',
|
||||
}
|
||||
},
|
||||
linkText() {
|
||||
return (
|
||||
this.report.resource.title || this.$filters.removeHtml(this.report.resource.contentExcerpt)
|
||||
)
|
||||
},
|
||||
statusIconName() {
|
||||
return this.isDisabled ? 'eye-slash' : 'eye'
|
||||
},
|
||||
statusText() {
|
||||
if (!this.report.reviewed) return this.$t('moderation.reports.enabled')
|
||||
else if (this.isDisabled) return this.$t('moderation.reports.disabledBy')
|
||||
else return this.$t('moderation.reports.enabledBy')
|
||||
},
|
||||
moderatorOfLatestReview() {
|
||||
return this.report.reviewed[0].moderator
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.report-row {
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: $color-neutral-95;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.status-line {
|
||||
display: inline-flex;
|
||||
|
||||
> .base-icon {
|
||||
margin-right: $space-xx-small;
|
||||
}
|
||||
}
|
||||
|
||||
.user-count {
|
||||
display: block;
|
||||
margin-bottom: $space-xx-small;
|
||||
}
|
||||
|
||||
.--disabled {
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.--enabled {
|
||||
color: $color-success;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user