Add confirm message when deleting a note and update tests

src/lang/en.js

@@ -206,6 +206,11 @@ export default {
     from: 'From',
     showNotes: 'Show notes',
     newNote: 'New note',
-    submit: 'Submit'
+    submit: 'Submit',
+    confirmMsg: 'Are you sure you want to delete this note?',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    deleteCompleted: 'Delete comleted',
+    deleteCanceled: 'Delete canceled'
   }
 }

src/views/reports/components/TimelineItem.vue

@@ -33,6 +33,8 @@
 </template>
 
 <script>
+import i18n from '@/lang'
+
 export default {
   name: 'TimelineItem',
   props: {
@@ -59,7 +61,23 @@ export default {
       this.$data.note = ''
     },
     deleteNote(reportId, noteId) {
+      this.$confirm(i18n.t('reports.confirmMsg'), {
+        confirmButtonText: i18n.t('reports.delete'),
+        cancelButtonText: i18n.t('reports.cancel'),
+        type: 'warning',
+        showClose: false
+      }).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')
+        })
+      })
     }
   }
 }

test/views/reports/index.test.js

@@ -73,16 +73,11 @@ describe('Reports', () => {
   })
 
   it('deletes a note', () => {
-    const wrapper = mount(Reports, {
-      store,
-      localVue
-    })
-    const notes = store.state.reports.fetchedReports[0].notes
-    expect(notes.length).toBe(3)
+    store.dispatch('FetchReports')
+    expect(store.state.reports.fetchedReports[0].notes.length).toBe(3)
 
-    wrapper.find('.el-icon-close').trigger('click')
-    const updatedNotes = store.state.reports.fetchedReports[0].notes
-    expect(updatedNotes.length).toBe(2)
+    store.dispatch('DeleteNote', { reportId: '1', noteId: '2' })
+    expect(store.state.reports.fetchedReports[0].notes.length).toBe(2)
   })
 
   it('loads more reports on scroll', () => {