import React from 'react';
import { MockedProvider } from '@apollo/client/testing';
import { act, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import Hls from 'hls.js';
import trackAudio from 'src/data/queries/trackAudio/TrackAudio.gql';
import { ProductTrackAudioPlayer, Props } from '../productTrackAudioPlayer';

describe('<ProductTrackAudioPlayer />', () => {
    jest.spyOn(Hls, 'isSupported').mockReturnValue(true);
    const attachMediaSpy = jest.spyOn(Hls.prototype, 'attachMedia');

    const mockProviderRequests = [
        {
            request: {
                query: trackAudio,
                variables: {
                    tuid: '123456',
                    isCorrection: true,
                },
            },
            result: {
                data: {
                    track: {
                        tuid: '123456',
                        streamingAudioUrl: 'https://example.com',
                    },
                },
            },
        },
    ];

    const baseProps = {
        tuid: '123456',
        hls: null,
        setHls: jest.fn(),
        onPlay: jest.fn(),
        onEnded: jest.fn(),
    };

    const renderComponent = async (props: Props) => {
        renderInAppContext(
            <MockedProvider mocks={mockProviderRequests}>
                <ProductTrackAudioPlayer {...props} />
            </MockedProvider>
        );
        return await act(
            async () => await new Promise(resolve => setTimeout(resolve, 0))
        );
    };

    test('renders audio player with data', async () => {
        await renderComponent(baseProps);
        expect(
            screen.getByTestId('product-track-123456-audio-player')
        ).toBeTruthy();
        expect(baseProps.setHls).toHaveBeenCalled();
    });

    test('loads hls audio', async () => {
        await renderComponent({ ...baseProps, hls: new Hls() });
        expect(baseProps.setHls).toHaveBeenCalled();
        expect(attachMediaSpy).toHaveBeenCalled();
    });
});