Browse Source
* test(@vben-core/popup-ui): add modal mouse and keyboard regression tests Co-Authored-By: EvoX <evox@evomap.ai> * fix(apps): pass withCredentials as request config, not body, for refresh/logout Co-Authored-By: EvoX <evox@evomap.ai> * style(@vben-core/popup-ui): apply oxfmt formatting to modal interaction tests Co-Authored-By: EvoX <evox@evomap.ai> --------- Co-authored-by: EvoX <evox@evomap.ai>pull/8317/head
俞可 · YU KE
1 month ago
committed by
GitHub
GitHub
6 changed files with 243 additions and 20 deletions
@ -0,0 +1,203 @@ |
|||||
|
import type { App } from 'vue'; |
||||
|
|
||||
|
import { createApp, defineComponent, h, nextTick, onMounted } from 'vue'; |
||||
|
|
||||
|
import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants'; |
||||
|
|
||||
|
import { afterEach, describe, expect, it, vi } from 'vitest'; |
||||
|
|
||||
|
import { useVbenModal } from '../use-modal'; |
||||
|
|
||||
|
vi.mock('@vben-core/preferences', () => ({ |
||||
|
usePreferences: () => ({ |
||||
|
globalEscapeShortcutKey: { value: true }, |
||||
|
}), |
||||
|
})); |
||||
|
|
||||
|
let activeApp: App | undefined; |
||||
|
|
||||
|
interface MountOptions { |
||||
|
closeOnClickModal?: boolean; |
||||
|
closeOnPressEscape?: boolean; |
||||
|
onCancel?: () => void; |
||||
|
onConfirm?: () => void; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 挂载一个受控的 Modal 组件，用于验证鼠标点击与键盘交互后的关闭行为和事件副作用。 |
||||
|
*/ |
||||
|
async function mountModal(options: MountOptions = {}) { |
||||
|
const mainContent = document.createElement('main'); |
||||
|
mainContent.id = ELEMENT_ID_MAIN_CONTENT; |
||||
|
mainContent.innerHTML = '<div><div></div></div>'; |
||||
|
document.body.append(mainContent); |
||||
|
|
||||
|
let capturedApi: ReturnType<typeof useVbenModal>[1] | undefined; |
||||
|
const Consumer = defineComponent(() => { |
||||
|
const [Modal, modalApi] = useVbenModal({ |
||||
|
appendToMain: true, |
||||
|
cancelText: 'Cancel', |
||||
|
confirmText: 'Confirm', |
||||
|
closeOnClickModal: options.closeOnClickModal ?? true, |
||||
|
closeOnPressEscape: options.closeOnPressEscape ?? true, |
||||
|
title: 'Interaction modal', |
||||
|
...(options.onCancel ? { onCancel: options.onCancel } : {}), |
||||
|
...(options.onConfirm ? { onConfirm: options.onConfirm } : {}), |
||||
|
}); |
||||
|
capturedApi = modalApi; |
||||
|
onMounted(() => { |
||||
|
modalApi.open(); |
||||
|
}); |
||||
|
return () => h(Modal); |
||||
|
}); |
||||
|
const host = document.createElement('div'); |
||||
|
document.body.append(host); |
||||
|
|
||||
|
activeApp = createApp(() => h(Consumer)); |
||||
|
activeApp.mount(host); |
||||
|
await nextTick(); |
||||
|
await nextTick(); |
||||
|
// reka-ui 在 setTimeout(0) 之后才把 document 级的 pointerdown 监听挂上，
|
||||
|
// 等待一个宏任务，确保遮罩交互在监听器就绪后触发。
|
||||
|
await new Promise((resolve) => setTimeout(resolve, 0)); |
||||
|
|
||||
|
if (!capturedApi) { |
||||
|
throw new Error('modal api was not captured'); |
||||
|
} |
||||
|
return { modalApi: capturedApi }; |
||||
|
} |
||||
|
|
||||
|
function buttonByText(text: string): HTMLElement | undefined { |
||||
|
return [...document.querySelectorAll('button')].find( |
||||
|
(element) => element.textContent?.trim() === text, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function pressEscape() { |
||||
|
document.dispatchEvent( |
||||
|
new KeyboardEvent('keydown', { |
||||
|
bubbles: true, |
||||
|
cancelable: true, |
||||
|
key: 'Escape', |
||||
|
}), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function pointerDownOverlay() { |
||||
|
const overlay = document.querySelector('[data-dismissable-modal]'); |
||||
|
if (!(overlay instanceof HTMLElement)) { |
||||
|
return false; |
||||
|
} |
||||
|
overlay.dispatchEvent( |
||||
|
new PointerEvent('pointerdown', { bubbles: true, cancelable: true }), |
||||
|
); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
async function settle() { |
||||
|
await nextTick(); |
||||
|
await new Promise((resolve) => setTimeout(resolve, 80)); |
||||
|
} |
||||
|
|
||||
|
afterEach(() => { |
||||
|
activeApp?.unmount(); |
||||
|
activeApp = undefined; |
||||
|
document.body.innerHTML = ''; |
||||
|
vi.restoreAllMocks(); |
||||
|
}); |
||||
|
|
||||
|
describe('vben modal interactions', () => { |
||||
|
it('fires confirm exactly once on confirm click and does not auto-close', async () => { |
||||
|
const onConfirm = vi.fn(); |
||||
|
const { modalApi } = await mountModal({ onConfirm }); |
||||
|
const button = buttonByText('Confirm'); |
||||
|
|
||||
|
expect(button).toBeInstanceOf(HTMLElement); |
||||
|
if (!(button instanceof HTMLElement)) return; |
||||
|
button.dispatchEvent(new MouseEvent('click', { bubbles: true })); |
||||
|
await nextTick(); |
||||
|
|
||||
|
expect(onConfirm).toHaveBeenCalledTimes(1); |
||||
|
expect(modalApi.store.state.isOpen).toBe(true); |
||||
|
}); |
||||
|
|
||||
|
it('closes the modal when the confirm handler closes the api', async () => { |
||||
|
const onConfirm = vi.fn(); |
||||
|
const apiRef: { |
||||
|
current?: ReturnType<typeof useVbenModal>[1]; |
||||
|
} = {}; |
||||
|
const { modalApi } = await mountModal({ |
||||
|
onConfirm: () => { |
||||
|
onConfirm(); |
||||
|
void apiRef.current?.close(); |
||||
|
}, |
||||
|
}); |
||||
|
apiRef.current = modalApi; |
||||
|
const button = buttonByText('Confirm'); |
||||
|
|
||||
|
expect(button).toBeInstanceOf(HTMLElement); |
||||
|
if (!(button instanceof HTMLElement)) return; |
||||
|
button.dispatchEvent(new MouseEvent('click', { bubbles: true })); |
||||
|
|
||||
|
expect(onConfirm).toHaveBeenCalledTimes(1); |
||||
|
await expect.poll(() => modalApi.store.state.isOpen).toBe(false); |
||||
|
}); |
||||
|
|
||||
|
it('closes on cancel click when no cancel hook is provided', async () => { |
||||
|
const { modalApi } = await mountModal(); |
||||
|
const button = buttonByText('Cancel'); |
||||
|
|
||||
|
expect(button).toBeInstanceOf(HTMLElement); |
||||
|
if (!(button instanceof HTMLElement)) return; |
||||
|
button.dispatchEvent(new MouseEvent('click', { bubbles: true })); |
||||
|
|
||||
|
await expect.poll(() => modalApi.store.state.isOpen).toBe(false); |
||||
|
}); |
||||
|
|
||||
|
it('fires cancel exactly once and does not auto-close when a cancel hook exists', async () => { |
||||
|
const onCancel = vi.fn(); |
||||
|
const { modalApi } = await mountModal({ onCancel }); |
||||
|
const button = buttonByText('Cancel'); |
||||
|
|
||||
|
expect(button).toBeInstanceOf(HTMLElement); |
||||
|
if (!(button instanceof HTMLElement)) return; |
||||
|
button.dispatchEvent(new MouseEvent('click', { bubbles: true })); |
||||
|
await nextTick(); |
||||
|
|
||||
|
expect(onCancel).toHaveBeenCalledTimes(1); |
||||
|
expect(modalApi.store.state.isOpen).toBe(true); |
||||
|
}); |
||||
|
|
||||
|
it('closes when Escape is pressed', async () => { |
||||
|
const { modalApi } = await mountModal(); |
||||
|
|
||||
|
pressEscape(); |
||||
|
|
||||
|
await expect.poll(() => modalApi.store.state.isOpen).toBe(false); |
||||
|
}); |
||||
|
|
||||
|
it('stays open on Escape when closeOnPressEscape is false', async () => { |
||||
|
const { modalApi } = await mountModal({ closeOnPressEscape: false }); |
||||
|
|
||||
|
pressEscape(); |
||||
|
await settle(); |
||||
|
|
||||
|
expect(modalApi.store.state.isOpen).toBe(true); |
||||
|
}); |
||||
|
|
||||
|
it('closes when the dismissable overlay is pointer-downed', async () => { |
||||
|
const { modalApi } = await mountModal(); |
||||
|
|
||||
|
expect(pointerDownOverlay()).toBe(true); |
||||
|
await expect.poll(() => modalApi.store.state.isOpen).toBe(false); |
||||
|
}); |
||||
|
|
||||
|
it('stays open on overlay pointer-down when closeOnClickModal is false', async () => { |
||||
|
const { modalApi } = await mountModal({ closeOnClickModal: false }); |
||||
|
|
||||
|
expect(pointerDownOverlay()).toBe(true); |
||||
|
await settle(); |
||||
|
|
||||
|
expect(modalApi.store.state.isOpen).toBe(true); |
||||
|
}); |
||||
|
}); |
||||
Loading…
Reference in new issue