react-bootstrap-slider - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
   "name": "react-bootstrap-slider",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Bootstrap Slider component for React",
@@ -9,4 +9,10 @@ "scripts": {
     "build": "node_modules/.bin/babel ./src/js/react-bootstrap-slider.jsx -o ./dist/react-bootstrap-slider.js",
-    "buildDemo": "npm run build && webpack",
-    "prepublish": "npm run build"
+    "buildDemo": "npm run build && npm run buildDemoSource && npm run buildDemowp",
+    "buildDemowp": "./node_modules/.bin/webpack",
+    "buildDemoSource": "node_modules/.bin/gulp buildDemoFiles",
+    "localServer": "./node_modules/.bin/http-server -a localhost -p 8082 -c-1",
+    "prepublish": "npm run build",
+    "testDev": "node_modules/.bin/protractor --specs=./tests/e2e/slidertest1.js protractor.local.conf.js --baseUrl=http://localhost:8080/src/",
+    "testBuild": "node_modules/.bin/protractor --specs=./tests/e2e/slidertest1.js protractor.local.conf.js --baseUrl=http://localhost:8082/demo/",
+    "updateSelenium": "node_modules/.bin/webdriver-manager update"
   },
@@ -46,6 +52,14 @@ "main": "dist/react-bootstrap-slider.js",
     "babel-preset-stage-2": "^6.5.0",
+    "babel-register": "^6.9.0",
     "eslint": "^2.11.1",
     "eslint-config-eslint": "^3.0.0",
     "eslint-plugin-react": "^5.1.1",
+    "gulp": "^3.9.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-replace": "^0.5.4",
+    "http-server": "^0.9.0",
+    "jasmine-spec-reporter": "^2.4.0",
     "path": "^0.12.7",
+    "protractor": "^3.3.0",
+    "protractor-jasmine2-screenshot-reporter": "^0.3.1",
     "webpack": "^1.12.14",
@@ -52,0 +66,0 @@ "webpack-dev-server": "^1.14.1",

README.md

 # React Bootstrap Slider
 
