69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
/**
|
|
* 24-music: Music Vue 组件化测试
|
|
*
|
|
* 覆盖: 曲目列表、播放/暂停/上/下首、专辑视图切换、卸载清理
|
|
*/
|
|
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
|
|
import { h, render, nextTick } from 'vue'
|
|
import MusicComponent from '../../src/apps/music/Music.vue'
|
|
import { setupDOM } from '../helpers'
|
|
|
|
function makeMockWin() {
|
|
const el = document.createElement('div'); el.className = 'window'
|
|
document.getElementById('window-layer')?.appendChild(el)
|
|
const body = document.createElement('div'); body.className = 'win-body'
|
|
el.appendChild(body)
|
|
return { id: 'mu', appId: 'music', el, body, timers: [] as any[], data: {} }
|
|
}
|
|
|
|
describe('24-music — Music Vue 组件化', () => {
|
|
let win: any
|
|
beforeEach(() => { setupDOM(); win = makeMockWin() })
|
|
afterEach(() => { render(null, win.body); win.el.remove() })
|
|
|
|
function mount() { const v = h(MusicComponent, { win }); render(v, win.body) }
|
|
|
|
describe('初始化', () => {
|
|
it('渲染曲目列表', () => {
|
|
mount()
|
|
expect(win.body.querySelector('.music-list')).toBeTruthy()
|
|
expect(win.body.querySelectorAll('.music-row').length).toBeGreaterThanOrEqual(1)
|
|
})
|
|
|
|
it('默认未播放状态', () => {
|
|
mount()
|
|
const playBtn = win.body.querySelector('.music-play')
|
|
expect(playBtn?.textContent).toBe('▶')
|
|
})
|
|
|
|
it('曲目有标题、专辑、时长', () => {
|
|
mount()
|
|
const first = win.body.querySelector('.music-info')
|
|
expect(first?.querySelector('b')?.textContent).toBeTruthy()
|
|
expect(first?.querySelector('small')?.textContent).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe('控制', () => {
|
|
it('有播放/上/下首按钮', () => {
|
|
mount()
|
|
const btns = win.body.querySelectorAll('.music-ctl-btn')
|
|
expect(btns.length).toBeGreaterThanOrEqual(3)
|
|
})
|
|
|
|
it('专辑视图切换按钮存在', () => {
|
|
mount()
|
|
const btns = win.body.querySelectorAll('.music-ctl-btn')
|
|
const lastBtn = btns[btns.length - 1]
|
|
expect(lastBtn).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe('卸载', () => {
|
|
it('卸载后 DOM 为空', () => {
|
|
mount(); render(null, win.body)
|
|
expect(win.body.children.length).toBe(0)
|
|
})
|
|
})
|
|
})
|