import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { MainNavLinkOptions } from '../../../types';
import { LogoutMenuItem } from '../logoutMenuItem';

const mockLogout = vi.fn();

vi.mock('@theorchard/suite-auth', () => ({
    useAuthClient: () => ({
        logout: mockLogout,
    }),
}));

describe('<LogoutMenuItem>', () => {
    const renderComponent = (props: MainNavLinkOptions, pathname = '/') =>
        render(<LogoutMenuItem {...props} />, {
            wrapper: ({ children }) => (
                <MemoryRouter initialEntries={[{ pathname }]}>{children}</MemoryRouter>
            ),
        });

    test('renders logout link', () => {
        const { getByText } = renderComponent({
            path: '/logout',
        });

        expect(getByText('Log Out')).toBeVisible();
    });

    test('renders passed navIcon', () => {
        const { getByTestId } = renderComponent({
            path: '/logout',
            navIcon: 'profile',
        });

        expect(getByTestId('ProfileNavIcon')).toBeVisible();
    });

    describe('on click', () => {
        beforeAll(() => {
            const { getByTestId } = renderComponent({
                path: '/logout',
            });
            const link = getByTestId('logout-button');
            fireEvent.click(link);
        });

        test('calls auth client logout', () => {
            expect(mockLogout).toHaveBeenCalledTimes(1);
        });
    });
});