import React from 'react';
import { render, screen } from '@testing-library/react';
import { describe, test } from '@jest/globals';
import Heading from '../index';
import { HeadingVariant } from '../types';

describe('Heading', () => {
  test('рендерит children', () => {
    const children = 'Hello';
    render(<Heading>{children}</Heading>);

    const headingEl = screen.getByText(children);
    expect(headingEl).toBeInTheDocument();
  });

  test('может рендерится как h2, h3 и h4', () => {
    const { rerender } = render(<Heading variant={HeadingVariant.h2}>Hello</Heading>);

    let headingEl = screen.getByRole('heading', {
      level: 2
    });
    expect(headingEl).toBeInTheDocument();

    rerender(<Heading variant={HeadingVariant.h3}>Hello</Heading>);

    headingEl = screen.getByRole('heading', {
      level: 3
    });
    expect(headingEl).toBeInTheDocument();

    rerender(<Heading variant={HeadingVariant.h4}>Hello</Heading>);

    headingEl = screen.getByRole('heading', {
      level: 4
    });
    expect(headingEl).toBeInTheDocument();
  });
});