Merge pull request react-bootstrap#261 from jquense/fade-mixin-root-element-fix

fade does include the root element

Author: stevoland

src/FadeMixin.js

@@ -1,25 +1,39 @@
-var React = require('react');
-
+/*global document */
 // TODO: listen for onTransitionEnd to remove el
+function getElementsAndSelf (root, classes){
+  var els = root.querySelectorAll('.' + classes.join('.'));
+
+  els = [].map.call(els, function(e){ return e; });
+
+  for(var i = 0; i < classes.length; i++){
+    if( !root.className.match(new RegExp('\\b' +  classes[i] + '\\b'))){
+      return els;
+    }
+  }
+  els.unshift(root);
+  return els;
+}
+
 module.exports = {
   _fadeIn: function () {
     var els;
 
     if (this.isMounted()) {
-      els = this.getDOMNode().querySelectorAll('.fade');
+      els = getElementsAndSelf(this.getDOMNode(), ['fade']);
+
       if (els.length) {
-        Array.prototype.forEach.call(els, function (el) {
+        els.forEach(function (el) {
           el.className += ' in';
         });
       }
     }
   },
 
   _fadeOut: function () {
-    var els = this._fadeOutEl.querySelectorAll('.fade.in');
+    var els = getElementsAndSelf(this._fadeOutEl, ['fade', 'in']);
 
     if (els.length) {
-      Array.prototype.forEach.call(els, function (el) {
+      els.forEach(function (el) {
         el.className = el.className.replace(/\bin\b/, '');
       });
     }
@@ -41,8 +55,9 @@ module.exports = {
   },
 
   componentWillUnmount: function () {
-    var els = this.getDOMNode().querySelectorAll('.fade'),
+    var els = getElementsAndSelf(this.getDOMNode(), ['fade']),
         container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+
     if (els.length) {
       this._fadeOutEl = document.createElement('div');
       container.appendChild(this._fadeOutEl);

test/FadeMixinSpec.jsx

@@ -0,0 +1,63 @@
+/** @jsx React.DOM */
+/*global describe, beforeEach, afterEach, it, assert */
+
+var React          = require('react');
+var ReactTestUtils = require('react/lib/ReactTestUtils');
+var FadeMixin = require('../cjs/FadeMixin');
+
+var Component;
+
+describe('FadeMixin', function () {
+  beforeEach(function() {
+    Component = React.createClass({
+      mixins: [ FadeMixin ],
+
+      render: function () {
+        return this.transferPropsTo(
+          React.DOM.div({ className: 'fade' },
+            React.DOM.span({ className: 'fade' })
+          )
+        );
+      }
+    });
+  });
+
+  it('Should add the in class to all elements', function (done) {
+    var instance = ReactTestUtils.renderIntoDocument(
+          Component()
+        );
+
+    var child = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span')
+
+    setTimeout(function(){
+      assert.ok(instance.getDOMNode().className.match(/\bin\b/));
+      assert.ok(instance.getDOMNode().className.match(/\bfade\b/));
+      assert.ok(child.getDOMNode().className.match(/\bin\b/));
+      assert.ok(child.getDOMNode().className.match(/\bfade\b/));
+      done()
+    }, 25)
+  });
+
+  it('Should remove the in class for all elements', function (done) {
+    var instance = ReactTestUtils.renderIntoDocument(
+          Component()
+        );
+
+    setTimeout(function(){
+      instance.componentWillUnmount()
+      var element = instance._fadeOutEl.children[0]
+      var child   = element.children[0]
+
+      assert.ok(element.className.match(/\bin\b/));
+      assert.ok(child.className.match(/\bin\b/));
+
+      setTimeout(function(){
+        assert.ok(!element.className.match(/\bin\b/));
+        assert.ok(element.className.match(/\bfade\b/));
+        assert.ok(!child.className.match(/\bin\b/));
+        assert.ok(child.className.match(/\bfade\b/));
+        done()
+      }, 25)
+    }, 25)
+  });
+});