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

describe('MarkdownMessage', () => {
  it('renders bold text correctly', () => {
    const { container } = render(<MarkdownMessage content="Hello **bold**" />);
    const strong = container.querySelector('strong');
    expect(strong).toBeInTheDocument();
    expect(strong?.textContent).toBe('bold');
  });

  it('renders links correctly', () => {
    const { container } = render(<MarkdownMessage content="Visit [Google](https://google.com)" />);
    const link = container.querySelector('a');
    expect(link).toBeInTheDocument();
    expect(link).toHaveAttribute('href', 'https://google.com');
    expect(link?.textContent).toBe('Google');
  });

  it('renders h1 headers correctly', () => {
    const { container } = render(<MarkdownMessage content="# Header 1" />);
    console.log('H1 HTML Output:', container.innerHTML);
    expect(container.querySelector('h1')).toBeInTheDocument();
  });

  it('renders h2 headers correctly', () => {
    const { container } = render(<MarkdownMessage content="## Header 2" />);
    console.log('H2 HTML Output:', container.innerHTML);
    expect(container.querySelector('h2')).toBeInTheDocument();
  });
});