import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { testNrSoundRec as song } from 'lib/mockOwnershipNrSoundRecData';
import { OwnershipNrSoundRecording as SongMetadata } from 'src/data/queries/getOwnershipNrSoundRecording/__generated__/OwnershipNrSoundRecording';
import SongPageHeader, { Props, CLASSNAME } from '../songPageHeader';

describe('<SongPageHeader>', () => {
    const renderWrapper = (
        songProps?: Partial<
            NonNullable<SongMetadata['ownershipNrSoundRecording']>
        >,
        props?: Partial<Props>
    ) =>
        renderInAppContext(
            <SongPageHeader song={{ ...song, ...songProps }} {...props} />
        );

    test('renders page', () => {
        const { container } = renderWrapper();
        const component = container.getElementsByClassName(CLASSNAME).item(0);
        expect(component).toBeVisible();
    });

    test('renders Instances page', () => {
        const page = `SongPage-Pages-${CLASSNAME}.instances`;
        renderWrapper(undefined, {
            pages: [{ key: 'instances', label: page }],
        });

        expect(screen.getByText(page)).toBeInTheDocument();
    });

    test('renders Rights page', () => {
        const page = `SongPage-Pages-${CLASSNAME}.rights`;
        renderWrapper(undefined, {
            pages: [{ key: 'rights', label: page }],
        });

        expect(screen.getByText(page)).toBeInTheDocument();
    });

    test('renders Delivery page', () => {
        const page = `SongPage-Pages-${CLASSNAME}.delivery`;
        renderWrapper(undefined, {
            pages: [{ key: 'delivery', label: page }],
        });

        expect(screen.getByText(page)).toBeInTheDocument();
    });
});