加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 如何使用sinon存根文档方法 – React

发布时间:2020-12-15 20:16:07 所属栏目:百科 来源:网络整理
导读:import React,{ PropTypes,Component } from 'react';import classNames from 'classnames/bind';import { get,includes } from 'lodash';import { Link } from 'react-router';import * as styles from '../CAMNavPanel.css';const cx = classNames.bind(st
import React,{ PropTypes,Component } from 'react';
import classNames from 'classnames/bind';
import { get,includes } from 'lodash';
import { Link } from 'react-router';
import * as styles from '../CAMNavPanel.css';

const cx = classNames.bind(styles);

class CAMNavPanelListItem extends Component {
    static propTypes = {
        navData: PropTypes.shape({
            title: PropTypes.string,isRedirect: PropTypes.bool,url: PropTypes.string,}).isRequired,location: PropTypes.shape({ pathname: PropTypes.string.isRequired,query: PropTypes.objectOf(PropTypes.object).isRequired,search: PropTypes.string.isRequired,};
    constructor() {
        super();
        this.state = { currentView: '' };
        this.getClasses.bind(this);
    }

    // in case of url being manually set,figure out correct tab to highlight
    componentWillMount() {
        this.changeLocation();
    }

    // give correct tab the 'active' class
    getClasses(navData) {
        const { location } = this.props;
        const activeClass = 'active';
        let isContainedInOtherUrls = false;

        if (get(navData,'otherUrls') && includes(navData.otherUrls,location.pathname)) {
            isContainedInOtherUrls = true;
        }
        if ((this.state.currentView === navData.url) || isContainedInOtherUrls) {
            return activeClass;
        }
        return '';
    }

    getActiveClass(e,navData) {
        const elements = document.getElementsByClassName('CAMNavPanel-rewardsMenu')[0].getElementsByTagName('li');

        for (let i = 0; i < elements.length; i += 1) {
            elements[i].className = '';
        }

        this.setState({ currentView: navData.url },() => {
            if (get(navData,'scrollIntoView')) {
                document.getElementsByClassName(navData.scrollIntoView)[0].scrollIntoView();
            }
        });
    }
    // update state based on the URL
    changeLocation() {
        const { location } = this.props;
        const currentView = location.pathname;
        this.setState({ currentView });
    }

    render() {
        const { navData } = this.props;
        let target = '';
        if (navData.isExternalLink) {
            target = '_blank';
        }
        return (
            <li className={cx(this.getClasses(navData))} key={navData.title}>
                { navData.isRedirect ? <a href={navData.url} target={target}>
                    {navData.title}</a> :
                <Link to={navData.url} onClick={e => this.getActiveClass(e,navData)}>{navData.title}</Link> }
            </li>
        );
    }
}


export default CAMNavPanelListItem;

测试用例:

describe('CAMNavPanelListItem with isRedirect false plus highlight li',() => {
let wrapper;

const navData = {
    title: 'My Orders',isRedirect: false,isExternalLink: false,url: '/orders',};

const location = {
    pathname: '/orders',};
beforeEach(() => {
    documentObj = sinon.stub(document,'getElementsByClassName');
    const li = {
        getElementsByTagName: sinon.stub(),};

    documentObj.withArgs('CAMNavPanel-rewardsMenu').returns([li]);
    wrapper = shallow(
        <CAMNavPanelListItem
            navData={navData}
            location={location}
            />,);
    wrapper.setState({ currentView: navData.url });
});

it('should render CAMNavPanelListItem with Link as well',() => {
    expect(wrapper.find('li')).to.have.length(1);
    expect(wrapper.find('li').hasClass('active')).to.equal(true);
    expect(wrapper.find('Link')).to.have.length(1);
});

it('should click and activate activeClass',() => {
    wrapper.find('Link').simulate('click',{ button: 0 });
});

afterEach(() => {
    wrapper.unmount();
    documentObj.restore();
});

});

我得到的错误:

const elements = document.getElementsByClassName('CAMNavPanel-rewardsMenu')[0].getElementsByTagName('li');

    console.log('Elements of getElementsByTagName',elements);

我得到的元素未定义.

请帮忙.单击Link元素后如何存根.

解决方法

您可能希望查看类似于 jsdom的内容来模拟整个DOM,而不是手动模拟几个DOM函数.然后,您不必实现document.getElementsByClassName()函数,它将使测试套件对组件实现中的更改更加健壮.您只需使用jsdom本身的函数测试某些元素.

您还可以尝试mocha-jsdom自动设置和拆除每个describe()块的测试DOM.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读