import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { mockIdentity } from '../../../__mocks__';
import { MainNavFooterUserButton, Props } from '../mainNavFooterUserButton';

const mockImageLoad = () => {
    global.Image = class {
        onload: () => void;

        constructor() {
            this.onload = vi.fn();

            setTimeout(() => {
                this.onload();
            }, 1);
        }
    } as never;
};

vi.mock('@theorchard/suite-identity', () => ({
    useIdentity: () => mockIdentity,
}));

describe('<MainNavFooterUserMenu>', () => {
    const defaultProps: Props = {
        name: 'test user',
        picture: 'test.image.jpg',
    };

    const renderComponent = (props: Partial<Props> = {}) =>
        render(<MainNavFooterUserButton {...defaultProps} {...props} />, {
            wrapper: ({ children }) => <MemoryRouter>{children}</MemoryRouter>,
        });

    beforeAll(() => {
        mockImageLoad();
    });

    test('renders user name and picture', async () => {
        const { container, getByText } = renderComponent();

        await waitFor(() => {
            const image = container.querySelector('.UserThumb-image');
            expect(image?.getAttribute('src')).toEqual('test.image.jpg');
        });

        expect(getByText('test user')).toBeVisible();
    });

    test('renders placeholder text when theres no picture', () => {
        const { getByText } = renderComponent({ picture: undefined });
        const placeholder = getByText('TU');

        expect(placeholder).toBeInTheDocument();
    });
});