[TEST] - Test unit - Fix failing UI unit test 4.15 branch (#5219)

* fix error test unit on MigrateWizard

* fix error test unit on AutogenView, ActionButton

* fix error lint

* fix error pollJob originalPage.starWith undefined

* Update ui/src/utils/plugins.js

Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com>

* Update ui/src/utils/plugins.js

Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com>

* uses a substitution variable if the originalPage is null with queryAsyncJob have jobstatus = 1

* remove argument null

Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com>

Author: Hoang Nguyen

ui/src/components/view/ActionButton.vue

@@ -143,7 +143,6 @@ export default {
       this.actionBadge = {}
       const arrAsync = []
       const actionBadge = this.actions.filter(action => action.showBadge === true)
-      if ((actionBadge.dataView ? actionBadge.dataView : false) !== this.dataView) return
 
       if (actionBadge && actionBadge.length > 0) {
         const dataLength = actionBadge.length

ui/src/utils/plugins.js

@@ -53,8 +53,7 @@ export const pollJobPlugin = {
         showLoading = true,
         catchMessage = i18n.t('label.error.caught'),
         catchMethod = () => {},
-        action = null,
-        originalPage = null
+        action = null
       } = options
 
       store.dispatch('AddHeaderNotice', {
@@ -64,7 +63,7 @@ export const pollJobPlugin = {
         status: 'progress'
       })
 
-      options.originalPage = options.originalPage ? options.originalPage : this.$router.currentRoute.path
+      options.originalPage = options.originalPage || this.$router.currentRoute.path
       api('queryAsyncJobResult', { jobId }).then(json => {
         const result = json.queryasyncjobresultresponse
         if (result.jobstatus === 1) {
@@ -90,7 +89,7 @@ export const pollJobPlugin = {
 
           // Ensure we refresh on the same / parent page
           const currentPage = this.$router.currentRoute.path
-          const samePage = originalPage === currentPage || originalPage.startsWith(currentPage + '/')
+          const samePage = options.originalPage === currentPage || options.originalPage.startsWith(currentPage + '/')
           if (samePage && (!action || !('isFetchData' in action) || (action.isFetchData))) {
             eventBus.$emit('async-job-complete')
           }

ui/src/views/AutogenView.vue

@@ -615,7 +615,6 @@ export default {
 
       params.page = this.page
       params.pagesize = this.pageSize
-      this.searchParams = params
       api(this.apiName, params).then(json => {
         var responseName
         var objectName
@@ -703,6 +702,7 @@ export default {
         }
       }).finally(f => {
         this.loading = false
+        this.searchParams = params
       })
     },
     closeAction () {
@@ -949,34 +949,38 @@ export default {
       })
     },
     handleResponse (response, resourceName, action, showLoading = true) {
-      for (const obj in response) {
-        if (obj.includes('response')) {
-          if (response[obj].jobid) {
-            return new Promise(resolve => {
-              const jobid = response[obj].jobid
-              resolve(this.pollActionCompletion(jobid, action, resourceName, showLoading))
-            })
-          } else {
-            var message = action.successMessage ? this.$t(action.successMessage) : this.$t(action.label) +
-              (resourceName ? ' - ' + resourceName : '')
-            var duration = 2
-            if (action.additionalMessage) {
-              message = message + ' - ' + this.$t(action.successMessage)
-              duration = 5
+      return new Promise(resolve => {
+        let jobId = null
+        for (const obj in response) {
+          if (obj.includes('response')) {
+            if (response[obj].jobid) {
+              jobId = response[obj].jobid
+            } else {
+              var message = action.successMessage ? this.$t(action.successMessage) : this.$t(action.label) +
+                (resourceName ? ' - ' + resourceName : '')
+              var duration = 2
+              if (action.additionalMessage) {
+                message = message + ' - ' + this.$t(action.successMessage)
+                duration = 5
+              }
+              this.$message.success({
+                content: message,
+                key: action.label + resourceName,
+                duration: duration
+              })
             }
-            this.$message.success({
-              content: message,
-              key: action.label + resourceName,
-              duration: duration
-            })
+            break
           }
-          break
         }
-      }
-      if (['addLdapConfiguration', 'deleteLdapConfiguration'].includes(action.api)) {
-        this.$store.dispatch('UpdateConfiguration')
-      }
-      return false
+        if (['addLdapConfiguration', 'deleteLdapConfiguration'].includes(action.api)) {
+          this.$store.dispatch('UpdateConfiguration')
+        }
+        if (jobId) {
+          return resolve(this.pollActionCompletion(jobId, action, resourceName, showLoading))
+        }
+
+        return resolve(false)
+      })
     },
     execSubmit (e) {
       e.preventDefault()

ui/tests/mockData/ActionButton.mock.json

@@ -1,7 +1,13 @@
 {
   "messages": {
-    "en": { "label.action": "action-en" },
-    "de": { "label.action": "action-de" }
+    "en": {
+      "label.action": "action-en",
+      "label.view.console": "Console-en"
+    },
+    "de": {
+      "label.action": "action-de",
+      "label.view.console": "Console-de"
+    }
   },
   "apis": {
     "test-api-case-1": {},

ui/tests/unit/views/AutogenView.spec.js

@@ -36,9 +36,6 @@ const state = {
 store = common.createMockStore(state)
 i18n = common.createMockI18n('en', mockData.messages)
 
-const actions = {
-  AddAsyncJob: jest.fn((jobId) => {})
-}
 const spyConsole = {
   log: null,
   warn: null
@@ -2814,8 +2811,8 @@ describe('Views > AutogenView.vue', () => {
         }, 1000)
       })
 
-      it('check pollActionCompletion() and action AddAsyncJob is called when api is called and response have jobId result', async (done) => {
-        store = common.createMockStore(state, actions)
+      it('check pollActionCompletion() is called when api is called and response have jobId result', async (done) => {
+        store = common.createMockStore(state)
         wrapper = factory({
           store: store,
           data: {
@@ -2851,14 +2848,13 @@ describe('Views > AutogenView.vue', () => {
         wrapper.vm.execSubmit(event)
 
         setTimeout(() => {
-          expect(actions.AddAsyncJob).toHaveBeenCalled()
           expect(spyPollAction).toHaveBeenCalled()
 
           done()
         })
       })
 
-      it('check $notification when api is called and response have not jobId result', async (done) => {
+      it('check $message, fetchData() is called when api response have not jobId result', async (done) => {
         wrapper = factory({
           data: {
             showAction: true,
@@ -2888,6 +2884,7 @@ describe('Views > AutogenView.vue', () => {
           }
         }
 
+        const spyFetchData = jest.spyOn(wrapper.vm, 'fetchData')
         mockAxios.mockResolvedValue(mockData)
         spyConsole.log = jest.spyOn(console, 'log').mockImplementation(() => {})
 
@@ -2903,6 +2900,7 @@ describe('Views > AutogenView.vue', () => {
             key: 'labelnametest-name-value',
             duration: 2
           })
+          expect(spyFetchData).toHaveBeenCalled()
 
           done()
         })

ui/tests/unit/views/compute/MigrateWizard.spec.js

@@ -25,9 +25,6 @@ jest.mock('axios', () => mockAxios)
 let wrapper, i18n, store, mocks
 
 const state = {}
-const actions = {
-  AddAsyncJob: jest.fn((jobObject) => {})
-}
 mocks = {
   $message: {
     error: jest.fn((message) => {})
@@ -56,7 +53,7 @@ mocks = {
   })
 }
 i18n = common.createMockI18n('en', mockData.messages)
-store = common.createMockStore(state, actions)
+store = common.createMockStore(state)
 
 const factory = (opts = {}) => {
   i18n = opts.i18n || i18n
@@ -434,7 +431,7 @@ describe('Views > compute > MigrateWizard.vue', () => {
         })
       })
 
-      it('check store dispatch `AddAsyncJob` and $pollJob have successMethod() is called with requiresStorageMotion is true', async (done) => {
+      it('check $pollJob have successMethod() is called with requiresStorageMotion is true', async (done) => {
         const mockData = {
           migratevirtualmachinewithvolumeresponse: {
             jobid: 'test-job-id-case-1'
@@ -469,15 +466,14 @@ describe('Views > compute > MigrateWizard.vue', () => {
         await wrapper.vm.submitForm()
 
         setTimeout(() => {
-          expect(actions.AddAsyncJob).toHaveBeenCalled()
           expect(mocks.$pollJob).toHaveBeenCalled()
           expect(wrapper.emitted()['close-action'][0]).toEqual([])
 
           done()
         })
       })
 
-      it('check store dispatch `AddAsyncJob` and $pollJob have successMethod() is called with requiresStorageMotion is false', async (done) => {
+      it('check $pollJob have successMethod() is called with requiresStorageMotion is false', async (done) => {
         const mockData = {
           migratevirtualmachineresponse: {
             jobid: 'test-job-id-case-2'
@@ -512,15 +508,14 @@ describe('Views > compute > MigrateWizard.vue', () => {
         await wrapper.vm.submitForm()
 
         setTimeout(() => {
-          expect(actions.AddAsyncJob).toHaveBeenCalled()
           expect(mocks.$pollJob).toHaveBeenCalled()
           expect(wrapper.emitted()['close-action'][0]).toEqual([])
 
           done()
         })
       })
 
-      it('check store dispatch `AddAsyncJob` and $pollJob have errorMethod() is called', async (done) => {
+      it('check $pollJob have errorMethod() is called', async (done) => {
         const mockData = {
           migratevirtualmachinewithvolumeresponse: {
             jobid: 'test-job-id-case-3'
@@ -555,15 +550,14 @@ describe('Views > compute > MigrateWizard.vue', () => {
         await wrapper.vm.submitForm()
 
         setTimeout(() => {
-          expect(actions.AddAsyncJob).toHaveBeenCalled()
           expect(mocks.$pollJob).toHaveBeenCalled()
           expect(wrapper.emitted()['close-action'][0]).toEqual([])
 
           done()
         })
       })
 
-      it('check store dispatch `AddAsyncJob` and $pollJob have catchMethod() is called', async (done) => {
+      it('check $pollJob have catchMethod() is called', async (done) => {
         const mockData = {
           migratevirtualmachinewithvolumeresponse: {
             jobid: 'test-job-id-case-4'
@@ -592,7 +586,6 @@ describe('Views > compute > MigrateWizard.vue', () => {
         await wrapper.vm.submitForm()
 
         setTimeout(() => {
-          expect(actions.AddAsyncJob).toHaveBeenCalled()
           expect(mocks.$pollJob).toHaveBeenCalled()
           expect(wrapper.emitted()['close-action'][0]).toEqual([])