Skip to content

brainfood / rivets-error-binder

Go to a project
Toggle navigation
Toggle navigation pinning
219209c6 by Adam Heath
Options

No longer hard-code any of the html handling; it's now delegated to a 

render function that should be specified in the requirejs module config.
1 parent 5a3a0008
Inline Side-by-side
Showing 4 changed files with 75 additions and 19 deletions
......@@ -18,7 +18,6 @@
"backbone-seen": "git@gitlab.brainfood.com:brainfood/backbone-seen.git",
"backbone": "~1.1.0",
"backbone-validation": "0.9.1",
"bootstrap": "~3.1.0",
"jquery": "~1.10.2",
"requirejs": "~2.1.10",
"rivets": "~0.6.6",
......
......@@ -5,6 +5,9 @@ require = (function() {
var require = {
baseUrl: 'scripts',
config: {
'rivets-error-binder': {}
},
shim: {
bootstrap: {
deps: [
......
define(['rivets', 'bootstrap'], function(rivets) {
define([
'module',
'rivets',
], function(
module,
rivets
) {
'use strict';
var rivetsBinderCall = function(binding, binderName, methodName, args) {
var binder = rivets.binders[binderName];
......@@ -13,22 +19,10 @@ define(['rivets', 'bootstrap'], function(rivets) {
}
};
var render = function(el, cmd, errorList) {
switch (cmd) {
case 'focus':
break;
case 'blur':
break;
case 'validated':
if (errorList) {
$(el).tooltip({title: errorList, trigger: 'focus'});
$(el).tooltip('show');
$(el).parent().addClass('has-error');
} else {
$(el).tooltip('destroy');
$(el).parent().removeClass('has-error');
}
break;
var render = function() {
var renderImpl = module.config().render;
if (renderImpl) {
return renderImpl.apply(this, arguments);
}
};
......
......@@ -23,7 +23,29 @@ define(function(require) {
var scope;
var test;
var view;
var render;
beforeEach(function() {
render = function(el, cmd, errorList) {
render.lastCmd = cmd;
render.lastErrorList = errorList;
switch (cmd) {
case 'focus':
render.counts.focus++;
break;
case 'blur':
render.counts.blur++;
break;
case 'validated':
if (errorList) {
render.counts.validatedError++;
} else {
render.counts.validatedClean++;
}
break;
}
};
render.counts = {focus: 0, blur: 0, validatedError: 0, validatedClean: 0};
jasmine.Clock.useMock();
Model = BackboneSeen.mixin(Backbone.Model.extend());
Collection = Backbone.Collection.extend({model: Model});
......@@ -45,12 +67,46 @@ define(function(require) {
});
it('existing', function() {
it('existing-no-render', function() {
var $node = $($.parseHTML('<div><form><input id="_1" rv-error-value="test:constant" /></form></div>'));
$(document).find('body').append($node[0]);
var $1 = $node.find('#_1');
expect($1.length).toEqual(1);
expect($1.val()).toEqual('');
expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
view = rivets.bind($node, scope.attributes);
expect(view).toBeTruthy();
expect($1.val()).toEqual('CONSTANT');
//expect($node.html()).toBe('');
test.set('constant', 'one');
expect($1.val()).toEqual('one');
test.set('constant', '');
expect($1.val()).toEqual('');
test.set('constant', 'CONSTANT');
expect($1.val()).toEqual('CONSTANT');
expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
$1.focus().val('one').change().blur();
jasmine.Clock.tick(1);
expect(test.get('constant')).toEqual('one');
expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
$1.focus().val('').change().blur();
jasmine.Clock.tick(1);
expect(test.get('constant')).toEqual('');
expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
jasmine.Clock.tick(1);
expect(render.lastErrorList).toBeUndefined();
});
it('existing-with-render', function() {
/* global requirejs */
requirejs.config({config: {'rivets-error-binder': { render: render } } });
var $node = $($.parseHTML('<div><form><input id="_1" rv-error-value="test:constant" /></form></div>'));
$(document).find('body').append($node[0]);
var $1 = $node.find('#_1');
expect($1.length).toEqual(1);
expect($1.val()).toEqual('');
expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
view = rivets.bind($node, scope.attributes);
expect(view).toBeTruthy();
expect($1.val()).toEqual('CONSTANT');
......@@ -62,14 +118,18 @@ define(function(require) {
test.set('constant', 'CONSTANT');
expect($1.val()).toEqual('CONSTANT');
expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
$1.focus().val('one').change().blur();
jasmine.Clock.tick(1);
expect(test.get('constant')).toEqual('one');
expect(render.counts).toEqual({focus : 1, blur : 1, validatedError : 0, validatedClean : 1});
$1.focus().val('').change().blur();
jasmine.Clock.tick(1);
expect(test.get('constant')).toEqual('');
expect(render.counts).toEqual({focus : 2, blur : 2, validatedError : 1, validatedClean : 1});
jasmine.Clock.tick(1);
expect(render.lastErrorList).toEqual(jasmine.any(String));
});
it('missing', function() {
var $node = $($.parseHTML('<div><form><input id="_1" rv-error-value="test:missing:child" /></form></div>'));
......