Genarrative/apps/ai-game-creator-shell/tests/AgentMessageContent.test.tsx

// @vitest-environment jsdom

import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';

import { render } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

import { AgentMessageContent } from '../../../packages/shared/src/components/AgentMessageContent';
import { ChatMarkdownMessage } from '../src/components/ChatMarkdownMessage';
import {
  declaration,
  parseStyleSheet,
  resolveDeclarations,
} from './styleCascade';

const sharedCss = readFileSync(
  resolve(
    process.cwd(),
    'packages/shared/src/components/AgentMessageContent.css',
  ),
  'utf8',
);
const appCss = readFileSync(
  resolve(process.cwd(), 'apps/ai-game-creator-shell/src/styles.css'),
  'utf8',
);
const base = '.agent-message-content[data-agent-content]';
const processTone = ".agent-message-content[data-agent-content='process']";

describe('AgentMessageContent', () => {
  it('正文与过程复用表现组件，保留折叠语义和宿主属性', () => {
    const { container } = render(
      <>
        <AgentMessageContent>最终回复</AgentMessageContent>
        <AgentMessageContent as="details" tone="process" aria-label="思考过程">
          <summary>思考过程</summary>
          <pre>先分析需求</pre>
        </AgentMessageContent>
      </>,
    );
    expect(
      container.querySelector('[data-agent-content="body"]')?.textContent,
    ).toBe('最终回复');
    const details = container.querySelector('details')!;
    expect(details.getAttribute('data-agent-content')).toBe('process');
    expect(details.getAttribute('aria-label')).toBe('思考过程');
    expect(details.open).toBe(false);
  });

  it('过程的标题和表格继承层级变量，不用强制字号压回正文大小', () => {
    const { container } = render(
      <AgentMessageContent tone="process">
        <ChatMarkdownMessage
          role="assistant"
          text={
            '# 分析\n\n| 项目 |\n| --- |\n| 内容 |\n\n```js\nconst value = 1;\n```'
          }
        />
      </AgentMessageContent>,
    );
    expect(container.querySelector('h1')?.getAttribute('style')).toContain(
      '--agent-message-heading-size',
    );
    expect(container.querySelector('table')?.getAttribute('style')).toContain(
      '--agent-message-table-size',
    );
    expect(container.querySelector('pre code .hljs-keyword')).not.toBeNull();
  });

  it.each([sharedCss + appCss, appCss + sharedCss])(
    '共享层级不受宿主 CSS 加载顺序影响',
    (css) => {
      const rules = parseStyleSheet(css);
      const body = resolveDeclarations(rules, [base], 1024);
      expect(declaration(body, 'font-size')).toBe('14px');
      expect(declaration(body, 'color')).toContain('--platform-text-strong');
      for (const host of [
        ['.design-agent-reasoning'],
        ['.agent-tool-call-group'],
        [
          '.project-supervisor-process-card',
          '.game-workbench-chat .project-supervisor-process-card',
          '.game-workbench-chat .project-supervisor-surface.is-direct-codex .project-supervisor-conversation > .project-supervisor-process-card',
        ],
      ]) {
        const process = resolveDeclarations(
          rules,
          [base, processTone, ...host],
          1024,
        );
        expect(declaration(process, 'font-size')).toBe('12px');
        expect(declaration(process, 'color')).toContain('--platform-text-soft');
        expect(declaration(process, '--agent-message-heading-size')).toBe(
          '1em',
        );
      }
      const failure = resolveDeclarations(
        rules,
        [
          '.agent-tool-call-row-status',
          ".agent-tool-call-group-row[data-status='failed'] .agent-tool-call-row-status",
        ],
        1024,
      );
      expect(declaration(failure, 'color')).toBe(
        'var(--platform-button-danger-text)',
      );
    },
  );
});