lyf/frontend-miniapp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

修复微信内嵌返回层级

Browse Source
This commit is contained in:
lyf
2026-07-14 10:58:41 +08:00
parent 267b415673
commit 1f72926f58
5 changed files with 409 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
tests/unit/ExplainListNavigation.spec.ts Normal file
View File

@@ -0,0 +1,129 @@
// @vitest-environment happy-dom
import { defineComponent } from 'vue'
import { flushPromises, mount } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import ExplainListPage from '@/pages/explain/list.vue'
const hostEnvironmentMocks = vi.hoisted(() => ({
embeddedInWechatMiniProgram: false
}))
const testState = vi.hoisted(() => ({
onLoadHandler: null as null | (() => void)
}))
vi.mock('@dcloudio/uni-app', () => ({
onLoad: (handler: () => void) => {
testState.onLoadHandler = handler
}
}))
vi.mock('@/utils/hostEnvironment', () => ({
isEmbeddedInWechatMiniProgram: () => hostEnvironmentMocks.embeddedInWechatMiniProgram
}))
vi.mock('@/usecases/explainUseCase', () => ({
explainUseCase: {
loadExplainHalls: async () => [],
loadExplainHallSummaries: async () => ({})
}
}))
const GuidePageFrameStub = defineComponent({
name: 'GuidePageFrame',
template: '<main><slot /></main>'
})
const ExplainHallSelectStub = defineComponent({
name: 'ExplainHallSelect',
emits: ['back'],
template: '<button data-testid="explain-list-back" @click="$emit(\'back\')">返回</button>'
})
const mountExplainList = () => mount(ExplainListPage, {
global: {
stubs: {
GuidePageFrame: GuidePageFrameStub,
ExplainHallSelect: ExplainHallSelectStub
}
}
})
beforeEach(() => {
hostEnvironmentMocks.embeddedInWechatMiniProgram = false
testState.onLoadHandler = null
window.location.hash = '#/pages/explain/list'
window.history.replaceState({}, '', window.location.href)
vi.stubGlobal('uni', {
navigateBack: vi.fn(),
redirectTo: vi.fn(),
reLaunch: vi.fn()
})
})
afterEach(() => {
vi.restoreAllMocks()
vi.unstubAllGlobals()
})
describe('讲解展厅列表返回', () => {
it('微信内嵌时不调用 navigateBack，并保留宿主标识返回首页讲解 Tab', async () => {
hostEnvironmentMocks.embeddedInWechatMiniProgram = true
window.location.hash = '#/pages/explain/list?embedded=wechat-mini-program&weapp=1&mini-program=1'
window.history.replaceState({}, '', window.location.href)
const wrapper = mountExplainList()
const pushState = vi.spyOn(window.history, 'pushState')
testState.onLoadHandler?.()
await flushPromises()
await wrapper.get('[data-testid="explain-list-back"]').trigger('click')
expect(pushState).toHaveBeenCalledWith(
expect.objectContaining({ museumGuidePage: 'explain-list' }),
'',
window.location.href
)
expect(uni.navigateBack).not.toHaveBeenCalled()
expect(uni.reLaunch).toHaveBeenCalledTimes(1)
const url = vi.mocked(uni.reLaunch).mock.calls[0]?.[0]?.url || ''
const query = new URLSearchParams(url.split('?')[1])
expect(url.split('?')[0]).toBe('/pages/index/index')
expect(query.get('tab')).toBe('explain')
expect(query.get('embedded')).toBe('wechat-mini-program')
expect(query.get('weapp')).toBe('1')
expect(query.get('mini-program')).toBe('1')
wrapper.unmount()
})
it('微信内嵌浏览器返回时回到首页讲解 Tab', async () => {
hostEnvironmentMocks.embeddedInWechatMiniProgram = true
window.location.hash = '#/pages/explain/list?embedded=wechat-mini-program&weapp=1'
window.history.replaceState({}, '', window.location.href)
const wrapper = mountExplainList()
testState.onLoadHandler?.()
await flushPromises()
window.dispatchEvent(new PopStateEvent('popstate', { state: {} }))
await flushPromises()
expect(uni.navigateBack).not.toHaveBeenCalled()
const url = vi.mocked(uni.reLaunch).mock.calls[0]?.[0]?.url || ''
const query = new URLSearchParams(url.split('?')[1])
expect(url.split('?')[0]).toBe('/pages/index/index')
expect(query.get('tab')).toBe('explain')
expect(query.get('embedded')).toBe('wechat-mini-program')
expect(query.get('weapp')).toBe('1')
wrapper.unmount()
})
it('普通 H5 保持原有 navigateBack 行为', async () => {
const wrapper = mountExplainList()
await wrapper.get('[data-testid="explain-list-back"]').trigger('click')
expect(uni.navigateBack).toHaveBeenCalledWith(expect.objectContaining({ delta: 1 }))
expect(uni.reLaunch).not.toHaveBeenCalled()
wrapper.unmount()
})
})

101
tests/unit/IndexPoiSearchFlow.spec.ts
View File

