formsy-semantic-ui-react - npm Package Compare versions

Comparing version 0.3.5 to 1.0.0

lib/FormsyCheckbox.js

@@ -78,4 +78,4 @@ 'use strict';
             errorLabel = _props2.errorLabel,
-            getErrorMessage = _props2.getErrorMessage,
-            getValue = _props2.getValue,
+            errorMessage = _props2.errorMessage,
+            value = _props2.value,
             as = _props2.as,
@@ -89,6 +89,6 @@ width = _props2.width,
 
-        var error = !isPristine() && !isValid();
+        var error = !isPristine && !isValid;
 
         var checkboxProps = _extends({}, (0, _utils.filterSuirElementProps)(this.props), {
-          checked: getValue(),
+          checked: !!value,
           onChange: this.handleChange
@@ -111,3 +111,3 @@ });
           (0, _react.createElement)(inputAs, _extends({}, checkboxProps)),
-          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
+          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, errorMessage)
         );
@@ -135,7 +135,7 @@ }
   setValue: _propTypes2['default'].func.isRequired,
-  isValid: _propTypes2['default'].func.isRequired,
-  getValue: _propTypes2['default'].func.isRequired,
-  isPristine: _propTypes2['default'].func.isRequired,
+  value: _propTypes2['default'].any,
+  isValid: _propTypes2['default'].bool.isRequired,
+  isPristine: _propTypes2['default'].bool.isRequired,
   required: _propTypes2['default'].bool,
-  getErrorMessage: _propTypes2['default'].func.isRequired,
+  errorMessage: _propTypes2['default'].string,
   errorLabel: _propTypes2['default'].element,
@@ -142,0 +142,0 @@ onChange: _propTypes2['default'].func

lib/FormsyDropdown.js

@@ -50,10 +50,14 @@ 'use strict';
           multiple = _this$props.multiple,
-          getValue = _this$props.getValue,
+          value = _this$props.value,
           setValue = _this$props.setValue,
           onChange = _this$props.onChange;
-      var value = data.value;
 
