import React from 'react';
import { waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { testContribution } from 'lib/mockNrContributionsData';
import { testNrSoundRec as song } from 'lib/mockNrSoundRecData';
import * as contributionsQuery from 'src/data/queries/contributions/contributions';
import * as songByIdQuery from 'src/data/queries/nrSoundRecordingById/nrSoundRecordingById';
import SongPage, { CLASSNAME } from '../songPage';

describe('<SongPage>', () => {
    const renderPage = () => renderInAppContext(<SongPage />);

    const contributions = {
        totalCount: 1,
        items: [testContribution],
    };

    beforeEach(() => {
        jest.spyOn(
            songByIdQuery,
            'useNrSoundRecordingByIdQuery'
        ).mockReturnValue({
            data: song,
            contributions: [],
            loading: false,
            error: undefined,
        });
        jest.spyOn(
            contributionsQuery,
            'useGetContributionsQuery'
        ).mockReturnValue({
            data: contributions,
            loading: false,
            error: undefined,
            fetchMore: jest.fn(),
            fetchingMore: false,
        });
    });

    afterEach(() => {
        jest.restoreAllMocks();
    });

    test('has classname', async () => {
        const { container } = renderPage();
        const classname = container.getElementsByClassName(CLASSNAME).item(0);
        await waitFor(() => expect(classname).toBeVisible());
    });
});