import React from 'react';
import { render } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import * as reactImage from 'react-image';
import { Image, ImageProps } from '../image';

describe('<Image>', () => {
    const defaultProps: ImageProps = {
        // alt?: string;
        // className?: string;
        placeholder: <span>Im a humble placeholder</span>,
        src: 'https://placehold.co/64.png',
        // useSuspense?: boolean;
    };

    beforeAll(() => {
        vi.spyOn(reactImage, 'useImage').mockReturnValue({
            src: 'https://placehold.co/64.png',
            isLoading: false,
            error: undefined,
        });
    });

    const renderComponent = (props: Partial<ImageProps> = {}) =>
        render(<Image {...{ ...defaultProps, ...props }} />);

    // !!! This util is duplicated in suite-components/test-utils->testComponent
    // ??? May we unify on suite-testing ???
    testComponent(Image, defaultProps);

    test('renders the image when image is loaded', () => {
        const { getByRole } = renderComponent();

        const imgEl = getByRole('img');
        expect(imgEl).toBeVisible();
        expect(imgEl).toHaveProperty('src', 'https://placehold.co/64.png');
    });

    test('renders the placeholder while the image is loading', () => {
        vi.spyOn(reactImage, 'useImage').mockReturnValue({
            src: '',
            isLoading: true,
            error: undefined,
        });

        const { getByText } = renderComponent();
        expect(getByText('Im a humble placeholder')).toBeVisible();
    });

    test('renders the placeholder if theres a loading error', () => {
        vi.spyOn(reactImage, 'useImage').mockReturnValue({
            src: '',
            isLoading: false,
            error: Error('Could not be loaded'),
        });

        const { getByText } = renderComponent();
        expect(getByText('Im a humble placeholder')).toBeVisible();
    });
});