import { cleanup } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';
import { BrowserRouter } from 'react-router-dom';
import { ASSETS_URL } from '../../../consts/common';
import { InfoCardItem } from './info-card-item';

afterEach(cleanup);

const title = 'title';
const subtitle = 'subtitle';

describe('<InfoCardItem />', () => {
  it(`Should render InfoCardItem with subtitle`, () => {
    const { queryByText } = render(<InfoCardItem title={title} subtitle={subtitle} />);

    const titleEl = queryByText(title);
    expect(titleEl?.innerHTML).toBe(title);

    const subtitleEl = queryByText(subtitle);
    expect(subtitleEl?.innerHTML).toBe(subtitle);
  });

  it(`Should render InfoCardItem with link`, () => {
    const { container } = render(
      <BrowserRouter>
        <InfoCardItem title={title} subtitle={subtitle} href="#" />
      </BrowserRouter>
    );

    const linkEl = container.getElementsByTagName('a');
    expect(linkEl).toBeTruthy();
  });

  it(`Should render InfoCardItem with icons`, () => {
    const { container } = render(
      <InfoCardItem
        title={title}
        icons={[
          {
            src: `${ASSETS_URL}/icons/icon_clear.svg`
          }
        ]}
      />
    );

    const svgEl = container.getElementsByTagName('svg');
    expect(svgEl).toBeTruthy();
  });
});