我的代码：
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;
});
});
请帮忙。