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