优化讲解展厅与对象列表视觉

tests/unit/ExplainGuideStopListNavigation.spec.ts

@@ -4,6 +4,7 @@ import { defineComponent } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import ExplainGuideStopListPage from '@/pages/explain/guide-stop-list.vue'
+import { explainUseCase } from '@/usecases/explainUseCase'
 
 const testState = vi.hoisted(() => ({
   onLoadHandler: null as null | ((options?: Record<string, string>) => void)
@@ -29,17 +30,18 @@ const GuidePageFrameStub = defineComponent({
   template: '<main><button data-testid="frame-back" @click="$emit(\'back\')">返回</button><slot /></main>'
 })
 
-const ExplainHallSelectStub = defineComponent({
-  name: 'ExplainHallSelect',
-  emits: ['back'],
-  template: '<button data-testid="list-back" @click="$emit(\'back\')">返回</button>'
+const ExplainGuideStopCatalogStub = defineComponent({
+  name: 'ExplainGuideStopCatalog',
+  props: ['guideStops', 'selectedHallName', 'loading', 'loadingMore', 'hasMore', 'error', 'loadMoreError'],
+  emits: ['back', 'retry', 'retryMore', 'guideStopClick'],
+  template: '<button data-testid="list-back" @click="$emit(\'back\')">返回</button><button data-testid="retry-more" @click="$emit(\'retryMore\')">重试更多</button>'
 })
 
 const mountGuideStopList = () => mount(ExplainGuideStopListPage, {
   global: {
     stubs: {
       GuidePageFrame: GuidePageFrameStub,
-      ExplainHallSelect: ExplainHallSelectStub
+      ExplainGuideStopCatalog: ExplainGuideStopCatalogStub
     }
   }
 })
@@ -53,6 +55,8 @@ beforeEach(() => {
     setNavigationBarTitle: vi.fn()
   })
   vi.stubGlobal('getCurrentPages', vi.fn(() => []))
+  vi.mocked(explainUseCase.listGuideStopsPageByHall).mockReset()
+  vi.mocked(explainUseCase.listGuideStopsPageByHall).mockResolvedValue({ items: [], total: 0, pageNo: 1, pageSize: 20, hasMore: false })
 })
 
 afterEach(() => {
@@ -61,6 +65,34 @@ afterEach(() => {
 })
 
 describe('讲解对象列表返回', () => {
+  it('ignores a delayed first-page response after unmount', async () => {
+    let resolvePage: ((page: { items: Array<{ id: string, name: string }>, total: number, pageNo: number, pageSize: number, hasMore: boolean }) => void) | undefined
+    vi.mocked(explainUseCase.listGuideStopsPageByHall).mockImplementationOnce(() => new Promise((resolve) => { resolvePage = resolve }))
+    const wrapper = mountGuideStopList()
+    testState.onLoadHandler?.({ hallId: 'hall-1' })
+    wrapper.unmount()
+    resolvePage?.({ items: [{ id: 'late', name: '延迟' }], total: 1, pageNo: 1, pageSize: 20, hasMore: false })
+    await flushPromises()
+    expect(explainUseCase.listGuideStopsPageByHall).toHaveBeenCalledTimes(1)
+  })
+
+  it('permits retry-more recovery after a failed page', async () => {
+    vi.mocked(explainUseCase.listGuideStopsPageByHall)
+      .mockResolvedValueOnce({ items: [{ id: 'one', name: '一号' }], total: 2, pageNo: 1, pageSize: 20, hasMore: true })
+      .mockRejectedValueOnce(new Error('temporary'))
+      .mockResolvedValueOnce({ items: [{ id: 'two', name: '二号' }], total: 2, pageNo: 2, pageSize: 20, hasMore: false })
+    const wrapper = mountGuideStopList()
+    testState.onLoadHandler?.({ hallId: 'hall-1' })
+    await flushPromises()
+    await wrapper.get('[data-testid="retry-more"]').trigger('click')
+    await flushPromises()
+    expect(explainUseCase.listGuideStopsPageByHall).toHaveBeenCalledTimes(2)
+    await wrapper.get('[data-testid="retry-more"]').trigger('click')
+    await flushPromises()
+    expect(explainUseCase.listGuideStopsPageByHall).toHaveBeenCalledTimes(3)
+    wrapper.unmount()
+  })
+
   it('上一页是独立展厅列表时回到该列表', async () => {
     vi.stubGlobal('getCurrentPages', vi.fn(() => [
       { route: 'pages/explain/list', options: {} },