1
我有这个简单的代码从反应引导网站...测试用的自举模态产生反应点击
import {Modal} from 'react-bootstrap';
import React from 'react';
export default class ModalExperiment extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
}
}
render(){
let openModal =() => this.setState({open: true});
let closeModal =() => this.setState({ open: false });
return (
<div>
<button type='button' onClick={openModal} className='launch'>Launch modal</button>
<Modal
show={this.state.open}
onHide={closeModal}
aria-labelledby="ModalHeader" className='modalClass'
>
<Modal.Header closeButton>
<Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Some Content here</p>
</Modal.Body>
<Modal.Footer>
// If you don't have anything fancy to do you can use
// the convenient `Dismiss` component, it will
// trigger `onHide` when clicked
<Modal.Dismiss className='dismiss btn btn-default'>Cancel</Modal.Dismiss>
// Or you can create your own dismiss buttons
<button className='btn btn-primary' onClick={closeModal}>
Close
</button>
</Modal.Footer>
</Modal>
</div>
)
}
}
这里是我的测试...简单的我想点击启动按钮,验证Modal打开,然后单击Cancel按钮验证Modal不再打开。
'use strict';
import React from 'react';
import ReactAddons from 'react/addons';
import {Modal} from 'react-bootstrap';
import ModalExperiment from '../ModalExperiment';
import ReactDOM from 'react-dom';
let TestUtils = React.addons.TestUtils;
fdescribe('ModalExperimentFunctional', function() {
let page;
fit("click the ok button should open the modal",() => {
page = TestUtils.renderIntoDocument(<ModalExperiment/>);
let launch = TestUtils.findRenderedDOMComponentWithClass(page, 'launch');
let openButton = React.findDOMNode(launch);
openButton.click(); // work till here
//let modal = TestUtils.findRenderedComponentWithType(page, Modal);// this managed to find Modal type
let modal = TestUtils.findRenderedDOMComponentWithClass(page, 'modalClass'); // this fails to find the modalClass..
});
});
如何找到取消按钮?我尝试了各种各样的东西,似乎没有什么能为我工作。
您是否尝试过使用裁判?我认为这个问题可能是模式被添加到body中,所以你不会通过在页面元素中寻找一个类来找到它。在你的关闭按钮上尝试'ref =“modalClose”',然后尝试用'page.refs.modalClose'访问它。测试最初可能有点噩梦。我记得起初我有很多这方面的问题。 –
谢谢。我修改了按钮关闭如下然后尝试使用page.refs.modalClose并返回undefined ..反应0.13是我使用的。我是新的反应太.. –
是的,我试图找出如何做到这一点与我的设置,但我也有麻烦。我的测试工作是因为我将一个组件传入模态,并且我在模态的上下文之外测试该组件。你可以测试你的'openModal'和'closeModal'函数实际上改变了'state',但我不确定我将如何测试,实际上点击按钮会产生正确的结果 –