import { act, fireEvent } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';

import BillingOption from './billing-option';

describe('<BillingOption />', () => {
  it('should render label text', () => {
    const text = 'Label';
    const { getByTestId } = render(<BillingOption label={text} checked={false} />);
    expect(getByTestId('radioFormWrapper').lastChild?.textContent).toEqual(text);
  });

  it('should render active style successfully', () => {
    const { baseElement } = render(<BillingOption label="text" checked={false} />);
    expect(baseElement).toMatchSnapshot();
  });

  it('should render active style successfully', () => {
    const { baseElement } = render(<BillingOption label="text" checked={true} />);
    expect(baseElement).toMatchSnapshot();
  });

  it('should render badge text', () => {
    const badgeLabel = 'badgeLabel';
    const { getByTestId } = render(
      <BillingOption badgeLabel={badgeLabel} label="text" checked={true} />
    );
    expect(getByTestId('coloredTextWithBG').textContent).toEqual(badgeLabel);
  });

  it('should fire a callback with the new state when clicking on radio', () => {
    const onClickMock = jest.fn();
    const { baseElement, getByTestId } = render(
      <BillingOption label="text" checked={false} onClick={onClickMock} />
    );
    const radioButton = getByTestId('radioFormWrapper');
    act(() => {
      fireEvent.click(radioButton);
    });
    expect(onClickMock).toHaveBeenCalled();
  });
});