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