markdoc.test.tsx

import React from 'react';

import { render, screen } from '@testing-library/react';

import Markdown from '@/components/markdown/markdown';

// Mock the signal button to avoid needing full workflow context
jest.mock(
  '@/components/markdown/markdoc-components/signal-button/signal-button',
  () => {
    return function MockSignalButton({ label }: { label: string }) {
      return <button data-testid="signal-button">{label}</button>;
    };
  }
);

describe('Markdown with Markdoc', () => {
  it('renders basic markdown', () => {
    const content = '# Hello World\n\nThis is a test.';
    render(<Markdown markdown={content} />);

    expect(screen.getByText('Hello World')).toBeInTheDocument();
    expect(screen.getByText('This is a test.')).toBeInTheDocument();
  });

  it('renders signal button tags', () => {
    const content = `
# Test

{% signal signalName="test" label="Click Me" /%}
    `;
    render(<Markdown markdown={content} />);

    expect(screen.getByText('Test')).toBeInTheDocument();
    expect(screen.getByTestId('signal-button')).toBeInTheDocument();
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('renders multiple signal buttons', () => {
    const content = `
# Actions

{% signal signalName="approve" label="Approve" /%}
{% signal signalName="reject" label="Reject" /%}
    `;
    render(<Markdown markdown={content} />);

    const buttons = screen.getAllByTestId('signal-button');
    expect(buttons).toHaveLength(2);
    expect(screen.getByText('Approve')).toBeInTheDocument();
    expect(screen.getByText('Reject')).toBeInTheDocument();
  });

  it('renders markdown with mixed content', () => {
    const content = `
# Approval Required

Please review the following:

- Item 1
- Item 2
- Item 3

{% signal signalName="approve" label="Approve All" /%}
    `;
    render(<Markdown markdown={content} />);

    expect(screen.getByText('Approval Required')).toBeInTheDocument();
    expect(
      screen.getByText('Please review the following:')
    ).toBeInTheDocument();
    expect(screen.getByText('Item 1')).toBeInTheDocument();
    expect(screen.getByText('Approve All')).toBeInTheDocument();
  });

  it('renders code blocks', () => {
    const content = `
# Code Example

\`\`\`javascript
console.log('Hello');
\`\`\`
    `;
    render(<Markdown markdown={content} />);

    expect(screen.getByText('Code Example')).toBeInTheDocument();
    expect(screen.getByText("console.log('Hello');")).toBeInTheDocument();
  });

  it('renders inline code', () => {
    const content = 'Use the `signal` tag.';
    render(<Markdown markdown={content} />);

    expect(screen.getByText('signal')).toBeInTheDocument();
  });

  it('renders links', () => {
    const content = '[Click here](https://example.com)';
    render(<Markdown markdown={content} />);

    const link = screen.getByText('Click here');
    expect(link).toBeInTheDocument();
    expect(link.tagName).toBe('A');
  });

  it('renders lists', () => {
    const content = `
- First item
- Second item
- Third item
    `;
    render(<Markdown markdown={content} />);

    expect(screen.getByText('First item')).toBeInTheDocument();
    expect(screen.getByText('Second item')).toBeInTheDocument();
    expect(screen.getByText('Third item')).toBeInTheDocument();
  });

  it('renders emphasis and strong', () => {
    const content = '**Bold text** and *italic text*';
    render(<Markdown markdown={content} />);

    expect(screen.getByText('Bold text')).toBeInTheDocument();
    expect(screen.getByText('italic text')).toBeInTheDocument();
  });

  it('renders style tag with color', () => {
    const content = '{% style color="red" %}red text{% /style %}';
    render(<Markdown markdown={content} />);

    const styledEl = screen.getByText('red text');
    expect(styledEl).toBeInTheDocument();
    expect(styledEl).toHaveStyle({ color: 'red' });
  });

  it('renders style tag with background color', () => {
    const content = '{% style bg="yellow" %}highlighted text{% /style %}';
    render(<Markdown markdown={content} />);

    const styledEl = screen.getByText('highlighted text');
    expect(styledEl).toBeInTheDocument();
    expect(styledEl).toHaveStyle({ backgroundColor: 'yellow' });
  });

  it('renders style tag with both color and background', () => {
    const content =
      '{% style color="white" bg="blue" %}styled text{% /style %}';
    render(<Markdown markdown={content} />);

    const styledEl = screen.getByText('styled text');
    expect(styledEl).toBeInTheDocument();
    expect(styledEl).toHaveStyle({ color: 'white', backgroundColor: 'blue' });
  });

  it('renders nested style tags', () => {
    const content =
      '{% style color="blue" %}outer {% style color="red" %}inner{% /style %}{% /style %}';
    render(<Markdown markdown={content} />);

    const innerEl = screen.getByText('inner');
    expect(innerEl).toBeInTheDocument();
    expect(innerEl).toHaveStyle({ color: 'red' });
  });
});