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

import Typography from '../..';

const { Title } = Typography;

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

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

describe('with intent', () => {
  it.each`
    intent
    ${'main'}
    ${'subdued'}
  `('renders correctly with $intent', ({ intent }) => {
    const { container } = renderWithTheme(
      <Title intent={intent}>Content</Title>
    );
    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('with level', () => {
  it.each`
    level
    ${undefined}
    ${1}
    ${2}
    ${3}
    ${4}
    ${5}
  `('renders correctly with $level', ({ level }) => {
    const { container } = renderWithTheme(<Title level={level}>Content</Title>);
    expect(container.firstChild).toMatchSnapshot();
  });
});