用带开关盒的React组件编写测试sinon

时间:2017-08-16 12:28:44

标签: reactjs sinon stub

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

请帮忙

0 个答案:

没有答案