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)
  })
})