import React from 'react';
import { render } from '@testing-library/react';
import { expect } from 'chai';

import {
	HeadingH1,
	HeadingH2,
	HeadingH3,
	HeadingH4,
	HeadingH5,
	HeadingH6,
} from './heading.composition';

it('should render h1', () => {
	const { getByText } = render(<HeadingH1 />);
	const rendered = getByText('Title');

	expect(rendered.tagName).to.be.equal('H1');
});

it('should render h2', () => {
	const { getByText } = render(<HeadingH2 />);
	const rendered = getByText('Title');

	expect(rendered.tagName).to.be.equal('H2');
});

it('should render h3', () => {
	const { getByText } = render(<HeadingH3 />);
	const rendered = getByText('Title');

	expect(rendered.tagName).to.be.equal('H3');
});

it('should render h4', () => {
	const { getByText } = render(<HeadingH4 />);
	const rendered = getByText('Title');

	expect(rendered.tagName).to.be.equal('H4');
});

it('should render h5', () => {
	const { getByText } = render(<HeadingH5 />);
	const rendered = getByText('Title');

	expect(rendered.tagName).to.be.equal('H5');
});

it('should render h6', () => {
	const { getByText } = render(<HeadingH6 />);
	const rendered = getByText('Title');

	expect(rendered.tagName).to.be.equal('H6');
});