fix: keep the latest instance search results

src/components/SearchBox/index.vue

@@ -46,6 +46,7 @@ export default {
         filter: ''
       },
       resultList: [],
+      requestId: 0,
       isTimerContinue: false
     }
   },
@@ -79,6 +80,7 @@ export default {
     },
     btnSearch() {
       const _this = this
+      const requestId = ++this.requestId
       _this.searchForm.clusterId = _this.cluster.id
       _this.searchForm.filter = _this.keyword
       this.axios.get('/instances/1/1000', {
@@ -87,17 +89,20 @@ export default {
           filter: _this.searchForm.filter
         }
       }).then((response) => {
+        if (requestId !== this.requestId) return
         _this.listLoading = false
         _this.list = response.data.data
         _this.isTimerContinue = false
         this.$emit('resultList', _this.list, _this.isTimerContinue)
         // console.log(_this.isTimerContinue)
       }).catch((error) => {
+        if (requestId !== this.requestId) return
         this.$message.error(error)
       })
     },
     btnReset() {
       const _this = this
+      const requestId = ++this.requestId
       _this.cluster.id = ''
       _this.cluster.name = ''
       _this.keyword = ''
@@ -108,12 +113,14 @@ export default {
       }
       this.axios.get('/instances/list/' + userId, {})
         .then((response) => {
+          if (requestId !== this.requestId) return
           _this.listLoading = false
           _this.list = response.data
           _this.isTimerContinue = true
           this.$emit('resultList', _this.list, _this.isTimerContinue)
           // console.log(_this.isTimerContinue)
         }).catch((error) => {
+          if (requestId !== this.requestId) return
           this.$message.error(error)
         })
     },

tests/unit/components/SearchBox.spec.js

@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils'
+import SearchBox from '@/components/SearchBox/index'
+
+const flush = () => new Promise(resolve => setImmediate(resolve))
+
+describe('SearchBox request ordering', () => {
+  let wrapper
+  let requests
+  let reportError
+
+  beforeEach(() => {
+    requests = []
+    reportError = jest.fn()
+    wrapper = shallowMount(SearchBox, {
+      stubs: ['el-row', 'el-select', 'el-option', 'el-input', 'el-button'],
+      mocks: {
+        axios: {
+          get: url => url === '/clusters'
+            ? Promise.resolve({ data: [] })
+            : new Promise((resolve, reject) => requests.push({ resolve, reject }))
+        },
+        $message: { error: reportError }
+      }
+    })
+  })
+
+  afterEach(() => wrapper.destroy())
+
+  it.each([
+    ['btnSearch', 'btnSearch'],
+    ['btnSearch', 'btnReset'],
+    ['btnReset', 'btnSearch']
+  ])('keeps the latest result for %s followed by %s', async(first, second) => {
+    wrapper.vm[first]()
+    wrapper.vm[second]()
+    const latest = [{ id: 'latest' }]
+    requests[1].resolve({ data: second === 'btnSearch' ? { data: latest } : latest })
+    await flush()
+    const stale = [{ id: 'stale' }]
+    requests[0].resolve({ data: first === 'btnSearch' ? { data: stale } : stale })
+    await flush()
+    expect(wrapper.emitted('resultList')).toEqual([[latest, second === 'btnReset']])
+  })
+
+  it('ignores an old error but reports the current request error', async() => {
+    wrapper.vm.btnSearch()
+    wrapper.vm.btnReset()
+    requests[0].reject(new Error('old request'))
+    await flush()
+    expect(reportError).not.toHaveBeenCalled()
+    const currentError = new Error('current request')
+    requests[1].reject(currentError)
+    await flush()
+    expect(reportError).toHaveBeenCalledWith(currentError)
+  })
+})