const test = require('node:test')
const assert = require('node:assert/strict')
const path = require('node:path')
const sass = require(require.resolve('sass', { paths: [require.resolve('@tarojs/webpack5-runner')] }))
const postcss = require(require.resolve('postcss', { paths: [require.resolve('@tarojs/webpack5-runner')] }))
const css = postcss.parse(sass.renderSync({ file: path.resolve(__dirname, '../src/pages/tiangong-detail/index.scss') }).css.toString())

function declarations(selector) {
  const result = {}
  css.walkRules(selector, rule => rule.walkDecls(decl => { result[decl.prop] = decl.value }))
  return result
}

test('请神长屏由场景撑满，短屏允许内容自然滚动', () => {
  const page = declarations('.tiangong-detail-page.invitation')
  assert.equal(page.height, 'auto')
  assert.equal(page['min-height'], '100dvh')
  assert.equal(page.overflow, 'visible')
  for (const selector of ['.invitation .tg-sacred-scene', '.invitation .tg-statue-space']) {
    const scene = declarations(selector)
    assert.equal(scene.flex, '1 0 auto')
    assert.equal(scene['min-height'], '118vw')
    assert.equal(scene.height, undefined)
  }
  assert.equal(declarations('.invitation .tg-statue')['max-height'], 'none')
})

test('名称栏、介绍和请神按钮组成完整底栏，不改变敬神场景约束', () => {
  assert.equal(declarations('.tg-invite-name')['text-align'], 'center')
  assert.equal(declarations('.tg-introduction')['overflow-wrap'], 'break-word')
  assert.match(declarations('.tg-invite-description')['padding-bottom'], /safe-area-inset-bottom/)
  assert.equal(declarations('.tg-invite-description .tg-invite-main').margin, '18px auto 4px')
  assert.equal(declarations('.tiangong-detail-page').height, '100dvh')
  assert.equal(declarations('.tiangong-detail-page').overflow, 'hidden')
  assert.equal(declarations('.tg-statue')['max-height'], '100vw')
})