import React from 'react';
import { screen } from '@testing-library/react';
import { RichText } from './index';
import { Breakpoint } from '../../tokens';
import { renderWithTheme } from '@lendi-ui/test-utils';

const textContent = (
  <>
    <h2 data-testid="heading">Heading</h2>
    <p data-testid="paragraph">Paragraph</p>
    <a data-testid="link" href="/">
      Link
    </a>
  </>
);

describe('RichText', () => {
  it('should render successfully', async () => {
    renderWithTheme(<RichText data-testid="RichTextComponent">{textContent}</RichText>);

    const richTextElem = screen.getByTestId('RichTextComponent');
    expect(richTextElem).toBeInTheDocument();
    expect(richTextElem).toMatchSnapshot();
    expect(richTextElem).toHaveStyleRule('font-size', '1rem');
  });

  it('should render larger body size', async () => {
    renderWithTheme(
      <RichText textSize="lg" data-testid="RichTextComponent">
        {textContent}
      </RichText>
    );

    const richTextElem = screen.getByTestId('RichTextComponent');
    expect(richTextElem).toMatchSnapshot();
    expect(richTextElem).toHaveStyleRule('font-size', '1.25rem', { media: `(min-width: ${Breakpoint.sm})` });
  });

  it('should only render styles for direct descendants', async () => {
    renderWithTheme(
      <RichText data-testid="RichTextComponent">
        <div>{textContent}</div>
      </RichText>
    );

    const headingElem = screen.getByTestId('heading');
    const paragraphElem = screen.getByTestId('paragraph');
    expect(paragraphElem).not.toHaveStyleRule('font-size', '1em');
    expect(paragraphElem).not.toHaveStyleRule('margin-top');
    expect(headingElem).not.toHaveStyleRule('margin-bottom');
    expect(headingElem).not.toHaveStyleRule('font-size');
  });
});