import React from 'react';
import { cleanup } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';
import CustomTooltip from './CustomTooltip';

afterEach(cleanup);

const payload = [
  {
    name: 'Information',
    value: 20,
    payload: {
      fill: '#FFC955'
    }
  }
];

const activeFalse = false;
const activeTrue = true;
const postfix = '%';

describe('<CustomTooltip />', () => {
  //   it(`Should render CustomTooltip with data`, () => {
  //     const { queryByText } = render(
  //       <CustomTooltip payload={payload} active={activeTrue} />
  //     );
  //     let elm = queryByText(payload[0].name);
  //     expect(elm?.innerHTML).toBe(payload[0].name);
  //     elm = queryByText(payload[0].value);
  //     expect(elm?.innerHTML).toBe(payload[0].value.toString());
  //   });
  it(`Should render CustomTooltip with a all data`, () => {
    const { queryByText } = render(
      <CustomTooltip payload={payload} active={activeTrue} tooltipPostfix={postfix} />
    );
    let elm = queryByText(payload[0].name);
    expect(elm?.innerHTML).toBe(payload[0].name);
    elm = queryByText(`${payload[0].value}${postfix}`);
    expect(elm?.innerHTML).toBe(`${payload[0].value}${postfix}`);
  });

  it(`Should not render CustomTooltip`, () => {
    const { container } = render(<CustomTooltip payload={payload} active={activeFalse} />);
    expect(container.firstChild).toBeNull();
  });
});