diff --git a/src/Popover.js b/src/Popover.js index 4c18e2b183..c0ea27a6eb 100644 --- a/src/Popover.js +++ b/src/Popover.js @@ -1,9 +1,10 @@ import React from 'react'; import classNames from 'classnames'; import BootstrapMixin from './BootstrapMixin'; +import FadeMixin from './FadeMixin'; const Popover = React.createClass({ - mixins: [BootstrapMixin], + mixins: [BootstrapMixin, FadeMixin], propTypes: { placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']), @@ -15,12 +16,14 @@ const Popover = React.createClass({ arrowOffsetTop: React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.string ]), - title: React.PropTypes.node + title: React.PropTypes.node, + animation: React.PropTypes.bool }, getDefaultProps() { return { - placement: 'right' + placement: 'right', + animation: true }; }, @@ -28,7 +31,9 @@ const Popover = React.createClass({ const classes = { 'popover': true, [this.props.placement]: true, - 'in': this.props.positionLeft != null || this.props.positionTop != null + // in class will be added by the FadeMixin when the animation property is true + 'in': !this.props.animation && (this.props.positionLeft != null || this.props.positionTop != null), + 'fade': this.props.animation }; const style = { diff --git a/src/Tooltip.js b/src/Tooltip.js index fd769d5d12..1c7dafeb80 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -1,9 +1,10 @@ import React from 'react'; import classNames from 'classnames'; import BootstrapMixin from './BootstrapMixin'; +import FadeMixin from './FadeMixin'; const Tooltip = React.createClass({ - mixins: [BootstrapMixin], + mixins: [BootstrapMixin, FadeMixin], propTypes: { placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']), @@ -14,12 +15,14 @@ const Tooltip = React.createClass({ ]), arrowOffsetTop: React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.string - ]) + ]), + animation: React.PropTypes.bool }, getDefaultProps() { return { - placement: 'right' + placement: 'right', + animation: true }; }, @@ -27,7 +30,9 @@ const Tooltip = React.createClass({ const classes = { 'tooltip': true, [this.props.placement]: true, - 'in': this.props.positionLeft != null || this.props.positionTop != null + // in class will be added by the FadeMixin when the animation property is true + 'in': !this.props.animation && (this.props.positionLeft != null || this.props.positionTop != null), + 'fade': this.props.animation }; const style = { diff --git a/test/PopoverSpec.js b/test/PopoverSpec.js new file mode 100644 index 0000000000..611634bf5a --- /dev/null +++ b/test/PopoverSpec.js @@ -0,0 +1,26 @@ +import React from 'react'; +import ReactTestUtils from 'react/lib/ReactTestUtils'; +import Popover from '../src/Popover'; + +describe('Popover', function () { + it('Should output a popover title and content', function () { + let instance = ReactTestUtils.renderIntoDocument( + + Popover Content + + ); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'popover-title')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'popover-content')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'fade')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong')); + }); + + it('Should not have the fade class if animation is false', function () { + let instance = ReactTestUtils.renderIntoDocument( + + Popover Content + + ); + assert.equal(instance.getDOMNode().className.match(/\bfade\b/), null, 'The fade class should not be present'); + }); +}); diff --git a/test/TooltipSpec.js b/test/TooltipSpec.js new file mode 100644 index 0000000000..cd878f3a19 --- /dev/null +++ b/test/TooltipSpec.js @@ -0,0 +1,24 @@ +import React from 'react'; +import ReactTestUtils from 'react/lib/ReactTestUtils'; +import Tooltip from '../src/Tooltip'; + +describe('Tooltip', function () { + it('Should output a tooltip with content', function () { + let instance = ReactTestUtils.renderIntoDocument( + + Tooltip Content + + ); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'fade')); + }); + + it('Should not have the fade class if animation is false', function () { + let instance = ReactTestUtils.renderIntoDocument( + + Tooltip Content + + ); + assert.equal(instance.getDOMNode().className.match(/\bfade\b/), null, 'The fade class should not be present'); + }); +});