diff --git a/web/client/components/buttons/ZoomToMaxExtentButton.jsx b/web/client/components/buttons/ZoomToMaxExtentButton.jsx index d2d8227f971..6c5be7b6769 100644 --- a/web/client/components/buttons/ZoomToMaxExtentButton.jsx +++ b/web/client/components/buttons/ZoomToMaxExtentButton.jsx @@ -29,8 +29,7 @@ var ZoomToMaxExtentButton = React.createClass({ id: React.PropTypes.string, style: React.PropTypes.object, glyphicon: React.PropTypes.string, - text: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]), - hiddenText: React.PropTypes.bool, + text: React.PropTypes.string, btnSize: React.PropTypes.oneOf(['large', 'medium', 'small', 'xsmall']), // redux store slice with map configuration (bound through connect to store at the end of the file) mapConfig: React.PropTypes.object, @@ -42,7 +41,7 @@ var ZoomToMaxExtentButton = React.createClass({ id: "mapstore-zoomtomaxextent", style: undefined, glyphicon: "resize-full", - text: "", + text: undefined, hiddenText: true, btnSize: 'xsmall' }; @@ -54,9 +53,9 @@ var ZoomToMaxExtentButton = React.createClass({ bsStyle="default" bsSize={this.props.btnSize} onClick={() => this.zoomToMaxExtent()}> - {this.props.glyphicon ? : ""} - {!this.props.hiddenText && this.props.glyphicon ? "\u00A0" : ""} - {!(this.props.hiddenText && this.props.glyphicon) ? this.props.text : ""} + {this.props.glyphicon ? : null} + {this.props.glyphicon && this.props.text ? "\u00A0" : null} + {this.props.text} ); }, diff --git a/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx b/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx new file mode 100644 index 00000000000..791ae5603af --- /dev/null +++ b/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx @@ -0,0 +1,76 @@ +/** + * Copyright 2015, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ +var React = require('react/addons'); +var ZoomToMaxExtentButton = require('../ZoomToMaxExtentButton'); +var expect = require('expect'); + +// initializes Redux store +var Provider = require('react-redux').Provider; +var store = require('./../../../examples/myapp/stores/myappstore'); + +describe('This test for ZoomToMaxExtentButton', () => { + afterEach((done) => { + React.unmountComponentAtNode(document.body); + document.body.innerHTML = ''; + setTimeout(done); + }); + + // test DEFAULTS + it('test default properties', () => { + const zmeBtn = React.render( + + {() => } + , + document.body); + expect(zmeBtn).toExist(); + + const zmeBtnNode = React.findDOMNode(zmeBtn); + expect(zmeBtnNode).toExist(); + expect(zmeBtnNode.id).toBe("mapstore-zoomtomaxextent"); + + expect(zmeBtnNode).toExist(); + expect(zmeBtnNode.className.indexOf('default') >= 0).toBe(true); + expect(zmeBtnNode.innerHTML).toExist(); + }); + + it('test glyphicon property', () => { + const zmeBtn = React.render( + + {() => } + , + document.body); + expect(zmeBtn).toExist(); + + const zmeBtnNode = React.findDOMNode(zmeBtn); + expect(zmeBtnNode).toExist(); + expect(zmeBtnNode).toExist(); + const icons = zmeBtnNode.getElementsByTagName('span'); + expect(icons.length).toBe(1); + }); + + it('test glyphicon property with text', () => { + const zmeBtn = React.render( + + {() => } + , + document.body); + expect(zmeBtn).toExist(); + + const zmeBtnNode = React.findDOMNode(zmeBtn); + expect(zmeBtnNode).toExist(); + expect(zmeBtnNode).toExist(); + + const btnItems = zmeBtnNode.getElementsByTagName('span'); + expect(btnItems.length).toBe(3); + + expect(btnItems[0].innerHTML).toBe(""); + expect(btnItems[1].innerHTML).toBe(" "); + expect(btnItems[2].innerHTML).toBe("button"); + }); + +});