nimboids-client_side_validations 3.0.3

data/test/javascript/public/test/callbacks/formPass.js

@@ -0,0 +1,50 @@
+module('Form Validate Pass Callback', {
+  setup: function() {
+    new_user = {
+      type: 'ActionView::Helpers::FormBuilder',
+      input_tag: '<div class="field_with_errors"><span id="input_tag" /><label for="user_name" class="message"></label></div>',
+      label_tag: '<div class="field_with_errors"><label id="label_tag" /></div>',
+      validators: {"user[name]":{"presence":{"message": "must be present"}}}
+    }
+
+    $('#qunit-fixture')
+      .append($('<span id="result" />'))
+      .append($('<form />', {
+        action: '/users',
+        'data-validate': true,
+        method: 'post',
+        id: 'new_user'
+      }))
+      .find('form')
+        .append($('<input />', {
+          name: 'user[name]',
+          id: 'user_name',
+          'data-validate': 'true',
+          type: 'text'
+        }))
+        .append($('<label for="user_name">Name</label>'));
+
+    clientSideValidations.callbacks.form.pass = function(form, message) {
+      $('#result').text('Form Validate Pass ' + form.attr('id'));
+    }
+    $('form#new_user').validate();
+  },
+  teardown: function() {
+    clientSideValidations.callbacks.form.pass = function(form, eventData) {}
+  }
+});
+
+test('runs callback', function() {
+  var form = $('form'), input = form.find('input');
+
+  equal($('#result').text(), '');
+
+  form.submit();
+  equal($('#result').text(), '');
+
+  input.val('test');
+  input.trigger('change');
+  form.submit();
+  equal($('#result').text(), 'Form Validate Pass new_user');
+});
+

data/test/javascript/public/test/form_builders/validateForm.js

@@ -0,0 +1,66 @@
+module('Validate Form', {
+  setup: function() {
+    new_user = {
+      type: 'ActionView::Helpers::FormBuilder',
+      input_tag: '<div class="field_with_errors"><span id="input_tag" /><label for="user_name" class="message"></label></div>',
+      label_tag: '<div class="field_with_errors"><label id="label_tag" /></div>',
+      validators: {'user[name]':{"presence":{"message": "must be present"}}}
+    }
+
+    $('#qunit-fixture')
+      .append($('<form />', {
+        action: '/users',
+        'data-validate': true,
+        method: 'post',
+        id: 'new_user'
+      }))
+      .find('form')
+        .append($('<input />', {
+          name: 'user[name]',
+          id: 'user_name',
+          'data-validate': 'true',
+          type: 'text'
+        }))
+        .append($('<label for="user_name">Name</label>'));
+    $('form#new_user').validate();
+  }
+});
+
+asyncTest('Validate form with invalid form', 4, function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  form.trigger('submit');
+  setTimeout(function() {
+    start();
+    ok(input.parent().hasClass('field_with_errors'));
+    ok(label.parent().hasClass('field_with_errors'));
+    ok(input.parent().find('label:contains("must be present")')[0]);
+    ok(!$('iframe').contents().find('p:contains("Form submitted")')[0]);
+  }, 30);
+});
+
+asyncTest('Validate form with valid form', 1, function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  input.val('Test');
+
+  form.trigger('submit');
+  setTimeout(function() {
+    start();
+    ok($('iframe').contents().find('p:contains("Form submitted")')[0]);
+  }, 30);
+});
+
+asyncTest('Validate form with an input changed to false', 1, function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  input.val('Test');
+  input.attr('changed', false);
+  input.attr('data-valid', true);
+
+  form.trigger('submit');
+  setTimeout(function() {
+    start();
+    ok($('iframe').contents().find('p:contains("Form submitted")')[0]);
+  }, 30);
+});
+

data/test/javascript/public/test/form_builders/validateFormtastic.js

@@ -0,0 +1,54 @@
+module('Validate Formtastic', {
+  setup: function() {
+    new_user = {
+      type: 'Formtastic::SemanticFormBuilder',
+      inline_error_class: 'inline-errors',
+      validators: {
+        "user[name]":{"presence":{"message": "must be present"}, "format":{"message":"is invalid","with":/\d+/}}
+      }
+    }
+
+    $('#qunit-fixture')
+      .append($('<form />', {
+        action: '/users',
+        'data-validate': true,
+        method: 'post',
+        id: 'new_user'
+      }))
+      .find('form')
+        .append('<li />').find('li')
+          .append($('<input />', {
+            name: 'user[name]',
+            id: 'user_name',
+            'data-validate': 'true',
+            type: 'text'
+          }))
+          .append($('<label for="user_name">Name</label>'));
+    $('form#new_user').validate();
+  }
+});
+
+test('Validate error attaching and detaching', function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout')
+  ok(input.parent().hasClass('error'));
+  ok(label.parent().hasClass('error'));
+  ok(input.parent().find('p.inline-errors:contains("must be present")')[0]);
+
+  input.val('abc')
+  input.trigger('change')
+  input.trigger('focusout')
+  ok(input.parent().hasClass('error'));
+  ok(label.parent().hasClass('error'));
+  ok(input.parent().find('p.inline-errors:contains("is invalid")')[0]);
+
+  input.val('123')
+  input.trigger('change')
+  input.trigger('focusout')
+  ok(!input.parent().hasClass('error'));
+  ok(!label.parent().hasClass('error'));
+  ok(!input.parent().find('p.inline-errors')[0]);
+});
+

