/** * 43-keynote: Keynote Vue 组件化测试 * 覆盖: 缩略图/舞台、幻灯片切换、键盘导航、播放/退出/翻页、appState.play、卸载 */ import { describe, it, expect, beforeEach, afterEach } from 'vitest' import { h, render, nextTick } from 'vue' import KeynoteComponent from '../../src/apps/keynote/Keynote.vue' import { setupDOM } from '../helpers' describe('43-keynote', () => { let body: HTMLElement, win: any beforeEach(() => { setupDOM(); const el = document.createElement('div'); el.className = 'window'; document.body.appendChild(el); body = document.createElement('div'); body.className = 'win-body'; el.appendChild(body); win = { el, body, timers: [], data: {} } }) afterEach(() => { render(null, body); win.el.remove() }) function m() { render(h(KeynoteComponent, { win }), body) } it('4 张幻灯片缩略图', () => { m(); expect(body.querySelectorAll('.kn-thumb').length).toBe(4) }) it('舞台显示当前幻灯片', () => { m(); expect(body.querySelector('.kn-slide')).toBeTruthy() }) it('默认选中第一张', () => { m(); expect(body.querySelector('.kn-thumb.sel')?.textContent).toContain('macOS') }) it('点击缩略图切换', async () => { m(); const thumbs = body.querySelectorAll('.kn-thumb'); (thumbs[1] as HTMLElement).dispatchEvent(new MouseEvent('click', { bubbles: true })); await nextTick(); expect(body.querySelector('.kn-title')?.textContent).toContain('虚拟文件') }) it('ArrowRight 切换到下一张', async () => { m(); await nextTick(); win.el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' })); await nextTick(); expect(body.querySelector('.kn-title')?.textContent).toContain('虚拟文件') }) it('ArrowLeft 切换到上一张', async () => { m(); win.el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' })); win.el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' })); expect(body.querySelector('.kn-title')?.textContent).toContain('macOS') }) it('ArrowDown 同 ArrowRight', async () => { m(); await nextTick(); win.el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' })); await nextTick(); expect(body.querySelector('.kn-title')?.textContent).toContain('虚拟文件') }) it('appState.play 存在', () => { m(); expect(typeof win.appState.play).toBe('function') }) it('play 后显示全屏播放', async () => { m(); win.appState.play(); await nextTick(); expect(body.querySelector('.kn-play')).toBeTruthy() }) it('播放中 Space 翻页', async () => { m(); win.appState.play(); await nextTick(); const playEl = body.querySelector('.kn-play') as HTMLElement; playEl.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' })); await nextTick(); expect(body.querySelector('.kn-play .kn-title')?.textContent).toContain('虚拟文件') }) it('播放中 Escape 退出', async () => { m(); win.appState.play(); await nextTick(); (body.querySelector('.kn-play') as HTMLElement).dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); await nextTick(); expect(body.querySelector('.kn-play')).toBeNull() }) it('卸载', () => { m(); render(null, body); expect(body.children.length).toBe(0) }) })