-      if (multiple && getValue() && getValue().length > value.length) _this.showError();
-      setValue(value);
-      if (onChange) onChange(e, data);
+
+      if (multiple && value && value.length > data.value.length) {
+        _this.showError();
+      }
+      setValue(data.value);
+      if (onChange) {
+        onChange(e, data);
+      }
     }, _this.handleBlur = function (e, data) {
@@ -84,9 +88,11 @@ var onBlur = _this.props.onBlur;
   }, {
-    key: 'componentWillReceiveProps',
+    key: 'componentDidUpdate',
     value: function () {
-      function componentWillReceiveProps(nextProps) {
-        if (nextProps.isFormSubmitted()) this.showError();
+      function componentDidUpdate(prevProps) {
+        if (prevProps.isFormSubmitted !== this.props.isFormSubmitted && this.props.isFormSubmitted) {
+          this.showError();
+        }
       }
 
-      return componentWillReceiveProps;
+      return componentDidUpdate;
     }()
@@ -102,7 +108,7 @@ }, {
             label = _props2.label,
-            getValue = _props2.getValue,
+            value = _props2.value,
             defaultValue = _props2.defaultValue,
             multiple = _props2.multiple,
             errorLabel = _props2.errorLabel,
-            getErrorMessage = _props2.getErrorMessage,
+            errorMessage = _props2.errorMessage,
             isValid = _props2.isValid,
@@ -119,3 +125,3 @@ isPristine = _props2.isPristine,
         var shortHandMode = inputAs === _semanticUiReact.Form.Dropdown || inputAs === _semanticUiReact.Form.Select;
-        var error = !isPristine() && !isValid() && this.state.allowError;
+        var error = !isPristine && !isValid && this.state.allowError;
 
@@ -126,3 +132,3 @@ var dropdownProps = _extends({}, (0, _utils.filterSuirElementProps)(this.props), {
           onClose: this.handleClose,
-          value: getValue() || defaultValue || multiple && [] || '',
+          value: value || defaultValue || multiple && [] || '',
           error: !disabled && error,
@@ -153,3 +159,3 @@ id: id
           (0, _react.createElement)(dropdownNode, _extends({}, dropdownProps)),
-          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
+          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, errorMessage)
         );
@@ -180,10 +186,10 @@ }
   errorLabel: _propTypes2['default'].element,
-  isValid: _propTypes2['default'].func.isRequired,
-  isPristine: _propTypes2['default'].func.isRequired,
+  isValid: _propTypes2['default'].bool.isRequired,
+  isPristine: _propTypes2['default'].bool.isRequired,
+  isFormSubmitted: _propTypes2['default'].bool.isRequired,
   setValue: _propTypes2['default'].func.isRequired,
   onBlur: _propTypes2['default'].func,
-  getValue: _propTypes2['default'].func.isRequired,
+  value: _propTypes2['default'].any,
   multiple: _propTypes2['default'].bool,
-  isFormSubmitted: _propTypes2['default'].func.isRequired,
-  getErrorMessage: _propTypes2['default'].func.isRequired,
+  errorMessage: _propTypes2['default'].string,
   onChange: _propTypes2['default'].func,
@@ -190,0 +196,0 @@ validationError: _propTypes2['default'].string,

lib/FormsyInput.js

@@ -75,9 +75,11 @@ 'use strict';
   }, {
-    key: 'componentWillReceiveProps',
+    key: 'componentDidUpdate',
     value: function () {
-      function componentWillReceiveProps(nextProps) {
-        if (nextProps.isFormSubmitted()) this.showError();
+      function componentDidUpdate(prevProps) {
+        if (prevProps.isFormSubmitted !== this.props.isFormSubmitted && this.props.isFormSubmitted) {
+          this.showError();
+        }
       }
 
-      return componentWillReceiveProps;
+      return componentDidUpdate;
     }()
@@ -95,6 +97,6 @@ }, {
             defaultValue = _props2.defaultValue,
-            getValue = _props2.getValue,
+            value = _props2.value,
             isValid = _props2.isValid,
             isPristine = _props2.isPristine,
-            getErrorMessage = _props2.getErrorMessage,
+            errorMessage = _props2.errorMessage,
             errorLabel = _props2.errorLabel,
@@ -109,6 +111,6 @@ as = _props2.as,
 
-        var error = !isPristine() && !isValid() && allowError;
+        var error = !isPristine && !isValid && allowError;
 
         var inputProps = _extends({}, (0, _utils.filterSuirElementProps)(this.props), {
-          value: getValue() || isPristine() && defaultValue || '',
+          value: value || isPristine && defaultValue || '',
           onChange: this.handleChange,
@@ -149,3 +151,3 @@ onBlur: this.handleBlur,
           (0, _react.createElement)(inputNode, _extends({}, inputProps)),
-          !disabled && error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
+          !disabled && error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, errorMessage)
         );
@@ -178,8 +180,9 @@ }
   onBlur: _propTypes2['default'].func,
-  isValid: _propTypes2['default'].func.isRequired,
   setValue: _propTypes2['default'].func.isRequired,
-  getValue: _propTypes2['default'].func.isRequired,
+  value: _propTypes2['default'].any,
   onChange: _propTypes2['default'].func,
-  isPristine: _propTypes2['default'].func.isRequired,
-  getErrorMessage: _propTypes2['default'].func.isRequired,
+  isValid: _propTypes2['default'].bool.isRequired,
+  isPristine: _propTypes2['default'].bool.isRequired,
+  isFormSubmitted: _propTypes2['default'].bool.isRequired,
+  errorMessage: _propTypes2['default'].string,
   validationError: _propTypes2['default'].string,
@@ -186,0 +189,0 @@ validationErrors: _propTypes2['default'].object,

lib/FormsyRadioGroup.js

@@ -81,7 +81,7 @@ 'use strict';
             children = _props2.children,
-            getValue = _props2.getValue,
+            value = _props2.value,
             errorLabel = _props2.errorLabel,
             isValid = _props2.isValid,
             isPristine = _props2.isPristine,
-            getErrorMessage = _props2.getErrorMessage,
+            errorMessage = _props2.errorMessage,
             passRequiredToField = _props2.passRequiredToField,
@@ -91,3 +91,3 @@ disabled = _props2.disabled;
 
-        var error = !isPristine() && !isValid();
+        var error = !isPristine && !isValid;
         var formFieldProps = {
@@ -105,3 +105,3 @@ required: required && passRequiredToField,
             var props = {
-              checked: getValue() === radio.props.value,
+              checked: value === radio.props.value,
               onChange: _this2.handleChange
@@ -117,3 +117,3 @@ };if (formRadioGroup) props.error = error;
           }),
