我从反应引导程序网站获得了这个简单的代码...
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>
)
}
}
这是我的测试...简单我想点击启动按钮,确认模态打开,然后点击取消按钮以验证模态不再打开。
'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..
});
});
如何找到取消按钮?我尝试了各种各样的东西,似乎没有什么对我有用。
答案 0 :(得分:1)
我终于使用jquery选择器...
了import {Modal} from 'react-bootstrap';
import React from 'react';
export default class ModalExperiment extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
}
}
openModal() {
this.setState({open: true});
}
closeModal() {
this.setState({open: false });
}
render(){
return (
<div>
<button type='button' onClick={this.openModal.bind(this)} className='openButton'>Launch modal</button>
{this.state.open?
<Modal
show={this.state.open}
onHide={this.closeModal.bind(this)}
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>
<button className='closeButton btn btn-primary' onClick={this.closeModal.bind(this)}>
Close
</button>
</Modal.Footer>
</Modal> : ''}
</div>
)
}
}
这是测试......
'use strict';
import React from 'react';
import ReactAddons from 'react/addons';
import {Modal} from 'react-bootstrap';
import ModalExperiment from '../ModalExperiment';
import $ from 'jquery';
let TestUtils = React.addons.TestUtils;
describe('ModalExperimentFunctional', function() {
let page;
beforeEach(() => {
document.body.innerHTML = '';
page = TestUtils.renderIntoDocument(<ModalExperiment/>);
});
fit("click the ok button should open the modal", () => {
expect($('.closeButton').length).toBe(0);
let openButton = React.findDOMNode(TestUtils.findRenderedDOMComponentWithClass(page, 'openButton'));
TestUtils.Simulate.click(openButton);
expect($('.closeButton').length).toBe(1);
$('.closeButton').click();
expect($('.closeButton').length).toBe(0);
});
});
答案 1 :(得分:0)
在测试中使用:
const component = ReactTestUtils.renderIntoDocument(<Modal />);
ReactTestUtils.Simulate.click(document.body.getElementsByClassName("close")[0]);