import React from 'react';
import { Identity } from '@theorchard/suite-frontend';
import { createIdentity, renderInAppContext } from '@theorchard/suite-testing';
import FeatureFlagPanel, { Props } from '../featureFlagPanel';

describe('<FeatureFlagPanel>', () => {
    const featureFlagName = 'feature';

    const defaultProps: Props = {
        fallback: <div data-testid="default" />,
        featureFlag: featureFlagName,
    };

    const renderComponent = (props?: Partial<Props>, identity?: Identity) =>
        renderInAppContext(
            <FeatureFlagPanel {...defaultProps} {...props}>
                <div data-testid="feature" />
            </FeatureFlagPanel>,
            {
                identity,
            }
        );

    afterEach(() => {
        jest.restoreAllMocks();
    });

    test('renders default component', () => {
        const { getByTestId, queryByTestId } = renderComponent(
            {},
            createIdentity({ features: { [featureFlagName]: false } })
        );

        expect(getByTestId('default')).toBeInTheDocument();
        expect(queryByTestId('feature')).not.toBeInTheDocument();
    });

    test('renders feature component', () => {
        const { queryByTestId, getByTestId } = renderComponent(
            {},
            createIdentity({ features: { [featureFlagName]: true } })
        );

        expect(queryByTestId('default')).not.toBeInTheDocument();
        expect(getByTestId('feature')).toBeInTheDocument();
    });
});