-          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
+          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, errorMessage)
         );
@@ -138,9 +138,9 @@ }
   setValue: _propTypes2['default'].func.isRequired,
-  getValue: _propTypes2['default'].func.isRequired,
-  isValid: _propTypes2['default'].func.isRequired,
-  isPristine: _propTypes2['default'].func.isRequired,
+  value: _propTypes2['default'].any,
+  isValid: _propTypes2['default'].bool.isRequired,
+  isPristine: _propTypes2['default'].bool.isRequired,
   onChange: _propTypes2['default'].func,
   defaultSelected: _propTypes2['default'].string,
   errorLabel: _propTypes2['default'].element,
-  getErrorMessage: _propTypes2['default'].func.isRequired,
+  errorMessage: _propTypes2['default'].string,
   children: _propTypes2['default'].node,
@@ -147,0 +147,0 @@ validationError: _propTypes2['default'].string,

lib/utils.js

@@ -22,11 +22,11 @@ "use strict";
       formRadioGroup = props.formRadioGroup,
-      getValue = props.getValue,
       isPristine = props.isPristine,
       isValid = props.isValid,
-      getErrorMessage = props.getErrorMessage,
+      errorMessage = props.errorMessage,
       setValidations = props.setValidations,
       setValue = props.setValue,
+      value = props.value,
       resetValue = props.resetValue,
       hasValue = props.hasValue,
-      getErrorMessages = props.getErrorMessages,
+      errorMessages = props.errorMessages,
       isFormDisabled = props.isFormDisabled,
@@ -46,5 +46,5 @@ isFormSubmitted = props.isFormSubmitted,
       inline = props.inline,
-      suirProps = _objectWithoutProperties(props, ["as", "instantValidation", "error", "defaultChecked", "defaultSelected", "rootClassName", "rootStyle", "defaultValue", "rootElement", "errorLabel", "formRadioGroup", "getValue", "isPristine", "isValid", "getErrorMessage", "setValidations", "setValue", "resetValue", "hasValue", "getErrorMessages", "isFormDisabled", "isFormSubmitted", "isRequired", "showRequired", "showError", "isValidValue", "validations", "validationError", "validationErrors", "width", "passRequiredToField", "inputAs", "innerRef", "inline"]);
+      suirProps = _objectWithoutProperties(props, ["as", "instantValidation", "error", "defaultChecked", "defaultSelected", "rootClassName", "rootStyle", "defaultValue", "rootElement", "errorLabel", "formRadioGroup", "isPristine", "isValid", "errorMessage", "setValidations", "setValue", "value", "resetValue", "hasValue", "errorMessages", "isFormDisabled", "isFormSubmitted", "isRequired", "showRequired", "showError", "isValidValue", "validations", "validationError", "validationErrors", "width", "passRequiredToField", "inputAs", "innerRef", "inline"]);
 
   return suirProps;
 }

