react-star-rating-input - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

demo.js

@@ -10,8 +10,5 @@ (function () {
             render: function () {
-                var that = this;
-
                 return StarRatingInput.Klass({
-                    currentValue: this.state.currentValue,
-                    prospectiveValue: this.state.prospectiveValue,
-                    onChange: function (s) { that.setState(s); }
+                    value: this.state.value,
+                    onChange: function (s) { this.setState(s); }.bind(this)
                 });
@@ -21,3 +18,3 @@ },
             getInitialState: function () {
-                return {currentValue: 0, prospectiveValue: 0};
+                return {value: 0};
             }
@@ -24,0 +21,0 @@ });

package.json

 {
   "name": "react-star-rating-input",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "React.js component for entering 0-5 stars",
@@ -8,3 +8,3 @@ "main": "index.js",
     "pretest": "jshint tests src index.js demo.js",
-    "test": "mocha tests/*.spec.js",
+    "test": "mocha -b tests/*.spec.js",
     "build": "browserify -t brfs demo.js | uglifyjs > www/bundle.js"
@@ -11,0 +11,0 @@ },

src/StarRatingInput.js

 (function () {
     'use strict';
 
-    var React = require('react'),
+    var React = require('react');
 
-        state = function (currentValue, prospectiveValue) {
-            return {currentValue: currentValue, prospectiveValue: prospectiveValue};
-        };
+    module.exports = React.createClass({
+        propTypes: {
+            value: React.PropTypes.number,
+            onChange: React.PropTypes.func
+        },
 
-    module.exports = React.createClass({
+        getDefaultProps: function () {
+            return {value: 0};
+        },
+
+        getInitialState: function () {
+            return {prospectiveValue: 0};
+        },
+
         render: function () {
@@ -19,4 +28,2 @@ return React.DOM.div(
         clearingItem: function () {
-            var that = this;
-
             return React.DOM.div(
@@ -33,4 +40,5 @@ {className: 'star-rating-clear-container', key: 0},
                         e.preventDefault();
-                        that.props.onChange(state(0, 0));
-                    }
+                        this.setState({prospectiveValue: 0});
+                        this.props.onChange({value: 0});
+                    }.bind(this)
                 }, 'Clear')
@@ -41,12 +49,8 @@ );
         starItems: function () {
-            var that = this;
-
             return [1, 2, 3, 4, 5].map(function (value) {
-                return that.starItem(value, that.anchorMode(value));
-            });
+                return this.starItem(value, this.anchorMode(value));
+            }.bind(this));
         },
 
         starItem: function (value, mode) {
-            var that = this;
-
             return React.DOM.div(
@@ -62,13 +66,14 @@ {className: 'star-rating-star-container', key: value},
                     onMouseEnter: function () {
-                        that.props.onChange(state(that.props.currentValue, value));
-                    },
+                        this.setState({prospectiveValue: value});
+                    }.bind(this),
 
                     onMouseLeave: function () {
-                        that.props.onChange(state(that.props.currentValue, 0));
-                    },
+                        this.setState({prospectiveValue: 0});
+                    }.bind(this),
 
                     onClick: function (e) {
                         e.preventDefault();
-                        that.props.onChange(state(value, 0));
-                    }
+                        this.setState({prospectiveValue: 0});
+                        this.props.onChange({value: value});
+                    }.bind(this)
                 }, value)
@@ -79,9 +84,9 @@ );
         anchorMode: function (value) {
-            if (this.props.prospectiveValue > 0) {
-                return (value <= this.props.prospectiveValue ? 'suggested' : 'off');
+            if (this.state.prospectiveValue > 0) {
+                return (value <= this.state.prospectiveValue ? 'suggested' : 'off');
             }
 
-            return (value <= this.props.currentValue ? 'on' : 'off');
+            return (value <= this.props.value ? 'on' : 'off');
         }
     });
 }());

tests/StarRatingInput.spec.js

@@ -1,2 +0,2 @@
-describe('StarRatingInput instance', function () {
+describe('StarRatingInput', function () {
     'use strict';
@@ -10,17 +10,10 @@
 
-        state = function (currentValue, prospectiveValue) {
-            return {
-                currentValue: currentValue,
-                prospectiveValue: prospectiveValue
-            };
+        props = function (value, onChange) {
+            return {value: value, onChange: (onChange ? onChange : function () {})};
         },
 
-        props = function (currentValue, prospectiveValue, onChange) {
-            var result = state(currentValue, prospectiveValue);
-            result.onChange = onChange ? onChange : function () {};
-            return result;
-        },
-
         $;
 
+    this.timeout(4000);
+
     beforeEach(function (done) {
@@ -40,2 +33,8 @@ global.document = jsdom.jsdom('<html><body></body></html>', jsdom.level(1, 'core'));
 
+    ['value', 'onChange'].forEach(function (p) {
+        it('declares the ' + p + ' property', function () {
+            assert(StarRatingInput.propTypes[p]);
+        });
+    });
+
     describe('static markup', function () {
@@ -45,3 +44,3 @@ var element;
         beforeEach(function () {
-            element = TestUtils.renderIntoDocument(StarRatingInput(props(0, 0))).getDOMNode();
+            element = TestUtils.renderIntoDocument(StarRatingInput(props(0))).getDOMNode();
         });
@@ -73,6 +72,6 @@
 
-            element = function (currentValue, prospectiveValue) {
-                return TestUtils.renderIntoDocument(
-                    StarRatingInput(props(currentValue, prospectiveValue))
-                ).getDOMNode();
+            element = function (value, prospectiveValue) {
+                var component = TestUtils.renderIntoDocument(StarRatingInput(props(value)));
+                component.setState({prospectiveValue: prospectiveValue});
+                return component.getDOMNode();
             };
@@ -89,2 +88,18 @@
 
+    describe('defaults', function () {
+        var component;
+
+        beforeEach(function () {
+            component = TestUtils.renderIntoDocument(StarRatingInput({onChange: function () {}}));
+        });
+
+        it('include default value', function () {
+            assert.strictEqual(component.props.value, 0);
+        });
+
+        it('include default prospective value', function () {
+            assert.strictEqual(component.state.prospectiveValue, 0);
+        });
+    });
+
     describe('interactions', function () {
@@ -96,3 +111,4 @@ var component,
             spy = sinon.spy();
-            component = TestUtils.renderIntoDocument(StarRatingInput(props(1, 2, spy)));
+            component = TestUtils.renderIntoDocument(StarRatingInput(props(1, spy)));
+            component.setState({prospectiveValue: 2});
         });
@@ -107,3 +123,4 @@
 
-            assert(spy.calledWith(state(1, 4)));
+            assert.strictEqual(spy.callCount, 0);
+            assert.strictEqual(component.state.prospectiveValue, 4);
         });
@@ -118,3 +135,4 @@
 
-            assert(spy.calledWith(state(1, 0)));
+            assert.strictEqual(spy.callCount, 0);
+            assert.strictEqual(component.state.prospectiveValue, 0);
         });
@@ -124,3 +142,4 @@
             TestUtils.Simulate.click(component.refs.s5);
-            assert(spy.calledWith(state(5, 0)));
+            assert(spy.calledWith({value: 5}));
+            assert.strictEqual(component.state.prospectiveValue, 0);
         });
@@ -130,5 +149,6 @@
             TestUtils.Simulate.click(component.refs.s0);
-            assert(spy.calledWith(state(0, 0)));
+            assert(spy.calledWith({value: 0}));
+            assert.strictEqual(component.state.prospectiveValue, 0);
         });
     });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22078

increased by3.75%

Lines of code

257

increased by7.98%

No dependency changes