X-Financial/web/tests/topbar-ai-mode-switch.test.mjs

import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import test from 'node:test'
import { fileURLToPath } from 'node:url'

const topbar = readFileSync(
  fileURLToPath(new URL('../src/components/layout/TopBar.vue', import.meta.url)),
  'utf8'
)
const topbarStyles = readFileSync(
  fileURLToPath(new URL('../src/assets/styles/components/top-bar.css', import.meta.url)),
  'utf8'
)

test('workbench topbar places the colorful AI mode button after the company switcher', () => {
  assert.match(topbar, /<button class="company-switcher"[\s\S]*aria-label="切换公司"[\s\S]*<\/button>\s*<button[\s\S]*class="topbar-ai-mode-toggle"/)
  assert.match(topbar, /class="topbar-ai-mode-toggle__glyph">AI<\/span>/)
  assert.match(topbar, /@click="toggleTopbarWorkbenchMode"/)
  assert.match(topbar, /:aria-pressed="isTopbarAiMode"/)
  assert.match(topbar, /:title="topbarWorkbenchModeTitle"/)
  assert.match(topbar, /workbenchMode:\s*\{[\s\S]*type:\s*String,[\s\S]*default:\s*'traditional'/)
  assert.doesNotMatch(topbar, /const topbarWorkbenchMode = ref/)
  assert.match(topbar, /const isTopbarAiMode = computed\(\(\) => props\.workbenchMode === 'ai'\)/)
  assert.match(topbar, /const topbarWorkbenchModeTitle = computed/)
  assert.match(topbar, /function toggleTopbarWorkbenchMode\(\)/)
  assert.match(topbar, /emit\('toggleWorkbenchMode'\)/)
})

test('AI mode business pages do not append company or AI buttons to the right side', () => {
  assert.equal((topbar.match(/class="company-switcher"/g) || []).length, 1)
  assert.equal((topbar.match(/class="topbar-ai-mode-toggle"/g) || []).length, 1)
  assert.doesNotMatch(topbar, /showAiModeUtilityActions/)
  assert.doesNotMatch(topbar, /class="topbar-utility-actions"/)
})

test('topbar AI mode button keeps a circular colorful text treatment', () => {
  assert.match(topbarStyles, /\.topbar-ai-mode-toggle\s*\{[\s\S]*width:\s*38px;[\s\S]*height:\s*38px;[\s\S]*border-radius:\s*50%;/)
  assert.match(topbarStyles, /\.topbar-ai-mode-toggle\s*\{[\s\S]*conic-gradient\(from 210deg,[\s\S]*border-box;/)
  assert.match(topbarStyles, /\.topbar-ai-mode-toggle__glyph\s*\{[\s\S]*linear-gradient\(135deg,[\s\S]*background-clip:\s*text;[\s\S]*letter-spacing:\s*0;/)
  assert.match(topbarStyles, /\.topbar-ai-mode-toggle:hover,[\s\S]*\.topbar-ai-mode-toggle:focus-visible\s*\{[\s\S]*transform:\s*translateY\(-1px\);/)
  assert.doesNotMatch(topbarStyles, /\.topbar-utility-actions/)
  assert.match(topbarStyles, /@media \(max-width: 960px\)[\s\S]*\.topbar-ai-mode-toggle\s*\{[\s\S]*width:\s*34px;[\s\S]*height:\s*34px;/)
  assert.match(topbarStyles, /@media \(max-width: 640px\)[\s\S]*\.topbar-ai-mode-toggle\s*\{[\s\S]*flex:\s*0 0 34px;/)
})