import React, { Component, PropTypes } from 'react';
import classNames from 'classnames/bind';
// import List from '../List/List';
import TokenProvider from 'yoda-site-components/lib/helpers/TokenProvider/TokenProvider';
import constant from '../../common/constant';
import * as styles from './CardState.css';
const cx = classNames.bind(styles);
class CardState extends Component {
static defaultProps = {
cardDetails: {},
imagePath: '',
}
static propTypes = {
cardDetails: PropTypes.objectOf,
imagePath: PropTypes.string,
// deviceType: PropTypes.objectOf.isRequired,
};
constructor() {
super();
this.state = {
cardTypeImage: this.getImageBasedOnRewardsTier(),
};
}
getImageBasedOnRewardsTier = () => {
const rewardTier = TokenProvider.get('DP_REWARDS_TIER') || 'RED';
switch (rewardTier.toUpperCase()) {
case 'SILVER':
return constant.camDashboard.cardState.rewardTierImages.SILVER;
case 'GOLD':
return constant.camDashboard.cardState.rewardTierImages.GOLD;
case 'PLATINUM':
return constant.camDashboard.cardState.rewardTierImages.PLATINUM;
case 'BRONZE':
return constant.camDashboard.cardState.rewardTierImages.BRONZE;
default: // red
return constant.camDashboard.cardState.rewardTierImages.BASE;
}
}
render () {
const cardDetails = this.props.cardDetails;
const imagePath = `${this.props.imagePath}${this.state.cardTypeImage}`;
return (
<div className={cx('creditCards')}>
<div className={cx('jcCreditCard')}>
<h2>Credit Card</h2>
<div className={cx('creditCard')}>
<img src={imagePath} alt="" />
</div>
<div className={cx('creditCardDetails')}>
<h3 data-tlprivate="true" >{cardDetails.address.lastName} {cardDetails.address.firstName}</h3>
<span>JCPenney Cardmember</span>
<span data-tlprivate>{cardDetails.cardNumber}</span>
<a className={cx('payBill')} href={constant.payMyBill}>Pay My Bill</a>
<a className={cx('checkBalance')} href={constant.payMyBill}>Check Balance </a>
</div>
</div>
</div>
);
}
}
export default CardState;
我的测试文件:
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import TokenProvider from 'yoda-site-components/lib/helpers/TokenProvider/TokenProvider';
import constant from '../../common/constant';
import CardState from './CardState';
const imagePath = 'm-dt-test1';
const cardDetails = {
address: {
}
};
describe('<CardState/>', () => {
const tokenGet = sinon.stub(TokenProvider, 'get');
let wrapper;
tokenGet.onCall(0).returns('SILVER');
tokenGet.onCall(1).returns('GOLD');
tokenGet.onCall(2).returns('PLATINUM');
tokenGet.onCall(3).returns('RED');
beforeEach(() => {
wrapper = shallow(
<CardState imagePath={imagePath} cardDetails={cardDetails} />,
);
});
it('on first call, this.state.cardTypeImage should be SILVER', () => {
expect(wrapper.state().cardTypeImage).to.equal(constant.camDashboard.cardState.rewardTierImages.SILVER);
});
it('on next call, this.state.cardTypeImage should be GOLD', () => {
expect(wrapper.state().cardTypeImage).to.equal(constant.camDashboard.cardState.rewardTierImages.GOLD);
});
it('on next call, this.state.cardTypeImage should be PLATINUM', () => {
expect(wrapper.state().cardTypeImage).to.equal(constant.camDashboard.cardState.rewardTierImages.PLATINUM);
});
it('on next call, this.state.cardTypeImage should be BASE', () => {
expect(wrapper.state().cardTypeImage).to.equal(constant.camDashboard.cardState.rewardTierImages.BASE);
});
});
错误:请帮忙
9 failing
1)第一次调用时,this.state.cardTypeImage应为SILVER:
AssertionError: expected '/static-account/images/linkcreditcard/base.png' to equal '/static-account/images/linkcreditcard/platinum.png'
+ expected - actual
-/static-account/images/linkcreditcard/base.png
+/static-account/images/linkcreditcard/platinum.png
at Context.<anonymous> (src/components/CardState/CardState.test.jsx:56:50)
2)在下次通话时,this.state.cardTypeImage应为GOLD:
AssertionError: expected '/static-account/images/linkcreditcard/base.png' to equal '/static-account/images/linkcreditcard/gold.png'
+ expected - actual
-/static-account/images/linkcreditcard/base.png
+/static-account/images/linkcreditcard/gold.png
at Context.<anonymous> (src/components/CardState/CardState.test.jsx:60:50)
3)在下次调用时,this.state.cardTypeImage应为PLATINUM:
AssertionError: expected '/static-account/images/linkcreditcard/base.png' to equal '/static-account/images/linkcreditcard/platinum.png'
+ expected - actual
-/static-account/images/linkcreditcard/base.png
+/static-account/images/linkcreditcard/platinum.png
请帮忙