src/app/components/MarkdownContent.test.tsx

import { renderToStaticMarkup } from 'react-dom/server';
import { describe, expect, it } from 'vitest';
import { codeThemeName, getCodeHighlighter, normalizeCodeLanguage } from '../../lib/code-highlighter';
import { MarkdownContent } from './MarkdownContent';

describe('MarkdownContent code blocks', () => {
  it('renders an incomplete streamed fence immediately with a stable language label', () => {
    const html = renderToStaticMarkup(
      <MarkdownContent
        content={'```ts\nconst answer: number = 42'}
        theme="dark"
        streaming
      />,
    );

    expect(html).toContain('data-language="typescript"');
    expect(html).toContain('data-code-complete="false"');
    expect(html).toContain('streaming');
    expect(html).toContain('const answer: number = 42');
  });

  it('marks a closed code fence complete and omits the streaming marker', () => {
    const html = renderToStaticMarkup(
      <MarkdownContent
        content={'```python\nprint("bonsai")\n```'}
        theme="light"
        streaming
      />,
    );

    expect(html).toContain('data-language="python"');
    expect(html).toContain('data-code-complete="true"');
    expect(html).not.toContain('code-stream-state');
  });

  it('loads curated grammars and falls back safely for unknown labels', async () => {
    expect(normalizeCodeLanguage('tsx')).toBe('tsx');
    expect(normalizeCodeLanguage('c++')).toBe('cpp');
    expect(normalizeCodeLanguage('unknown-future-lang')).toBe('text');
    expect(codeThemeName('dark')).toBe('github-dark');

    const highlighter = await getCodeHighlighter('typescript');
    expect(highlighter.getLoadedLanguages()).toContain('typescript');
    expect(highlighter.codeToTokens('const value = 1', {
      lang: 'typescript',
      theme: 'github-light',
    }).tokens[0]?.length).toBeGreaterThan(1);
  });
});