Skip to content

brainfood / rivets

Go to a project
Toggle navigation
Toggle navigation pinning
6205d410 by Michael Richards
Options

Merge branch 'specs'

2 parents 9e589b36 491c56db
Inline Side-by-side
Showing 4 changed files with 291 additions and 207 deletions
......@@ -2,7 +2,7 @@
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rivets test suite</title>
<title>Rivets.js test suite</title>
<link rel="stylesheet" type="text/css" href="lib/jasmine.css">
......@@ -13,7 +13,9 @@
<script type="text/javascript" src="matchers.js"></script>
<script type="text/javascript" src="mock.data.js"></script>
<script type="text/javascript" src="rivets.js"></script>
<script type="text/javascript" src="rivets/binding.js"></script>
<script type="text/javascript" src="rivets/routines.js"></script>
<script type="text/javascript" src="rivets/functional.js"></script>
<script type="text/javascript">
(function() {
......
describe('Rivets.Binding', function() {
var model, el, view, binding;
beforeEach(function() {
rivets.configure({
adapter: {
subscribe: function() {},
unsubscribe: function() {},
read: function() {},
publish: function() {}
}
});
el = document.createElement('div');
el.setAttribute('data-text', 'obj.name');
view = rivets.bind(el, {obj: {}});
binding = view.bindings[0];
});
it('gets assigned the routine function matching the identifier', function() {
expect(binding.routine).toBe(rivets.routines.text);
});
describe('set()', function() {
it('performs the binding routine with the supplied value', function() {
spyOn(binding, 'routine');
binding.set('sweater');
expect(binding.routine).toHaveBeenCalledWith(el, 'sweater');
});
it('applies any formatters to the value before performing the routine', function() {
rivets.config.formatters = {
awesome: function(value) { return 'awesome ' + value }
};
binding.formatters.push('awesome');
spyOn(binding, 'routine');
binding.set('sweater');
expect(binding.routine).toHaveBeenCalledWith(el, 'awesome sweater');
});
describe('on an event binding', function() {
beforeEach(function() {
binding.bindType = 'event';
});
it('performs the binding routine with the supplied function and current listener', function() {
spyOn(binding, 'routine');
func = function() { return 1 + 2; }
binding.set(func);
expect(binding.routine).toHaveBeenCalledWith(el, func, undefined);
});
it('passes the previously set funcation as the current listener on subsequent calls', function() {
spyOn(binding, 'routine');
funca = function() { return 1 + 2; };
funcb = function() { return 2 + 5; };
binding.set(funca);
expect(binding.routine).toHaveBeenCalledWith(el, funca, undefined);
binding.set(funcb);
expect(binding.routine).toHaveBeenCalledWith(el, funcb, funca);
});
});
});
});
describe('Functional', function() {
var data, bindData, el, input;
beforeEach(function() {
data = new Data({foo: 'bar'});
bindData = {data: data};
el = document.createElement('div');
input = document.createElement('input');
input.setAttribute('type', 'text');
rivets.configure({
preloadData: true,
adapter: {
subscribe: function(obj, keypath, callback) {
obj.on(keypath, callback);
},
read: function(obj, keypath) {
return obj.get(keypath);
},
publish: function(obj, keypath, value) {
attributes = {};
attributes[keypath] = value;
obj.set(attributes);
}
}
});
});
describe('Adapter', function() {
it('should read the initial value', function() {
spyOn(data, 'get');
el.setAttribute('data-text', 'data.foo');
rivets.bind(el, bindData);
expect(data.get).toHaveBeenCalledWith('foo');
});
it('should read the initial value unless preloadData is false', function() {
rivets.configure({preloadData: false});
spyOn(data, 'get');
el.setAttribute('data-value', 'data.foo');
rivets.bind(el, bindData);
expect(data.get).not.toHaveBeenCalled();
});
it('should subscribe to updates', function() {
spyOn(data, 'on');
el.setAttribute('data-value', 'data.foo');
rivets.bind(el, bindData);
expect(data.on).toHaveBeenCalled();
});
});
describe('Binds', function() {
describe('Text', function() {
it('should set the text content of the element', function() {
el.setAttribute('data-text', 'data.foo');
rivets.bind(el, bindData);
expect(el.textContent || el.innerText).toBe(data.get('foo'));
});
it('should correctly handle HTML in the content', function() {
el.setAttribute('data-text', 'data.foo');
value = '<b>Fail</b>';
data.set({foo: value});
rivets.bind(el, bindData);
expect(el.textContent || el.innerText).toBe(value);
});
});
describe('HTML', function() {
it('should set the html content of the element', function() {
el.setAttribute('data-html', 'data.foo');
rivets.bind(el, bindData);
expect(el).toHaveTheTextContent(data.get('foo'));
});
it('should correctly handle HTML in the content', function() {
el.setAttribute('data-html', 'data.foo');
value = '<b>Fail</b>';
data.set({foo: value});
rivets.bind(el, bindData);
expect(el.innerHTML).toBe(value);
});
});
describe('Value', function() {
it('should set the value of the element', function() {
input.setAttribute('data-value', 'data.foo');
rivets.bind(input, bindData);
expect(input.value).toBe(data.get('foo'));
});
});
});
describe('Updates', function() {
it('should change the value', function() {
el.setAttribute('data-text', 'data.foo');
rivets.bind(el, bindData);
data.set({foo: 'some new value'});
expect(el).toHaveTheTextContent(data.get('foo'));
});
});
describe('Input', function() {
it('should update the model value', function() {
input.setAttribute('data-value', 'data.foo');
rivets.bind(input, bindData);
input.value = 'some new value';
var event = document.createEvent('HTMLEvents')
event.initEvent('change', true, true);
input.dispatchEvent(event);
expect(input.value).toBe(data.get('foo'));
});
});
});
describe('Rivets', function() {
var data, bindData, el, input;
describe('Routines', function() {
var el, input;
beforeEach(function() {
data = new Data({foo: 'bar'});
bindData = {data: data};
el = document.createElement('div');
input = document.createElement('input');
input.setAttribute('type', 'text');
rivets.configure({
preloadData: true,
adapter: {
subscribe: function(obj, keypath, callback) {
obj.on(keypath, callback);
},
read: function(obj, keypath) {
return obj.get(keypath);
},
publish: function(obj, keypath, value) {
attributes = {};
attributes[keypath] = value;
obj.set(attributes);
}
subscribe: function() {},
unsubscribe: function() {},
read: function() {},
publish: function() {}
}
});
el = document.createElement('div');
input = document.createElement('input');
input.setAttribute('type', 'text');
});
describe('Adapter', function() {
it('should read the initial value', function() {
spyOn(data, 'get');
el.setAttribute('data-text', 'data.foo');
rivets.bind(el, bindData);
expect(data.get).toHaveBeenCalledWith('foo');
describe('text', function() {
it("sets the element's text content", function() {
rivets.routines.text(el, '<em>gluten-free</em>');
expect(el.textContent || el.innerText).toBe('<em>gluten-free</em>');
expect(el.innerHTML).toBe('&lt;em&gt;gluten-free&lt;/em&gt;');
});
});
it('should read the initial value unless preloadData is false', function() {
rivets.configure({preloadData: false});
spyOn(data, 'get');
el.setAttribute('data-value', 'data.foo');
rivets.bind(el, bindData);
expect(data.get).not.toHaveBeenCalled();
describe('html', function() {
it("sets the element's HTML content", function() {
rivets.routines.html(el, '<strong>fixie</strong>');
expect(el.textContent || el.innerText).toBe('fixie');
expect(el.innerHTML).toBe('<strong>fixie</strong>');
});
});
it('should subscribe to updates', function() {
spyOn(data, 'on');
el.setAttribute('data-value', 'data.foo');
rivets.bind(el, bindData);
expect(data.on).toHaveBeenCalled();
describe('value', function() {
it("sets the element's value", function() {
rivets.routines.value(input, 'pitchfork');
expect(input.value).toBe('pitchfork');
});
});
describe('Routines', function() {
describe('text', function() {
it("sets the element's text content", function() {
rivets.routines.text(el, '<em>gluten-free</em>');
expect(el.textContent || el.innerText).toBe('<em>gluten-free</em>');
expect(el.innerHTML).toBe('&lt;em&gt;gluten-free&lt;/em&gt;');
describe('show', function() {
describe('with a truthy value', function() {
it('shows the element', function() {
rivets.routines.show(el, true);
expect(el.style.display).toBe('');
});
});
describe('html', function() {
it("sets the element's HTML content", function() {
rivets.routines.html(el, '<strong>fixie</strong>');
expect(el.textContent || el.innerText).toBe('fixie');
expect(el.innerHTML).toBe('<strong>fixie</strong>');
describe('with a falsey value', function() {
it('hides the element', function() {
rivets.routines.show(el, false);
expect(el.style.display).toBe('none');
});
});
});
describe('value', function() {
it("sets the element's value", function() {
rivets.routines.value(input, 'pitchfork');
expect(input.value).toBe('pitchfork');
describe('hide', function() {
describe('with a truthy value', function() {
it('hides the element', function() {
rivets.routines.hide(el, true);
expect(el.style.display).toBe('none');
});
});
describe('show', function() {
describe('with a truthy value', function() {
it('shows the element', function() {
rivets.routines.show(el, true);
expect(el.style.display).toBe('');
});
});
describe('with a falsey value', function() {
it('hides the element', function() {
rivets.routines.show(el, false);
expect(el.style.display).toBe('none');
});
describe('with a falsey value', function() {
it('shows the element', function() {
rivets.routines.hide(el, false);
expect(el.style.display).toBe('');
});
});
});
describe('hide', function() {
describe('with a truthy value', function() {
it('hides the element', function() {
rivets.routines.hide(el, true);
expect(el.style.display).toBe('none');
});
});
describe('with a falsey value', function() {
it('shows the element', function() {
rivets.routines.hide(el, false);
expect(el.style.display).toBe('');
});
describe('enabled', function() {
describe('with a truthy value', function() {
it('enables the element', function() {
rivets.routines.enabled(el, true);
expect(el.disabled).toBe(false);
});
});
describe('enabled', function() {
describe('with a truthy value', function() {
it('enables the element', function() {
rivets.routines.enabled(el, true);
expect(el.disabled).toBe(false);
});
});
describe('with a falsey value', function() {
it('disables the element', function() {
rivets.routines.enabled(el, false);
expect(el.disabled).toBe(true);
});
describe('with a falsey value', function() {
it('disables the element', function() {
rivets.routines.enabled(el, false);
expect(el.disabled).toBe(true);
});
});
});
describe('disabled', function() {
describe('with a truthy value', function() {
it('disables the element', function() {
rivets.routines.disabled(el, true);
expect(el.disabled).toBe(true);
});
});
describe('with a falsey value', function() {
it('enables the element', function() {
rivets.routines.disabled(el, false);
expect(el.disabled).toBe(false);
});
});
});
describe('checked', function() {
describe('with a truthy value', function() {
it('checks the element', function() {
rivets.routines.checked(el, true);
expect(el.checked).toBe(true);
});
});
describe('with a falsey value', function() {
it('unchecks the element', function() {
rivets.routines.checked(el, false);
expect(el.checked).toBe(false);
});
describe('disabled', function() {
describe('with a truthy value', function() {
it('disables the element', function() {
rivets.routines.disabled(el, true);
expect(el.disabled).toBe(true);
});
});
describe('unchecked', function() {
describe('with a truthy value', function() {
it('unchecks the element', function() {
rivets.routines.unchecked(el, true);
expect(el.checked).toBe(false);
});
});
describe('with a falsey value', function() {
it('checks the element', function() {
rivets.routines.unchecked(el, false);
expect(el.checked).toBe(true);
});
describe('with a falsey value', function() {
it('enables the element', function() {
rivets.routines.disabled(el, false);
expect(el.disabled).toBe(false);
});
});
});
describe('selected', function() {
describe('with a truthy value', function() {
it('selects the element', function() {
rivets.routines.selected(el, true);
expect(el.selected).toBe(true);
});
});
describe('with a falsey value', function() {
it('unselects the element', function() {
rivets.routines.selected(el, false);
expect(el.selected).toBe(false);
});
describe('checked', function() {
describe('with a truthy value', function() {
it('checks the element', function() {
rivets.routines.checked(el, true);
expect(el.checked).toBe(true);
});
});
describe('unselected', function() {
describe('with a truthy value', function() {
it('unselects the element', function() {
rivets.routines.unselected(el, true);
expect(el.selected).toBe(false);
});
});
describe('with a falsey value', function() {
it('selects the element', function() {
rivets.routines.unselected(el, false);
expect(el.selected).toBe(true);
});
describe('with a falsey value', function() {
it('unchecks the element', function() {
rivets.routines.checked(el, false);
expect(el.checked).toBe(false);
});
});
});
describe('Binds', function() {
describe('Text', function() {
it('should set the text content of the element', function() {
el.setAttribute('data-text', 'data.foo');
rivets.bind(el, bindData);
expect(el.textContent || el.innerText).toBe(data.get('foo'));
});
it('should correctly handle HTML in the content', function() {
el.setAttribute('data-text', 'data.foo');
value = '<b>Fail</b>';
data.set({foo: value});
rivets.bind(el, bindData);
expect(el.textContent || el.innerText).toBe(value);
describe('unchecked', function() {
describe('with a truthy value', function() {
it('unchecks the element', function() {
rivets.routines.unchecked(el, true);
expect(el.checked).toBe(false);
});
});
describe('HTML', function() {
it('should set the html content of the element', function() {
el.setAttribute('data-html', 'data.foo');
rivets.bind(el, bindData);
expect(el).toHaveTheTextContent(data.get('foo'));
describe('with a falsey value', function() {
it('checks the element', function() {
rivets.routines.unchecked(el, false);
expect(el.checked).toBe(true);
});
});
});
it('should correctly handle HTML in the content', function() {
el.setAttribute('data-html', 'data.foo');
value = '<b>Fail</b>';
data.set({foo: value});
rivets.bind(el, bindData);
expect(el.innerHTML).toBe(value);
describe('selected', function() {
describe('with a truthy value', function() {
it('selects the element', function() {
rivets.routines.selected(el, true);
expect(el.selected).toBe(true);
});
});
describe('Value', function() {
it('should set the value of the element', function() {
input.setAttribute('data-value', 'data.foo');
rivets.bind(input, bindData);
expect(input.value).toBe(data.get('foo'));
describe('with a falsey value', function() {
it('unselects the element', function() {
rivets.routines.selected(el, false);
expect(el.selected).toBe(false);
});
});
});
describe('Updates', function() {
it('should change the value', function() {
el.setAttribute('data-text', 'data.foo');
rivets.bind(el, bindData);
data.set({foo: 'some new value'});
expect(el).toHaveTheTextContent(data.get('foo'));
describe('unselected', function() {
describe('with a truthy value', function() {
it('unselects the element', function() {
rivets.routines.unselected(el, true);
expect(el.selected).toBe(false);
});
});
});
describe('Input', function() {
it('should update the model value', function() {
input.setAttribute('data-value', 'data.foo');
rivets.bind(input, bindData);
input.value = 'some new value';
var event = document.createEvent('HTMLEvents')
event.initEvent('change', true, true);
input.dispatchEvent(event);
expect(input.value).toBe(data.get('foo'));
describe('with a falsey value', function() {
it('selects the element', function() {
rivets.routines.unselected(el, false);
expect(el.selected).toBe(true);
});
});
});
});
......