import React from 'react';
import { render } from '~/testUtils/helpers';
import { Heading, HeadingProps } from '..';
import { theme } from '~/index';

describe('<Heading />', () => {
  it('matches a snapshot', () => {
    const {
      container: { children },
    } = render(<Heading variant="h5" />);

    const heading5El = children[0];

    expect(heading5El).toMatchSnapshot();
  });

  it('has correct lineHeight style for each variant', () => {
    for (const headingVariant in theme.headings) {
      const {
        container: { children },
      } = render(
        <Heading variant={headingVariant as HeadingProps['variant']} />
      );

      const lineHeight = (
        theme.headings[headingVariant as HeadingProps['variant']].lineHeight ||
        theme.lineHeights.normal
      ).toString();

      const headingEl = children[0];

      expect(headingEl).toHaveStyleRule('line-height', lineHeight);
    }
  });
});
