v0.14.0 - Updating tests for email, pattern and conditionalrequired a…

…nd adding comments (#22)

CHANGELOG.md

@@ -4,6 +4,18 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v0.14.0
+------------------------------
+*February 23, 2018*
+
+### Added
+- Comments added to each rule definition
+
+### Fixed
+- Fixed instances where the `email`, `minlength` and `maxlength` fields would validate as true when they shouldn't do
+- Tests added for the above cases
+
+
 v0.13.0
 ------------------------------
 *February 23, 2018*

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-validate",
   "description": "Fozzie vanilla JS Validation Component",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "main": "dist/index.js",
   "files": [
     "dist"

src/rules/conditionalRequired.js

@@ -1,3 +1,11 @@
+/**
+ * Conditional Required Rule
+ * -------------------------
+ * This validation rule checks that if a specified checkbox is not checked, then it is required that a value must be entered in the field with this validation check.
+ *
+ * This also means that if the specified checkbox is checked, then the field is not required and the form will return valid when the field is empty.
+ *
+ */
 export default {
     condition: field => field.hasAttribute('data-val-conditionalRequired'),
 

src/rules/custom.js

@@ -1,3 +1,9 @@
+/**
+ * Custom Rule
+ * --------------
+ * This validation rule allows the addition of a custom validation check to be added to the field.
+ *
+ */
 export default {
     condition: field => {
         const hasCustom = field.hasAttribute('data-val-custom');

src/rules/dateInFuture.js

@@ -1,3 +1,10 @@
+/**
+ * Date In Future Rule
+ * -------------------
+ * This rule is for validating dates entered by a collection of `select` fields.
+ * When applied to a validation group, it returns true if the date entered in these fields is in the future.
+ *
+ */
 import $ from '@justeat/f-dom';
 
 export default {

src/rules/email.js

@@ -1,9 +1,21 @@
+/**
+ * Email Rule
+ * --------------
+ * Checks for a valid email address
+ *
+ */
 import CONSTANTS from '../constants';
 
 export default {
     condition: field => field.getAttribute('type') === 'email',
 
-    test: field => CONSTANTS.email.test(field.value),
+    test: field => {
+        // if the field is empty, should validate as true
+        if (field.value === '') {
+            return true;
+        }
+        return CONSTANTS.email.test(field.value);
+    },
 
     defaultMessage: 'This field must contain a valid email address.'
 };

src/rules/matches.js

@@ -1,8 +1,14 @@
+/**
+ * Matches Rule
+ * ------------
+ * Checks that the value of the field being validated matches the value of a separate specified field
+ *
+ */
 export default {
     condition: field => field.hasAttribute('data-val-equalto'),
 
     test: field => {
-        const matchedFieldName = field.getAttribute('data-val-equalto').replace('*.', '');
+        const matchedFieldName = field.getAttribute('data-val-equalto');
 
         if (matchedFieldName) {
             const input = document.querySelector(`input[name=${matchedFieldName}]`);

src/rules/maxlength.js

@@ -1,8 +1,19 @@
+/**
+ * Maxlength Rule
+ * --------------
+ * Checks that the value of the field is not greater than the specified maximum length.
+ *
+ */
 export default {
     condition: field => field.hasAttribute('maxlength') || field.hasAttribute('data-val-maxlength'),
 
-    test: field => field.value.trim().length <= parseInt(field.getAttribute('maxlength')
-        || field.getAttribute('data-val-maxlength'), 10),
+    test: field => {
+        // if the field is empty, or attribute is set with no value, should validate as true
+        if (field.value === '' || field.getAttribute('maxlength') === '' || field.getAttribute('data-val-maxlength') === '') {
+            return true;
+        }
+        return field.value.trim().length <= parseInt(field.getAttribute('maxlength') || field.getAttribute('data-val-maxlength'), 10);
+    },
 
     defaultMessage: 'This field must not exceed {0} characters in length.',
 

src/rules/minlength.js

@@ -1,9 +1,15 @@
+/**
+ * Minlength Rule
+ * --------------
+ * Checks that the value of the field is of a specified minimum length.
+ *
+ */
 export default {
     condition: field => field.hasAttribute('minlength') || field.hasAttribute('data-val-minlength'),
 
     test: field => {
-        // if the field is empty, should validate as true
-        if (field.value === '') {
+        // if the field is empty, or attribute is set with no value, should validate as true
+        if (field.value === '' || field.getAttribute('minlength') === '' || field.getAttribute('data-val-minlength') === '') {
             return true;
         }
 

src/rules/pattern.js

@@ -1,13 +1,19 @@
 /**
+ * Pattern Rule
+ * --------------
  * Allows definition of a rule to validate the input value using Regular Expressions (RegEx)
+ *
  */
-
 const CONSTANTS = require('../constants');
 
 export default {
     condition: field => field.hasAttribute('pattern') || field.hasAttribute('data-val-regex'),
 
     test: field => {
+        // if the field is empty, should validate as true
+        if (field.value === '') {
+            return true;
+        }
         // escape characters that have special meaning inside a regular expression in field value
         const fieldValue = field.value.replace(CONSTANTS.escapeChars, '\\$&');
         const pattern = field.getAttribute('pattern') || field.getAttribute('data-val-regex');

src/rules/required.js

@@ -1,3 +1,9 @@
+/**
+ * Required Rule
+ * -------------
+ * Checks that a value is present for the field being validated
+ *
+ */
 export default {
     condition: field => field.hasAttribute('required') || field.hasAttribute('data-val-required'),
 

test/rules/conditionalRequired.test.js

@@ -3,11 +3,11 @@ import FormValidation from '../../src';
 
 describe('conditionalRequired', () => {
 
-    it('should return valid if dependent input is not checked, and current field is not empty', () => {
+    it('should return invalid if `data-val-conditionalRequired` field is not checked, and current field is empty', () => {
 
         // Arrange
         TestUtils.setBodyHtml(`<form>
-                <input data-val-conditionalRequired="nameOfcheckedInput" value="test" />
+                <input data-val-conditionalRequired="nameOfcheckedInput" value="" />
                 <input type="checkbox" name="nameOfcheckedInput" />
                 </form>`);
         const form = document.querySelector('form');
@@ -17,15 +17,15 @@ describe('conditionalRequired', () => {
         const isFormValid = validateForm.isValid();
 
         // Assert
-        expect(isFormValid).toBe(true);
+        expect(isFormValid).toBe(false);
 
     });
 
-    it('should return invalid if dependent input is not checked, and current field is empty', () => {
+    it('should return valid if `data-val-conditionalRequired` field is not checked, and current field is not empty', () => {
 
         // Arrange
         TestUtils.setBodyHtml(`<form>
-                <input data-val-conditionalRequired="nameOfcheckedInput" value="" />
+                <input data-val-conditionalRequired="nameOfcheckedInput" value="test" />
                 <input type="checkbox" name="nameOfcheckedInput" />
                 </form>`);
         const form = document.querySelector('form');
@@ -35,11 +35,11 @@ describe('conditionalRequired', () => {
         const isFormValid = validateForm.isValid();
 
         // Assert
-        expect(isFormValid).toBe(false);
+        expect(isFormValid).toBe(true);
 
     });
 
-    it('should return valid if dependent input is checked, and current field is not empty', () => {
+    it('should return valid if `data-val-conditionalRequired` field is checked, and current field is not empty', () => {
 
         // Arrange
         TestUtils.setBodyHtml(`<form>
@@ -57,7 +57,7 @@ describe('conditionalRequired', () => {
 
     });
 
-    it('should return valid if dependent input is checked, and current field is empty', () => {
+    it('should return valid if `data-val-conditionalRequired` field is checked, and current field is empty', () => {
 
         // Arrange
         TestUtils.setBodyHtml(`<form>

test/rules/email.test.js

@@ -64,4 +64,19 @@ describe('email validation rules', () => {
 
     });
 
+    it('should return valid for a field of type email with no value specified', () => {
+
+        // Arrange
+        TestUtils.setBodyHtml('<form><input type="email" value="" /></form>');
+        const form = document.querySelector('form');
+        const validateForm = new FormValidation(form);
+
+        // Act
+        const isFormValid = validateForm.isValid();
+
+        // Assert
+        expect(isFormValid).toBe(true);
+
+    });
+
 });

test/rules/maxlength.test.js

@@ -100,6 +100,22 @@ describe('maxlength fields', () => {
 
         });
 
+        it('should return valid if maxlength attribute is set with no value', () => {
+
+            // Arrange
+            TestUtils.setBodyHtml('<form><input type="text" data-val-maxlength="" /></form>');
+
+            const form = document.querySelector('form');
+            const validateForm = new FormValidation(form);
+
+            // Act
+            const isFormValid = validateForm.isValid();
+
+            // Assert
+            expect(isFormValid).toBe(true);
+
+        });
+
     });
 
 });

test/rules/minlength.test.js

@@ -130,6 +130,22 @@ describe('minlength fields', () => {
 
         });
 
+        it('should return valid if minlength attribute is set with no value', () => {
+
+            // Arrange
+            TestUtils.setBodyHtml('<form><input type="text" data-val-minlength /></form>');
+
+            const form = document.querySelector('form');
+            const validateForm = new FormValidation(form);
+
+            // Act
+            const isFormValid = validateForm.isValid();
+
+            // Assert
+            expect(isFormValid).toBe(true);
+
+        });
+
     });
 
 });

test/rules/pattern.test.js

@@ -66,6 +66,21 @@ describe('pattern fields', () => {
 
         });
 
+        it('should return valid when a pattern is specified but no value has been entered', () => {
+
+            // Arrange
+            TestUtils.setBodyHtml('<form><input pattern="[a-z]{1,6}" value="" /></form>');
+            const form = document.querySelector('form');
+            const validateForm = new FormValidation(form);
+
+            // Act
+            const isFormValid = validateForm.isValid();
+
+            // Assert
+            expect(isFormValid).toBe(true);
+
+        });
+
     });
 
 });