/**
 * 41-typora: Typora Vue 组件化测试
 * 覆盖: textarea/预览区、标题/粗体/斜体/代码/列表渲染、输入 debounce、卸载
 */
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
import { h, render, nextTick } from 'vue'
import TyporaComponent from '../../src/apps/typora/Typora.vue'
import { setupDOM } from '../helpers'

describe('41-typora', () => {
  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(TyporaComponent, { win }), body) }

  it('textarea 存在', () => { m(); expect(body.querySelector('textarea')).toBeTruthy() })
  it('预览区存在', () => { m(); expect(body.querySelector('.typora-preview')).toBeTruthy() })
  it('标题渲染为 h1', () => { m(); expect(body.querySelector('.typora-preview')?.innerHTML).toContain('<h1>') })
  it('粗体渲染为 b', () => { m(); expect(body.querySelector('.typora-preview')?.innerHTML).toContain('<b>') })
  it('代码渲染为 code', () => { m(); expect(body.querySelector('.typora-preview')?.innerHTML).toContain('<code>') })
  it('列表渲染为 ty-li', () => { m(); expect(body.querySelector('.typora-preview')?.innerHTML).toContain('ty-li') })
  it('输入触发 debounce 渲染', async () => { vi.useFakeTimers(); m(); const ta = body.querySelector('textarea') as HTMLTextAreaElement; ta.value = '# 新标题'; ta.dispatchEvent(new Event('input', { bubbles: true })); vi.advanceTimersByTime(200); await nextTick(); expect(body.querySelector('.typora-preview')?.innerHTML).toContain('<h1>'); vi.useRealTimers() })
  it('卸载', () => { m(); render(null, body); expect(body.children.length).toBe(0) })
})