New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
sh-input-currency
Advanced tools
sh-input-currency - npm Package Compare versions
Comparing version 0.1.1 to 0.1.3
@@ -106,4 +106,10 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| value: '', | ||
| classList: 'sh-input-currency empty', | ||
| placeholderText: '+' | ||
| display: '', | ||
| classList: { | ||
| shInputCurrency: true, | ||
| empty: true | ||
| }, | ||
| validStatus: 'unknown', | ||
| placeholderText: '+', | ||
| requiredField: { showRequired: false } | ||
| }; | ||
@@ -114,2 +120,3 @@ | ||
| _this.handleFocus = _this.handleFocus.bind(_this); | ||
| _this.validate = _this.validate.bind(_this); | ||
| return _this; | ||
@@ -119,2 +126,37 @@ } | ||
| _createClass(ShInputCurrency, [{ | ||
| key: 'validate', | ||
| value: function validate(onSubmit) { | ||
| if (onSubmit) { | ||
| this.state.classList.shTouched = true; | ||
| } | ||
| var rtn = { isValid: true }; | ||
| this.state.classList.shInvalid = false; | ||
| if (this.props.required && (this.state.value === null || this.state.value === '')) { | ||
| this.state.classList.shInvalid = true; | ||
| rtn.isValid = false; | ||
| rtn.msg = 'Required'; | ||
| } | ||
| var newState = _.clone(this.state); | ||
| this.setState(newState); | ||
| return rtn; | ||
| } | ||
| }, { | ||
| key: 'componentWillMount', | ||
| value: function componentWillMount() { | ||
| if (this.props.validator) { | ||
| this.props.validator.register(this, this.validate); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| if (this.props.validator) { | ||
| this.props.validator.unregister(this); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'runFormarters', | ||
@@ -127,15 +169,24 @@ value: function runFormarters(txt) { | ||
| value: function componentDidMount() { | ||
| var newValue = _shCore2.default.getDecimal(this.props.value); | ||
| var newState = _.clone(this.state); | ||
| newState.value = newValue; | ||
| newState.display = this.runFormarters(newValue); | ||
| newState.classList.empty = false; | ||
| if (this.props.value) { | ||
| var text = this.runFormarters(this.props.value); | ||
| this.setState({ | ||
| value: text, | ||
| classList: 'sh-input-currency' | ||
| }); | ||
| this.setState(newState, this.validate); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(props) { | ||
| var newValue = _shCore2.default.getDecimal(props.value); | ||
| if (this.props.required) { | ||
| this.state.placeholderText = 'Required Field'; | ||
| this.setState(this.state); | ||
| if (!_.isUndefined(props.value) && !_.isEqual(newValue, this.state.value)) { | ||
| var newState = _.clone(this.state); | ||
| newState.classList.empty = !newValue; | ||
| newState.value = newValue; | ||
| newState.display = this.runFormarters(newValue); | ||
| this.setState(newState, this.validate); | ||
| } | ||
| this.state.placeholderHolder = this.state.placeholderText; | ||
| } | ||
@@ -145,9 +196,17 @@ }, { | ||
| value: function handleChange(event) { | ||
| var text = event.target.value; | ||
| var _this2 = this; | ||
| this.setState({ value: text }); | ||
| event.target.value = _shCore2.default.getDecimal(text); | ||
| if (this.props.onChange) { | ||
| this.props.onChange(event); | ||
| } | ||
| event.persist(); | ||
| var dec = _shCore2.default.getDecimal(event.target.value); | ||
| this.setState({ value: dec, display: event.target.value }, function () { | ||
| if (_this2.props.validator) { | ||
| _this2.props.validator.validate(); | ||
| } else { | ||
| _this2.validate(); | ||
| } | ||
| event.target.value = dec; | ||
| _this2.props.onChange(event); | ||
| }); | ||
| } | ||
@@ -157,3 +216,3 @@ }, { | ||
| value: function handleFocus(event) { | ||
| var _this2 = this; | ||
| var _this3 = this; | ||
@@ -167,9 +226,10 @@ var text = event.target.value; | ||
| this.setState({ | ||
| value: text, | ||
| placeholderText: '' | ||
| var newState = _.clone(this.state); | ||
| newState.classList.shTouched = true; | ||
| newState.value = text; | ||
| newState.placeholderText = ''; | ||
| this.setState(newState, function () { | ||
| _this3.refs.input.select(); | ||
| }); | ||
| setTimeout(function () { | ||
| _this2.refs.input.select(); | ||
| }, 100); | ||
| } | ||
@@ -184,22 +244,20 @@ }, { | ||
| value: function handleBlur(event) { | ||
| var text = event.target.value; | ||
| this.validate(); | ||
| var newState = _.clone(this.state); | ||
| text = this.runFormarters(text); | ||
| if (event.target.value.length > 0) { | ||
| var text = event.target.value; | ||
| text = this.runFormarters(text); | ||
| newState.display = text; | ||
| } | ||
| newState.placeholderText = newState.placeholderHolder; | ||
| newState.classList.empty = !this.state.value; | ||
| newState.requiredField.showRequired = !this.state.value; | ||
| this.setState(newState); | ||
| if (this.props.onBlur) { | ||
| this.props.onBlur(event); | ||
| } | ||
| this.setState({ | ||
| value: text, | ||
| placeholderText: this.state.placeholderHolder, | ||
| classList: 'sh-input-currency' | ||
| }); | ||
| if (!this.state.value) { | ||
| this.setState({ | ||
| value: this.state.value, | ||
| classList: 'sh-input-currency empty' | ||
| }); | ||
| } | ||
| } | ||
@@ -213,8 +271,12 @@ }, { | ||
| var className = _props.className; | ||
| var validator = _props.validator; | ||
| var required = _props.required; | ||
| var value = _props.value; | ||
| var other = _objectWithoutProperties(_props, ['onFocus', 'onBlur', 'className']); | ||
| var other = _objectWithoutProperties(_props, ['onFocus', 'onBlur', 'className', 'validator', 'required', 'value']); | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| { className: this.props.className ? this.props.className + ' ' + this.state.classList : this.state.classList }, | ||
| { | ||
| className: this.props.className ? _shCore2.default.getClassNames(this.state.classList) + ' ' + this.props.className : _shCore2.default.getClassNames(this.state.classList) }, | ||
| _react2.default.createElement( | ||
@@ -228,2 +290,7 @@ 'label', | ||
| ), | ||
| _react2.default.createElement( | ||
| 'span', | ||
| { className: "required-label " + _shCore2.default.getClassNames(this.state.requiredField) }, | ||
| 'REQUIRED' | ||
| ), | ||
| _react2.default.createElement('input', _extends({ ref: 'input', | ||
@@ -237,3 +304,3 @@ className: 'sh-currency-input', | ||
| onBlur: this.handleBlur, | ||
| value: this.state.value | ||
| value: this.state.display | ||
| })) | ||
@@ -248,2 +315,17 @@ ) | ||
| ShInputCurrency.propTypes = { | ||
| validator: _react2.default.PropTypes.object, | ||
| value: _react2.default.PropTypes.any, | ||
| onChange: _react2.default.PropTypes.func, | ||
| label: _react2.default.PropTypes.string, | ||
| required: _react2.default.PropTypes.bool | ||
| }; | ||
| ShInputCurrency.defaultProps = { | ||
| validator: null, | ||
| onChange: _.noop, | ||
| label: '', | ||
| required: false | ||
| }; | ||
| exports.default = ShInputCurrency; | ||
@@ -527,3 +609,3 @@ | ||
| // module | ||
| exports.push([module.id, ".sh-input-currency {\n display: inline-block;\n height: 50px;\n width: 100%; }\n .sh-input-currency label {\n position: relative;\n display: block;\n height: 25px;\n width: 100%; }\n .sh-input-currency .label {\n position: absolute;\n top: 5px;\n left: 5px;\n right: 5px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.4);\n text-transform: uppercase;\n z-index: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; }\n .sh-input-currency.empty input {\n background: rgba(255, 255, 255, 0.1); }\n .sh-input-currency input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: calc(100% - 10px);\n padding: 25px 5px 5px 5px;\n color: white;\n border: 0;\n border-radius: 2px;\n background: transparent;\n transition: background 0.25s ease-in-out;\n outline: 0; }\n .sh-input-currency input:focus {\n -webkit-box-shadow: inset 0 1px 1px transparent, 0 0 5px rgba(255, 255, 255, 0.6);\n box-shadow: inset 0 1px 1px transparent, 0 0 5px rgba(255, 255, 255, 0.6); }\n .sh-input-currency input:hover {\n background: rgba(255, 255, 255, 0.1); }\n .sh-input-currency input::-moz-placeholder {\n color: #3ab676;\n font-weight: 700;\n opacity: 1; }\n .sh-input-currency input:-ms-input-placeholder {\n color: #3ab676;\n font-weight: 700;\n opacity: 1; }\n .sh-input-currency input::-webkit-input-placeholder {\n color: #3ab676;\n font-weight: 700;\n opacity: 1; }\n", ""]); | ||
| exports.push([module.id, ".sh-input-currency {\n display: inline-block;\n height: 50px;\n width: 100%; }\n .sh-input-currency label {\n position: relative;\n display: block;\n height: 25px;\n width: 100%; }\n .sh-input-currency .label {\n position: absolute;\n top: 5px;\n left: 5px;\n right: 5px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.4);\n text-transform: uppercase;\n z-index: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; }\n .sh-input-currency.empty input {\n background: rgba(255, 255, 255, 0.1); }\n .sh-input-currency.sh-invalid.sh-touched input {\n border: 1px solid #b25245; }\n .sh-input-currency input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: calc(100% - 10px);\n padding: 25px 5px 5px 5px;\n color: white;\n border: 0;\n border-radius: 2px;\n background: transparent;\n transition: background 0.25s ease-in-out;\n outline: 0; }\n .sh-input-currency input:focus {\n -webkit-box-shadow: inset 0 1px 1px transparent, 0 0 5px rgba(255, 255, 255, 0.6);\n box-shadow: inset 0 1px 1px transparent, 0 0 5px rgba(255, 255, 255, 0.6); }\n .sh-input-currency input:hover {\n background: rgba(255, 255, 255, 0.1); }\n .sh-input-currency input::-moz-placeholder {\n color: #3ab676;\n font-weight: 700;\n opacity: 1; }\n .sh-input-currency input:-ms-input-placeholder {\n color: #3ab676;\n font-weight: 700;\n opacity: 1; }\n .sh-input-currency input::-webkit-input-placeholder {\n color: #3ab676;\n font-weight: 700;\n opacity: 1; }\n .sh-input-currency .required-label {\n font-size: 12px;\n text-transform: uppercase;\n opacity: 0;\n position: absolute;\n right: 4px;\n top: 4px;\n color: rgba(255, 255, 255, 0.2); }\n .sh-input-currency .required-label.show-required {\n opacity: 1; }\n", ""]); | ||
@@ -530,0 +612,0 @@ // exports |
@@ -12,5 +12,11 @@ import React from 'react' | ||
| this.handleChange = this.handleChange.bind(this); | ||
| this.handleChangeMe= this.handleChangeMe.bind(this); | ||
| this.handleSubmit = this.handleSubmit.bind(this); | ||
| } | ||
| handleChangeMe(event) { | ||
| this.state.value = event.target.value; | ||
| this.setState(this.state); | ||
| } | ||
| handleChange(event) { | ||
@@ -29,4 +35,6 @@ this.state.value = event.target.value; | ||
| <form name="test" onSubmit={this.handleSubmit}> | ||
| <ShInputCurrency label="Enter Amount" value="" onChange={this.handleChange}></ShInputCurrency> | ||
| <input onChange={this.handleChange}/> | ||
| <ShInputCurrency label="Enter Amount" value={this.state.value} onChange={this.handleChange} required></ShInputCurrency> | ||
| <button type="submit">go</button> | ||
| {this.state.value} | ||
| </form> | ||
@@ -33,0 +41,0 @@ </div> |
| { | ||
| "name": "sh-input-currency", | ||
| "version": "0.1.1", | ||
| "version": "0.1.3", | ||
| "description": "Currency input box superhero theme", | ||
@@ -5,0 +5,0 @@ "main": "./bin/sh-input-currency.js", |
| import React, {Component} from 'react'; | ||
| import * as _ from 'lodash'; | ||
| import sh from 'sh-core'; | ||
| import ShCore from 'sh-core'; | ||
| require('./sh-input-currency.scss'); | ||
@@ -12,4 +12,10 @@ | ||
| value: '', | ||
| classList: 'sh-input-currency empty', | ||
| placeholderText: '+' | ||
| display: '', | ||
| classList: { | ||
| shInputCurrency: true, | ||
| empty: true | ||
| }, | ||
| validStatus: 'unknown', | ||
| placeholderText: '+', | ||
| requiredField: {showRequired: false} | ||
| }; | ||
@@ -20,35 +26,79 @@ | ||
| this.handleFocus = this.handleFocus.bind(this); | ||
| this.validate = this.validate.bind(this); | ||
| } | ||
| validate(onSubmit) { | ||
| if (onSubmit) { | ||
| this.state.classList.shTouched = true; | ||
| } | ||
| let rtn = {isValid: true}; | ||
| runFormarters(txt){ | ||
| return '$' + (this.formatNumber(Number(sh.getDecimal(txt)).toFixed(2))); | ||
| this.state.classList.shInvalid = false; | ||
| if (this.props.required && (this.state.value === null || this.state.value === '')) { | ||
| this.state.classList.shInvalid = true; | ||
| rtn.isValid = false; | ||
| rtn.msg = 'Required'; | ||
| } | ||
| var newState = _.clone(this.state); | ||
| this.setState(newState); | ||
| return rtn; | ||
| }; | ||
| componentWillMount() { | ||
| if (this.props.validator) { | ||
| this.props.validator.register(this, this.validate); | ||
| } | ||
| }; | ||
| componentWillUnmount() { | ||
| if (this.props.validator) { | ||
| this.props.validator.unregister(this); | ||
| } | ||
| }; | ||
| runFormarters(txt) { | ||
| return '$' + (this.formatNumber(Number(ShCore.getDecimal(txt)).toFixed(2))); | ||
| } | ||
| componentDidMount() { | ||
| let newValue = ShCore.getDecimal(this.props.value); | ||
| var newState = _.clone(this.state); | ||
| newState.value = newValue; | ||
| newState.display = this.runFormarters(newValue); | ||
| newState.classList.empty = false; | ||
| if (this.props.value) { | ||
| var text = this.runFormarters(this.props.value); | ||
| this.setState( | ||
| { | ||
| value: text, | ||
| classList: 'sh-input-currency' | ||
| } | ||
| ) | ||
| this.setState(newState, this.validate); | ||
| } | ||
| } | ||
| if (this.props.required) { | ||
| this.state.placeholderText = 'Required Field'; | ||
| this.setState(this.state); | ||
| componentWillReceiveProps(props) { | ||
| let newValue = ShCore.getDecimal(props.value); | ||
| if (!_.isUndefined(props.value) && !_.isEqual(newValue, this.state.value)) { | ||
| var newState = _.clone(this.state); | ||
| newState.classList.empty = !newValue; | ||
| newState.value = newValue; | ||
| newState.display = this.runFormarters(newValue); | ||
| this.setState(newState, this.validate); | ||
| } | ||
| this.state.placeholderHolder = this.state.placeholderText; | ||
| } | ||
| handleChange(event) { | ||
| var text = event.target.value; | ||
| event.persist(); | ||
| this.setState({value: text}); | ||
| event.target.value = sh.getDecimal(text); | ||
| if(this.props.onChange){ | ||
| var dec = ShCore.getDecimal(event.target.value); | ||
| this.setState({value: dec, display: event.target.value}, ()=> { | ||
| if (this.props.validator) { | ||
| this.props.validator.validate() | ||
| } else { | ||
| this.validate(); | ||
| } | ||
| event.target.value = dec; | ||
| this.props.onChange(event); | ||
| } | ||
| }); | ||
| }; | ||
@@ -65,11 +115,12 @@ | ||
| this.setState( | ||
| { | ||
| value: text, | ||
| placeholderText: '' | ||
| var newState = _.clone(this.state); | ||
| newState.classList.shTouched = true; | ||
| newState.value = text; | ||
| newState.placeholderText = ''; | ||
| this.setState(newState, | ||
| ()=>{ | ||
| this.refs.input.select(); | ||
| } | ||
| ); | ||
| setTimeout(()=> { | ||
| this.refs.input.select(); | ||
| }, 100) | ||
| } | ||
@@ -82,35 +133,31 @@ | ||
| handleBlur(event) { | ||
| var text = event.target.value; | ||
| this.validate(); | ||
| var newState = _.clone(this.state); | ||
| text = this.runFormarters(text); | ||
| if (event.target.value.length > 0) { | ||
| var text = event.target.value; | ||
| text = this.runFormarters(text); | ||
| newState.display = text; | ||
| } | ||
| newState.placeholderText = newState.placeholderHolder; | ||
| newState.classList.empty = !this.state.value; | ||
| newState.requiredField.showRequired = !this.state.value; | ||
| this.setState(newState); | ||
| if (this.props.onBlur) { | ||
| this.props.onBlur(event); | ||
| } | ||
| this.setState( | ||
| { | ||
| value: text, | ||
| placeholderText: this.state.placeholderHolder, | ||
| classList: 'sh-input-currency' | ||
| } | ||
| ); | ||
| if (!this.state.value) { | ||
| this.setState( | ||
| { | ||
| value: this.state.value, | ||
| classList: 'sh-input-currency empty' | ||
| } | ||
| ) | ||
| } | ||
| } | ||
| render() { | ||
| var {onFocus, onBlur, className, ...other} = this.props; | ||
| var {onFocus, onBlur, className, validator, required, value, ...other} = this.props; | ||
| return ( | ||
| <div className={this.props.className ? this.props.className +' '+this.state.classList : this.state.classList}> | ||
| <div | ||
| className={this.props.className ? ShCore.getClassNames(this.state.classList) + ' ' + this.props.className : ShCore.getClassNames(this.state.classList)}> | ||
| <label> | ||
| <span className="label">{this.props.label}</span> | ||
| <span className={"required-label " + ShCore.getClassNames(this.state.requiredField)}>REQUIRED</span> | ||
| <input ref="input" | ||
@@ -124,3 +171,3 @@ className="sh-currency-input" | ||
| onBlur={this.handleBlur} | ||
| value={this.state.value} | ||
| value={this.state.display} | ||
| /> | ||
@@ -133,2 +180,17 @@ </label> | ||
| ShInputCurrency.propTypes = { | ||
| validator: React.PropTypes.object, | ||
| value: React.PropTypes.any, | ||
| onChange: React.PropTypes.func, | ||
| label: React.PropTypes.string, | ||
| required: React.PropTypes.bool, | ||
| }; | ||
| ShInputCurrency.defaultProps = { | ||
| validator: null, | ||
| onChange: _.noop, | ||
| label: '', | ||
| required: false | ||
| }; | ||
| export default ShInputCurrency; |
| var React = require('react'); | ||
| var ReactDOM = require('react-dom'); | ||
| var TestUtils = require('react/lib/ReactTestUtils'); | ||
| import * as _ from 'lodash'; | ||
@@ -14,6 +15,7 @@ var ShInputCurrency = require('./sh-input-currency').default; | ||
| it('things do No explode if there is no onChange function', function() { | ||
| it('there is a default onChange function', function () { | ||
| let value = true; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value} />); | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value}/>); | ||
| root.handleChange({ | ||
| persist: _.noop, | ||
| target: { | ||
@@ -24,6 +26,7 @@ value: 3 | ||
| }); | ||
| it('things do No explode if there is no onFocus function', function() { | ||
| it('things do not explode if there is no onFocus function', function () { | ||
| let value = true; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value} />); | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value}/>); | ||
| root.handleFocus({ | ||
| persist: _.noop, | ||
| target: { | ||
@@ -41,3 +44,2 @@ value: 3 | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={what} onChange={changeMe}/>); | ||
| let rootNode = ReactDOM.findDOMNode(root); | ||
| expect(root.state).toBeTruthy(); | ||
@@ -49,12 +51,7 @@ let input = TestUtils.findRenderedDOMComponentWithClass(root, 'sh-currency-input'); | ||
| it('works a field is required', function () { | ||
| let what = '0'; | ||
| let changeMe = () => { | ||
| value = 1; | ||
| }; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency required value={what} onChange={changeMe}/>); | ||
| let rootNode = ReactDOM.findDOMNode(root); | ||
| expect(root.state).toBeTruthy(); | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency required/>); | ||
| let input = TestUtils.findRenderedDOMComponentWithClass(root, 'sh-currency-input'); | ||
| expect(input.required).toBe(true); | ||
| expect(input.placeholder).toBe('Required Field'); | ||
| TestUtils.Simulate.focus(input); | ||
| TestUtils.Simulate.blur(input); | ||
| expect(root.state.requiredField.showRequired).toBeTruthy(); | ||
| }); | ||
@@ -72,3 +69,3 @@ | ||
| it('input styles not be set to empty if there is a value', function () { | ||
| let value = '0'; | ||
| let value = 5; | ||
| let changeMe = () => { | ||
@@ -82,3 +79,3 @@ value = 1; | ||
| TestUtils.Simulate.blur(input); | ||
| expect(rootNode.classList.length).toBe(1) | ||
| expect(rootNode.classList).not.toContain('empty') | ||
| }); | ||
@@ -123,3 +120,31 @@ | ||
| root.handleChange({ | ||
| persist: _.noop, | ||
| target: { | ||
| value: 3, | ||
| } | ||
| }); | ||
| expect(value).toBe(1); | ||
| expect(input.value).toBe('3'); | ||
| TestUtils.Simulate.blur(input); | ||
| expect(input.value).toBe('$3.00'); | ||
| }); | ||
| it('handle internal changes, if a validator property exists', function () { | ||
| let value = '0'; | ||
| let changeMe = () => { | ||
| value = 1; | ||
| }; | ||
| var validator = { | ||
| validate: _.noop, | ||
| register: _.noop | ||
| }; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency validator={validator} value={value} | ||
| onChange={changeMe}/>); | ||
| let input = TestUtils.findRenderedDOMComponentWithClass(root, 'sh-currency-input'); | ||
| root.handleChange({ | ||
| persist: _.noop, | ||
| target: { | ||
| value: 3 | ||
@@ -134,2 +159,116 @@ } | ||
| }); | ||
| it('values should still work if there is no on change on the component', function () { | ||
| let value = '0'; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value}/>); | ||
| let input = TestUtils.findRenderedDOMComponentWithClass(root, 'sh-currency-input'); | ||
| root.handleChange({ | ||
| persist: _.noop, | ||
| target: { | ||
| value: 3 | ||
| } | ||
| }); | ||
| expect(input.value).toBe('3'); | ||
| TestUtils.Simulate.blur(input); | ||
| expect(input.value).toBe('$3.00'); | ||
| }); | ||
| it('if the form as been submitted all fields need to be touched', function () { | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency required/>); | ||
| root.validate(true); | ||
| expect(root.state.classList.shTouched).toBe(true); | ||
| }); | ||
| it('a required field with no value should be invalid', function () { | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency required/>); | ||
| expect(root.validate().isValid).toBe(false) | ||
| }); | ||
| it('should be able to unmount a plane component', function () { | ||
| let value = null; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value} required/>); | ||
| ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(root).parentNode); | ||
| }); | ||
| it('should call unregister if a validator is present', function () { | ||
| let value = null; | ||
| let validator = { | ||
| register: _.noop, | ||
| unregister: _.noop, | ||
| }; | ||
| spyOn(validator, 'unregister'); | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency validator={validator} value={value} required/>); | ||
| ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(root).parentNode); | ||
| expect(validator.unregister).toHaveBeenCalled(); | ||
| }); | ||
| it('should have class names passed from parent', function () { | ||
| let value = '0'; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value}/>); | ||
| let input = TestUtils.findRenderedDOMComponentWithClass(root, 'sh-currency-input'); | ||
| root.handleChange({ | ||
| persist: _.noop, | ||
| target: { | ||
| value: 3 | ||
| } | ||
| }); | ||
| expect(input.value).toBe('3'); | ||
| TestUtils.Simulate.blur(input); | ||
| expect(input.value).toBe('$3.00'); | ||
| }); | ||
| it('set classes from parent', function () { | ||
| let value = ''; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency className="spam" value={value}/>); | ||
| let rootNode = ReactDOM.findDOMNode(root); | ||
| expect(rootNode.classList).toContain('spam'); | ||
| }); | ||
| it('should watch for changes to props and update the value state', function () { | ||
| let value = 5; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value}/>); | ||
| let input = TestUtils.findRenderedDOMComponentWithClass(root, 'sh-currency-input'); | ||
| root.componentWillReceiveProps({value: 5}); | ||
| expect(input.value).toBe('$5.00'); | ||
| }); | ||
| it('should watch for changes to props and update the value state', function () { | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency />); | ||
| let input = TestUtils.findRenderedDOMComponentWithClass(root, 'sh-currency-input'); | ||
| root.componentWillReceiveProps({}); | ||
| expect(root.state.value).toBe('') | ||
| }); | ||
| it('changing props should update state', function () { | ||
| let value = 0; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value} required/>); | ||
| var props = { | ||
| value: 0 | ||
| }; | ||
| root.componentWillReceiveProps(props); | ||
| expect(root.state.display).toBe('$0.00') | ||
| }); | ||
| it('changing props should update state', function () { | ||
| let value = 1; | ||
| var root = TestUtils.renderIntoDocument(<ShInputCurrency value={value} required/>); | ||
| var props = { | ||
| value: 0 | ||
| }; | ||
| root.componentWillReceiveProps(props); | ||
| expect(root.state.display).toBe('$0.00') | ||
| }); | ||
| }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.68%
3098917
- Number of package files
- increased by7.69%
28
- Lines of code
- increased by1.37%
37699
No dependency changes