没有调用测试的动作 - React

Question

我的代码：

componentWillReceiveProps(nextProps) {
        if (get(nextProps.signInSliderDetails, 'showWelcomePage')) {
            this.timer = setTimeout(() => {
                this.onPrimaryCloseButtonClick();
            }, 3000);
        }
    }

    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);
    }

    onBackButtonClick() {
        const el = document.getElementsByClassName('SignInSlider-loginSlider')[0];
        const el1 = document.getElementsByClassName('SignInSlider-createAccountSlider')[0];
        const el2 = document.getElementsByClassName('SignInSlider-passwordSlider')[0];
        el1.classList.remove('SignInSlider-animate-show');
        el2.classList.remove('SignInSlider-animate-show');

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

    onPrimaryCloseButtonClick() {
        this.removeSliderClasses();
        this.timer && clearTimeout(this.timer);
        this.props.signInSliderActions.resetSignInSlider();
        this.props.onPrimaryCloseButtonClick(this.props.signInSliderDetails.showWelcomePage);
    }

    removeSliderClasses() {
        const el = document.getElementsByClassName('SignInSlider-loginSlider')[0];
        const el1 = document.getElementsByClassName('SignInSlider-createAccountSlider')[0];
        const el2 = document.getElementsByClassName('SignInSlider-passwordSlider')[0];
        el.classList.remove('SignInSlider-animate-show');
        el1.classList.remove('SignInSlider-animate-show');
        el2.classList.remove('SignInSlider-animate-show');
    }

    render() {
        const { deviceType, preferences, messagesTexts, signInSliderDetails } = this.props;
        const { showCreateAccountPage, showWelcomePage, showForgotPasswordPage, createAccount,
             signInDetails, passwordResetResponse } = signInSliderDetails;
        const passwordResetDetails = { passwordResetResponse };
        const hideBackArrowCloseButton = !(showCreateAccountPage || showForgotPasswordPage);
        // Need to have a new logic. Not Token Provider here
        const firstName = TokenProvider.get('DP_USER_NAME');

        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={firstName} />} </div>
                </div>
            </SlidePanel>
        );
    }
}

我的测试文件：

const actions = {
    signInActions: sinon.spy(),
    createAccountActions: sinon.spy(),
    passwordResetActions: sinon.spy(),
    signInSliderActions: {
        resetSignInSlider: sinon.spy(),
        openForgotPasswordResetPage: sinon.spy(),
        openCreateAccountPage: sinon.spy(),
    },
};



    const props = {
        actions,
        isOpenPanel: false,
        onPrimaryCloseButtonClick: sinon.spy(),
        preferences: preferences.common,
        messagesTexts,
        deviceType,
        signInSliderDetails,
        isSignInSliderReq: true,
    };
       describe('Shallow Render', () => {
        let wrapper;

        beforeEach(() => {
            const gl = global.window.document.getElementsByClassName.returns({ className: '' });
            gl.returns([elStub]);
            wrapper = shallow(
                <SignInSlider
                    {...props}
                    />,
                );
        });

        afterEach(() => {
            global.window.document.getElementsByClassName.reset();
            elStub.classList.add.reset();
            elStub.classList.remove.reset();
            wrapper.unmount();
        });

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

        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;
            wrapper.find('PasswordResetWrapper').prop('onPrimaryCloseButtonClick')();
            wrapper.find('SlidePanel').prop('onBackButtonClick')();
        });

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

请帮忙。