data/test/javascript/public/test/form_builders/validateSimpleForm.js

@@ -0,0 +1,57 @@
+module('Validate SimpleForm', {
+  setup: function() {
+    new_user = {
+      type: 'SimpleForm::FormBuilder',
+      error_class: 'error',
+      error_tag: 'span',
+      wrapper_error_class: 'field_with_errors',
+      wrapper_tag: 'div',
+      validators: {
+        "user[name]":{"presence":{"message": "must be present"}, "format":{"message":"is invalid","with":/\d+/}}
+      }
+    }
+
+    $('#qunit-fixture')
+      .append($('<form />', {
+        action: '/users',
+        'data-validate': true,
+        method: 'post',
+        id: 'new_user'
+      }))
+      .find('form')
+        .append('<div />').find('div')
+          .append($('<input />', {
+            name: 'user[name]',
+            id: 'user_name',
+            'data-validate': 'true',
+            type: 'text'
+          }))
+          .append($('<label for="user_name">Name</label>'));
+    $('form#new_user').validate();
+  }
+});
+
+test('Validate error attaching and detaching', function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+  ok(input.parent().find('span.error:contains("must be present")')[0]);
+
+  input.val('abc')
+  input.trigger('change')
+  input.trigger('focusout')
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+  ok(input.parent().find('span.error:contains("is invalid")')[0]);
+
+  input.val('123')
+  input.trigger('change')
+  input.trigger('focusout')
+  ok(!input.parent().hasClass('field_with_errors'));
+  ok(!label.parent().hasClass('field_with_errors'));
+  ok(!input.parent().find('span.error')[0]);
+});
+

data/test/javascript/public/test/settings.js

@@ -0,0 +1,15 @@
+// hijacks normal form submit; lets it submit to an iframe to prevent
+// navigating away from the test suite
+$(document).bind('submit', function(e) {
+  if (!e.isDefaultPrevented()) {
+    var form = $(e.target), action = form.attr('action'),
+        name = 'form-frame' + jQuery.guid++,
+        iframe = $('<iframe name="' + name + '" />');
+
+    if (action.indexOf('iframe') < 0) form.attr('action', action + '?iframe=true')
+    form.attr('target', name);
+    $('#qunit-fixture').append(iframe);
+    form.trigger('iframe:loading');
+  }
+});
+

data/test/javascript/public/test/validateElement.js

