Updated babel, added tests

Author: zackify

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ]
+}

example/example.config.js

@@ -13,7 +13,7 @@ module.exports = {
   },
   module: {
     loaders: [
-      { test: /\.jsx$|\.es6$|\.js$/, loaders: ['babel-loader?stage=0'], exclude: /node_modules/ },
+      { test: /\.jsx$|\.es6$|\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ },
     ]
   },
   plugins: [

example/server.config.js

@@ -22,7 +22,7 @@ module.exports = {
   },
   module: {
     loaders: [
-      { test: /\.jsx$|\.es6$|\.js$/, loaders: ['react-hot', 'babel-loader?stage=0'], exclude: /node_modules/ },
+      { test: /\.jsx$|\.es6$|\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
       { test: /\.scss$|\.css$/, loader: 'style-loader!style!css!sass' },
       { test: /\.(jpe?g|png|gif)$/i, loader: 'url?limit=10000!img?progressive=true' }
     ]

lib/image.js

@@ -1,53 +1,54 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _react = require('react');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _react2 = _interopRequireDefault(_react);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _react = require('react');
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-var _react2 = _interopRequireDefault(_react);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var Image = (function (_React$Component) {
+var Image = function (_React$Component) {
   _inherits(Image, _React$Component);
 
   function Image() {
-    var _this = this;
-
     _classCallCheck(this, Image);
 
-    _get(Object.getPrototypeOf(Image.prototype), 'constructor', this).call(this);
-
-    this.fadeIn = function () {
-      _this.setState({ opacity: 1 });
-    };
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Image).call(this));
 
-    this.state = {
+    _this.state = {
       opacity: 0
     };
+    _this.fadeIn = _this.fadeIn.bind(_this);
+    return _this;
   }
 
   _createClass(Image, [{
+    key: 'fadeIn',
+    value: function fadeIn() {
+      this.setState({ opacity: 1 });
+    }
+  }, {
     key: 'render',
     value: function render() {
       //this vs including an Object.assign polyfill
       var style = this.props.style || {};
       style.transition = 'opacity ' + (this.props.speed || 1) + 's';
       style.opacity = this.state.opacity;
 
-      return _react2['default'].createElement('img', _extends({}, this.props, {
+      return _react2.default.createElement('img', _extends({}, this.props, {
         style: style,
         src: this.props.src,
         onLoad: this.fadeIn
@@ -56,7 +57,6 @@ var Image = (function (_React$Component) {
   }]);
 
   return Image;
-})(_react2['default'].Component);
+}(_react2.default.Component);
 
-exports['default'] = Image;
-module.exports = exports['default'];
+exports.default = Image;

package.json

@@ -1,11 +1,12 @@
 {
   "name": "legit-image",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "an img tag, with built in lazy loading",
   "main": "lib/image.js",
   "scripts": {
-    "compile": "babel src --stage 0 --out-dir lib;",
-    "prepublish": "babel src --stage 0 --out-dir lib;",
+    "test": "mocha tests --recursive --require babel-register",
+    "test-watch": "mocha tests --recursive --require babel-register --watch",
+    "compile": "babel src --out-dir lib;",
     "dev-server": "webpack-dev-server --config ./example/server.config.js --hot --port 8881",
     "example": "webpack --config ./example/example.config.js"
   },
@@ -27,9 +28,16 @@
   },
   "homepage": "https://github.com/legitcode/image#readme",
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.23",
-    "babel-loader": "^5.3.2",
+    "babel-cli": "^6.7.5",
+    "babel-core": "^6.7.6",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-register": "^6.7.2",
+    "chai": "^3.5.0",
+    "enzyme": "^2.2.0",
+    "mocha": "^2.4.5",
+    "react-addons-test-utils": "^15.0.1",
     "react-hot-loader": "^1.3.0",
     "webpack": "^1.12.1",
     "webpack-dev-server": "^1.10.1"

src/image.js

@@ -7,9 +7,10 @@ export default class Image extends React.Component{
     this.state = {
       opacity: 0
     }
+    this.fadeIn = this.fadeIn.bind(this)
   }
 
-  fadeIn = () =>{
+  fadeIn() {
     this.setState({opacity: 1})
   }
 

tests/image.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import Image from '../src/image'
+
+describe('Image', () => {
+  it('renders with opacity: 0', () => {
+    const wrapper = shallow(<Image src="blah" />)
+    expect(wrapper.props().style.opacity).to.equal(0)
+  })
+
+  it('changes opacity on state change', () => {
+    const wrapper = shallow(<Image src="blah" />)
+    wrapper.setState({ opacity: 1 })
+    expect(wrapper.props().style.opacity).to.equal(1)
+  })
+})