Add tests for fetching reports and scrolling event

src/api/__mocks__/reports.js

+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 }})
+}

src/views/reports/components/TimelineItem.vue

@@ -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>

test/views/reports/index.test.js

@@ -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()
   })
 })