@holidayextras/react-progress-bar - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

CHANGELOG.md

 # Change log
 
+### 2.1.0
+- Add a new optional prop for the progress bar's start point before animation.
+- Replace react-shallow-render with enzyme in tests
+- Upgrade other dev dependencies
+- Add nvmrc for node 4.4.4 (project is still compatible with 0.12.9)
+
 ### 2.0.3
-- Working version of 2.0.1
+- Re-publish 2.0.1 without missing files
 
@@ -31,2 +37,1 @@ ### 2.0.1
 - Initial release
-

dist/ProgressBar.js

@@ -10,2 +10,3 @@ 'use strict';
   propTypes: {
+    start: React.PropTypes.number,
     now: React.PropTypes.number,
@@ -21,2 +22,3 @@ duration: React.PropTypes.number,
     return {
+      start: 0,
       now: 100,
@@ -32,3 +34,3 @@ duration: 1,
     return {
-      loaded: 0
+      loaded: this.props.start
     };
@@ -35,0 +37,0 @@ },

doc/example.js

 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var ProgressBar = require('../src/ProgressBar.jsx');
@@ -35,2 +36,5 @@
 
+        <h3>With a start point of 50</h3>
+        <ProgressBar start={50} now={70} duration={20} />
+
         <h2>With an external control</h2>
@@ -59,2 +63,2 @@ <h3>Updates based on a percent (as integer) you pass in</h3>
 
-React.render(<Example />, document.getElementById('container'));
+ReactDOM.render(<Example />, document.getElementById('container'));

package.json

 {
   "name": "@holidayextras/react-progress-bar",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Component to generate a simple loading bar (wrapped in a panel)",
@@ -29,7 +29,8 @@ "main": "dist/ProgressBar.js",
     "babelify": "^6.3.0",
-    "browserify": "^11.1.0",
-    "istanbul": "^0.3.22",
-    "make-up": "^5.3.1",
+    "browserify": "^13.0.1",
+    "enzyme": "^2.3.0",
+    "istanbul": "^0.4.3",
+    "make-up": "^9.2.0",
     "mocha": "^2.3.3",
-    "react-shallow-render": "^1.0.1",
+    "react-addons-test-utils": "^0.14.8",
     "react-tests-globals-setup": "^1.0.0",
@@ -36,0 +37,0 @@ "sinon": "^1.17.1",

README.md

@@ -7,3 +7,3 @@ # react-progress-bar
 var ProgressBar = require('react-progress-bar');
-React.render(<ProgressBar />, document.getElementById('container'));
+ReactDOM.render(<ProgressBar />, document.getElementById('container'));
 ```
@@ -13,3 +13,4 @@
 
-- __now__ - The currently loaded percentage you want to diplay. Default: 100.
+- __start__ - The starting point for the transition to the loaded percentage. Default: 0.
+- __now__ - The currently loaded percentage you want to display. Default: 100.
 - __duration__ The duration of the transition to the loaded percentage. - Default: 1.
@@ -16,0 +17,0 @@ - __title__ A title on the loading panel. - Default: null.

src/ProgressBar.jsx

@@ -9,2 +9,3 @@ 'use strict';
   propTypes: {
+    start: React.PropTypes.number,
     now: React.PropTypes.number,
@@ -20,2 +21,3 @@ duration: React.PropTypes.number,
     return {
+      start: 0,
       now: 100,
@@ -31,3 +33,3 @@ duration: 1,
     return {
-      loaded: 0
+      loaded: this.props.start
     };
@@ -45,3 +47,3 @@ },
         }
-      } catch(e) {
+      } catch (e) {
         // Because our isMounted method throws if DOM has mutated, take advantage here
@@ -48,0 +50,0 @@ // and clear the timeout when we've hit this problem.

test/testProgressBar.jsx

 'use strict';
 
 require('react-tests-globals-setup');
-var React = require('react/addons');
+var React = require('react');
+var ReactDOM = require('react-dom');
 var ReactBootstrap = require('react-bootstrap');
-var shallowRender = require('react-shallow-render');
-var TestUtils = React.addons.TestUtils;
+var shallow = require('enzyme').shallow;
+var TestUtils = require('react-addons-test-utils');
 
@@ -15,2 +16,3 @@ var assert = require('assert');
 var defaultProps = {
+  start: 0,
   now: 100,
@@ -36,13 +38,14 @@ duration: 1,
 
-    var renderOutput;
+    var wrapper;
+
     before(function() {
-      renderOutput = shallowRender(<ProgressBar />);
+      wrapper = shallow(<ProgressBar />);
     });
 
     it('returns a react-bootstrap panel', function() {
-      assert.equal(renderOutput.type, ReactBootstrap.Panel);
+      assert.equal(wrapper.type(), ReactBootstrap.Panel);
     });
 
-    it('should count 4 children', function() {
-      assert.equal(React.Children.count(renderOutput.props.children), 4);
+    it('should count 2 children', function() {
+      assert.equal(wrapper.children().length, 2);
     });
@@ -52,23 +55,16 @@
       it('should be a style tag', function() {
-        assert.equal(renderOutput.props.children[0].type, 'style');
+        assert.equal(wrapper.childAt(0).type(), 'style');
       });
     });
 
-    context('3rd child', function() {
+    context('2nd child', function() {
       it('should be a ReactBootstrap ProgressBar', function() {
-        assert.equal(renderOutput.props.children[2].type, ReactBootstrap.ProgressBar);
+        assert.equal(wrapper.childAt(1).type(), ReactBootstrap.ProgressBar);
       });
 
       it('should have the same bsStyle prop as the parent', function() {
-        assert.equal(renderOutput.props.children[2].props.bsStyle, renderOutput.props.bsStyle);
+        assert.equal(wrapper.prop('bsStyle'), wrapper.childAt(1).prop('bsStyle'));
       });
     });
 
-    context('2nd & 4th child', function() {
-      it('should be undefined', function() {
-        assert.equal(renderOutput.props.children[3], undefined);
-        assert.equal(renderOutput.props.children[1], undefined);
-      });
-    });
-
   });
@@ -79,4 +75,4 @@
       var title = 'This is a title';
-      var renderOutput = shallowRender(<ProgressBar title={title} />);
-      assert.equal(renderOutput.props.header, title);
+      var wrapper = shallow(<ProgressBar title={title} />);
+      assert.equal(wrapper.prop('header'), title);
     });
@@ -87,17 +83,31 @@ });
 
-    var renderOutput;
+    var wrapper;
     var subtitle = 'This is a subtitle';
+
     before(function() {
-      renderOutput = shallowRender(<ProgressBar subtitle={subtitle} />);
+      wrapper = shallow(<ProgressBar subtitle={subtitle} />);
     });
 
     it('should have a 2nd child that is a paragraph', function() {
-      assert.equal(renderOutput.props.children[1].type, 'p');
+      assert.equal(wrapper.childAt(1).type(), 'p');
     });
 
     it('should have the correct text', function() {
-      assert.equal(renderOutput.props.children[1].props.children, subtitle);
+      assert.equal(wrapper.childAt(1).text(), subtitle);
     });
   });
 
+  context('with a start point', function() {
+
+    var wrapper;
+
+    before(function() {
+      wrapper = shallow(<ProgressBar start={50} />);
+    });
+
+    it('should render a progress bar at 50%', function() {
+      assert.equal(wrapper.childAt(1).prop('now'), 50);
+    });
+  });
+
   context('render into document', function() {
@@ -107,2 +117,3 @@
     var now = 75;
+
     beforeEach(function() {
@@ -156,3 +167,3 @@ clock = sinon.useFakeTimers();
       var spy = sinon.spy(clock, 'clearTimeout');
-      React.unmountComponentAtNode(React.findDOMNode(element.refs.sot).parentNode);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(element.refs.sot).parentNode);
       assert(spy.calledOnce);
@@ -208,7 +219,4 @@ });
       });
-
     });
-
   });
-
 });

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

1215131

increased by7003.95%

Number of package files

26

increased by100%

Lines of code

29867

increased by8409.12%

Number of lines in readme file

34

increased by3.03%

Worsened metrics

Dev dependency count

11

increased by10%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes