diff --git a/frontend/src/components/dataGridLayout.test.ts b/frontend/src/components/dataGridLayout.test.ts index 2752dd0..da5bd71 100644 --- a/frontend/src/components/dataGridLayout.test.ts +++ b/frontend/src/components/dataGridLayout.test.ts @@ -1,8 +1,12 @@ -import { strict as assert } from 'node:assert'; - import { calculateTableBodyBottomPadding } from './dataGridLayout'; -assert.equal( +const assertEqual = (actual: unknown, expected: unknown, message: string) => { + if (actual !== expected) { + throw new Error(`${message}\nactual: ${String(actual)}\nexpected: ${String(expected)}`); + } +}; + +assertEqual( calculateTableBodyBottomPadding({ hasHorizontalOverflow: false, floatingScrollbarHeight: 10, @@ -12,7 +16,7 @@ assert.equal( '无横向滚动条时不应增加底部间距' ); -assert.equal( +assertEqual( calculateTableBodyBottomPadding({ hasHorizontalOverflow: true, floatingScrollbarHeight: 10, @@ -22,7 +26,7 @@ assert.equal( '默认悬浮滚动条应预留滚动条高度、间距和额外安全区' ); -assert.equal( +assertEqual( calculateTableBodyBottomPadding({ hasHorizontalOverflow: true, floatingScrollbarHeight: 14, diff --git a/frontend/src/components/redisViewerWorkbenchTheme.test.ts b/frontend/src/components/redisViewerWorkbenchTheme.test.ts index 4ed9a5a..f53d144 100644 --- a/frontend/src/components/redisViewerWorkbenchTheme.test.ts +++ b/frontend/src/components/redisViewerWorkbenchTheme.test.ts @@ -1,22 +1,38 @@ -import { strict as assert } from 'node:assert'; - import { buildRedisWorkbenchTheme } from './redisViewerWorkbenchTheme'; +const assertEqual = (actual: unknown, expected: unknown, message: string) => { + if (actual !== expected) { + throw new Error(`${message}\nactual: ${String(actual)}\nexpected: ${String(expected)}`); + } +}; + +const assertNotEqual = (actual: unknown, expected: unknown, message: string) => { + if (actual === expected) { + throw new Error(`${message}\nactual: ${String(actual)}\nnotExpected: ${String(expected)}`); + } +}; + +const assertMatch = (value: string, pattern: RegExp, message: string) => { + if (!pattern.test(value)) { + throw new Error(`${message}\nactual: ${value}\npattern: ${String(pattern)}`); + } +}; + const darkTheme = buildRedisWorkbenchTheme({ darkMode: true, opacity: 0.72, blur: 14, }); -assert.equal(darkTheme.isDark, true); -assert.match(darkTheme.panelBg, /^rgba\(/); -assert.match(darkTheme.toolbarPrimaryBg, /^linear-gradient\(/); -assert.notEqual(darkTheme.actionDangerBg, darkTheme.actionSecondaryBg); -assert.notEqual(darkTheme.treeSelectedBg, darkTheme.treeHoverBg); -assert.match(darkTheme.appBg, /rgba\(15, 15, 17,/); -assert.match(darkTheme.panelBg, /rgba\(24, 24, 28,/); -assert.match(darkTheme.panelBgStrong, /rgba\(31, 31, 36,/); -assert.equal(darkTheme.backdropFilter, 'blur(14px)'); +assertEqual(darkTheme.isDark, true, 'dark 主题标记应为 true'); +assertMatch(darkTheme.panelBg, /^rgba\(/, 'dark 主题面板背景应为 rgba'); +assertMatch(darkTheme.toolbarPrimaryBg, /^linear-gradient\(/, '工具栏主按钮应使用渐变背景'); +assertNotEqual(darkTheme.actionDangerBg, darkTheme.actionSecondaryBg, '危险态按钮背景不应与普通按钮相同'); +assertNotEqual(darkTheme.treeSelectedBg, darkTheme.treeHoverBg, '树节点选中态与悬浮态不应相同'); +assertMatch(darkTheme.appBg, /rgba\(15, 15, 17,/, 'dark 背景应保持中性黑基底'); +assertMatch(darkTheme.panelBg, /rgba\(24, 24, 28,/, 'dark 面板背景应保持中性黑灰'); +assertMatch(darkTheme.panelBgStrong, /rgba\(31, 31, 36,/, 'dark 强面板背景应保持中性黑灰'); +assertEqual(darkTheme.backdropFilter, 'blur(14px)', 'blur 参数应映射为 backdropFilter'); const lightTheme = buildRedisWorkbenchTheme({ darkMode: false, @@ -24,11 +40,11 @@ const lightTheme = buildRedisWorkbenchTheme({ blur: 0, }); -assert.equal(lightTheme.isDark, false); -assert.match(lightTheme.panelBg, /^rgba\(/); -assert.match(lightTheme.contentEmptyBg, /^linear-gradient\(/); -assert.notEqual(lightTheme.textPrimary, lightTheme.textSecondary); -assert.notEqual(lightTheme.statusTagBg, lightTheme.statusTagMutedBg); -assert.equal(lightTheme.backdropFilter, 'none'); +assertEqual(lightTheme.isDark, false, 'light 主题标记应为 false'); +assertMatch(lightTheme.panelBg, /^rgba\(/, 'light 主题面板背景应为 rgba'); +assertMatch(lightTheme.contentEmptyBg, /^linear-gradient\(/, 'light 空状态背景应为渐变'); +assertNotEqual(lightTheme.textPrimary, lightTheme.textSecondary, '主次文本颜色应区分'); +assertNotEqual(lightTheme.statusTagBg, lightTheme.statusTagMutedBg, '状态 tag 应区分普通与弱化样式'); +assertEqual(lightTheme.backdropFilter, 'none', 'blur=0 时 backdropFilter 应为 none'); console.log('redisViewerWorkbenchTheme tests passed'); diff --git a/frontend/src/utils/overlayWorkbenchTheme.test.ts b/frontend/src/utils/overlayWorkbenchTheme.test.ts index 1657759..2979180 100644 --- a/frontend/src/utils/overlayWorkbenchTheme.test.ts +++ b/frontend/src/utils/overlayWorkbenchTheme.test.ts @@ -1,17 +1,27 @@ -import { strict as assert } from 'node:assert'; - import { buildOverlayWorkbenchTheme } from './overlayWorkbenchTheme'; +const assertEqual = (actual: unknown, expected: unknown, message: string) => { + if (actual !== expected) { + throw new Error(`${message}\nactual: ${String(actual)}\nexpected: ${String(expected)}`); + } +}; + +const assertMatch = (value: string, pattern: RegExp, message: string) => { + if (!pattern.test(value)) { + throw new Error(`${message}\nactual: ${value}\npattern: ${String(pattern)}`); + } +}; + const darkTheme = buildOverlayWorkbenchTheme(true); -assert.equal(darkTheme.isDark, true); -assert.match(darkTheme.shellBg, /rgba\(15, 15, 17,/); -assert.match(darkTheme.sectionBg, /rgba\(255,?\s*255,?\s*255,?\s*0\.03\)/); -assert.equal(darkTheme.iconColor, '#ffd666'); +assertEqual(darkTheme.isDark, true, 'dark 主题标记应为 true'); +assertMatch(darkTheme.shellBg, /rgba\(15, 15, 17,/, 'dark 弹层背景应保持中性黑'); +assertMatch(darkTheme.sectionBg, /rgba\(255,?\s*255,?\s*255,?\s*0\.03\)/, 'dark section 背景透明度应匹配'); +assertEqual(darkTheme.iconColor, '#ffd666', 'dark 图标色应为金色强调'); const lightTheme = buildOverlayWorkbenchTheme(false); -assert.equal(lightTheme.isDark, false); -assert.match(lightTheme.shellBg, /rgba\(255,255,255,0\.98\)/); -assert.match(lightTheme.sectionBg, /rgba\(255,?\s*255,?\s*255,?\s*0\.84\)/); -assert.equal(lightTheme.iconColor, '#1677ff'); +assertEqual(lightTheme.isDark, false, 'light 主题标记应为 false'); +assertMatch(lightTheme.shellBg, /rgba\(255,255,255,0\.98\)/, 'light 弹层背景透明度应匹配'); +assertMatch(lightTheme.sectionBg, /rgba\(255,?\s*255,?\s*255,?\s*0\.84\)/, 'light section 背景透明度应匹配'); +assertEqual(lightTheme.iconColor, '#1677ff', 'light 图标色应为蓝色强调'); console.log('overlayWorkbenchTheme tests passed');