package.json

 {
   "name": "formsy-semantic-ui-react",
-  "version": "0.3.5",
+  "version": "1.0.0",
   "description": "Formsy-React wrappers for Semantic-Ui-React's form Components",
@@ -23,3 +23,3 @@ "repository": {
     "lint": "eslint src example test --color",
-    "test": "mocha test/**/*.spec.js",
+    "test": "mocha test/**/*.spec.js --require test/index.js --require chai",
     "test:watch": "npm run test -- --watch",
@@ -30,3 +30,3 @@ "example-app": "webpack-dev-server --config example/webpack.config.js --inline --progress --colors",
   "peerDependencies": {
-    "formsy-react": ">=1.1.1",
+    "formsy-react": "2.0.0",
     "react": "^15.6.1 || ^16.0.0",
@@ -50,5 +50,5 @@ "react-dom": "^15.6.1 || ^16.0.0",
     "bundle-loader": "^0.5.4",
-    "chai": "^3.5.0",
-    "enzyme": "^3.2.0",
-    "enzyme-adapter-react-16": "^1.1.0",
+    "chai": "^4.2.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^1.10.3",
@@ -58,6 +58,6 @@ "eslint-config-airbnb": "^2.1.1",
     "eslint-plugin-react": "^3.13.0",
-    "formsy-react": "1.1.1",
+    "formsy-react": "2.0.0",
     "ignore-styles": "^5.0.1",
     "jsdom": "^9.5.0",
-    "mocha": "^2.5.3",
+    "mocha": "^7.0.1",
     "react": "16.1.1",
@@ -64,0 +64,0 @@ "react-addons-test-utils": "^15.0.0",

src/FormsyCheckbox.js

@@ -1,5 +0,5 @@
-import React, { Component, createElement, cloneElement } from 'react';
+import React, { cloneElement, Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import { withFormsy } from 'formsy-react';
-import { Form, Checkbox, Radio } from 'semantic-ui-react';
+import { Checkbox, Form, Radio } from 'semantic-ui-react';
 import { filterSuirElementProps } from './utils';
@@ -20,7 +20,7 @@
     setValue: PropTypes.func.isRequired,
-    isValid: PropTypes.func.isRequired,
-    getValue: PropTypes.func.isRequired,
-    isPristine: PropTypes.func.isRequired,
+    value: PropTypes.any,
+    isValid: PropTypes.bool.isRequired,
+    isPristine: PropTypes.bool.isRequired,
     required: PropTypes.bool,
-    getErrorMessage: PropTypes.func.isRequired,
+    errorMessage: PropTypes.string,
     errorLabel: PropTypes.element,
@@ -52,4 +52,4 @@ onChange: PropTypes.func,
       errorLabel,
-      getErrorMessage,
-      getValue,
+      errorMessage,
+      value,
       // Form.Field props
@@ -64,7 +64,7 @@ as,
 
-    const error = !isPristine() && !isValid();
+    const error = !isPristine && !isValid;
 
     const checkboxProps = {
       ...filterSuirElementProps(this.props),
-      checked: getValue(),
+      checked: !!value,
       onChange: this.handleChange,
@@ -86,3 +86,3 @@ };
         { createElement(inputAs, { ...checkboxProps }) }
-        { error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
+        { error && errorLabel && cloneElement(errorLabel, {}, errorMessage) }
       </Form.Field>
@@ -89,0 +89,0 @@ );

src/FormsyDropdown.js

@@ -1,5 +0,5 @@
-import React, { Component, createElement, cloneElement } from 'react';
+import React, { cloneElement, Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import { withFormsy } from 'formsy-react';
-import { Form, Dropdown, Select } from 'semantic-ui-react';
+import { Dropdown, Form, Select } from 'semantic-ui-react';
 import { filterSuirElementProps } from './utils';
@@ -32,10 +32,10 @@
     errorLabel: PropTypes.element,
-    isValid: PropTypes.func.isRequired,
-    isPristine: PropTypes.func.isRequired,
+    isValid: PropTypes.bool.isRequired,
+    isPristine: PropTypes.bool.isRequired,
+    isFormSubmitted: PropTypes.bool.isRequired,
     setValue: PropTypes.func.isRequired,
     onBlur: PropTypes.func,
-    getValue: PropTypes.func.isRequired,
+    value: PropTypes.any,
     multiple: PropTypes.bool,
-    isFormSubmitted: PropTypes.func.isRequired,
-    getErrorMessage: PropTypes.func.isRequired,
+    errorMessage: PropTypes.string,
     onChange: PropTypes.func,
@@ -61,12 +61,18 @@ validationError: PropTypes.string,
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isFormSubmitted()) this.showError();
+  componentDidUpdate(prevProps) {
+    if (prevProps.isFormSubmitted !== this.props.isFormSubmitted && this.props.isFormSubmitted) {
+      this.showError();
+    }
   }
 
   handleChange = (e, data) => {
-    const { multiple, getValue, setValue, onChange } = this.props;
-    const { value } = data;
-    if (multiple && getValue() && getValue().length > value.length) this.showError();
-    setValue(value);
-    if (onChange) onChange(e, data);
+    const { multiple, value, setValue, onChange } = this.props;
+
+    if (multiple && value && value.length > data.value.length) {
+      this.showError();
+    }
+    setValue(data.value);
+    if (onChange) {
+      onChange(e, data);
+    }
   }
@@ -89,7 +95,7 @@
       label,
-      getValue,
+      value,
       defaultValue,
       multiple,
       errorLabel,
-      getErrorMessage,
+      errorMessage,
       isValid,
@@ -107,3 +113,3 @@ isPristine,
     const shortHandMode = (inputAs === Form.Dropdown || inputAs === Form.Select);
-    const error = !isPristine() && !isValid() && this.state.allowError;
+    const error = !isPristine && !isValid && this.state.allowError;
 
@@ -115,3 +121,3 @@ const dropdownProps = {
       onClose: this.handleClose,
-      value: getValue() || defaultValue || multiple && [] || '',
+      value: value || defaultValue || multiple && [] || '',
       error: !disabled && error,
@@ -135,3 +141,3 @@ id,
         { createElement(dropdownNode, { ...dropdownProps }) }
-        { error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
+        { error && errorLabel && cloneElement(errorLabel, {}, errorMessage) }
       </Form.Field>
@@ -138,0 +144,0 @@ );

src/FormsyInput.js

@@ -1,2 +0,2 @@
-import React, { Component, createElement, cloneElement } from 'react';
+import React, { cloneElement, Component, createElement } from 'react';
 import { withFormsy } from 'formsy-react';
@@ -27,8 +27,9 @@ import { Form, Input, TextArea } from 'semantic-ui-react';
     onBlur: PropTypes.func,
-    isValid: PropTypes.func.isRequired,
     setValue: PropTypes.func.isRequired,
-    getValue: PropTypes.func.isRequired,
+    value: PropTypes.any,
     onChange: PropTypes.func,
-    isPristine: PropTypes.func.isRequired,
-    getErrorMessage: PropTypes.func.isRequired,
+    isValid: PropTypes.bool.isRequired,
+    isPristine: PropTypes.bool.isRequired,
+    isFormSubmitted: PropTypes.bool.isRequired,
+    errorMessage: PropTypes.string,
     validationError: PropTypes.string,
@@ -53,4 +54,6 @@ validationErrors: PropTypes.object,
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isFormSubmitted()) this.showError();
+  componentDidUpdate(prevProps) {
+    if (prevProps.isFormSubmitted !== this.props.isFormSubmitted && this.props.isFormSubmitted) {
+      this.showError();
+    }
   }
@@ -80,6 +83,6 @@
       defaultValue,
-      getValue,
+      value,
       isValid,
       isPristine,
-      getErrorMessage,
+      errorMessage,
       errorLabel,
@@ -96,7 +99,7 @@ // Form.Field props
     const { allowError } = this.state;
-    const error = !isPristine() && !isValid() && allowError;
+    const error = !isPristine && !isValid && allowError;
 
     const inputProps = {
       ...filterSuirElementProps(this.props),
-      value: getValue() || isPristine() && defaultValue || '',
+      value: value || isPristine && defaultValue || '',
       onChange: this.handleChange,
@@ -130,3 +133,3 @@ onBlur: this.handleBlur,
         { createElement(inputNode, { ...inputProps }) }
-        { !disabled && error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
+        { !disabled && error && errorLabel && cloneElement(errorLabel, {}, errorMessage) }
       </Form.Field>
@@ -133,0 +136,0 @@ );

src/FormsyRadioGroup.js

@@ -17,9 +17,9 @@ import React, { Component, Children, cloneElement } from 'react';
     setValue: PropTypes.func.isRequired,
-    getValue: PropTypes.func.isRequired,
-    isValid: PropTypes.func.isRequired,
-    isPristine: PropTypes.func.isRequired,
+    value: PropTypes.any,
+    isValid: PropTypes.bool.isRequired,
+    isPristine: PropTypes.bool.isRequired,
     onChange: PropTypes.func,
     defaultSelected: PropTypes.string,
     errorLabel: PropTypes.element,
-    getErrorMessage: PropTypes.func.isRequired,
+    errorMessage: PropTypes.string,
     children: PropTypes.node,
@@ -56,7 +56,7 @@ validationError: PropTypes.string,
       children,
-      getValue,
+      value,
       errorLabel,
       isValid,
       isPristine,
-      getErrorMessage,
+      errorMessage,
       passRequiredToField,
@@ -66,3 +66,3 @@ disabled,
 
-    const error = !isPristine() && !isValid();
+    const error = !isPristine && !isValid;
     const formFieldProps = {
@@ -80,3 +80,3 @@ required: required && passRequiredToField,
             const props = {
-              checked: getValue() === radio.props.value,
+              checked: value === radio.props.value,
               onChange: this.handleChange,
@@ -87,3 +87,3 @@ }; if (formRadioGroup) props.error = error;
         }
-        { error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
+        { error && errorLabel && cloneElement(errorLabel, {}, errorMessage) }
       </Form.Group>
@@ -90,0 +90,0 @@ );

src/utils.js

@@ -14,11 +14,11 @@ export function filterSuirElementProps(props) {
     formRadioGroup, // eslint-disable-line
-    getValue, // eslint-disable-line
     isPristine, // eslint-disable-line
     isValid, // eslint-disable-line
-    getErrorMessage, // eslint-disable-line
+    errorMessage, // eslint-disable-line
     setValidations, // eslint-disable-line
     setValue, // eslint-disable-line
+    value, // eslint-disable-line
     resetValue, // eslint-disable-line
     hasValue, // eslint-disable-line
-    getErrorMessages, // eslint-disable-line
+    errorMessages, // eslint-disable-line
     isFormDisabled, // eslint-disable-line
@@ -25,0 +25,0 @@ isFormSubmitted, // eslint-disable-line

test/FormsyCheckbox.spec.js

@@ -45,3 +45,3 @@ import React from 'react';
     it('Doesn\'t show any errors initially', () => {
-      assert.notOk(checkbox.props().isValid());
+      assert.notOk(checkbox.props().isValid);
       assert.notOk(checkbox.find('Checkbox').props().error);
@@ -71,6 +71,5 @@ assert.equal(checkbox.find('.error-label').length, 0);
   context('When value is valid', () => {
-    beforeEach(() => checkbox.props().setValue(true));
+    beforeEach(() => checkbox.find('input').simulate('change', { target: { checked: true } }));
 
     it('Doesn\'t show any errors initially', () => {
-      assert.ok(checkbox.props().isValid());
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -81,3 +80,2 @@ });
       submitForm();
-      assert.ok(checkbox.props().isValid());
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -84,0 +82,0 @@ });

test/FormsyDropdown.spec.js

@@ -58,3 +58,3 @@ import React from 'react';
     it('Doesn\'t show any errors initially', () => {
-      assert.notOk(dropdown.props().isValid());
+      assert.notOk(dropdown.props().isValid);
       assert.equal(dropdown.find('.error-label').length, 0);
@@ -79,3 +79,2 @@ });
     it('Doesn\'t show any errors initially', () => {
-      assert.ok(dropdown.props().isValid());
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -86,3 +85,2 @@ });
       submitForm();
-      assert.ok(dropdown.props().isValid());
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -89,0 +87,0 @@ });

test/FormsyInput.spec.js

@@ -11,5 +11,5 @@ import React from 'react';
 const validationError = 'This is not a valid email';
-const errorLabel = <div className="error-label"/>;
+const errorLabel = <div className="error-label" />;
 
-const TestForm = () => {
+const TestForm = ({ value, instantValidation }) => {
   return (
@@ -21,4 +21,7 @@ <Form>
         validations="isEmail"
-        errorLabel={ errorLabel }
-        validationErrors = {{
+        required // without it "valid" scenario is pass without changes
+        value={value}
+        instantValidation={instantValidation}
+        errorLabel={errorLabel}
+        validationErrors={{
           isEmail: validationError,
@@ -36,3 +39,3 @@ }}
   beforeEach(() => {
-    wrapper = mount(<TestForm/>);
+    wrapper = mount(<TestForm />);
     input = wrapper.find('FormsyInput');
@@ -46,10 +49,13 @@ });
   it('Renders Semantic-UI-React\'s <Input/>', () => {
-    assert.ok(mount(<TestForm/>).find(FormsyInput).find('Input').is(Input));
+    assert.ok(mount(<TestForm />).find(FormsyInput).find('Input').is(Input));
   });
 
   context('When value is invalid', () => {
-    beforeEach(() => input.props().setValue(invalidValue));
+    beforeEach(() => {
+      wrapper = mount(<TestForm value={invalidValue} />);
+      input = wrapper.find('FormsyInput');
+    });
 
     it('Doesn\'t show any errors initially', () => {
-      assert.notOk(input.props().isValid());
+      assert.notOk(input.props().isValid);
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -69,7 +75,15 @@ });
     it('Shows error when user clicks away', () => {
-      input.find('Input').props().onBlur();
-      submitForm();
+      input.find('input').simulate('change', { target: { value: invalidValue } }); // changes the pristine
+      input.find('input').simulate('blur');
+
       assert.equal(wrapper.find('.error-label').length, 1);
     });
 
+    it('Hides error when user clicks away', () => {
+      input.find('input').simulate('change', { target: { value: validValue } }); // changes the pristine
+      input.find('input').simulate('blur');
+
+      assert.equal(wrapper.find('.error-label').length, 0);
+    });
+
     it('Shows error text passed to it', () => {
@@ -82,6 +96,9 @@ submitForm();
   context('When value is valid', () => {
-    beforeEach(() => input.props().setValue(validValue));
+    beforeEach(() => {
+      wrapper = mount(<TestForm value={validValue} />);
+      input = wrapper.find('FormsyInput');
+    });
 
     it('Doesn\'t show any errors initially', () => {
-      assert.ok(input.props().isValid());
+      assert.ok(input.props().isValid);
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -92,3 +109,3 @@ });
       submitForm();
-      assert.ok(input.props().isValid());
+      assert.ok(input.props().isValid);
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -98,6 +115,30 @@ });
     it('Doesn\'t show error when user clicks away', () => {
-      input.find('Input').props().onBlur();
+      input.find('input').simulate('change', { target: { value: validValue } }); // changes the pristine
+      input.find('input').simulate('blur');
       assert.equal(wrapper.find('.error-label').length, 0);
     });
+
+    it('Shows an error when user clicks away', () => {
+      input.find('input').simulate('change', { target: { value: invalidValue } }); // changes the pristine
+      input.find('input').simulate('blur');
+      assert.equal(wrapper.find('.error-label').length, 1);
+    });
   });
+
+  context('instantValidation', () => {
+    beforeEach(() => {
+      wrapper = mount(<TestForm instantValidation />);
+      input = wrapper.find('FormsyInput');
+    });
+
+    it('Shows instant validation', () => {
+      assert.equal(wrapper.find('.error-label').length, 0);
+
+      input.find('input').simulate('change', { target: { value: invalidValue } }); // changes the pristine
+      assert.equal(wrapper.find('.error-label').length, 1);
+
+      input.find('input').simulate('change', { target: { value: validValue } }); // changes the pristine
+      assert.equal(wrapper.find('.error-label').length, 0);
+    });
+  });
 });

test/FormsyRadioGroup.spec.js

@@ -51,3 +51,3 @@ import React from 'react';
 
-  it('Should show a selected radio when defualtSelected is specified', () => {
+  it('Should show a selected radio when defaultSelected is specified', () => {
     wrapper = mountTestForm('two');
@@ -58,3 +58,3 @@ assert.isTrue(wrapper.find('FormGroup').childAt(0).childAt(1).find('Radio').props().checked);
   context('When value is valid', () => {
-    it('Should not show erros when form is submitted', () => {
+    it('Should not show errors when form is submitted', () => {
       radioGroup.props().setValue('two');
@@ -67,3 +67,3 @@ submitForm();
   context('When value is Invalid', () => {
-    it('Should show erros when form is submitted', () => {
+    it('Should show errors when form is submitted', () => {
       submitForm();
@@ -70,0 +70,0 @@ assert.equal(wrapper.find('.error-label').length, 1);

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

2514

increased by1.82%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

105154

decreased by-59.04%

Number of package files

43

decreased by-4.44%

No dependency changes