feat(Fade): enable fading components

eddywashere · eddywashere · commit a84df684a0ee · 2016-03-12T19:42:42.000-08:00
diff --git a/lib/Fade.jsx b/lib/Fade.jsx
@@ -0,0 +1,59 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  className: PropTypes.string
+};
+
+const defaultProps = {};
+
+class Fade extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fadeIn: false
+    };
+
+    this.fade = this.fade.bind(this);
+    this.fadeIn = this.fadeIn.bind(this);
+    this.fadeOut = this.fadeOut.bind(this);
+  }
+
+  fade(fade, cb, delay) {
+    this.setState({
+      fadeIn: fade
+    });
+
+    if (cb) {
+      setTimeout(cb, delay);
+    }
+  }
+
+  fadeIn(cb, delay) {
+    this.fade(true, cb, delay);
+  }
+
+  fadeOut(cb, delay) {
+    this.fade(false, cb, delay);
+  }
+
+  render() {
+    const classes = classNames(
+      this.props.className,
+      'fade',
+      {
+        in: this.state.fadeIn
+      }
+    );
+
+    return (
+      <div {...this.props} className={classes} />
+    );
+  }
+}
+
+Fade.propTypes = propTypes;
+Fade.defaultProps = defaultProps;
+
+export default Fade;
diff --git a/lib/index.js b/lib/index.js
@@ -6,6 +6,7 @@ import Dropdown from './Dropdown';
 import DropdownItem from './DropdownItem';
 import DropdownMenu from './DropdownMenu';
 import DropdownToggle from './DropdownToggle';
+import Fade from './Fade';
 import Label from './Label';
 import Popover from './Popover';
 import PopoverTitle from './PopoverTitle';
@@ -22,6 +23,7 @@ export {
   DropdownItem,
   DropdownMenu,
   DropdownToggle,
+  Fade,
   Label,
   Popover,
   PopoverContent,
diff --git a/test/Fade.spec.js b/test/Fade.spec.js
@@ -0,0 +1,64 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow, mount } from 'enzyme';
+import { Fade } from '../lib';
+
+describe('Fade', () => {
+  it('should render with "fade" class', () => {
+    const wrapper = shallow(<Fade>Yo!</Fade>);
+
+    expect(wrapper.hasClass('fade')).toBe(true);
+    expect(wrapper.hasClass('in')).toBe(false);
+    expect(wrapper.text()).toBe('Yo!');
+  });
+
+  it('should render additional classes', () => {
+    const wrapper = shallow(<Fade className="other">Yo!</Fade>);
+
+    expect(wrapper.hasClass('other')).toBe(true);
+    expect(wrapper.hasClass('fade')).toBe(true);
+    expect(wrapper.hasClass('in')).toBe(false);
+  });
+
+  it('should toggle "in" class with fadeIn & fadeOut', () => {
+    const wrapper = mount(<Fade>Yo!</Fade>);
+    const instance = wrapper.instance();
+
+    expect(wrapper.hasClass('in')).toBe(false);
+
+    instance.fadeIn();
+    // hasClass does not pick up updates
+    // maybe related https://github.com/airbnb/enzyme/issues/134
+    expect(ReactDOM.findDOMNode(instance).className).toBe('fade in');
+
+    instance.fadeOut();
+
+    expect(ReactDOM.findDOMNode(instance).className).toBe('fade');
+  });
+
+  it('should call fadeIn & fadeOut with delayed callbacks', () => {
+    jasmine.clock().install();
+
+    const fadeInCallback = jasmine.createSpy('spy');
+    const fadeOutCallback = jasmine.createSpy('spy');
+    const wrapper = mount(<Fade>Yo!</Fade>);
+    const instance = wrapper.instance();
+
+    expect(wrapper.hasClass('in')).toBe(false);
+
+    instance.fadeIn(fadeInCallback, 250);
+    expect(fadeInCallback).not.toHaveBeenCalled();
+
+    jasmine.clock().tick(250);
+    expect(fadeInCallback).toHaveBeenCalled();
+
+    instance.fadeOut(fadeOutCallback, 250);
+    expect(fadeOutCallback).not.toHaveBeenCalled();
+
+    jasmine.clock().tick(250);
+    expect(fadeOutCallback).toHaveBeenCalled();
+
+    jasmine.clock().uninstall();
+  });
+});
