import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { ProductValidationErrorCode } from 'src/constants';
import { ProductField } from 'src/product/fields/field';
import AnnotatedField, { Props } from '../annotatedField';

describe('<AnnotatedField>', () => {
    const renderComponent = (props: Props) => {
        return renderInAppContext(<AnnotatedField {...props} />);
    };

    test('renders', () => {
        const mockField = new ProductField<string>();
        mockField.setCurrent('foo');
        const { getByText } = renderComponent({ field: mockField });
        expect(getByText('foo')).toBeInTheDocument();
    });

    test('renders revision state', () => {
        const mockField = new ProductField<string>();
        mockField.setCurrent('foo');
        mockField.setRevision('bar');
        const { getByText } = renderComponent({ field: mockField });
        expect(getByText('bar')).toBeInTheDocument();
    });

    test('renders notices', () => {
        const mockField = new ProductField<string>();
        mockField.setCurrent('foo');
        mockField.addValidation({
            code: ProductValidationErrorCode.ACCOUNT_BLOCKLIST,
            reason: 'foo',
            severity: 'error',
            type: 'product',
            target: '1',
            targetId: 1,
        });
        const { getByTestId } = renderComponent({ field: mockField });
        expect(getByTestId('WarningGlyphIcon')).toBeInTheDocument();
    });

    test('renders Pill component', () => {
        const mockField = new ProductField<string>();

        mockField.setCurrent('foo');
        mockField.addValidation({
            code: ProductValidationErrorCode.ACCOUNT_BLOCKLIST,
            reason: 'foo',
            severity: 'error',
            type: 'product',
            target: '1',
            targetId: 1,
        });
        const { getByTestId } = renderComponent({ field: mockField });
        expect(getByTestId('1-ACCOUNT_BLOCKLIST-pill')).toBeInTheDocument();
    });
});