-###Overview
+##Overview
 A ReactJS wrapper [seiyria's Bootstrap Slider component](https://github.com/seiyria/bootstrap-slider)
 
 
-###Background
+##Background
 Note: This project is a split off from my [react-bootstrap-native-slider](https://www.npmjs.com/package/react-bootstrap-native-slider) plugin.  The plan is for the react-bootstrap-slider to become a dependency of react-bootstrap-native-slider, rather than have all the code bundled into the latter, as at present.
 
 
-###How to use
+##How to use
 Install from npm with:
@@ -31,3 +31,3 @@
 ```JavaScript
-<ReactBootstrapSlider
+<ReactBootstrapSlider 
     value={this.state.currentValue}
@@ -72,16 +72,83 @@ handleChange={this.changeValue}
 
-Webpack will build the JavaScript files for the demo and put them in the /demo/js/ folder.  Demo code will go in the /demo/js/slider-bundle.min.js file.  Any 3rd-party code (jQuery, Bootstrap and the react-bootstrap-slider itself) goes into the /demo/js/vendor.min.js file.  Source maps are generated both.  You can then open /demo/index.html in your browser.
+Webpack will build the JavaScript files for the demo and put them in the /demo/js/ folder.  Demo code will go in the /demo/js/slider-bundle.min.js file.  Any 3rd-party code (jQuery, Bootstrap and the react-bootstrap-slider itself) goes into the /demo/js/vendor.min.js file.  Source maps are generated both.
 
+CSS files and the index.html file will be copied from the /src folder to the /demo folder, with the correct script tag reference being inserted into index.html.  You can then open /demo/index.html in your browser from the local server.  To run that local server, issue the command:
 
+        npm run localServer
 
+This will launch http-server running on port 8082, so you can then open the built demo from http://localhost:8082/demo/index.html.
 
 
+##Tests
+There are no unit tests.
 
+End to end (E2E) tests are handled by Protractor with Selenium Web Driver.
 
 
+###Installing Tests Dependencies
+Before running the E2E tests, you'll need to install the web driver first by running:
 
+        npm run updateSelenium
 
+You only have to do this once though.
 
 
+###Running Tests Against Dev Version
+The same set of tests can be run against either the Dev version or the built version of the Demo.  To run run tests against the development version of the Demo, you need to run:
 
+        npm run testDev
 
+This assumes that you already have webpack-dev-server running on port 8080, via an `npm run start` command.  So putting that all together, the full commands to run the Dev tests would be:
+
+        npm run updateSelenium
+        npm run start
+        npm run testDev
+
+Note: the latter command will need to be run in a separate terminal window/tab, because the first terminal will be tied up with running webpack-dev-server.
+
+
+###Running Tests Against Built Version
+To run tests against the built version, you obviously need to build that version first!  You then need a server running on port 8082, before finally running the tests in a new terminal window/tab.  The commands to do all of this would be:
+
+         npm run buildDemo
+         npm run localServer
+         npm run testBuild
+
+
+###Test Results & Reports
+Test results will be displayed in whichever terminal to your the `npm run testBuild` or `npm run testDev` commands.
+
+The tests will also generate HTML reports in the /reports folder, courtesy of the [protractor-jasmine2-screenshot-reporter](https://www.npmjs.com/package/protractor-jasmine2-screenshot-reporter) package.  Open the /reports/index.html file in a browser to see them.  Note how each test result in this report is a URL.  If you click on the URL, it will take you to a screenshot of how the browser looked when that particular test ran, which is pretty neat, IMHO!
+
+
+
+###Editing Tests
+The tests themselves are in the file tests/e2e/slidertest1.js.  The tests check:
+
+1. The page loads with the correct default values set for both the vertical and horizontal versions of the Demo.
+1. Dragging the horizontal slider to the right increases its value correctly
+1. Dragging the vertical slider upwards increases its value correctly
+1. Clicking on the Change Axes button for both demos changes each one's respective default value correctly.
+
+There's a Protractor Tutorial at http://www.protractortest.org/#/tutorial, and the the Protractor API is at http://www.protractortest.org/#/api.
+
+###Further Test Configs
+Protractor defaults to using the Firefox browser, so make sure that you have it installed!  Or if you want to use Chrome or even IE, then you'll need to make some modifications to the protractor.local.conf.js file.  Google for how to do that.
+
+Whatever other changes you make to protractor.local.conf.js, you _must_ _not_ remove this line:
+
+        browser.ignoreSynchronization = true;
+
+Protractor is actually a testing tool designed for AngularJS, and by default, it will wait for Angular models to send their update messages before proceeding onto the next test.  This line tells Protractor not to wait for any such messages, which, of course, won't be coming because you're not using Angular, sensible person that you are!
+
+
+##Update History
+Version 1.0.4: 12 June 2016.
+* Added vertical slider to demo page.
+* Updated build process to copy (and update) CSS and HTML files from /src to /demo folder using Gulp.  So no longer have to update the /demo files manually when updating build.
+* Added test suite using Protractor/Selenium.
+
+Version 1.0.3: 7 June 2016.
+* Fixed path issues in package.json scripts.
+* Removed postInstall step from package.json, as not actually required.
+

src/js/app.jsx

@@ -42,2 +42,3 @@ /* eslint-env browser */
                         { ...this.state }
+                        id="horizontalSlider"
                         value = { this.state.currentValue }
@@ -47,5 +48,5 @@ handleChange = { this.changeValue } />
                  <br /> <br />
-                Value: { newValue }
+                Value: <span id="valueSpanHorizontal">{ newValue }</span>
                 <br /><br />
-                <button onClick = { this.changeAxes } > Change axes </button>
+                <button id = "butHorizontal" onClick = { this.changeAxes } > Change axes </button>
             </div>
@@ -72,6 +73,6 @@ );
         this.setState({
-            currentValue: 500,
+            currentValue: 700,
             min: 0,
-            max: 2000,
-            step: 100
+            max: 2500,
+            step: 500
         });
@@ -86,2 +87,3 @@ }
                         { ...this.state }
+                        id="verticalSlider"
                         value = { this.state.currentValue }
@@ -92,5 +94,5 @@ handleChange = { this.changeValue }
                  <br /> <br />
-                Value: { newValue }
+                Value: <span id="valueSpanVertical">{ newValue }</span>
                 <br /><br />
-                <button onClick = { this.changeAxes } > Change axes </button>
+                <button id="butVertical" onClick = { this.changeAxes } > Change axes </button>
             </div>
@@ -97,0 +99,0 @@ );

webpack.config.babel.js

@@ -35,6 +35,6 @@ /* eslint-env node */
 
-if (TARGET === "buildDemo") {
+if (TARGET === "buildDemowp") {
     exportModule = merge(common, {
         entry: {
-            app: path.resolve(ROOT_PATH) + "/demosrc/js/app.jsx"
+            app: path.resolve(ROOT_PATH) + "/demosrc/js/appbuild.jsx"
         },
@@ -41,0 +41,0 @@ output: {

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

Lines of code

579

increased by7.62%

Number of lines in readme file

153

increased by77.91%

Worsened metrics

Total package byte prevSize

148136

decreased by-42.34%

Dev dependency count

22

increased by57.14%

Number of package files

16

decreased by-5.88%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes