@asgard-js/react 0.0.40 → 0.0.41-canary.2

package/src/components/templates/text-template/use-react-markdown-renderer.spec.tsx

@@ -1,758 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { useMarkdownRenderer, manageCacheSize, MAX_CACHE_SIZE } from '../../../hooks/use-react-markdown-renderer';
-import { AsgardTemplateContextProvider } from '../../../context/asgard-template-context';
-
-describe('useMarkdownRenderer - Simple Tests', () => {
-  it('should return the expected interface', () => {
-    const { result } = renderHook(() => useMarkdownRenderer('# Test'));
-
-    expect(typeof result.current).toBe('object');
-    expect(result.current).toHaveProperty('htmlBlocks');
-    expect(result.current).toHaveProperty('lastTypingText');
-    expect(typeof result.current.lastTypingText).toBe('string');
-  });
-
-  it('should handle empty input', () => {
-    const { result } = renderHook(() => useMarkdownRenderer(''));
-
-    expect(result.current.htmlBlocks).toBeDefined();
-    expect(result.current.lastTypingText).toBe('');
-  });
-
-  it('should handle null input safely', () => {
-    const { result } = renderHook(() => useMarkdownRenderer(null));
-
-    expect(result.current.htmlBlocks).toBeDefined();
-    expect(result.current.lastTypingText).toBe('');
-  });
-
-  it('should detect complete paragraphs with periods', () => {
-    const { result } = renderHook(() => useMarkdownRenderer('Complete sentence.'));
-    expect(result.current.lastTypingText).toBe('');
-  });
-
-  it('should detect complete paragraphs with Chinese punctuation', () => {
-    const { result } = renderHook(() => useMarkdownRenderer('完整句子。'));
-    expect(result.current.lastTypingText).toBe('');
-  });
-
-  it('should detect complete paragraphs with exclamation marks', () => {
-    const { result } = renderHook(() => useMarkdownRenderer('Exciting!'));
-    expect(result.current.lastTypingText).toBe('');
-  });
-
-  it('should accept delay parameter', () => {
-    const { result } = renderHook(() => useMarkdownRenderer('# Test', 50));
-
-    expect(result.current).toBeDefined();
-    expect(result.current.htmlBlocks).toBeDefined();
-  });
-
-  it('should provide consistent results for same input', () => {
-    const text = '# Same Content';
-    const { result: result1 } = renderHook(() => useMarkdownRenderer(text));
-    const { result: result2 } = renderHook(() => useMarkdownRenderer(text));
-    
-    expect(result1.current.lastTypingText).toBe(result2.current.lastTypingText);
-  });
-});
-
-describe('header rendering', () => {
-  it('should render H1-H6 headers correctly', async () => {
-    const markdown = `
-# H1 Header
-## H2 Header  
-### H3 Header
-#### H4 Header
-##### H5 Header
-###### H6 Header
-`;
-    
-    const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('H1 Header');
-    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('H2 Header');
-    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('H3 Header');
-    expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('H4 Header');
-    expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent('H5 Header');
-    expect(screen.getByRole('heading', { level: 6 })).toHaveTextContent('H6 Header');
-  });
-});
-
-describe('text formatting', () => {
-  it('should render bold text', async () => {
-    const { result } = renderHook(() => useMarkdownRenderer('**bold text**', 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    expect(screen.getByText('bold text')).toHaveStyle('font-weight: bold');
-  });
-
-  it('should render italic text', async () => {
-    const { result } = renderHook(() => useMarkdownRenderer('*italic text*', 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    expect(screen.getByText('italic text')).toHaveStyle('font-style: italic');
-  });
-
-  it('should render inline code', async () => {
-    const { result } = renderHook(() => useMarkdownRenderer('`inline code`', 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    // Inline code (single backticks) should render as <code> element
-    const codeElement = screen.getByText('inline code');
-    expect(codeElement.tagName).toBe('CODE');
-  });
-
-  it('should handle mixed formatting', async () => {
-    const markdown = 'Text with **bold**, *italic*, and `code` formatting.';
-    const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    expect(screen.getByText('bold')).toHaveStyle('font-weight: bold');
-    expect(screen.getByText('italic')).toHaveStyle('font-style: italic');
-    // Inline code should render as <code> element
-    const codeElement = screen.getByText('code');
-    expect(codeElement.tagName).toBe('CODE');
-  });
-
-  it('should render code blocks with syntax highlighting', async () => {
-    const markdown = `
-\`\`\`javascript
-const hello = 'world';
-\`\`\`
-`;
-    const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    // Code blocks should have hljs class (react-markdown + rehype-highlight)
-    // Text is broken up by syntax highlighting spans, so check for code element
-    const codeElement = document.querySelector('code');
-    expect(codeElement).toHaveClass('hljs');
-    expect(codeElement).toHaveClass('language-javascript');
-    
-    // Verify the individual syntax-highlighted parts exist
-    expect(screen.getByText('const')).toBeInTheDocument();
-    expect(screen.getByText("'world'")).toBeInTheDocument();
-  });
-});
-
-describe('list rendering', () => {
-  it('should render unordered lists', async () => {
-    const markdown = `
-- Item 1
-- Item 2  
-- Item 3
-`;
-    const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    const list = screen.getByRole('list');
-    expect(list).toBeInTheDocument();
-    expect(screen.getAllByRole('listitem')).toHaveLength(3);
-  });
-
-  it('should render ordered lists', async () => {
-    const markdown = `
-1. First item
-2. Second item
-3. Third item
-`;
-    const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    const list = screen.getByRole('list');
-    expect(list.tagName).toBe('OL');
-    expect(screen.getAllByRole('listitem')).toHaveLength(3);
-  });
-
-  it('should render nested lists', async () => {
-    const markdown = `
-- Parent 1
-  - Child 1
-  - Child 2
-- Parent 2
-`;
-    const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    const lists = screen.getAllByRole('list');
-    expect(lists.length).toBeGreaterThan(1); // Parent and nested lists
-  });
-});
-
-describe('links and images', () => {
-  it('should render links correctly', async () => {
-    const { result } = renderHook(() => useMarkdownRenderer('[Example](https://example.com)', 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    const link = screen.getByRole('link', { name: 'Example' });
-    expect(link).toHaveAttribute('href', 'https://example.com');
-  });
-
-  it('should render images correctly', async () => {
-    const { result } = renderHook(() => useMarkdownRenderer('![Alt text](https://example.com/image.jpg)', 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    const image = screen.getByRole('img');
-    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg');
-    expect(image).toHaveAttribute('alt', 'Alt text');
-  });
-
-  it('should handle automatic links', async () => {
-    const { result } = renderHook(() => useMarkdownRenderer('Visit https://example.com for more info', 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    // Should auto-convert URL to link
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', 'https://example.com');
-  });
-});
-
-describe('blockquotes and horizontal rules', () => {
-  it('should render blockquotes', async () => {
-    const { result } = renderHook(() => useMarkdownRenderer('> This is a blockquote', 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    const blockquote = screen.getByText('This is a blockquote').closest('blockquote');
-    expect(blockquote).toBeInTheDocument();
-  });
-
-  it('should render horizontal rules', async () => {
-    const { result } = renderHook(() => useMarkdownRenderer('Content above\n\n---\n\nContent below', 0));
-    
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    render(<div>{result.current.htmlBlocks}</div>);
-    
-    const hr = document.querySelector('hr');
-    expect(hr).toBeInTheDocument();
-  });
-});
-
-describe('defaultLinkTarget integration', () => {
-  beforeEach(() => {
-    // Mock the safeWindowOpen function
-    vi.mock('../../../utils/uri-validation', () => ({
-      safeWindowOpen: vi.fn(),
-    }));
-  });
-
-  it('should handle link clicks with custom defaultLinkTarget', async () => {
-    const TestComponent = (): JSX.Element => {
-      const { htmlBlocks } = useMarkdownRenderer('[Google](https://google.com)', 0);
-
-      return <div>{htmlBlocks}</div>;
-    };
-
-    render(
-      <AsgardTemplateContextProvider defaultLinkTarget="_self">
-        <TestComponent />
-      </AsgardTemplateContextProvider>
-    );
-
-    // Wait for rendering to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    const link = screen.getByRole('link', { name: 'Google' });
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', 'https://google.com');
-
-    // Test that clicking the link calls safeWindowOpen with correct target
-    fireEvent.click(link);
-    
-    const { safeWindowOpen } = await import('../../../utils/uri-validation');
-    expect(safeWindowOpen).toHaveBeenCalledWith('https://google.com', '_self');
-  });
-});
-
-describe('math rendering - Phase 2 test specifications', () => {
-  describe('inline math expressions', () => {
-    it('should render simple inline math expressions', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('The famous equation is $E = mc^2$ in physics.', 0));
-      
-      // Wait for rendering to complete
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      // KaTeX generates .katex elements with proper math rendering
-      const katexElements = screen.getAllByText((content, element) => {
-        return element?.classList.contains('katex') || false;
-      });
-      expect(katexElements.length).toBeGreaterThan(0);
-      
-      // Verify the equation is properly rendered (text content should contain the math)
-      expect(screen.getByText(/The famous equation is/)).toBeInTheDocument();
-      expect(screen.getByText(/in physics/)).toBeInTheDocument();
-    });
-
-    it('should render complex inline math with fractions', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Quadratic formula: $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$.', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      // Should render without errors
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should handle Greek letters and symbols', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Greek letters: $\\alpha + \\beta + \\gamma = \\delta$.', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should handle inline math in lists', async () => {
-      const markdown = `- First: $f(x) = x^2$
-- Second: $g(x) = \\sin(x)$  
-- Third: $h(x) = e^x$`;
-      
-      const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      // Should render list with math
-      const listItems = screen.getAllByRole('listitem');
-      expect(listItems).toHaveLength(3);
-    });
-  });
-
-  describe('block math expressions', () => {
-    it('should render simple block math', async () => {
-      // Block math needs to be on separate lines for remark-math to recognize it
-      const blockMath = `
-$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$
-`;
-      const { result } = renderHook(() => useMarkdownRenderer(blockMath, 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      // Should contain math elements (either block or inline is fine)
-      const mathElements = document.querySelectorAll('.math, .katex');
-      expect(mathElements.length).toBeGreaterThan(0);
-    });
-
-    it('should render aligned equations', async () => {
-      const markdown = `$$\\begin{aligned}
-a &= b + c \\\\
-d &= e + f
-\\end{aligned}$$`;
-      
-      const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should render Maxwell equations', async () => {
-      const markdown = `$$\\begin{aligned}
-\\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} &= \\frac{4\\pi}{c}\\vec{\\mathbf{j}} \\\\
-\\nabla \\cdot \\vec{\\mathbf{E}} &= 4 \\pi \\rho \\\\
-\\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} &= \\vec{\\mathbf{0}} \\\\
-\\nabla \\cdot \\vec{\\mathbf{B}} &= 0
-\\end{aligned}$$`;
-      
-      const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should render matrix expressions', async () => {
-      const markdown = `$$\\begin{pmatrix}
-a & b \\\\
-c & d
-\\end{pmatrix}
-\\begin{pmatrix}
-x \\\\
-y
-\\end{pmatrix}
-=
-\\begin{pmatrix}
-ax + by \\\\
-cx + dy
-\\end{pmatrix}$$`;
-      
-      const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-  });
-
-  describe('mixed content with math', () => {
-    it('should handle markdown mixed with math', async () => {
-      const markdown = `# Math Section
-
-Here's some **bold text** and inline math: $x^2 + y^2 = z^2$.
-
-Block equation:
-$$a^2 + b^2 = c^2$$
-
-More text with \`code\` and another equation: $E = mc^2$.`;
-      
-      const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      // Should contain heading
-      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Math Section');
-      
-      // Should contain bold text
-      expect(screen.getByText('bold text')).toBeInTheDocument();
-      
-      // Should contain code element
-      expect(screen.getByText('code')).toBeInTheDocument();
-    });
-
-    it('should handle math in tables', async () => {
-      const markdown = `| Function | Formula |
-|----------|---------|
-| Linear   | $y = mx + b$ |
-| Quadratic | $y = ax^2 + bx + c$ |
-| Exponential | $y = e^x$ |`;
-      
-      const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      // Should render table
-      const table = document.querySelector('table');
-      expect(table).toBeInTheDocument();
-      
-      // Should be wrapped in table container (CSS modules generate hashed class names)
-      const tableContainer = document.querySelector('[class*="table_container"]');
-      expect(tableContainer).toBeInTheDocument();
-    });
-
-    it('should handle math in blockquotes', async () => {
-      const markdown = `> Einstein said: $E = mc^2$
-> 
-> This is the mass-energy equivalence.`;
-      
-      const { result } = renderHook(() => useMarkdownRenderer(markdown, 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      
-      const blockquote = document.querySelector('blockquote');
-      expect(blockquote).toBeInTheDocument();
-    });
-  });
-
-  describe('streaming with math expressions', () => {
-    it('should handle incomplete inline math expressions', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Incomplete math: $x = \\frac{1}{2', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Incomplete math should be in typing text, not rendered
-      expect(result.current.lastTypingText).toBe('Incomplete math: $x = \\frac{1}{2');
-      
-      // No complete blocks should be rendered
-      const container = result.current.htmlBlocks as React.ReactElement;
-      expect(container.props.children).toEqual([]);
-    });
-
-    it('should handle complete inline math expressions', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Complete math: $x = \\frac{1}{2}$.', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Complete math should be rendered
-      expect(result.current.lastTypingText).toBe('');
-      
-      render(<div>{result.current.htmlBlocks}</div>);
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should handle incomplete block math expressions', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Block math: $$\\int_{-\\infty}^{\\infty} e^{-x^2', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Incomplete block math should be in typing text
-      expect(result.current.lastTypingText).toBe('Block math: $$\\int_{-\\infty}^{\\infty} e^{-x^2');
-    });
-
-    it('should handle complete block math expressions', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx$$', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Complete block math should be rendered
-      expect(result.current.lastTypingText).toBe('');
-      render(<div>{result.current.htmlBlocks}</div>);
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should handle mixed complete and incomplete math', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('First: $a = b$. Second: $c = \\frac{d', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // The actual behavior is that the content is being rendered successfully
-      // This is because \frac{d without a closing brace isn't detected as math
-      expect(result.current.lastTypingText).toBe('');
-      
-      // Content should be rendered (the math gets processed by KaTeX)
-      const { container } = render(<div>{result.current.htmlBlocks}</div>);
-      expect(container.textContent).toContain('Second: $c = \\frac{d');
-    });
-  });
-
-  describe('error handling', () => {
-    it('should handle invalid math expressions gracefully', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Invalid math: $\\invalid{syntax$ should not crash', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Should not throw errors
-      expect(() => render(<div>{result.current.htmlBlocks}</div>)).not.toThrow();
-      
-      // Should render something (either error indicator or fallback)
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should handle unmatched dollar signs', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Text with single $ sign should work fine.', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Single $ followed by space and text is treated as incomplete 
-      // because it matches the pattern /\$(?:[a-zA-Z]|\\[a-zA-Z]+)[^$]*$/
-      // Actually, it shouldn't match because there's a space after $
-      // Let's accept the current behavior for now
-      expect(result.current.lastTypingText).toBe('Text with single $ sign should work fine.');
-    });
-
-    it('should handle empty math expressions', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Empty math: $$ should not break.', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      expect(() => render(<div>{result.current.htmlBlocks}</div>)).not.toThrow();
-    });
-
-    it('should handle malformed LaTeX syntax', async () => {
-      const { result } = renderHook(() => useMarkdownRenderer('Malformed: $\\frac{1$ incomplete fraction.', 0));
-      
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      expect(() => render(<div>{result.current.htmlBlocks}</div>)).not.toThrow();
-    });
-  });
-
-  describe('performance with math', () => {
-    it('should render simple math expressions quickly', async () => {
-      const startTime = performance.now();
-      
-      const { result } = renderHook(() => useMarkdownRenderer('Simple: $x^2 + y^2 = z^2$', 0));
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      const endTime = performance.now();
-      
-      // Should render within reasonable time
-      expect(endTime - startTime).toBeLessThan(200); // 200ms threshold
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should handle complex math expressions efficiently', async () => {
-      const complexMath = `$$\\begin{pmatrix}
-a_{11} & a_{12} & \\cdots & a_{1n} \\\\
-a_{21} & a_{22} & \\cdots & a_{2n} \\\\
-\\vdots & \\vdots & \\ddots & \\vdots \\\\
-a_{m1} & a_{m2} & \\cdots & a_{mn}
-\\end{pmatrix}$$`;
-
-      const startTime = performance.now();
-      
-      const { result } = renderHook(() => useMarkdownRenderer(complexMath, 0));
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      const endTime = performance.now();
-      
-      // Complex math should still render reasonably quickly
-      expect(endTime - startTime).toBeLessThan(300); // 300ms threshold
-      expect(result.current.htmlBlocks).toBeDefined();
-    });
-
-    it('should cache math expressions effectively', async () => {
-      const mathText = 'Cached math: $E = mc^2$';
-      
-      // First render
-      renderHook(() => useMarkdownRenderer(mathText, 0));
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Second render should be faster (cached)
-      const startTime = performance.now();
-      const { result: result2 } = renderHook(() => useMarkdownRenderer(mathText, 0));
-      await new Promise(resolve => setTimeout(resolve, 100));
-      const endTime = performance.now();
-      
-      // Should be fast due to caching
-      expect(endTime - startTime).toBeLessThan(150); // 150ms threshold for cached (increased for CI)
-      expect(result2.current.htmlBlocks).toBeDefined();
-    });
-  });
-
-  describe('cache size management', () => {
-    it('should respect MAX_CACHE_SIZE constant', () => {
-      expect(MAX_CACHE_SIZE).toBe(100);
-    });
-
-    it('should not evict entries when cache is below limit', () => {
-      const cache = new Map<string, string>();
-      cache.set('key1', 'value1');
-      cache.set('key2', 'value2');
-      
-      manageCacheSize(cache);
-      
-      expect(cache.size).toBe(2);
-      expect(cache.has('key1')).toBe(true);
-      expect(cache.has('key2')).toBe(true);
-    });
-
-    it('should evict oldest entry when cache reaches MAX_CACHE_SIZE', () => {
-      const cache = new Map<string, string>();
-      
-      // Fill cache to exactly MAX_CACHE_SIZE
-      for (let i = 0; i < MAX_CACHE_SIZE; i++) {
-        cache.set(`key${i}`, `value${i}`);
-      }
-      
-      expect(cache.size).toBe(MAX_CACHE_SIZE);
-      expect(cache.has('key0')).toBe(true);
-      
-      // Adding one more should trigger eviction
-      manageCacheSize(cache);
-      
-      expect(cache.size).toBe(MAX_CACHE_SIZE - 1);
-      expect(cache.has('key0')).toBe(false); // First entry should be evicted
-      expect(cache.has('key1')).toBe(true);  // Second entry should remain
-    });
-
-    it('should implement LRU eviction strategy correctly', () => {
-      const cache = new Map<string, string>();
-      
-      // Fill cache to MAX_CACHE_SIZE
-      for (let i = 0; i < MAX_CACHE_SIZE; i++) {
-        cache.set(`key${i}`, `value${i}`);
-      }
-      
-      // Access key0 to move it to the end (most recently used)
-      const value0 = cache.get('key0');
-      cache.delete('key0');
-      cache.set('key0', value0);
-      
-      // Now manageCacheSize should evict key1 (now the oldest)
-      manageCacheSize(cache);
-      
-      expect(cache.size).toBe(MAX_CACHE_SIZE - 1);
-      expect(cache.has('key0')).toBe(true);  // Should remain (most recently used)
-      expect(cache.has('key1')).toBe(false); // Should be evicted (oldest)
-      expect(cache.has('key2')).toBe(true);  // Should remain
-    });
-
-    it('should handle empty cache gracefully', () => {
-      const cache = new Map<string, string>();
-      
-      manageCacheSize(cache);
-      
-      expect(cache.size).toBe(0);
-    });
-
-    it('should handle cache with exactly MAX_CACHE_SIZE entries', () => {
-      const cache = new Map<string, string>();
-      
-      // Fill cache to exactly MAX_CACHE_SIZE
-      for (let i = 0; i < MAX_CACHE_SIZE; i++) {
-        cache.set(`key${i}`, `value${i}`);
-      }
-      
-      manageCacheSize(cache);
-      
-      // Should evict one entry
-      expect(cache.size).toBe(MAX_CACHE_SIZE - 1);
-      expect(cache.has('key0')).toBe(false);
-      expect(cache.has('key1')).toBe(true);
-    });
-  });
-});