import React from 'react';
import { waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { testNrSoundRec } from 'lib/mockOwnershipNrSoundRecData';
import { testInstances } from 'lib/mockOwnershipNrTrackInstances';
import { OwnershipNrSoundRecording } from 'src/data/queries/getOwnershipNrSoundRecording';
import { OwnershipNrTrack } from 'src/data/queries/getOwnershipNrTracks';
import Basics from '../basics';
import { CLASSNAME } from '../metadataPopup';

const CLASSNAME_BASICS = `${CLASSNAME}-basics`;
describe('<Basics>', () => {
    const renderPage = (
        song: OwnershipNrSoundRecording,
        instance: OwnershipNrTrack | null
    ) => renderInAppContext(<Basics song={song} instance={instance} />);

    test('has classname', async () => {
        const { container } = renderPage(testNrSoundRec, testInstances[0]);

        await waitFor(() => {
            expect(
                container.getElementsByClassName(CLASSNAME_BASICS).item(0)
            ).toBeVisible();
        });
    });

    test('shows Basics card', async () => {
        const { container, getByText } = renderPage(
            testNrSoundRec,
            testInstances[0]
        );
        const metadata = container
            .getElementsByClassName(CLASSNAME_BASICS)
            .item(0);

        const songNameControls = getByText('Fight For Justice');
        const primaryArtistControls = getByText('artist a');

        await waitFor(() => {
            expect(metadata).toBeVisible();
        });
        expect(songNameControls).toBeVisible();
        expect(primaryArtistControls).toBeVisible();
    });
});