import React from 'react';
import { formatMessage } from '@theorchard/suite-frontend';
import { renderInAppContext } from '@theorchard/suite-testing';
import { ProductField } from 'src/product/fields/field';
import ProductBasicsBlockField, {
    CLASS_NAME,
    Props,
} from '../productBasicsBlockField';

describe('<ProductBasicsBlockField>', () => {
    const defaultProps: Props = {
        fieldName: 'release_name',
        field: new ProductField(),
    };
    defaultProps.field.setCurrent('foo');
    const correctionValue = 'Sorry this is the title';

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

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

    test('renders a field name and its value', () => {
        const { getByTestId } = renderComponent();

        const componentEl = getByTestId(
            `${CLASS_NAME}-${defaultProps.fieldName}`
        );
        expect(componentEl).toBeInTheDocument();

        const formLabel = getByTestId('productFieldLabel');
        const formValue = getByTestId('productFieldValue');

        const formattedFieldName = formatMessage(
            `common.fieldNames.${defaultProps.fieldName}`
        );

        expect(formLabel).toHaveTextContent(formattedFieldName);
        expect(formValue).toHaveTextContent('foo');
        expect(formValue).not.toHaveTextContent(correctionValue);
    });

    describe('when its a revision', () => {
        test('renders a field name and the correction value', () => {
            const revisedField = new ProductField<string>();
            revisedField.setCurrent('foo');
            revisedField.setRevision(correctionValue);

            const { getByTestId } = renderComponent({ field: revisedField });

            const componentEl = getByTestId(
                `${CLASS_NAME}-${defaultProps.fieldName}`
            );
            expect(componentEl).toBeInTheDocument();

            const formLabel = getByTestId('productFieldLabel');
            const formValue = getByTestId('productFieldValue');

            const formattedFieldName = formatMessage(
                `common.fieldNames.${defaultProps.fieldName}`
            );

            expect(formLabel).toHaveTextContent(formattedFieldName);
            expect(formValue).toHaveTextContent(correctionValue);
            expect(formValue).not.toHaveTextContent('ThisField OriginalValue');
            expect(getByTestId('RevisionGlyph')).toBeInTheDocument();
        });
    });
});