import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { CONTRACT_LIFECYCLE_MODAL_SCREENS } from 'src/apollo/type-constants/contract';
import { ContractLifecycleFullscreenModalTitle } from 'src/components/contract-lifecycle-create/contract-lifecycle-fullscreen-modal-title';

describe('<ContractLifecycleFullscreenModalTitle>', () => {
    it('renders general information title and description', () => {
        renderInAppContext(
            <ContractLifecycleFullscreenModalTitle
                modalScreen={
                    CONTRACT_LIFECYCLE_MODAL_SCREENS.GENERAL_INFORMATION
                }
            />
        );

        const titleElements = screen.getAllByText(
            'Enter General Contract Information'
        );
        expect(titleElements.length).toEqual(1);
        const description = screen.getByTestId('description');
        expect(description).toBeDefined();
        expect(description).toHaveTextContent(
            'Tell us what account this contract is for and providesome fundamental details about the contract.'
        );
    });

    it('renders current period title and description', () => {
        renderInAppContext(
            <ContractLifecycleFullscreenModalTitle
                modalScreen={CONTRACT_LIFECYCLE_MODAL_SCREENS.CURRENT_PERIOD}
            />
        );

        const title = screen.getByRole('heading', { level: 1 });
        const titleDescription = screen.getByTestId(
            'current-period-title-description'
        );

        expect(title.textContent).toEqual('Set Up Current Period Rules');
        expect(titleDescription.textContent).toEqual(
            "You'll be able to set the contractto renew or to be continuously active in this step."
        );
    });

    it('renders subsequent period title and description', () => {
        renderInAppContext(
            <ContractLifecycleFullscreenModalTitle
                modalScreen={CONTRACT_LIFECYCLE_MODAL_SCREENS.SUBSEQUENT_PERIOD}
            />
        );

        const title = screen.getByRole('heading', { level: 1 });
        const titleDescription = screen.getByTestId(
            'subsequent-period-title-description'
        );

        expect(title.textContent).toEqual('Set Up Subsequent Period Rules');
        expect(titleDescription.textContent).toEqual(
            'You can set contract renewal rules for the period(s)which come after the current period.'
        );
    });
});