66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
||
|
||
/**
|
||
* 验证行高修复：编辑前后行高必须都等于 rowHeight（32px）。
|
||
* 这是当初就该有、却一直缺失的断言 —— 组件里有防此问题的意图（height: var(--row-height)），
|
||
* 但从没有任何测试验证它真的生效。
|
||
*/
|
||
test('编辑前后行高保持 32px', async ({ page }) => {
|
||
await page.goto('/ocean/booking')
|
||
await page.waitForTimeout(2000)
|
||
|
||
const measure = () =>
|
||
page.evaluate(() => {
|
||
const root = document.querySelector('.g3-table') as HTMLElement
|
||
const rows = Array.from(root.querySelectorAll('.stk-tbody-main tr')).filter(
|
||
(r) => !(r as HTMLElement).className.includes('padding-top'),
|
||
) as HTMLElement[]
|
||
const h = (el?: HTMLElement | null) =>
|
||
el ? Math.round(el.getBoundingClientRect().height * 100) / 100 : null
|
||
const editing = rows[0]
|
||
const tdEditor = editing?.querySelector(
|
||
'td:has(> .g3-table__cell-editor-root)',
|
||
) as HTMLElement | null
|
||
const er = tdEditor?.firstElementChild as HTMLElement | null
|
||
return {
|
||
rowHeights: rows.slice(0, 4).map((r) => h(r)),
|
||
editorTd: h(tdEditor),
|
||
editorRoot: h(er),
|
||
editorTdPad: tdEditor ? getComputedStyle(tdEditor).padding : null,
|
||
rowHeightVar: getComputedStyle(root.querySelector('.stk-table') as HTMLElement)
|
||
.getPropertyValue('--row-height')
|
||
.trim(),
|
||
}
|
||
})
|
||
|
||
const before = await measure()
|
||
console.log('BEFORE: ' + JSON.stringify(before))
|
||
|
||
const cell = page.locator('.stk-tbody-main tr:not(.padding-top-tr)').first().locator('td').nth(2)
|
||
await cell.click()
|
||
await page.waitForTimeout(700)
|
||
|
||
const during = await measure()
|
||
console.log('DURING: ' + JSON.stringify(during))
|
||
|
||
// 退出编辑
|
||
await page.keyboard.press('Escape')
|
||
await page.waitForTimeout(600)
|
||
const after = await measure()
|
||
console.log('AFTER: ' + JSON.stringify(after))
|
||
|
||
// 核心断言：三态行高一致，且等于 --row-height
|
||
expect(before.rowHeights[0]).toBe(32)
|
||
expect(during.rowHeights[0]).toBe(32) // ← 修复前是 42
|
||
expect(after.rowHeights[0]).toBe(32)
|
||
|
||
// 同行其它行不受影响
|
||
expect(during.rowHeights[1]).toBe(32)
|
||
|
||
// 编辑器确实存在（确认真的进入了编辑态，而不是断言空过）
|
||
const editorCount = await page.evaluate(
|
||
() => document.querySelectorAll('.g3-table__cell-editor-root').length,
|
||
)
|
||
console.log('EDITOR COUNT (退出后应为 0): ' + editorCount)
|
||
})
|