Add tests for changing report state

src/api/__mocks__/reports.js

@@ -18,3 +18,8 @@ export async function filterReports(filter, limit, max_id, authHost, token) {
   const paginatedReports = max_id.length > 0 ? filteredReports.slice(5) : filteredReports.slice(0, 5)
   return Promise.resolve({ data: { reports: paginatedReports }})
 }
+
+export async function changeState(state, id, authHost, token) {
+  const report = reports.find(report => report.id === id)
+  return Promise.resolve({ data: { ...report, state }})
+}

src/views/reports/components/TimelineItem.vue

@@ -54,8 +54,7 @@
 </template>
 
 <script>
-import i18n from '@/lang'
-import * as moment from 'moment'
+import moment from 'moment'
 import Statuses from './Statuses'
 
 export default {
@@ -67,47 +66,10 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      showNotes: [],
-      showNewNoteInput: false,
-      note: ''
-    }
-  },
   methods: {
-    addNewNote(reportId) {
-      if (this.$data.note.length < 2) {
-        this.$message('Note must contain at least 2 characters')
-      } else {
-        const currentUserNickname = this.$store.state.user.name
-        const note = { author: currentUserNickname, text: this.$data.note, timestamp: '2019/04/01' }
-        this.$store.dispatch('AddNote', { reportId, note })
-        this.$data.note = ''
-      }
-    },
     changeReportState(reportState, reportId) {
       this.$store.dispatch('ChangeReportState', { reportState, reportId })
     },
-    deleteNote(reportId, noteId) {
-      this.$confirm(i18n.t('reports.confirmMsg'), {
-        confirmButtonText: i18n.t('reports.delete'),
-        cancelButtonText: i18n.t('reports.cancel'),
-        type: 'warning',
-        showClose: false,
-        customClass: 'confirm-message'
-      }).then(() => {
-        this.$store.dispatch('DeleteNote', { reportId, noteId })
-        this.$message({
-          type: 'success',
-          message: i18n.t('reports.deleteCompleted')
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: i18n.t('reports.deleteCanceled')
-        })
-      })
-    },
     capitalizeFirstLetter(str) {
       return str.charAt(0).toUpperCase() + str.slice(1)
     },
@@ -123,9 +85,6 @@ export default {
     },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('YYYY-MM-DD HH:mm')
-    },
-    toggleNoteInput() {
-      this.$data.showNewNoteInput = !this.$data.showNewNoteInput
     }
   }
 }

test/views/reports/reportsFilter.test.js

@@ -1,5 +1,5 @@
 import Vuex from 'vuex'
-import { mount, createLocalVue, config } from '@vue/test-utils'
+import { createLocalVue, config } from '@vue/test-utils'
 import Element from 'element-ui'
 import storeConfig from './store.conf'
 import { cloneDeep } from 'lodash'

test/views/reports/timelineItem.test.js

@@ -0,0 +1,61 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue, config } from '@vue/test-utils'
+import Element from 'element-ui'
+import TimelineItem from '@/views/reports/components/TimelineItem'
+import storeConfig from './store.conf'
+import { cloneDeep } from 'lodash'
+import flushPromises from 'flush-promises'
+
+config.mocks["$t"] = () => {}
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(Element)
+
+jest.mock('@/api/reports')
+
+describe('Report in a timeline', () => {
+  let store
+
+  beforeEach(async() => {
+    store = new Vuex.Store(cloneDeep(storeConfig))
+    store.dispatch('FetchReports')
+    await flushPromises()
+  })
+
+  it('changes report stsatus from open to resolved', async (done) => {
+    const report = store.state.reports.fetchedReports[0]
+    const wrapper = mount(TimelineItem, {
+      store,
+      localVue,
+      propsData: {
+        report: report
+      }
+    })
+    expect(report.state).toBe('open')
+
+    const button = wrapper.find(`li.el-dropdown-menu__item:nth-child(${1})`)
+    button.trigger('click')
+    await flushPromises()
+    expect(store.state.reports.fetchedReports[0].state).toBe('resolved')
+    done()
+  })
+
+  it('changes report stsatus from open to closed', async (done) => {
+    const report = store.state.reports.fetchedReports[3]
+    const wrapper = mount(TimelineItem, {
+      store,
+      localVue,
+      propsData: {
+        report: report
+      }
+    })
+    expect(report.state).toBe('open')
+
+    const button = wrapper.find(`li.el-dropdown-menu__item:nth-child(${2})`)
+    button.trigger('click')
+    await flushPromises()
+    expect(store.state.reports.fetchedReports[3].state).toBe('closed')
+    done()
+  })
+})