58 lines
2.5 KiB
TypeScript
58 lines
2.5 KiB
TypeScript
/* shape-render.test.ts — 形状元素渲染回归（细条/装饰形状不被文字层污染） */
|
||
import { describe, it, expect } from 'vitest'
|
||
import { mount } from '@vue/test-utils'
|
||
import ElementView from '../src/components/editor/ElementView.vue'
|
||
import { store } from '../src/core/store'
|
||
import type { SlideElement } from '../src/core/types'
|
||
|
||
/** 目录页 t2：标题下方的细横条（rect 128×11.5px） */
|
||
const t2: SlideElement = {
|
||
id: 't2', type: 'shape', x: 8, y: 23, w: 10, h: 1.6, content: '',
|
||
style: { shapeType: 'rect', fill: 'accent', radius: 4, anim: 'fade-up' }
|
||
}
|
||
|
||
/** 步骤页 st4：步骤间的小三角 */
|
||
const st4: SlideElement = {
|
||
id: 'st4', type: 'shape', x: 27.5, y: 40, w: 5, h: 0.8, content: '',
|
||
style: { shapeType: 'triangle', fill: 'accent', anim: 'fade' }
|
||
}
|
||
|
||
describe('装饰形状渲染', () => {
|
||
it('细横条 rect：编辑态渲染图形 div + 空 contenteditable 文字层，无占位文字', () => {
|
||
const w = mount(ElementView, { props: { el: t2, bg: 'bg', edit: true }, attachTo: document.body })
|
||
const shape = w.find('.el-shape')
|
||
expect(shape.exists()).toBe(true)
|
||
expect(shape.attributes('style')).toContain('border-radius: 4px')
|
||
const text = w.find('.el-shape-text')
|
||
expect(text.exists()).toBe(true) // 编辑态保留可点击输入
|
||
expect(text.text()).toBe('') // 无占位文字
|
||
// 根节点暴露 data-shape 供 CSS 区分满幅/多边形安全区
|
||
expect(w.find('.el').attributes('data-shape')).toBe('rect')
|
||
w.unmount()
|
||
})
|
||
|
||
it('小三角 triangle：走 clip-path 分支，非正比框渲染', () => {
|
||
const w = mount(ElementView, { props: { el: st4, bg: 'bg', edit: true }, attachTo: document.body })
|
||
const shape = w.find('.el-shape')
|
||
expect(shape.attributes('style') || '').toContain('clip-path')
|
||
w.unmount()
|
||
})
|
||
|
||
it('非编辑态（模板预览）：空 content 不渲染文字层', () => {
|
||
const w = mount(ElementView, { props: { el: t2, bg: 'bg' }, attachTo: document.body })
|
||
expect(w.find('.el-shape-text').exists()).toBe(false)
|
||
w.unmount()
|
||
})
|
||
|
||
it('有文字的形状：非编辑态渲染 md 文字层且默认白字', () => {
|
||
void store
|
||
const el = { ...t2, h: 10, content: '**加粗**文字' }
|
||
const w = mount(ElementView, { props: { el, bg: 'bg' }, attachTo: document.body })
|
||
const text = w.find('.el-shape-text')
|
||
expect(text.exists()).toBe(true)
|
||
expect(text.html()).toContain('<strong>加粗</strong>')
|
||
expect(text.attributes('style') || '').toContain('rgb(255, 255, 255)')
|
||
w.unmount()
|
||
})
|
||
})
|