57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
/**
|
|
* Attachment 的几何 / 命中类断言 —— happy-dom 没有布局引擎，这些只能在真浏览器里量。
|
|
*
|
|
* 回归背景（都踩过）：
|
|
* 1. 工具栏勾选后浮出批量按钮，一度把整条工具栏撑高、下方内容跟着下移；
|
|
* 2. 分隔线依赖 Splitter 的 barOnHover，默认只在 hover 时显示，
|
|
* 表现为「分类栏右侧看不见边界」。
|
|
*/
|
|
test.describe('Attachment 附件管理器', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/')
|
|
await page.locator('[data-testid="attachment"]').scrollIntoViewIfNeeded()
|
|
})
|
|
|
|
test('工具栏高度恒定：勾选前后、宽窄面板下都是 40px', async ({ page }) => {
|
|
// 40 = --g3-control-height-sm(24) + --g3-space-2(8) * 2
|
|
const EXPECTED_HEIGHT = 40
|
|
|
|
for (const testId of ['attachment', 'attachment-narrow']) {
|
|
const toolbar = page.locator(`[data-testid="${testId}"] .g3-attachment__toolbar`)
|
|
const before = await toolbar.boundingBox()
|
|
|
|
await toolbar.locator('.g3-checkbox').first().click()
|
|
await expect(toolbar.locator('.g3-attachment__toolbar-count')).toBeVisible()
|
|
const after = await toolbar.boundingBox()
|
|
|
|
expect(before, `${testId}: 工具栏应可测量`).not.toBeNull()
|
|
expect(after, `${testId}: 工具栏应可测量`).not.toBeNull()
|
|
expect(before!.height, `${testId}: 未勾选时工具栏高度`).toBe(EXPECTED_HEIGHT)
|
|
// 勾选后浮出「已选 N 项 + 下载 + 删除」，高度必须纹丝不动
|
|
expect(after!.height, `${testId}: 勾选后工具栏高度`).toBe(EXPECTED_HEIGHT)
|
|
|
|
// 复位，避免影响下一个实例的断言
|
|
await toolbar.locator('.g3-checkbox').first().click()
|
|
await expect(toolbar.locator('.g3-attachment__toolbar-count')).toBeHidden()
|
|
}
|
|
})
|
|
|
|
test('分类栏右侧的分割线常显（不依赖 hover）', async ({ page }) => {
|
|
const line = page
|
|
.locator('[data-testid="attachment"] .g3-attachment__splitter .g3-splitter__bar-line')
|
|
.first()
|
|
|
|
await expect(line).toBeVisible()
|
|
|
|
const background = await line.evaluate((el) => getComputedStyle(el).backgroundColor)
|
|
// 默认是 --g3-border-color(#d9d9d9)；只要不是透明的，就说明线是画出来的
|
|
expect(background).not.toBe('rgba(0, 0, 0, 0)')
|
|
|
|
const box = await line.boundingBox()
|
|
expect(box!.width).toBeLessThanOrEqual(2)
|
|
expect(box!.height).toBeGreaterThan(100)
|
|
})
|
|
})
|