@@ -10,9 +10,14 @@ const testState = vi.hoisted(() => ({
searchUnmountCount: 0,
searchRestoreCount: 0,
searchCollapseAfterDetailCount: 0,
searchResetCount: 0,
onShowHandler: null as null | (() => Promise<void> | void)
}))
const hostEnvironmentMocks = vi.hoisted(() => ({
embeddedInWechatMiniProgram: false
}))
vi.mock('@dcloudio/uni-app', () => ({
onLoad: vi.fn(),
onShow: (handler: () => Promise<void> | void) => {
@@ -20,6 +25,10 @@ vi.mock('@dcloudio/uni-app', () => ({
}
}))
vi.mock('@/utils/hostEnvironment', () => ({
isEmbeddedInWechatMiniProgram: () => hostEnvironmentMocks.embeddedInWechatMiniProgram
}))
const floors = [
{ id: 'L1', label: '1F', order: 1 },
{ id: 'L2', label: '2F', order: 2 }
@@ -100,7 +109,9 @@ const PoiSearchPanelStub = defineComponent({
},
methods: {
collapseHomePanel() {},
resetSearchState() {},
resetSearchState() {
testState.searchResetCount += 1
},
returnToCollapsedAfterDetail() {
testState.searchCollapseAfterDetailCount += 1
},
@@ -152,10 +163,12 @@ const mountIndex = async () => {
}
beforeEach(() => {
hostEnvironmentMocks.embeddedInWechatMiniProgram = false
testState.searchMountCount = 0
testState.searchUnmountCount = 0
testState.searchRestoreCount = 0
testState.searchCollapseAfterDetailCount = 0
testState.searchResetCount = 0
testState.onShowHandler = null
window.history.replaceState({}, '', '/#/pages/index/index?tab=guide')
vi.stubGlobal('uni', {
@@ -168,10 +181,96 @@ beforeEach(() => {
})
afterEach(() => {
vi.restoreAllMocks()
vi.unstubAllGlobals()
})
describe('首页搜索与地图闭环', () => {
it('微信内嵌展开搜索只写入一条覆盖层历史记录', async () => {
hostEnvironmentMocks.embeddedInWechatMiniProgram = true
window.location.hash = '#/pages/index/index?tab=guide&embedded=wechat-mini-program'
window.history.replaceState({}, '', window.location.href)
const wrapper = await mountIndex()
const search = wrapper.getComponent(PoiSearchPanelStub)
const pushState = vi.spyOn(window.history, 'pushState')
search.vm.$emit('expanded-change', true)
await flushPromises()
expect(pushState).toHaveBeenCalledTimes(1)
expect(pushState).toHaveBeenLastCalledWith(
expect.objectContaining({ museumGuideOverlay: 'poi-search' }),
'',
window.location.href
)
search.vm.$emit('expanded-change', true)
await flushPromises()
expect(pushState).toHaveBeenCalledTimes(1)
wrapper.unmount()
})
it('微信内嵌搜索返回消费 popstate 并回到首页收缩态', async () => {
hostEnvironmentMocks.embeddedInWechatMiniProgram = true
window.location.hash = '#/pages/index/index?tab=guide&embedded=wechat-mini-program'
window.history.replaceState({}, '', window.location.href)
const wrapper = await mountIndex()
const search = wrapper.getComponent(PoiSearchPanelStub)
const currentUrl = window.location.href
search.vm.$emit('expanded-change', true)
await flushPromises()
window.dispatchEvent(new PopStateEvent('popstate', { state: {} }))
await flushPromises()
expect(testState.searchResetCount).toBeGreaterThan(0)
expect(window.location.href).toBe(currentUrl)
expect(wrapper.getComponent(GuideMapShellStub).props('visiblePoiIds')).toBeNull()
wrapper.unmount()
})
it('微信内嵌搜索多次展开和收缩不会累积覆盖层历史', async () => {
hostEnvironmentMocks.embeddedInWechatMiniProgram = true
window.location.hash = '#/pages/index/index?tab=guide&embedded=wechat-mini-program'
window.history.replaceState({}, '', window.location.href)
const wrapper = await mountIndex()
const search = wrapper.getComponent(PoiSearchPanelStub)
let currentHistoryState: Record<string, unknown> = {}
vi.spyOn(window.history, 'state', 'get').mockImplementation(() => currentHistoryState)
const pushState = vi.spyOn(window.history, 'pushState').mockImplementation((state) => {
currentHistoryState = state as Record<string, unknown>
})
const historyBack = vi.spyOn(window.history, 'back').mockImplementation(() => {
currentHistoryState = {}
window.dispatchEvent(new PopStateEvent('popstate', { state: {} }))
})
search.vm.$emit('expanded-change', true)
search.vm.$emit('expanded-change', false)
await flushPromises()
search.vm.$emit('expanded-change', true)
search.vm.$emit('expanded-change', false)
await flushPromises()
expect(pushState).toHaveBeenCalledTimes(2)
expect(historyBack).toHaveBeenCalledTimes(2)
expect(currentHistoryState).not.toMatchObject({ museumGuideOverlay: 'poi-search' })
wrapper.unmount()
})
it('普通 H5 展开搜索不写入覆盖层历史，也不消费浏览器返回', async () => {
const wrapper = await mountIndex()
const search = wrapper.getComponent(PoiSearchPanelStub)
const pushState = vi.spyOn(window.history, 'pushState')
search.vm.$emit('expanded-change', true)
window.dispatchEvent(new PopStateEvent('popstate', { state: {} }))
await flushPromises()
expect(pushState).not.toHaveBeenCalled()
expect(testState.searchResetCount).toBe(0)
wrapper.unmount()
})
it('同步首页标签时保留内嵌宿主参数', async () => {
window.location.hash = '#/pages/index/index?tab=guide&embedded=wechat-mini-program'