broccoli
d72e297eb6
- app.config 移除写死的浅色背景，交给 theme.json 按系统外观选择首帧底色 - 跟随系统模式增加 setInterval 轮询兜底，onThemeChange 不回调时也能跟上切换
58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
import test from 'node:test'
|
|
import assert from 'node:assert/strict'
|
|
import { readFileSync } from 'node:fs'
|
|
import { fileURLToPath } from 'node:url'
|
|
import path from 'node:path'
|
|
|
|
const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
|
|
const read = (rel) => readFileSync(path.join(root, rel), 'utf8')
|
|
|
|
test('custom tab bar renders the liquid-glass overlay layers', () => {
|
|
const source = read('src/custom-tab-bar/index.tsx')
|
|
assert.match(source, /tab-bar-caustic/)
|
|
assert.match(source, /tab-bar-rim/)
|
|
})
|
|
|
|
test('custom tab bar uses bright glass material and the silver rim', () => {
|
|
const css = read('src/custom-tab-bar/index.scss')
|
|
assert.match(css, /background: rgba\(255, 255, 255, 0\.24\)/)
|
|
assert.match(css, /background: rgba\(25, 25, 25, 0\.24\)/)
|
|
assert.match(css, /backdrop-filter: blur\(32px\) saturate\(1\.7\) brightness\(1\.05\)/)
|
|
assert.match(css, /-webkit-backdrop-filter: blur\(32px\) saturate\(1\.7\) brightness\(1\.05\)/)
|
|
assert.match(css, /mask-composite: exclude/)
|
|
assert.match(css, /linear-gradient\(\s*135deg/)
|
|
})
|
|
|
|
test('global back buttons use the liquid-glass gradient and inner shading', () => {
|
|
const css = read('src/app.scss')
|
|
assert.match(css, /background: linear-gradient\(\s*135deg/)
|
|
assert.match(css, /backdrop-filter: blur\(24px\) saturate\(1\.7\) brightness\(1\.05\)/)
|
|
assert.match(css, /\.theme-dark \.back-btn/)
|
|
})
|
|
|
|
test('scroll top back button matches the global liquid-glass back style', () => {
|
|
const css = read('src/components/ScrollTopMask/index.scss')
|
|
assert.match(css, /background: linear-gradient\(\s*135deg/)
|
|
assert.match(css, /backdrop-filter: blur\(24px\) saturate\(1\.7\) brightness\(1\.05\)/)
|
|
})
|
|
|
|
test('app sets page background before first render without a blinking full fade', () => {
|
|
const appSource = read('src/app.tsx')
|
|
const appCss = read('src/app.scss')
|
|
assert.match(appSource, /componentWillMount/)
|
|
assert.doesNotMatch(appCss, /animation:\s*page-fade-in/)
|
|
})
|
|
|
|
test('delegates initial background to themeLocation instead of hardcoding light', () => {
|
|
const config = read('src/app.config.ts')
|
|
assert.match(config, /themeLocation:\s*'theme\.json'/)
|
|
assert.doesNotMatch(config, /navigationBarBackgroundColor:\s*'#faf7f2'/)
|
|
assert.doesNotMatch(config, /backgroundColorTop:\s*'#faf7f2'/)
|
|
})
|
|
|
|
test('polls the system theme while following the system', () => {
|
|
const ctx = read('src/context/ThemeContext.tsx')
|
|
assert.match(ctx, /setInterval/)
|
|
assert.match(ctx, /getAppBaseInfo\(\)/)
|
|
})
|