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';
import { OwnershipNrTrack } from 'src/data/queries/getOwnershipNrTracks';
import { CLASSNAME } from '../metadataPopup';
import ProductMetadata from '../productMetadata';

const CLASSNAME_REFERENCE = `${CLASSNAME}-product-metadata`;
describe('<ProudctMetadata>', () => {
    const renderPage = (
        song: OwnershipNrSoundRecording,
        instance: OwnershipNrTrack | null
    ) =>
        renderInAppContext(<ProductMetadata song={song} instance={instance} />);

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

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

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

        const productFormatControls = getByText('Album');
        const productTypeControls = getByText('Audio');

        await waitFor(() => {
            expect(metadata).toBeVisible();
        });
        expect(productFormatControls).toBeVisible();
        expect(productTypeControls).toBeVisible();
    });
});