jeudi 1 mars 2018

Simulate functions in parent component React that are being passed down via Props

   onClickOfCreateAccountButton() {
        const el = document.getElementsByClassName('SignInSlider-loginSlider')[0];
        const el1 = document.getElementsByClassName('SignInSlider-createAccountSlider')[0];

        el.classList.add('SignInSlider-animate-show');
        el.classList.remove('SignInSlider-animate-hide');
        setTimeout(() => {
            this.props.signInSliderActions.openCreateAccountPage();
            el1.classList.add('SignInSlider-animate-show');
        }, 5);
    }

    onClickPasswordReset() {
        const el = document.getElementsByClassName('SignInSlider-loginSlider')[0];
        const el1 = document.getElementsByClassName('SignInSlider-passwordSlider')[0];

        el.classList.add('SignInSlider-animate-show');
        el.classList.remove('SignInSlider-animate-hide');
        setTimeout(() => {
            this.props.signInSliderActions.openForgotPasswordResetPage();
            el1.classList.add('SignInSlider-animate-show');
        }, 5);
    }

I am trying to test the above functions however their click is being called from the Child Component as shown below:

My render code:

    render() {
    const { deviceType, preferences, messagesTexts, signInSliderDetails } = this.props;
    const { showCreateAccountPage, showWelcomePage, showForgotPasswordPage, createAccount,
         signInDetails, passwordResetResponse } = signInSliderDetails;
    const passwordResetDetails = { passwordResetResponse };
    const hideBackArrowCloseButton = !(showCreateAccountPage || showForgotPasswordPage);
    return (
        <SlidePanel
            isOpenPanel={this.props.isOpenPanel}
            onClosePanel={!hideBackArrowCloseButton && this.onBackButtonClick}
            onPrimaryCloseButtonClick={this.onPrimaryCloseButtonClick}
            panelTitle={!hideBackArrowCloseButton && 'Back to Sign-In'}
            hideBackArrowCloseButton={hideBackArrowCloseButton}
            isPrimaryCloseButtonRequired>

            <div className={cx('signInSliderPanel')}>

                <div className={cx('loginSlider')}>
                    { !showCreateAccountPage && !showWelcomePage && !showForgotPasswordPage &&
                    <LoginWrapper
                        signInDetails={signInDetails}
                        deviceType={deviceType}
                        preferences={preferences}
                        messagesTexts={messagesTexts}
                        source="account"
                        actions={this.props.signInActions}
                        onClickOfCreateAccountButton={this.onClickOfCreateAccountButton}
                        onClickPasswordReset={this.onClickPasswordReset}
                        isSignInSliderReq
                    /> }
                </div>

                <div className={cx('createAccountSlider')}>
                    {showCreateAccountPage &&
                    <CreateAccountWrapper
                        createAccount={createAccount}
                        isSignInSliderReq
                        deviceType={deviceType}
                        messagesTexts={this.props.messagesTexts}
                        preferences={this.props.preferences}
                        actions={this.props.createAccountActions}/> } </div>
                <div className={cx('passwordSlider')}>
                    {showForgotPasswordPage &&
                    <PasswordResetWrapper
                        isSignInSliderReq
                        messagesTexts={messagesTexts.passwordReset}
                        preferences={preferences}
                        createAccountActions={this.props.createAccountActions}
                        actions={this.props.passwordResetActions}
                        passwordResetDetails={passwordResetDetails}
                        signInSliderActions={this.props.signInSliderActions}
                        onPrimaryCloseButtonClick={this.onPrimaryCloseButtonClick}
                        deviceType
           />} </div>
                <div className={cx('welcomeSlider')}>
                    { showWelcomePage &&
                    <Welcome
                        messagesTexts={messagesTexts.signInSlider}
                        firstName={TokenProvider.get('DP_USER_NAME')}/>} </div>
            </div>
        </SlidePanel>
    );
}

My test functions:

    describe('Shallow Render', () => {
    let wrapper;

    beforeEach(() => {
        TokenProvider.get.withArgs('DP_USER_NAME').returns('Vini');
        wrapper = shallow(
            <SignInSlider
                {...props}
                />,
            );
    });

    afterEach(() => {
        wrapper.unmount();
        TokenProvider.get.withArgs('DP_USER_NAME').returns('');
        TokenProvider.get.reset();
    });

    it('it rendered successfully', () => {
        expect(wrapper.find('SlidePanel')).to.exists;
    });

    it('it shows createAccountPage SignInSlider', () => {
        wrapper.setProps({
            signInSliderDetails: {
                createAccount: {},
                signInDetails: {},
                passwordResetDetails: {
                    passwordResetResponse: {},
                },
                showCreateAccountPage: true,
                showWelcomePage: false,
                showForgotPasswordPage: false,
            },
        });
        wrapper.update();
        expect(wrapper.find('CreateAccountWrapper')).to.exists;
    });

    it('it shows Forgot password page SignInSlider', () => {
        wrapper.setProps({
            signInSliderDetails: {
                createAccount: {},
                signInDetails: {},
                passwordResetDetails: {
                    passwordResetResponse: {},
                },
                showCreateAccountPage: false,
                showWelcomePage: false,
                showForgotPasswordPage: true,
            },
        });
        wrapper.update();
        expect(wrapper.find('PasswordResetWrapper')).to.exists;
    });

    it('it shows Welcome page SignInSlider', () => {
        wrapper.setProps({
            signInSliderDetails: {
                createAccount: {},
                signInDetails: {},
                passwordResetDetails: {
                    passwordResetResponse: {},
                },
                showCreateAccountPage: false,
                showWelcomePage: true,
                showForgotPasswordPage: false,
            },
            firstName: 'Vini',
        });
        wrapper.update();
        expect(wrapper.find('Welcome')).to.exists;
    });
});

Aucun commentaire:

Enregistrer un commentaire