- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
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,
}).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
元素后如何 stub 。
最佳答案
您可能想查看类似 jsdom
的内容模拟整个 DOM,而不是手动模拟几个 DOM 函数。然后,您不必实现 document.getElementsByClassName() 函数,这将使测试套件对组件实现中的更改更加稳健。您只需使用 jsdom 本身的函数来测试某些元素。
您也可以尝试mocha-jsdom
自动设置和拆卸每个 describe()
block 的测试 DOM。
关于reactjs - 如何使用 sinon stub 文档方法 - React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48641300/
我有一个正在 stub 的函数,该函数使用多个参数进行调用。我想检查仅第一个参数。其余的都是回调函数,所以我不想管它们。因此,我可能有以下 2 个调用,以 ajax 为例: method.get =
我试图用 Sinon.js 拦截一个调用,这样我就可以做一些日志记录,然后执行原始调用。我看不到用 sinon.spy() 做到这一点的方法,但我想我可以用 sinon.stub() 做到这一点。 我
我是SinonJs的初学者,当我尝试编写一些演示代码时,它无法工作,我不知道为什么。 应用程序.js const db = require('./db'); module.exports.si
sinon-mongoose = 2.3.0不适用于 sinon 9我的代码如下 // test.js const sinon = require('sinon'); require('sinon-m
我正在尝试创建一个单元测试来测试我的代码创建的对象是否已成功发送到更新函数(当前不测试更新函数,因为这将是集成测试)。 我想做的是使用 sinon 模拟来检查更新方法的输入是否正确: var obje
当使用 sinon 时,我只想替换函数的返回值,不需要其他信息,例如调用了多少次。哪一个更好? sinon.replace(Component.prototype, 'getValue', () =>
我在获取一个 sinon stub 来返回/解析另一个 sinon stub 时遇到问题。我正在使用 sinon、chai、chai-as-promised 和 mocha。 我正在按顺序执行多个异步
在我们的前端单元测试中使用 sinon 和 sinon-qunit,我很难理解这些方法的区别。我们正在使用 sinon.sandbox.stub()(字面意思是函数,我们不创建沙箱)并且这些 stub
我正在尝试调用 fail我的片段中的条件。 但是当我使用 sinon.stub().throws()方法它显示我错误。 我无法在代码中处理它。 这是我的片段: login() { let lo
我有一个中间件功能,它检查 session token 以查看用户是否是管理员用户。如果所有检查都通过,该函数不会返回任何内容,而只是调用 next()。 在对 Sinon spy 的 next()
我想在node.js和mocha上使用sinon。我在测试文件中执行以下操作: var sinon = require('sinon') 之后 sinon var 是空对象。 global.sinon
在下面的单元测试代码中: TestModel = Backbone.Model.extend({ defaults: { 'selection': null },
当我在对象内部的函数上使用 Sinon 时,它可以工作: function myFunc() { console.log('hello'); } var myObj = { myFunc: m
假设我想通过添加我自己的特殊 stub 来扩展 sinon:我可以这样写: sinon.specialStub = function() { return this.stub().return
我有一个函数需要使用 sinon 进行测试。它需要两个参数并具有可以引发的不同事件。我正在尝试模拟“准备就绪”事件,以模拟成功的 SFTP 连接 function configureSFTPConne
我有一个非常简单的 JS 库(称为 trysinon.js),如下所示: export function foo() { bar(); } export function bar() { ret
我们正在使用Sinon.JS对于一些集成测试,我遇到了一个问题,我需要以某种方式进行调试。我们使用 fakeServer.create() 方法,如下所示: server = Sinon.fakeSe
我发现了几个相关的问题,但似乎没有一个对我想要实现的内容有帮助。 因此,我想监视构造函数方法,以便当使用构造函数创建的对象在不同范围另一个函数中调用此方法时,我可以知道该调用所使用的参数制作。 示例:
我正在尝试为这个简单的中间件功能编写一个独立的测试 function onlyInternal (req, res, next) { if (!ReqHelpers.isInternal(req)
我觉得我大致了解 sinon 的工作原理,但在监视传递给我正在测试的导入函数的回调时遇到了一些麻烦。这是一个例子: import sinon from 'sinon' const callbackCa
我是一名优秀的程序员,十分优秀!