測試用的自舉模態產生反應點擊

Question

我有這個簡單的代碼從反應引導網站...

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.. 

    }); 
}); 

如何找到取消按鈕？我嘗試了各種各樣的東西，似乎沒有什麼能爲我工作。

Answer 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); 

    }); 
}); 

Answer 2

在測試使用：

const component = ReactTestUtils.renderIntoDocument(<Modal />); 
ReactTestUtils.Simulate.click(document.body.getElementsByClassName("close")[0]);