import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { getMergedProduct } from 'lib/mockProductData';
import ProductBasicsBlock, { CLASS_NAME, Props } from '../productBasicsBlock';

describe('<ProductBasicsBlock>', () => {
    const defaultProps: Props = {
        product: getMergedProduct({
            productId: 1,
            releaseCorrection: {
                items: [
                    {
                        keyId: 1231231,
                        keyValue: '[750]',
                        tableName: 'releases',
                        fieldName: 'release_subgenre',
                    },
                ],
            },
        }),
    };

    const renderComponent = (partialProps: Partial<Props> = {}) => {
        const props: Props = { ...defaultProps, ...partialProps };

        return renderInAppContext(<ProductBasicsBlock {...props} />);
    };

    test('renders with no errors', () => {
        const { getByTestId, queryByTestId } = renderComponent();

        const componentEl = getByTestId(CLASS_NAME);
        expect(componentEl).toBeInTheDocument();

        expect(getByTestId(`${CLASS_NAME}-body`)).toBeInTheDocument();
        const sectionTitleEl = getByTestId(`${CLASS_NAME}-title`);

        expect(sectionTitleEl).toBeInTheDocument();
        expect(sectionTitleEl.getElementsByTagName('h2')[0]).toHaveTextContent(
            'Basics'
        );

        expect(getByTestId('ProductArtworkPanel')).toBeInTheDocument();
        expect(
            getByTestId(`${CLASS_NAME}-productInfoFields`)
        ).toBeInTheDocument();

        const productNameEl = componentEl.querySelector(
            `#${CLASS_NAME}-item-release_name`
        );
        expect(productNameEl).toHaveTextContent(
            String(defaultProps.product.basics.productName.currentValue)
        );

        const productFormatEl = componentEl.querySelector(
            `#${CLASS_NAME}-item-format`
        );
        expect(productFormatEl).toHaveTextContent(
            String(defaultProps.product.basics.format.currentValue)
        );

        expect(
            componentEl.getElementsByClassName('productInfoField')
        ).toHaveLength(12);

        expect(getByTestId(`${CLASS_NAME}-notes-section`)).toBeInTheDocument();

        const versionEl = componentEl.querySelector(
            `#${CLASS_NAME}-item-version`
        );
        expect(versionEl).toHaveTextContent(
            String(defaultProps.product.basics.productVersionNotes.get())
        );

        expect(queryByTestId(`${CLASS_NAME}-Skeleton`)).not.toBeInTheDocument();
        expect(
            componentEl.getElementsByClassName(`${CLASS_NAME}-item`)
        ).toHaveLength(15);
    });
});