cloud-drive-renamer/tests/unit/panel-layout-density.test.ts
Zain ba5bcd740b refactor: 移除冗余的 dialog 实现并优化面板布局密度
- 删除 src/dialog 目录及其相关资源引用
- 压缩多个面板组件的头部和内边距以提升空间利用率
- 在 ConfigPanel 中添加手风琴式规则面板及预设选项卡状态管理
- 调整预览面板的失败导航显示,移除重复计数元素
2026-08-08 09:51:18 +08:00

72 行
4.0 KiB
TypeScript

import { describe, expect, it } from 'vitest';
import { ConfigPanel } from '../../src/content/components/config-panel';
import { FileListPanel } from '../../src/content/components/file-list-panel';
import { FileSelectorPanel } from '../../src/content/components/file-selector-panel';
import { PreviewPanel } from '../../src/content/components/preview-panel';
import { SearchBox } from '../../src/content/components/search-box';
import { Toolbar } from '../../src/content/components/toolbar';
function cssRule(cssText: string, selector: string, nextSelector: string): string {
const start = cssText.indexOf(selector);
const end = cssText.indexOf(nextSelector, start + selector.length);
return cssText.slice(start, end);
}
describe('panel layout density', () => {
it('uses compact modal and column headers', () => {
const selectorCss = FileSelectorPanel.styles.cssText;
const configCss = ConfigPanel.styles.cssText;
const fileListCss = FileListPanel.styles.cssText;
const previewCss = PreviewPanel.styles.cssText;
expect(cssRule(selectorCss, '.panel-header {', '.panel-title')).toContain('padding: 12px 20px;');
expect(cssRule(selectorCss, '.panel-header {', '.panel-title')).not.toContain('padding: 20px 24px;');
expect(cssRule(configCss, '.panel-header {', '.panel-title')).toContain('padding: 12px 16px;');
expect(cssRule(fileListCss, '.panel-header {', '.panel-title')).toContain('padding: 12px 16px;');
expect(cssRule(previewCss, '.panel-header {', '.panel-title')).toContain('padding: 12px 16px;');
expect(cssRule(previewCss, '.panel-title {', '.conflict-warning')).toContain('margin: 0;');
});
it('tightens the top controls and config body spacing', () => {
const configCss = ConfigPanel.styles.cssText;
const fileListCss = FileListPanel.styles.cssText;
const previewCss = PreviewPanel.styles.cssText;
const searchCss = SearchBox.styles.cssText;
const toolbarCss = Toolbar.styles.cssText;
expect(cssRule(configCss, '.panel-body {', '.panel-footer')).toContain('padding: 12px 14px 32px;');
expect(cssRule(configCss, '.rule-panels {', '.rule-panel-list')).toContain('margin-bottom: 10px;');
expect(cssRule(configCss, '.preset-toolbar {', '.preset-tablist')).toContain('margin: -12px -14px 8px;');
expect(cssRule(configCss, '.form-group {', '.form-label')).toContain('margin-bottom: 12px;');
expect(cssRule(fileListCss, '.search-container {', '.list-container')).toContain('padding: 8px 16px;');
expect(cssRule(toolbarCss, '.toolbar {', '.toolbar-left')).toContain('padding: 8px 16px;');
expect(cssRule(searchCss, '.search-box {', '.search-box:focus-within')).toContain('padding: 6px 10px;');
expect(cssRule(previewCss, '.panel-stats {', '.stat-item')).toContain('padding: 8px 16px;');
expect(cssRule(previewCss, '.failure-nav {', '.failure-nav-summary')).toContain('height: 48px;');
expect(cssRule(previewCss, '.failure-nav {', '.failure-nav-summary')).toContain('box-sizing: border-box;');
});
it('keeps the second control row equal-height across all columns', () => {
const configCss = ConfigPanel.styles.cssText;
const fileListCss = FileListPanel.styles.cssText;
const previewCss = PreviewPanel.styles.cssText;
const configToolbarRule = cssRule(configCss, '.preset-toolbar {', '.preset-tablist');
const searchContainerRule = cssRule(fileListCss, '.search-container {', '.list-container');
const previewStatsRule = cssRule(previewCss, '.panel-stats {', '.stat-item');
for (const rule of [configToolbarRule, searchContainerRule, previewStatsRule]) {
expect(rule).toContain('height: 48px;');
expect(rule).toContain('box-sizing: border-box;');
expect(rule).toContain('border-bottom: 1px solid var(--cdr-border');
}
expect(configToolbarRule).toContain('border-top: 1px solid var(--cdr-border');
expect(configToolbarRule).toContain('border-right: 1px solid var(--cdr-border');
expect(configToolbarRule).toContain('border-left: 1px solid var(--cdr-border');
});
});