import React from 'react';
import renderWithTheme from '../../../../testUtils/renderWithTheme';

import Typography from '../..';

const { Text } = Typography;

describe('rendering', () => {
  it('shows content', () => {
    const { getByText } = renderWithTheme(<Text>Content</Text>);
    expect(getByText('Content')).toBeInTheDocument();
  });
});

describe('with fontWeight', () => {
  it.each`
    fontWeight
    ${'regular'}
    ${'light'}
    ${'semi-bold'}
    ${'bold'}
  `('renders correctly with $fontWeight', ({ fontWeight }) => {
    const { container } = renderWithTheme(
      <Text fontWeight={fontWeight}>Content</Text>
    );
    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('with intent', () => {
  it.each`
    intent
    ${'main'}
    ${'body'}
    ${'subdued'}
    ${'primary'}
    ${'success'}
    ${'danger'}
    ${'warning'}
    ${'error'}
    ${'white'}
  `('renders correctly with $intent', ({ intent }) => {
    const { container } = renderWithTheme(<Text intent={intent}>Content</Text>);
    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('with fontSize', () => {
  it.each`
    fontSize
    ${10}
    ${12}
    ${14}
    ${16}
  `('renders correctly with $fontSize', ({ fontSize }) => {
    const { container } = renderWithTheme(
      <Text fontSize={fontSize}>Content</Text>
    );
    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('with tagName', () => {
  it.each`
    tagName    | renderedAs
    ${'div'}   | ${'div'}
    ${'p'}     | ${'p'}
    ${'span'}  | ${'span'}
    ${'label'} | ${'label'}
  `('renders correctly with $tagName', ({ tagName, renderedAs }) => {
    const { container } = renderWithTheme(
      <Text tagName={tagName}>Content</Text>
    );
    expect(container.querySelector(renderedAs)).toBeDefined();
  });
});

describe('nested typography', () => {
  it('applies correct styling on nested element', () => {
    const { container } = renderWithTheme(
      <Text tagName="div">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
        <a href="/page">A url</a>
      </Text>
    );
    expect(container.firstChild).toMatchSnapshot();
  });
});