From f3a2dcabba65be265200c880471ee0e029cf09ee Mon Sep 17 00:00:00 2001
From: "chihao.ou" <ou727963665@gmail.com>
Date: Sat, 19 Sep 2026 19:43:23 +0800
Subject: [PATCH] fix(users): ignore superseded balance history requests

---
 .../admin/user/UserBalanceHistoryModal.vue    | 11 ++-
 .../__tests__/UserBalanceHistoryModal.spec.ts | 82 +++++++++++++++++++
 2 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/admin/user/__tests__/UserBalanceHistoryModal.spec.ts

diff --git a/frontend/src/components/admin/user/UserBalanceHistoryModal.vue b/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
index 4bce43ad53..b9e59433b6 100644
--- a/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
+++ b/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
@@ -172,7 +172,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { adminAPI, type BalanceHistoryItem } from '@/api/admin'
 import { formatDateTime } from '@/utils/format'
@@ -192,6 +192,9 @@ const total = ref(0)
 const totalRecharged = ref(0)
 const pageSize = 15
 const typeFilter = ref('')
+let requestVersion = 0
+
+onUnmounted(() => { requestVersion++ })
 
 const totalPages = computed(() => Math.ceil(total.value / pageSize) || 1)
 
@@ -208,6 +211,7 @@ const typeOptions = computed(() => [
 
 // Watch modal open
 watch(() => props.show, (v) => {
+  requestVersion++
   if (v && props.user) {
     typeFilter.value = ''
     loadHistory(1)
@@ -216,6 +220,7 @@ watch(() => props.show, (v) => {
 
 const loadHistory = async (page: number) => {
   if (!props.user) return
+  const version = ++requestVersion
   loading.value = true
   currentPage.value = page
   try {
@@ -225,13 +230,15 @@ const loadHistory = async (page: number) => {
       pageSize,
       typeFilter.value || undefined
     )
+    if (version !== requestVersion) return
     history.value = res.items || []
     total.value = res.total || 0
     totalRecharged.value = res.total_recharged || 0
   } catch (error) {
+    if (version !== requestVersion) return
     console.error('Failed to load balance history:', error)
   } finally {
-    loading.value = false
+    if (version === requestVersion) loading.value = false
   }
 }
 
diff --git a/frontend/src/components/admin/user/__tests__/UserBalanceHistoryModal.spec.ts b/frontend/src/components/admin/user/__tests__/UserBalanceHistoryModal.spec.ts
new file mode 100644
index 0000000000..cb0fe90fb7
--- /dev/null
+++ b/frontend/src/components/admin/user/__tests__/UserBalanceHistoryModal.spec.ts
@@ -0,0 +1,82 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import type { AdminUser } from '@/types'
+import UserBalanceHistoryModal from '../UserBalanceHistoryModal.vue'
+
+const mocks = vi.hoisted(() => ({ getUserBalanceHistory: vi.fn() }))
+vi.mock('@/api/admin', () => ({ adminAPI: { users: mocks } }))
+vi.mock('@/utils/format', () => ({ formatDateTime: () => 'date' }))
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }))
+enableAutoUnmount(afterEach)
+beforeEach(() => { vi.clearAllMocks(); vi.spyOn(console, 'error').mockImplementation(() => {}) })
+afterEach(() => vi.restoreAllMocks())
+function result(id: number) {
+  return { items: [{ id, type: 'admin_balance', value: id, notes: `History ${id}` }], total: 1, total_recharged: id }
+}
+function deferred() {
+  let resolve!: (value: ReturnType<typeof result>) => void
+  let reject!: (reason: unknown) => void
+  const promise = new Promise<ReturnType<typeof result>>((res, rej) => { resolve = res; reject = rej })
+  return { promise, resolve, reject }
+}
+async function openDialog() {
+  const wrapper = mount(UserBalanceHistoryModal, {
+    props: { show: false, user: { id: 1, email: 'one@example.com', balance: 1 } as AdminUser },
+    global: { stubs: { BaseDialog: { props: ['show'], template: '<div v-if="show"><slot /></div>' }, Icon: true, Select: true } }
+  })
+  await wrapper.setProps({ show: true })
+  return wrapper
+}
+
+describe('UserBalanceHistoryModal request ordering', () => {
+  it('keeps the new user history when an old response finishes later', async () => {
+    const old = deferred()
+    mocks.getUserBalanceHistory.mockReturnValueOnce(old.promise).mockResolvedValueOnce(result(20))
+    const wrapper = await openDialog()
+    await wrapper.setProps({ show: false })
+    await wrapper.setProps({ show: true, user: { id: 2, email: 'two@example.com', balance: 2 } as AdminUser })
+    await flushPromises()
+    old.resolve(result(10))
+    await flushPromises()
+    expect(wrapper.text()).toContain('History 20')
+    expect(wrapper.text()).not.toContain('History 10')
+    expect(wrapper.text()).toContain('$20.00')
+  })
+
+  it('does not end the current filter loading state when an old request finishes', async () => {
+    const old = deferred()
+    const current = deferred()
+    mocks.getUserBalanceHistory.mockReturnValueOnce(old.promise).mockReturnValueOnce(current.promise)
+    const wrapper = await openDialog()
+    wrapper.findComponent({ name: 'Select' }).vm.$emit('change', 'balance')
+    await flushPromises()
+    old.resolve(result(10))
+    await flushPromises()
+    expect(wrapper.find('svg.animate-spin').exists()).toBe(true)
+    expect(wrapper.text()).not.toContain('History 10')
+    current.resolve(result(20))
+    await flushPromises()
+    expect(wrapper.find('svg.animate-spin').exists()).toBe(false)
+    expect(wrapper.text()).toContain('History 20')
+  })
+
+  it.each(['close', 'unmount'])('ignores failures after %s', async (action) => {
+    const pending = deferred()
+    mocks.getUserBalanceHistory.mockReturnValueOnce(pending.promise)
+    const wrapper = await openDialog()
+    if (action === 'close') await wrapper.setProps({ show: false })
+    else wrapper.unmount()
+    pending.reject(new Error('Stale error'))
+    await flushPromises()
+    expect(console.error).not.toHaveBeenCalled()
+  })
+
+  it('still reports current failures and ends loading', async () => {
+    const error = new Error('Current error')
+    mocks.getUserBalanceHistory.mockRejectedValueOnce(error)
+    const wrapper = await openDialog()
+    await flushPromises()
+    expect(console.error).toHaveBeenCalledWith('Failed to load balance history:', error)
+    expect(wrapper.find('svg.animate-spin').exists()).toBe(false)
+  })
+})