mercredi 27 avril 2016

How do I count the MenuItems when testing Reacts material-ui IconMenu?

I would like to check the number of MenuItems in the popover of the IconMenu when it gets clicked but I'm not sure how to access the 'PopoverDefaultAnimation' or am not sure about the best way to do this. Any help would be appreciated. When I try to console.log the menuitems, the result is []

My JSX file,

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=><Help/></IconButton>}>
                <MenuItem onTouchTap={() => {window.open(urlLink, '_blank');}} primaryText='Item1'/>
                <MenuItem onTouchTap={() => {window.open(urlLink, '_blank');}} primaryText='Item2'/>
            </IconMenu>
        );
    }
}

My unit test

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'
import injectTapEventPlugin from 'react-tap-event-plugin';
var should = chai.should(),
    expect = chai.expect;
import MndyHelp from './MndyHelp.jsx';
describe('<MndyHelp/>', () => {
    injectTapEventPlugin();
    it('should have 2 menuItems', () => {
        var domElement  = renderIntoDocument(<MndyHelp/>),
            buttons     = scryRenderedComponentsWithType(domElement,IconButton),
            firstButton = ReactDOM.findDOMNode(buttons[0]);
            Simulate.touchTap(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
            console.log(menuItem); //----> this prints [] instead of the menuitems
            expect(menuItem.length).to.not.equal(0);
            expect(menuItem.length).to.equal(2);
    });

});

Aucun commentaire:

Enregistrer un commentaire