我正在使用"react-addons-test-utils"使用material-ui为反应组件编写一个测试用例。由于某种原因,我无法获得模拟.click来为IconMenu工作,并且不确定我做错了什么。我正在尝试模拟单击图标按钮,以便我可以循环访问弹出窗口并获取菜单项并检查长度,但由于某种原因,我不确定我做错了什么。我还注意到,当单击IconButton时,在"提供程序"标签之后的DOM中附加了一个"PopoverDefaultAnimation"。谢谢!
这是我的组件,渲染良好
import React, {PropTypes} from 'react'
/** material-ui **/
import IconMenu from 'material-ui/IconMenu'
import IconButton from 'material-ui/IconButton'
import MenuItem from 'material-ui/MenuItem'
import Divider from 'material-ui/Divider'
import Help from 'material-ui/svg-icons/action/help-outline'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
export default class MndyHelp extends React.Component{
constructor(props) {
//console.log('Main: constructor()');
super(props);
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext() {
return {
muiTheme: getMuiTheme()
}
}
render(){
var urlLink = "https://www.google.com";
return(
<IconMenu
iconButtonElement={
<IconButton style={ {padding: 0, width: "auto", height: "auto", right: 44, top: 4 } } iconStyle={{ height: 30, width: 30, fill: "#304954"}}><Help/></IconButton>}>
<MenuItem onTouchTap={() => {window.open(urlLink, '_blank');}} primaryText='Item1'/>
<MenuItem onTouchTap={() => {window.open(urlLink, '_blank');}} primaryText='Item2'/>
</IconMenu>
);
}
}
这是我的单元测试:
import React from 'react'
import {renderIntoDocument,
scryRenderedDOMComponentsWithTag,
scryRenderedComponentsWithType,
Simulate
} from 'react-addons-test-utils'
import chai from 'chai'
import ReactDOM from 'react-dom'
import IconButton from 'material-ui/IconButton'
import IconMenu from 'material-ui/IconMenu'
import MenuItem from 'material-ui/MenuItem'
import Popover from 'material-ui/Popover';
import Help from 'material-ui/svg-icons/action/help-outline'
var should = chai.should(),
expect = chai.expect;
import MndyHelp from './MndyHelp.jsx';
describe('<MndyHelp/>', () => {
//render kndyhelp
//get the iconbutton
//get the popover
//click the icon button
it('should have 2 menuItems', () => {
var domElement = renderIntoDocument(<MndyHelp/>),
buttons = scryRenderedComponentsWithType(domElement,IconButton),
firstButton = ReactDOM.findDOMNode(buttons[0]);
Simulate.click(firstButton);
var popOver = scryRenderedComponentsWithType(domElement,Popover);
var menuItem = scryRenderedComponentsWithType(domElement,MenuItem);
//make sure popover is open i.e. true
expect(popOver[0].props.open).to.equal(true);
//Make sure menu items exist
expect(menuItem.length).to.not.equal(0);
expect(menuItem.length).to.equal(2);
});
});
您无法模拟单击,因为没有可单击的内容。
您有一个onTouchTap
事件,很遗憾您无法使用Simulate。
事实上,你正在使用的插件会阻止点击发生:
当点击发生时,浏览器会发送触摸开始和触摸结束,然后在 300 毫秒后发送点击事件。如果单击事件之前有触摸事件(在最后一次触摸事件的 750 毫秒内),则此插件将忽略该事件。
https://github.com/zilverline/react-tap-event-plugin