import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import { EVENT_HELP_CLICKED } from '../../../constants/events';
import Segment from '../../../segment';
import { IntercomButton, Props } from '../intercomButton';

describe('<IntercomButton>', () => {
    const renderComponent = (props: Partial<Props> = {}) => render(<IntercomButton {...props} />);

    beforeEach(() => {
        vi.spyOn(Segment, 'trackEvent').mockImplementation(vi.fn());
    });

    afterEach(() => {
        vi.restoreAllMocks();
    });

    test('renders component', () => {
        renderComponent();

        expect(screen.getByTestId('IntercomButton')).toBeVisible();
    });

    test('calls help action on click', () => {
        renderComponent();

        const button = screen.getByRole('button');
        fireEvent.click(button);

        expect(Segment.trackEvent).toHaveBeenCalledWith(EVENT_HELP_CLICKED);
    });

    test('renders old icon and text without prop asNavLink', () => {
        const { getByTestId, container } = renderComponent();

        expect(getByTestId('HelpNavIcon')).toBeVisible();
        expect(container.getElementsByClassName('NavLink-icon').item(0)).not.toBeInTheDocument();
        expect(container.getElementsByClassName('NavLink-title').item(0)).not.toBeInTheDocument();
        expect(screen.getByText('Help')).toBeVisible();
    });

    test('renders icon and text with prop asNavLink=true', () => {
        const { getByTestId, container } = renderComponent({ asNavLink: true });

        expect(getByTestId('HelpNavIcon')).toBeVisible();
        expect(container.getElementsByClassName('NavLink-icon').item(0)).toBeInTheDocument();
        expect(container.getElementsByClassName('NavLink-title').item(0)).toBeInTheDocument();
        expect(screen.getByText('Help')).toBeVisible();
    });
});