@@ -0,0 +1,144 @@
+module('Validate Element', {
+  setup: function() {
+    new_user = {
+      type: 'ActionView::Helpers::FormBuilder',
+      input_tag: '<div class="field_with_errors"><span id="input_tag" /><label for="user_name" class="message"></label></div>',
+      label_tag: '<div class="field_with_errors"><label id="label_tag" /></div>',
+      validators: {
+        'user[name]':{"presence":{"message": "must be present"}, "format":{"message":"is invalid","with":/\d+/}},
+        'user[password]':{"confirmation":{"message": "must match confirmation"}},
+        'user[agree]':{"acceptance": {"message": "must be accepted"}},
+        'user[email]':{"uniqueness":{"message": "must be unique"},"presence":{"message": "must be present"}}
+      }
+    }
+
+    $('#qunit-fixture')
+      .append($('<form />', {
+        action: '/users',
+        'data-validate': true,
+        method: 'post',
+        id: 'new_user'
+      }))
+      .find('form')
+        .append($('<label for="user_name">Name</label>'))
+        .append($('<input />', {
+          name: 'user[name]',
+          id: 'user_name',
+          'data-validate': 'true',
+          type: 'text'
+        }))
+        .append($('<label for="user_password">Password</label>'))
+        .append($('<input />', {
+          name: 'user[password]',
+          id: 'user_password',
+          'data-validate': 'true',
+          type: 'password'
+        }))
+        .append($('<label for="user_password_confirmation">Password Confirmation</label>'))
+        .append($('<input />', {
+          name: 'user[password_confirmation]',
+          id: 'user_password_confirmation',
+          type: 'password'
+        }))
+        .append($('<label for="user_agree">Agree</label>'))
+        .append($('<input />', {
+          name: 'user[agree]',
+          id: 'user_agree',
+          'data-validate': 'true',
+          type: 'checkbox',
+          value: 1
+        }))
+        .append($('<input />', {
+          name: 'user[email]',
+          id: 'user_email',
+          'data-validate': 'true',
+          type: 'text'
+        }))
+
+    $('form#new_user').validate();
+  }
+});
+
+test('Validate when focusouting', function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate when checkbox is clicked', function() {
+  var form = $('form#new_user'), input = form.find('input#user_agree');
+  var label = $('label[for="user_agree"]');
+
+  input.attr('checked', false)
+  input.trigger('click');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate when focusout on confirmation', function() {
+  var form = $('form#new_user'), password = form.find('input#user_password'), confirmation = form.find('input#user_password_confirmation');
+  var label = $('label[for="user_password"]');
+
+  password.val('password');
+  confirmation.trigger('focusout');
+  ok(password.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate when keyup on confirmation', function() {
+  var form = $('form#new_user'), password = form.find('input#user_password'), confirmation = form.find('input#user_password_confirmation');
+  var label = $('label[for="user_password"]');
+
+  password.val('password');
+
+  confirmation.trigger('keyup');
+  ok(password.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+
+  confirmation.val('password')
+  confirmation.trigger('keyup');
+  ok(!password.parent().hasClass('field_with_errors'));
+  ok(!label.parent().hasClass('field_with_errors'));
+});
+
+test('Forcing remote validators to run last', function() {
+  var form = $('form#new_user'), input = form.find('input#user_email');
+
+  input.trigger('focusout');
+  equal(input.parent().find('label').text(), "must be present")
+});
+
+test("Don't validate when value hasn't changed", function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+
+  input.val('123');
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+
+  input.trigger('change');
+  input.trigger('focusout');
+  ok(!input.parent().hasClass('field_with_errors'));
+  ok(!label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate when error message needs to change', function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout');
+  equal(input.parent().find('label.message').text(), "must be present");
+  input.val('abc');
+  input.trigger('change')
+  input.trigger('focusout');
+  equal(input.parent().find('label.message').text(), "is invalid");
+});
+

data/test/javascript/public/test/validators/acceptance.js

@@ -0,0 +1,42 @@
+module('Acceptance options');
+
+test('when checkbox and checked', function() {
+  var element = $('<input type="checkbox" />');
+  var options = { message: "failed validation" };
+  element.attr('checked', true)
+  equal(clientSideValidations.validators.local.acceptance(element, options), undefined);
+});
+
+test('when checkbox and not checked', function() {
+  var element = $('<input type="checkbox" />');
+  var options = { message: "failed validation" };
+  equal(clientSideValidations.validators.local.acceptance(element, options), "failed validation");
+});
+
+test('when text and value default of 1', function() {
+  var element = $('<input type="text" />');
+  var options = { message: "failed validation" };
+  element.val("1");
+  equal(clientSideValidations.validators.local.acceptance(element, options), undefined);
+});
+
+test('when text and value 2 and accept value is 2', function() {
+  var element = $('<input type="text" />');
+  var options = { message: "failed validation", accept: 1 };
+  element.val("1");
+  equal(clientSideValidations.validators.local.acceptance(element, options), undefined);
+});
+
+test('when text and value empty', function() {
+  var element = $('<input type="text" />');
+  var options = { message: "failed validation" };
+  equal(clientSideValidations.validators.local.acceptance(element, options), "failed validation");
+});
+
+test('when text and value 1 and accept value is 2', function() {
+  var element = $('<input type="text" />');
+  var options = { message: "failed validation", accept: 2 };
+  element.val("1");
+  equal(clientSideValidations.validators.local.acceptance(element, options), "failed validation");
+});
+

data/test/javascript/public/test/validators/confirmation.js

@@ -0,0 +1,25 @@
+module('Confirmation options', {
+  setup: function() {
+    $('#qunit-fixture')
+      .append('<input id="password" type="password" />')
+      .append('<input id="password_confirmation" type="password" />')
+  }
+});
+
+test('when values match', function() {
+  var password_element = $('#password');
+  var password_confirmation_element = $('#password_confirmation');
+  var options = { message: "failed validation" };
+  password_element.val('test');
+  password_confirmation_element.val('test');
+  equal(clientSideValidations.validators.local.confirmation(password_element, options), undefined);
+});
+
+test('when values match', function() {
+  var password_element = $('#password');
+  var password_confirmation_element = $('#password_confirmation');
+  var options = { message: "failed validation" };
+  password_element.val('test');
+  password_confirmation_element.val('bad test');
+  equal(clientSideValidations.validators.local.confirmation(password_element, options), "failed validation");
+});