video-shuoshan/web/test/unit/designTokens.test.ts

import { describe, it, expect } from 'vitest';
import { readFileSync } from 'fs';
import { resolve } from 'path';

describe('Design Tokens (PRD Compliance)', () => {
  const cssContent = readFileSync(resolve(__dirname, '../../src/index.css'), 'utf-8');

  it('should define --color-bg-page as #0a0a0f', () => {
    expect(cssContent).toContain('--color-bg-page: #0a0a0f');
  });

  it('should define --color-bg-input-bar as #16161e', () => {
    expect(cssContent).toContain('--color-bg-input-bar: #16161e');
  });

  it('should define --color-border-input-bar as #2a2a38', () => {
    expect(cssContent).toContain('--color-border-input-bar: #2a2a38');
  });

  it('should define --color-primary as #00b8e6', () => {
    expect(cssContent).toContain('--color-primary: #00b8e6');
  });

  it('should define --color-text-secondary as #8a8a9a', () => {
    expect(cssContent).toContain('--color-text-secondary: #8a8a9a');
  });

  it('should define --color-btn-send-disabled as #3a3a4a', () => {
    expect(cssContent).toContain('--color-btn-send-disabled: #3a3a4a');
  });

  it('should define --color-btn-send-active as #00b8e6', () => {
    expect(cssContent).toContain('--color-btn-send-active: #00b8e6');
  });

  it('should define --radius-input-bar as 20px', () => {
    expect(cssContent).toContain('--radius-input-bar: 20px');
  });

  it('should define --radius-send-btn as 50%', () => {
    expect(cssContent).toContain('--radius-send-btn: 50%');
  });

  it('should define --input-bar-max-width as 900px', () => {
    expect(cssContent).toContain('--input-bar-max-width: 900px');
  });

  it('should define --send-btn-size as 36px', () => {
    expect(cssContent).toContain('--send-btn-size: 36px');
  });

  it('should define --thumbnail-size as 80px', () => {
    expect(cssContent).toContain('--thumbnail-size: 80px');
  });

  it('should define --toolbar-btn-height as 32px', () => {
    expect(cssContent).toContain('--toolbar-btn-height: 32px');
  });

  it('should define --radius-dropdown as 12px', () => {
    expect(cssContent).toContain('--radius-dropdown: 12px');
  });

  it('should set page background on body', () => {
    expect(cssContent).toContain('background: var(--color-bg-page)');
  });

  it('should set overflow hidden on html/body', () => {
    expect(cssContent).toContain('overflow: hidden');
  });
});

describe('InputBar CSS (PRD Compliance)', () => {
  const cssContent = readFileSync(resolve(__dirname, '../../src/components/InputBar.module.css'), 'utf-8');

  it('should use InputBar background token', () => {
    expect(cssContent).toContain('var(--color-bg-input-bar)');
  });

  it('should use InputBar border token', () => {
    expect(cssContent).toContain('var(--color-border-input-bar)');
  });

  it('should use InputBar border-radius token', () => {
    expect(cssContent).toContain('var(--radius-input-bar)');
  });

  it('should use max-width token', () => {
    expect(cssContent).toContain('var(--input-bar-max-width)');
  });

  it('should have responsive styles for tablet (768-1023px)', () => {
    expect(cssContent).toContain('max-width: 90%');
  });

  it('should have responsive styles for mobile (<768px)', () => {
    expect(cssContent).toContain('max-width: 95%');
  });
});

describe('Toolbar CSS (PRD Compliance)', () => {
  const cssContent = readFileSync(resolve(__dirname, '../../src/components/Toolbar.module.css'), 'utf-8');

  it('should use send button size token', () => {
    expect(cssContent).toContain('var(--send-btn-size)');
  });

  it('should have send button border-radius 50%', () => {
    expect(cssContent).toContain('border-radius: 50%');
  });

  it('should use disabled color for send button', () => {
    expect(cssContent).toContain('var(--color-btn-send-disabled)');
  });

  it('should use active color for send button', () => {
    expect(cssContent).toContain('var(--color-btn-send-active)');
  });

  it('should have mobile responsive rule hiding labels', () => {
    expect(cssContent).toContain('display: none');
  });
});

describe('Dropdown CSS (PRD Compliance)', () => {
  const cssContent = readFileSync(resolve(__dirname, '../../src/components/Dropdown.module.css'), 'utf-8');

  it('should use dropdown background token', () => {
    expect(cssContent).toContain('var(--color-bg-dropdown)');
  });

  it('should use dropdown border-radius token', () => {
    expect(cssContent).toContain('var(--radius-dropdown)');
  });

  it('should have fade/slide animation transition', () => {
    expect(cssContent).toContain('transition');
    expect(cssContent).toContain('opacity');
    expect(cssContent).toContain('transform');
  });
});