react-range-progress - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

dist/index.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.trackPosition = exports.toRgbaString = undefined;
 
@@ -16,2 +17,15 @@ 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 toRgbaString = exports.toRgbaString = function toRgbaString(rgbaObject) {
+  return 'rgba(' + rgbaObject.r + ', ' + rgbaObject.g + ', ' + rgbaObject.b + ', ' + rgbaObject.a + ')';
+};
+
+var trackPosition = exports.trackPosition = function trackPosition(_ref) {
+  var thumbSize = _ref.thumbSize;
+  var height = _ref.height;
+  return {
+    top: (thumbSize - Math.min(height, thumbSize)) / 2,
+    height: height + 'px'
+  };
+};
+
 var Range = function Range(props) {
@@ -26,11 +40,2 @@ var val = props.value;
 
-  var trackPosition = {
-    top: (props.thumbSize - Math.min(props.height, props.thumbSize)) / 2,
-    height: props.height + 'px'
-  };
-
-  var toRgbaString = function toRgbaString(rgbaObject) {
-    return 'rgba(' + rgbaObject.r + ', ' + rgbaObject.g + ', ' + rgbaObject.b + ', ' + rgbaObject.a + ')';
-  };
-
   return _react2.default.createElement(
@@ -51,2 +56,3 @@ 'div',
     _react2.default.createElement('div', {
+      id: 'rrp-track',
       style: _extends({
@@ -58,4 +64,5 @@ border: 0,
         width: '100%'
-      }, trackPosition) }),
+      }, trackPosition(props)) }),
     _react2.default.createElement('div', {
+      id: 'rrp-fill',
       style: _extends({
@@ -68,4 +75,5 @@ border: 0,
         width: 'calc(100% * ' + percentProgress + ' + ' + (1 - percentProgress) * componentHeight + 'px)'
-      }, trackPosition) }),
+      }, trackPosition(props)) }),
     props.hideThumb ? null : _react2.default.createElement('div', {
+      id: 'rrp-thumb',
       style: {
@@ -86,3 +94,3 @@ position: 'absolute',
     _react2.default.createElement('input', {
-      style: _extends({}, trackPosition, {
+      style: _extends({}, trackPosition(props), {
         width: 'calc(100% - ' + componentHeight + 'px)',
@@ -89,0 +97,0 @@ marginLeft: componentHeight / 2,

package.json

 {
   "name": "react-range-progress",
-  "version": "3.0.3",
-  "description": "Component for react to ease styling of range inputs.",
+  "version": "3.0.4",
+  "description": "Eases styling of sliders (range inputs).",
   "main": "dist/index.js",
   "scripts": {
     "commit": "git-cz",
-    "test": "babel-tape-runner src/test.js | faucet",
+    "test": "babel-tape-runner src/test.js",
+    "test:pretty": "babel-tape-runner src/test.js | faucet",
+    "test:nyc": "NODE_ENV=test ./node_modules/nyc/bin/nyc.js -x test.js npm test",
+    "coverage": "nyc report --reporter=lcov",
+    "report-coverage": "cat ./coverage/lcov.info | codecov",
+    "check-coverage": "nyc check-coverage --functions 75",
     "build": "./node_modules/.bin/babel ./src/index.js -o ./dist/index.js",
@@ -21,2 +26,3 @@ "prepublish": "npm run build",
     "progress",
+    "slider",
     "volume"
@@ -39,2 +45,3 @@ ],
     "babel-loader": "6.2.5",
+    "babel-plugin-istanbul": "2.0.1",
     "babel-plugin-transform-object-rest-spread": "6.8.0",
@@ -44,6 +51,9 @@ "babel-preset-es2015": "6.14.0",
     "babel-preset-stage-0": "6.5.0",
+    "babel-register": "6.14.0",
     "babel-tape-runner": "2.0.1",
+    "codecov.io": "0.1.6",
     "extend-tape": "1.2.0",
     "faucet": "0.0.1",
     "ghooks": "1.3.2",
+    "nyc": "8.1.0",
     "react": "15.3.1",
@@ -56,10 +66,20 @@ "react-addons-test-utils": "15.3.1",
   },
-  "czConfig": {
-    "path": "node_modules/cz-conventional-changelog"
-  },
   "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    },
     "ghooks": {
-      "pre-commit": "npm run test"
+      "pre-commit": "npm run test:nyc && npm run check-coverage"
     }
+  },
+  "nyc": {
+    "include": [
+      "src/index.js"
+    ],
+    "require": [
+      "babel-register"
+    ],
+    "sourceMap": false,
+    "instrument": false
   }
 }

src/index.js

 import React, { PropTypes } from 'react'
 
+export const toRgbaString = rgbaObject => `rgba(${rgbaObject.r}, ${rgbaObject.g}, ${rgbaObject.b}, ${rgbaObject.a})`
+
+export const trackPosition = ({thumbSize, height}) => ({
+  top: (thumbSize - Math.min(height, thumbSize)) / 2,
+  height: height + 'px'
+})
+
 const Range = props => {
@@ -12,9 +19,2 @@ const val = props.value
 
-  const trackPosition = {
-    top: (props.thumbSize - Math.min(props.height, props.thumbSize)) / 2,
-    height: props.height + 'px'
-  }
-
-  const toRgbaString = rgbaObject => `rgba(${rgbaObject.r}, ${rgbaObject.g}, ${rgbaObject.b}, ${rgbaObject.a})`
-
   return <div
@@ -121,2 +121,3 @@ style={{
            <div
+             id='rrp-track'
              style={{
@@ -128,5 +129,6 @@ border: 0,
                width: `100%`,
-               ...trackPosition
+               ...trackPosition(props)
              }}></div>
            <div
+             id='rrp-fill'
              style={{
@@ -139,6 +141,7 @@ border: 0,
                width: `calc(100% * ${percentProgress} + ${(1 - percentProgress) * componentHeight}px)`,
-               ...trackPosition
+               ...trackPosition(props)
              }}></div>
              {props.hideThumb ? null
              : <div
+                id='rrp-thumb'
                 style={{
@@ -161,3 +164,3 @@ position: 'absolute',
              style={{
-               ...trackPosition,
+               ...trackPosition(props),
                width: 'calc(100% - ' + componentHeight + 'px)',
@@ -164,0 +167,0 @@ marginLeft: componentHeight / 2,

src/test.js

@@ -9,17 +9,160 @@ import React from 'react'
 // Component to test
-import Range from './index'
+import Range, { toRgbaString, trackPosition } from './index'
 
-const handler = () => {
-  // nothing yet!
-}
+test('Testing toRgbaString', (t) => {
+  const mock = {
+    r: 1,
+    g: 2,
+    b: 3,
+    a: 0.5
+  }
+  const actual = toRgbaString(mock)
+  const expected = `rgba(1, 2, 3, 0.5)`
+  t.equal(actual, expected, 'formats object to string compliant with css rgba syntax')
+  t.end()
+})
 
-test('Testing react component', (t) => {
-  // Shallow rendering
-  const component = createComponent.shallow(<Range onChange={handler} value={0} />)
-  var allInputs = component.findByQuery('input')
-  // Test component props and content
-  // t.equal(component.props.className, 'default-class', 'ClassName props of component should equal "share"')
-  // t.equal(component.text, 'share', 'Label props of component should be rendered as Button text "share"')
+test('Testing trackPosition with thumb bigger than track', (t) => {
+  const mock = {
+    height: 37, thumbSize: 87
+  }
+  const actual = trackPosition(mock)
+  const expected = {
+    top: 25,
+    height: '37px'
+  }
+  t.equal(actual.top, expected.top, 'sets top gap to correct value')
+  t.equal(actual.height, expected.height, 'sets height to max param')
+  t.end()
+})
 
+test('Testing trackPosition with thumb lower than track', (t) => {
+  const mock = {
+    height: 100, thumbSize: 12
+  }
+  const actual = trackPosition(mock)
+  const expected = {
+    top: 0,
+    height: '100px'
+  }
+  t.equal(actual.top, expected.top, 'sets top gap = 0 if thumb lower than track')
+  t.equal(actual.height, expected.height, 'sets height to max param')
   t.end()
 })
+
+test('Testing component default values when no props set', (t) => {
+  const component = createComponent.shallow(<Range />)
+
+  const defaultProps = {
+    fillColor: {r: 255, g: 255, b: 255, a: 1},
+    trackColor: {r: 255, g: 255, b: 255, a: 0.5},
+    thumbColor: {r: 255, g: 255, b: 255, a: 1},
+    thumbSize: 12,
+    height: 6,
+    min: 0,
+    max: 100,
+    value: 0
+  }
+
+  const percentProgress = defaultProps.value / (defaultProps.max - defaultProps.min)
+
+  const rangeInput = component.findByQuery('input')[0]
+  const trackDiv = component.findByQuery('#rrp-track')[0]
+  const fillDiv = component.findByQuery('#rrp-fill')[0]
+  const thumb = component.findByQuery('#rrp-thumb')[0]
+
+  t.equal(component.props.style.height, `${defaultProps.thumbSize}px`, 'base div is thumb default size')
+
+  t.equal(rangeInput.props.min, defaultProps.min, 'default min value is set on range input')
+  t.equal(rangeInput.props.max, defaultProps.max, 'default max value is set on range input')
+
+  t.equal(trackDiv.props.style.background, toRgbaString(defaultProps.trackColor), 'default track color is set on track div')
+  t.equal(trackDiv.props.style.borderRadius, `${defaultProps.height}px`, 'track div corner radius equals height prop')
+  t.equal(trackDiv.props.style.top, trackPosition(defaultProps).top, 'track div has correct top margin')
+  t.equal(trackDiv.props.style.height, trackPosition(defaultProps).height, 'track div has correct height')
+
+  t.equal(fillDiv.props.style.background, toRgbaString(defaultProps.fillColor), 'default fill color is set on fill div')
+  t.equal(fillDiv.props.style.borderRadius, `${defaultProps.height}px`, 'fill div corner radius equals height prop')
+  t.equal(fillDiv.props.style.width, `calc(100% * ${percentProgress} + ${(1 - percentProgress) * defaultProps.thumbSize}px)`, 'width is 0')
+
+  t.equal(thumb.props.style.background, toRgbaString(defaultProps.thumbColor), 'default thumb color is set on thumb div')
+
+  t.end()
+})
+
+test('Testing when height > thumbsize', (t) => {
+  const bigVal = 43
+  const smallVal = 13
+  const component = createComponent.shallow(<Range height={bigVal} thumbSize={smallVal} />)
+  t.equal(component.props.style.height, `${bigVal}px`, 'when height > thumbsize, base div is set to height prop')
+  t.end()
+})
+
+test('Testing when height < thumbsize', (t) => {
+  const bigVal = 43
+  const smallVal = 13
+  const component = createComponent.shallow(<Range height={smallVal} thumbSize={bigVal} />)
+  t.equal(component.props.style.height, `${bigVal}px`, 'when height > thumbsize, base div is set to height prop')
+  t.end()
+})
+
+test('Testing when hideThumb = true', (t) => {
+  const component = createComponent.shallow(<Range hideThumb />)
+  const thumb = component.findByQuery('#rrp-thumb')[0]
+  t.equal(thumb, undefined, 'thumb is not displayed')
+  t.end()
+})
+
+test('Testing when setting props', (t) => {
+  let handlerWasFired = false
+  const handler = e => {
+    handlerWasFired = e
+  }
+
+  const color0 = {
+    r: 10,
+    g: 10,
+    b: 10,
+    a: 0.8
+  }
+
+  const color1 = {
+    r: 45,
+    g: 45,
+    b: 45,
+    a: 1
+  }
+
+  const color2 = {
+    r: 76,
+    g: 76,
+    b: 76,
+    a: 0.87
+  }
+
+  const component = createComponent.shallow(
+    <Range
+      thumbSize={98}
+      thumbColor={color2}
+      fillColor={color0}
+      trackColor={color1}
+      onChange={handler} />
+    )
+
+  const fillDiv = component.findByQuery('#rrp-fill')[0]
+  t.equal(fillDiv.props.style.background, toRgbaString(color0), 'fill div is colored as fillColor')
+
+  const trackDiv = component.findByQuery('#rrp-track')[0]
+  t.equal(trackDiv.props.style.background, toRgbaString(color1), 'track div is colored as trackColor')
+
+  const thumb = component.findByQuery('#rrp-thumb')[0]
+  t.equal(thumb.props.style.background, toRgbaString(color2), 'thumb is colored as thumbColor')
+  t.equal(thumb.props.style.height, '98px', 'thumb height = thumbSize')
+  t.equal(thumb.props.style.width, 98, 'thumb width = thumbSize')
+
+  const rangeInput = component.findByQuery('input')[0]
+  rangeInput.onChange(99)
+  t.equal(handlerWasFired, 99, 'handler is fired when range value is changed')
+
+  t.end()
+})

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

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

79958

increased by320.79%

Number of package files

19

increased by111.11%

Lines of code

872

increased by167.48%

Worsened metrics

Dev dependency count

22

increased by22.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes