import { Typography } from '../common';
import { render, screen } from '../test-utils';

import Title from '.';

describe('Title', () => {
  it('testing default state', () => {
    render(<Title>Test</Title>);
    const copy = screen.getByText('Test');
    expect(copy).toBeInTheDocument();
    expect(copy.tagName).toBe('H5');
    expect(copy).toHaveClass(`np-text-${Typography.TITLE_GROUP}`);
  });

  it('enforces tag via `as` prop', () => {
    render(<Title as="span">Test</Title>);
    const copy = screen.getByText('Test');
    expect(copy).toBeInTheDocument();
    expect(copy.tagName).toBe('SPAN');
    expect(copy).toHaveClass(`np-text-${Typography.TITLE_GROUP}`);
  });

  it('supports native HTML attrs', () => {
    render(
      <Title id="test-id" role="banner">
        Test
      </Title>,
    );
    const copy = screen.getByText('Test');
    expect(copy).toBeInTheDocument();
    expect(copy).toHaveAttribute('id', 'test-id');
    expect(copy).toHaveAttribute('role', 'banner');
  });

  it('handles unsupported typography type', () => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    render(<Title type={Typography.BODY_LARGE_BOLD}>Test</Title>);
    const copy = screen.getByText('Test');
    expect(copy).toBeInTheDocument();
    expect(copy.tagName).toBe('H5');
    expect(copy).toHaveClass(`np-text-${Typography.TITLE_GROUP}`);
  });
});