import * as apollo from '@apollo/client';
import { render, screen } from '@testing-library/react';
import { ToastProvider } from '@theorchard/suite-frontend';
import React from 'react';
import AddFingerprintRestriction from 'src/components/addFingerprintRestriction';
import { GetProductTracksDocument } from 'src/data/queries/productTracks/__generated__/productTracks';

describe('<AddFingerprintRestriction>', () => {
    const useQuerySpy = jest.spyOn(apollo, 'useQuery').mockImplementation(
        () =>
            ({
                loading: true,
                data: undefined,
            }) as apollo.QueryResult<unknown, apollo.OperationVariables>
    );
    jest.spyOn(apollo, 'useMutation').mockImplementation(() => [
        jest.fn(),
        {} as apollo.MutationResult,
    ]);

    const defaultProps = {
        productId: '123',
        isOpen: true,
        onClose: jest.fn(),
        onRulesUpdated: jest.fn(),
    };

    const renderWrapper = () =>
        render(
            <ToastProvider>
                <AddFingerprintRestriction {...defaultProps} />
            </ToastProvider>
        );

    test('renders sidecar', async () => {
        renderWrapper();

        expect(useQuerySpy).toHaveBeenCalledWith(GetProductTracksDocument, {
            variables: { productId: '123' },
        });

        const sidecar = await screen.findByTestId('sidecar');
        const trackDropdown = await screen.findByTestId('track-dropdown');
        const countryDropdown = await screen.findByTestId('country-dropdown');
        const servicesDropdown = await screen.findByTestId('services-dropdown');

        expect(sidecar).toBeTruthy();
        expect(trackDropdown).toBeTruthy();
        expect(countryDropdown).toBeTruthy();
        expect(servicesDropdown).toBeTruthy();
    });
});