X-Financial/web/tests/sidebar-collapse.test.mjs

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

const appShell = readFileSync(
  fileURLToPath(new URL('../src/views/AppShellRouteView.vue', import.meta.url)),
  'utf8'
)

const sidebar = readFileSync(
  fileURLToPath(new URL('../src/components/layout/SidebarRail.vue', import.meta.url)),
  'utf8'
)

const sidebarStyles = readFileSync(
  fileURLToPath(new URL('../src/assets/styles/components/sidebar-rail.css', import.meta.url)),
  'utf8'
)

const appStyles = readFileSync(
  fileURLToPath(new URL('../src/assets/styles/app.css', import.meta.url)),
  'utf8'
)

test('sidebar supports smooth animated collapsed layout', () => {
  assert.match(appShell, /sidebarCollapsed = ref\(false\)/)
  assert.match(appShell, /'sidebar-collapsed': sidebarCollapsed/)
  assert.match(appShell, /'workbench-ai-sidebar-active': isAiShellMode/)
  assert.match(appShell, /:collapsed="sidebarCollapsed"/)
  assert.match(appShell, /class="app-sidebar"/)
  assert.match(appShell, /@toggle-collapse="toggleSidebarCollapsed"/)
  assert.match(appShell, /function toggleSidebarCollapsed\(\)/)
  assert.match(appShell, /sidebarCollapsed\.value = !sidebarCollapsed\.value/)

  assert.match(sidebar, /collapsed:\s*\{\s*type: Boolean/)
  assert.match(sidebar, /'toggle-collapse'/)
  assert.match(sidebar, /rail-collapsed/)
  assert.match(sidebar, /折叠侧边栏/)
  assert.match(sidebar, /展开侧边栏/)
  assert.match(sidebar, /class="user-actions"/)
  assert.match(sidebar, /class="user-action user-logout"/)
  assert.doesNotMatch(sidebar, /mdi-chevron-up/)
  assert.match(sidebarStyles, /--rail-motion-duration: 220ms/)
  assert.match(sidebarStyles, /opacity var\(--rail-fade-duration\)/)
  assert.match(sidebarStyles, /\.rail-user\s*\{[\s\S]*height:\s*72px;[\s\S]*grid-template-columns:\s*42px minmax\(0,\s*1fr\) 44px;/)
  assert.match(sidebarStyles, /\.user-actions\s*\{[\s\S]*grid-template-columns:\s*44px;/)

  assert.match(appStyles, /--sidebar-expanded-width:\s*304px/)
  assert.match(appStyles, /--sidebar-collapsed-width: 64px/)
  assert.match(appStyles, /\.app-sidebar\s*\{[^}]*transition:\s*width var\(--sidebar-motion\)/)
  assert.match(appStyles, /\.app\.sidebar-collapsed\s+\.app-sidebar\s*\{\s*width:\s*var\(--sidebar-collapsed-width\)/)
})