MindSift/frontend/src/lib/__tests__/markdown.test.tsx

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

describe('renderInlineMarkdown', () => {
  it('renders bold text with <strong> tag', () => {
    const { container } = render(<div>{renderInlineMarkdown('Text mit **fettem** Wort')}</div>);
    const strong = container.querySelector('strong');
    expect(strong).toBeTruthy();
    expect(strong?.textContent).toBe('fettem');
  });

  it('renders inline code inside bold text', () => {
    const { container } = render(<div>{renderInlineMarkdown('Der Block **`services`** startet')}</div>);
    const code = container.querySelector('strong code');
    expect(code?.textContent).toBe('services');
    expect(container.textContent).toBe('Der Block services startet');
  });

  it('renders italic text with <em> tag', () => {
    const { container } = render(<div>{renderInlineMarkdown('Text mit *kursivem* Wort')}</div>);
    const em = container.querySelector('em');
    expect(em).toBeTruthy();
    expect(em?.textContent).toBe('kursivem');
  });

  it('renders both bold and italic text in one paragraph', () => {
    const { container } = render(<div>{renderInlineMarkdown('Hier ist **fett** und *kursiv* vereint')}</div>);
    const strong = container.querySelector('strong');
    const em = container.querySelector('em');
    expect(strong?.textContent).toBe('fett');
    expect(em?.textContent).toBe('kursiv');
  });

  it('renders links correctly', () => {
    const { container } = render(<div>{renderInlineMarkdown('[Testseite](https://example.com)')}</div>);
    const link = container.querySelector('a');
    expect(link).toBeTruthy();
    expect(link?.getAttribute('href')).toBe('https://example.com/');
    expect(link?.textContent).toBe('Testseite');
  });
});