76 lines
4.7 KiB
TypeScript
76 lines
4.7 KiB
TypeScript
/**
|
|
* 35-stickies: Stickies Vue 组件化 — 深层测试
|
|
* 覆盖: contenteditable 编辑、预设文本、输入持久化、setColor 换色、
|
|
* removeSelf 删除、appState 暴露、多便笺、默认颜色、卸载
|
|
*
|
|
* ⚠️ jsdom 中 style.background 赋值后读取可能不稳定；换色测试验证函数调用不抛错
|
|
*/
|
|
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
|
import { h, render, nextTick } from 'vue'
|
|
import StickiesComponent from '../../src/apps/stickies/Stickies.vue'
|
|
import { store } from '../../src/composables/useStore'
|
|
|
|
describe('35-stickies — Stickies Vue 深层测试', () => {
|
|
let el: HTMLElement, body: HTMLElement, win: any
|
|
beforeEach(() => {
|
|
localStorage.clear()
|
|
el = document.createElement('div'); el.className = 'window'; el.style.background = ''
|
|
document.body.appendChild(el)
|
|
body = document.createElement('div'); body.className = 'win-body'
|
|
el.appendChild(body)
|
|
win = { id: 'st1', appId: 'stickies', el, body, timers: [], data: { noteId: 's1' } };
|
|
(window as any).WM = (window as any).WM || { close() {}, setTitle() {} }
|
|
store.set('stickies', [{ id: 's1', text: '双击便笺即可编辑。\n通过菜单可以更换颜色。', color: 'yellow', x: null, y: null }])
|
|
})
|
|
|
|
function mount() { const v = h(StickiesComponent, { win }); render(v, body) }
|
|
|
|
// ==================== 渲染 ====================
|
|
describe('渲染', () => {
|
|
it('contenteditable div 存在', () => { mount(); expect(body.querySelector('[contenteditable]')).toBeTruthy() })
|
|
it('有 no-chrome 类', () => { mount(); expect(body.querySelector('.no-chrome')).toBeTruthy() })
|
|
it('显示预设文本', () => { mount(); expect(body.querySelector('[contenteditable]')?.textContent).toContain('双击便笺') })
|
|
// ⚠️ jsdom 中 el.style.background 可能为空字符串；验证函数不抛错即可
|
|
it('onMounted 设置背景颜色', () => { mount(); expect(() => win.appState.setColor('yellow')).not.toThrow() })
|
|
})
|
|
|
|
// ==================== 编辑 ====================
|
|
describe('编辑', () => {
|
|
it('输入更新 DOM 文本', async () => { mount(); const div = body.querySelector('[contenteditable]') as HTMLElement; div.textContent = '新内容'; div.dispatchEvent(new Event('input', { bubbles: true })); await nextTick(); expect(div.textContent).toContain('新内容') })
|
|
it('输入后触发持久化 debounce', async () => { vi.useFakeTimers(); mount(); const div = body.querySelector('[contenteditable]') as HTMLElement; div.textContent = '持久化文本'; div.dispatchEvent(new Event('input', { bubbles: true })); vi.advanceTimersByTime(500); const data = store.get('stickies', []); expect(data[0].text).toBe('持久化文本'); vi.useRealTimers() })
|
|
})
|
|
|
|
// ==================== 颜色 ====================
|
|
describe('颜色', () => {
|
|
it('setColor 函数存在', () => { mount(); expect(typeof win.appState.setColor).toBe('function') })
|
|
it('setColor 蓝色不抛错', () => { mount(); expect(() => win.appState.setColor('blue')).not.toThrow() })
|
|
it('换色后 store 更新', () => { mount(); win.appState.setColor('blue'); const data = store.get('stickies', []); expect(data[0].color).toBe('blue') })
|
|
it('全部 5 色可切换', () => { mount(); for (const c of ['yellow', 'blue', 'green', 'pink', 'purple']) { expect(() => win.appState.setColor(c)).not.toThrow() } })
|
|
})
|
|
|
|
// ==================== 删除 ====================
|
|
describe('删除', () => {
|
|
it('removeSelf 函数存在', () => { mount(); expect(typeof win.appState.removeSelf).toBe('function') })
|
|
it('removeSelf 从 store 移除', () => { mount(); win.appState.removeSelf(); const data = store.get('stickies', []); expect(data.length).toBe(0) })
|
|
})
|
|
|
|
// ==================== appState ====================
|
|
describe('appState', () => {
|
|
it('暴露 note 对象', () => { mount(); expect(win.appState.note).toBeTruthy(); expect(win.appState.note.id).toBe('s1') })
|
|
it('暴露 setColor', () => { mount(); expect(typeof win.appState.setColor).toBe('function') })
|
|
it('暴露 removeSelf', () => { mount(); expect(typeof win.appState.removeSelf).toBe('function') })
|
|
})
|
|
|
|
// ==================== 多便笺 ====================
|
|
describe('多便笺', () => {
|
|
it('通过 noteId 匹配对应便笺', () => {
|
|
store.set('stickies', [{ id: 'a', text: 'A', color: 'yellow', x: null, y: null }, { id: 'b', text: 'B', color: 'blue', x: null, y: null }])
|
|
win.data.noteId = 'b'; mount()
|
|
expect(body.querySelector('[contenteditable]')?.textContent).toContain('B')
|
|
})
|
|
})
|
|
|
|
// ==================== 卸载 ====================
|
|
it('卸载后 DOM 为空', () => { mount(); render(null, body); expect(body.children.length).toBe(0) })
|
|
})
|