fixes includes, excludes bug

updates documentation

CHANGELOG.md

@@ -7,6 +7,11 @@
 * Fix state properties cross reducer collision
 * Find validstate reducer based on state default
 
+## 1.1.3 - 2019-10-11
+### Fixed
+* Fixed a bug in the validations when an array was submitted as a validation value. It needs to be a comma-separted string instead.
+
+
 ## 1.1.2 - 2019-10-11
 ### Added
 * Adds new excludes validation rule

docs/app/javascript/packs/demo/components/BasicForm.jsx

@@ -48,7 +48,7 @@ class BasicForm extends Component {
               <div className="col-lg-12">
                 <StylishInput label="Name" name="Name" valid={this.props.validstate.account.name.firstname.valid} value={this.props.name.firstname} onChange={this.onNameChange.bind(this)} type="text" />
                 <StylishInput label="Email" name="Email" valid={this.props.validstate.account.email.valid} value={this.props.email} onChange={this.onEmailChange.bind(this)} type="text" />
-                <StylishInput label="Password" name="Password" valid={this.props.validstate.account.password.valid} value={this.props.password.token} onChange={this.onPasswordChange.bind(this)} type="password" autoFocus="true" />
+                <StylishInput label="Password" name="Password" valid={this.props.validstate.account.password.valid} value={this.props.password.token} onChange={this.onPasswordChange.bind(this)} type="password" autoFocus={true} />
                 <input className="button button-primary" name="commit" type="submit" value="Submit" /> <button type="button" className="button button-secondary" onClick={this.clearValidations.bind(this)}>Clear</button>
               </div>
             </div>

docs/app/javascript/packs/demo/components/common/StylishInput.jsx

@@ -44,7 +44,7 @@ class StylishInput extends Component {
         <label htmlFor={this.props.name}>{this.props.label}</label>
         <input
           ref={(input) => { this.textInput = input; }}
-          style={[this.props.style]}
+          style={this.props.style}
           id={this.props.id}
           value={this.props.value}
           onChange={this.props.onChange}

docs/app/javascript/packs/validstate/Validstate.js

@@ -59,7 +59,7 @@ export default class Validstate {
       if (this.validations.includes(validationKey)) {
         throw new Error(`Duplicate validation key. ${validationKey} was already used.`);
       } else{
-        this.validations.push(validationKey);  
+        this.validations.push(validationKey);
       }
 
       this.properties[validationKey] = {
@@ -101,7 +101,7 @@ export default class Validstate {
   /*
   * @function extractObj
   * @description extracts objects from supplied properties
-  * @param property 
+  * @param property
   * @returns object
   */
   extractObj(property) {
@@ -164,8 +164,8 @@ export default class Validstate {
         } else {
           for (const [ruleKey, rule] of Object.entries(property)){
             let value = mergedState[propertyKey];
-            let valid 
-      
+            let valid
+
             if(ruleKey == "_reducer"){
               continue;
             } else {
@@ -180,7 +180,7 @@ export default class Validstate {
             }
           }
         }
-  
+
         this.properties[validation][propertyKey] = { ...propertyValidstate };
       }
     }
@@ -202,7 +202,7 @@ export default class Validstate {
 
   /*
   * @function validateNestedProperties
-  * @description Reads tree and validates nested properties 
+  * @description Reads tree and validates nested properties
   * @param property, mergedState
   * @returns object
   */
@@ -212,7 +212,7 @@ export default class Validstate {
       reason: null,
       message: null
     }
-    
+
     for (const [propertyKey, nextProp] of Object.entries(property)) {
 
       if (propertyKey === "_reducer") {
@@ -301,7 +301,7 @@ export default class Validstate {
   /*
   * @function depthOf
   * @description Counts largest depth of object starting from 1
-  * @param object 
+  * @param object
   * @returns integer
   */
   depthOf(object) {
@@ -392,6 +392,16 @@ export default class Validstate {
     );
   }
 
+  /*
+  * @function convertStringToArray
+  * @description Takes a comma delimited string and converts to an array
+  * @parameter string
+  * @return Normalized array
+  */
+  convertStringToArray(string) {
+    return string.toLowerCase().split(',').map( item => item.trim());
+  }
+
   /*
   * @function isPresent
   * @description Determine if a value is present
@@ -573,10 +583,10 @@ export default class Validstate {
   /*
   * @function regex
   * @description Validates a valid regex status
-  * @parameter regex, value
+  * @parameter value, regex
   * @return Boolean
   */
-  regex(regex, value) {
+  regex(value, regex) {
     return regex.test(value);
   }
 
@@ -593,20 +603,25 @@ export default class Validstate {
   /*
   * @function includes
   * @description Iterates over an array and checks if a given value is included
-  * @parameter array, value
+  * @parameter value, array
   * @return Boolean
   */
-  includes(array, value) {
-    let returnBoolean = false;
-    array.forEach(element => {
-      if (element === value) {
-        returnBoolean = true;
-        return false;
-      }
-    });
-    return returnBoolean;
+  includes(value, str) {
+    const array = this.convertStringToArray(str);
+    return array.some(el => el === value);
   }
-
+
+  /*
+  * @function excludes
+  * @description Iterates over an array and checks if a given value is not included
+  * @parameter value, array
+  * @return Boolean
+  */
+  excludes(value, str) {
+    const array = this.convertStringToArray(str);
+    return array.every(el => el !== value.toLowerCase());
+  }
+
   /*
   * @function phone
   * @description evaluates value and validates that it is a valid american phone number

docs/app/javascript/packs/validstate/validations_example.js

@@ -1,20 +1,20 @@
 const VALIDATIONS = {
   account: {
     email: { email: true, _reducer: 'auth' },
-    name: { 
+    name: {
       _reducer: 'auth',
       firstname: { required: true },
       lastname: {
-        surname: { required: true },
-        maidenName: { required: true },
+        surname: { required: true, min: "3" },
+        maidenName: { required: true, excludes: 'smith, allen' },
       },
     },
-    password: { 
+    password: {
       _reducer: 'auth',
       token: { minLength: 8 },
     },
     _messages: {
-      name: { 
+      name: {
         required: "Please let us know your name so we can address you properly.",
       }
     }
@@ -49,20 +49,20 @@ const VALIDATIONS = {
 export default VALIDATIONS;
 
 
-const STATE = { 
+const STATE = {
   account: {
     valid: true,
-    name: { 
+    name: {
       valid: true,
       reason: null,
       message: null
     },
-    email: { 
+    email: {
       valid: true,
       reason: null,
       message: null
     },
-    password: { 
+    password: {
       valid: true,
       reason: null,
       message: null
@@ -78,7 +78,7 @@ const STATE = {
     items: {
       valid: false,
       elements: [
-        { 
+        {
           valid: false,
           quanity: {
             valid: false,
@@ -92,6 +92,6 @@ const STATE = {
           }
         }
       ]
-    }  
+    }
   }
 }

docs/app/views/home/_changelog.html.slim

@@ -11,6 +11,11 @@ section.row id="changelog"
       * Fix state properties cross reducer collision
       * Find validstate reducer based on state default
 
+      ## 1.1.3 - 2019-10-11
+      ### Fixed
+      * Fixed a bug in the validations when an array was submitted as a validation value. It needs to be a comma-separted string instead.
+
+
       ## 1.1.2 - 2019-10-11
       ### Added
       * Adds new excludes validation rule

docs/app/views/home/_validations.html.slim

@@ -32,9 +32,17 @@ section.row id="validations"
     h6#isequalto Isequalto
     p – Strong comparison of one value to another
     h6#includes Includes
-    p – Requires the array value to include a specific element.
+    p
+      | – Requires the array value to include a specific element, (comma-separted string ie.
+      code.highlighter-rouge<
+        | includes: "one, two, three"
+      | ).
     h6#excludes Excludes
-    p – Requires the array value to exclude a specific element.
+    p
+      | – Requires the array value to exclude a specific element, (comma-separted string ie.
+      code.highlighter-rouge<
+        | excludes: "one, two, three"
+      | ).
     h6#custom Custom
     p – Evaluate a user defined function.
     h6#creditcard Creditcard

package.json

@@ -1,6 +1,6 @@
 {
   "name": "validstate",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Seamless and easy Redux state Validation",
   "main": "dist/index.js",
   "scripts": {

src/Validstate.js

@@ -392,6 +392,16 @@ export default class Validstate {
     );
   }
 
+  /*
+  * @function convertStringToArray
+  * @description Takes a comma delimited string and converts to an array
+  * @parameter string
+  * @return Normalized array
+  */
+  convertStringToArray(string) {
+    return string.toLowerCase().split(',').map( item => item.trim());
+  }
+
   /*
   * @function isPresent
   * @description Determine if a value is present
@@ -596,7 +606,8 @@ export default class Validstate {
   * @parameter value, array
   * @return Boolean
   */
-  includes(value, array) {
+  includes(value, str) {
+    const array = this.convertStringToArray(str);
     return array.some(el => el === value);
   }
 
@@ -606,8 +617,9 @@ export default class Validstate {
   * @parameter value, array
   * @return Boolean
   */
-  excludes(value, array) {
-    return array.every(el => el !== value);
+  excludes(value, str) {
+    const array = this.convertStringToArray(str);
+    return array.every(el => el !== value.toLowerCase());
   }
 
   /*

tests/Validstate.test.js

@@ -237,6 +237,14 @@ describe('Validstate', () => {
     });
   });
 
+  describe("`convertStringToArray()`", () => {
+    it('Takes a comma separated string and converts to a normalized array', () => {
+      expect(Validstate.convertStringToArray('string,string')).toEqual(['string', 'string']);
+      expect(Validstate.convertStringToArray('String, string')).toEqual(['string', 'string']);
+      expect(Validstate.convertStringToArray('STRING, STRING')).toEqual(['string', 'string']);
+    });
+  });
+
   describe("`isEmpty()`", () => {
     it('Checks if value is empty. Deep-checks arrays and objects', () => {
       expect(Validstate.isEmpty([])).toBe(true);

tests/ValidstateRules.test.js

@@ -184,17 +184,17 @@ test('Validates a valid regex status', () => {
 });
 
 test('Iterates over an array and checks if a given value is included', () => {
-  expect(Validstate.includes("cat", ["dog", "cat", "chicken"])).toBe(true);
-  expect(Validstate.includes("cow", ["dog", "cat", "chicken"])).toBe(false);
-  expect(Validstate.includes("son", ["life", "death", "son"])).toBe(true);
-  expect(Validstate.includes("one", ["life", "death", "son"])).toBe(false);
+  expect(Validstate.includes("cat", "dog, cat, chicken")).toBe(true);
+  expect(Validstate.includes("cow", "dog, cat, chicken")).toBe(false);
+  expect(Validstate.includes("son", "life, death, son")).toBe(true);
+  expect(Validstate.includes("one", "life, death, son")).toBe(false);
 });
 
 test('Iterates over an array and checks if a given value is not included', () => {
-  expect(Validstate.excludes("cat", ["dog", "cat", "chicken"])).toBe(false);
-  expect(Validstate.excludes("cow", ["dog", "cat", "chicken"])).toBe(true);
-  expect(Validstate.excludes("son", ["life", "death", "son"])).toBe(false);
-  expect(Validstate.excludes("one", ["life", "death", "son"])).toBe(true);
+  expect(Validstate.excludes("cat", "dog, cat, chicken")).toBe(false);
+  expect(Validstate.excludes("cow", "dog, cat, chicken")).toBe(true);
+  expect(Validstate.excludes("son", "life, death, son")).toBe(false);
+  expect(Validstate.excludes("one", "life, death, son")).toBe(true);
 });
 
 test('evaluates value and validates that it is a valid american phone number', () => {

tests/validations_config.js

@@ -1,20 +1,20 @@
 const VALIDATIONS = {
   account: {
     email: { email: true, _reducer: 'auth' },
-    name: { 
+    name: {
       _reducer: 'auth',
       firstname: { required: true },
       lastname: {
         surname: { required: true },
         maidenName: { required: true },
       },
     },
-    password: { 
+    password: {
       _reducer: 'auth',
       token: { minLength: 8 },
     },
     _messages: {
-      name: { 
+      name: {
         required: "Please let us know your name so we can address you properly.",
       }
     }