Add tests for fetching reports and scrolling event

This commit is contained in:
Angelina Filippova 2019-05-25 14:20:13 +02:00
parent c9d6402c37
commit 7936d98050
3 changed files with 27 additions and 54 deletions

View file

@ -0,0 +1,14 @@
const reports = [
{ created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame' }, actor: { acct: 'admin' }, state: 'open', id: '2', content: 'This is a report', statuses: [] },
{ created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool' }, actor: { acct: 'admin2' }, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
{ created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys' }, actor: { acct: 'admin' }, state: 'closed', id: '3', content: '', statuses: [] },
{ created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame' }, actor: { acct: 'admin' }, state: 'open', id: '5', content: 'This is a report', statuses: [] },
{ created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool' }, actor: { acct: 'admin2' }, state: 'resolved', id: '7', content: 'Please block this user', statuses: [] },
{ created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys' }, actor: { acct: 'admin' }, state: 'closed', id: '6', content: '', statuses: [] },
{ created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys' }, actor: { acct: 'admin' }, state: 'closed', id: '4', content: '', statuses: [] }
]
export async function fetchReports(limit, max_id, authHost, token) {
const filteredReports = max_id.length > 0 ? reports.slice(5) : reports.slice(0, 5)
return Promise.resolve({ data: { reports: filteredReports }})
}

View file

@ -38,7 +38,7 @@
<span class="report-row-key">Actor:</span>
<img
:src="report.actor.avatar"
alt="User's avatar"
alt="avatar"
class="avatar-img">
<a :href="report.actor.url" target="_blank" class="account">
<span class="report-row-value">{{ report.actor.acct }}</span>

View file

@ -4,14 +4,17 @@ import Element from 'element-ui'
import Reports from '@/views/reports/index'
import storeConfig from './store.conf'
import { cloneDeep } from 'lodash'
import flushPromises from 'flush-promises'
config.mocks["$t"] = () => {}
config.stubs['reports-filter'] = '<div />'
config.stubs['timeline-item'] = '<div />'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Element)
// jest.mock('@/api/reports')
jest.mock('@/api/reports')
describe('Reports', () => {
let store
@ -26,68 +29,24 @@ describe('Reports', () => {
localVue
})
await wrapper.vm.$nextTick()
await flushPromises()
const initialReports = store.state.reports.fetchedReports.length
expect(initialReports).toEqual(3)
expect(initialReports).toEqual(5)
done()
})
it('shows notes', () => {
it('loads more reports on scroll', async (done) => {
const wrapper = mount(Reports, {
store,
localVue
})
const note = wrapper.find('.el-collapse-item__content')
expect(note.isVisible()).toBe(false)
const button = wrapper.find('.el-collapse-item__header')
button.trigger('click')
expect(note.isVisible()).toBe(true)
button.trigger('click')
expect(note.isVisible()).toBe(false)
})
it('creates a note', () => {
const wrapper = mount(Reports, {
store,
localVue
})
const noteTextArea = wrapper.find('textarea')
const notes = store.state.reports.fetchedReports[0].notes
expect(noteTextArea.isVisible()).toBe(false)
wrapper.find('.el-button--default').trigger('click')
expect(noteTextArea.isVisible()).toBe(true)
expect(notes.length).toBe(2)
noteTextArea.setValue('new note')
wrapper.find('.submit-button').trigger('click')
const updatedNotes = store.state.reports.fetchedReports[0].notes
expect(updatedNotes.length).toBe(3)
wrapper.find('.new-note .el-icon-close').trigger('click')
expect(noteTextArea.isVisible()).toBe(false)
})
it('deletes a note', () => {
store.dispatch('FetchReports')
expect(store.state.reports.fetchedReports[0].notes.length).toBe(3)
store.dispatch('DeleteNote', { reportId: '1', noteId: '2' })
expect(store.state.reports.fetchedReports[0].notes.length).toBe(2)
})
it('loads more reports on scroll', () => {
const wrapper = mount(Reports, {
store,
localVue
})
expect(store.state.reports.fetchedReports.length).toEqual(3)
await flushPromises()
expect(store.state.reports.fetchedReports.length).toEqual(5)
window.dispatchEvent(new CustomEvent('scroll', { detail: 2000 }))
expect(store.state.reports.fetchedReports.length).toEqual(6)
await flushPromises()
expect(store.state.reports.fetchedReports.length).toEqual(7)
done()
})
})