import { cleanup } from '@testing-library/react';
import { _palette } from '../@styles/theme-provider';
import { render } from '../../utils/theme-render-wrapper';
import { TextWithBG } from './text-with-bg';

afterEach(cleanup);

const content = 'content';
const tooltipText = 'tooltipText';

describe('<TextWithBG />', () => {
  it(`should render successfully`, () => {
    const { baseElement } = render(<TextWithBG />);
    expect(baseElement).toBeTruthy();
  });

  it(`should render custom color tags`, () => {
    const { baseElement } = render(
      <>
        <TextWithBG backgroundColor={_palette.secondary[500]} />
        <TextWithBG backgroundColor={_palette.success[200]} color={_palette.success[500]} />
        <TextWithBG color={_palette.primary[500]} />
      </>
    );
    expect(baseElement).toBeTruthy();
  });

  it(`should render with different severities`, () => {
    const { baseElement } = render(
      <>
        <TextWithBG children={content} severity="error" />
        <TextWithBG children={content} severity="info" />
        <TextWithBG children={content} severity="success" />
        <TextWithBG children={content} severity="warning" />
      </>
    );
    expect(baseElement).toBeTruthy();
  });

  it(`should render with content and tooltip`, () => {
    const { queryByText } = render(<TextWithBG children={content} tooltipText={tooltipText} />);
    const elm = queryByText(content);
    expect(elm?.innerHTML).toBe(content);
  });
});