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 194 additions and 110 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 "http://www.w3.org/TR/html4/loose.dtd"> 2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html> 3 <html>
4 <head> 4 <head>
5 <title>Rivets test suite</title> 5 <title>Rivets.js test suite</title>
6 6
7 <link rel="stylesheet" type="text/css" href="lib/jasmine.css"> 7 <link rel="stylesheet" type="text/css" href="lib/jasmine.css">
8 8
...@@ -13,7 +13,9 @@ ...@@ -13,7 +13,9 @@
13 13
14 <script type="text/javascript" src="matchers.js"></script> 14 <script type="text/javascript" src="matchers.js"></script>
15 <script type="text/javascript" src="mock.data.js"></script> 15 <script type="text/javascript" src="mock.data.js"></script>
16 <script type="text/javascript" src="rivets.js"></script> 16 <script type="text/javascript" src="rivets/binding.js"></script>
17 <script type="text/javascript" src="rivets/routines.js"></script>
18 <script type="text/javascript" src="rivets/functional.js"></script>
17 19
18 <script type="text/javascript"> 20 <script type="text/javascript">
19 (function() { 21 (function() {
......
1 describe('Rivets.Binding', function() {
2 var model, el, view, binding;
3
4 beforeEach(function() {
5 rivets.configure({
6 adapter: {
7 subscribe: function() {},
8 unsubscribe: function() {},
9 read: function() {},
10 publish: function() {}
11 }
12 });
13
14 el = document.createElement('div');
15 el.setAttribute('data-text', 'obj.name');
16 view = rivets.bind(el, {obj: {}});
17 binding = view.bindings[0];
18 });
19
20 it('gets assigned the routine function matching the identifier', function() {
21 expect(binding.routine).toBe(rivets.routines.text);
22 });
23
24 describe('set()', function() {
25 it('performs the binding routine with the supplied value', function() {
26 spyOn(binding, 'routine');
27 binding.set('sweater');
28 expect(binding.routine).toHaveBeenCalledWith(el, 'sweater');
29 });
30
31 it('applies any formatters to the value before performing the routine', function() {
32 rivets.config.formatters = {
33 awesome: function(value) { return 'awesome ' + value }
34 };
35 binding.formatters.push('awesome');
36 spyOn(binding, 'routine');
37 binding.set('sweater');
38 expect(binding.routine).toHaveBeenCalledWith(el, 'awesome sweater');
39 });
40
41 describe('on an event binding', function() {
42 beforeEach(function() {
43 binding.bindType = 'event';
44 });
45
46 it('performs the binding routine with the supplied function and current listener', function() {
47 spyOn(binding, 'routine');
48 func = function() { return 1 + 2; }
49 binding.set(func);
50 expect(binding.routine).toHaveBeenCalledWith(el, func, undefined);
51 });
52
53 it('passes the previously set funcation as the current listener on subsequent calls', function() {
54 spyOn(binding, 'routine');
55 funca = function() { return 1 + 2; };
56 funcb = function() { return 2 + 5; };
57
58 binding.set(funca);
59 expect(binding.routine).toHaveBeenCalledWith(el, funca, undefined);
60
61 binding.set(funcb);
62 expect(binding.routine).toHaveBeenCalledWith(el, funcb, funca);
63 });
64 });
65 });
66 });
1 describe('Functional', function() {
2 var data, bindData, el, input;
3
4 beforeEach(function() {
5 data = new Data({foo: 'bar'});
6 bindData = {data: data};
7 el = document.createElement('div');
8 input = document.createElement('input');
9 input.setAttribute('type', 'text');
10
11 rivets.configure({
12 preloadData: true,
13 adapter: {
14 subscribe: function(obj, keypath, callback) {
15 obj.on(keypath, callback);
16 },
17 read: function(obj, keypath) {
18 return obj.get(keypath);
19 },
20 publish: function(obj, keypath, value) {
21 attributes = {};
22 attributes[keypath] = value;
23 obj.set(attributes);
24 }
25 }
26 });
27 });
28
29 describe('Adapter', function() {
30 it('should read the initial value', function() {
31 spyOn(data, 'get');
32 el.setAttribute('data-text', 'data.foo');
33 rivets.bind(el, bindData);
34 expect(data.get).toHaveBeenCalledWith('foo');
35 });
36
37 it('should read the initial value unless preloadData is false', function() {
38 rivets.configure({preloadData: false});
39 spyOn(data, 'get');
40 el.setAttribute('data-value', 'data.foo');
41 rivets.bind(el, bindData);
42 expect(data.get).not.toHaveBeenCalled();
43 });
44
45 it('should subscribe to updates', function() {
46 spyOn(data, 'on');
47 el.setAttribute('data-value', 'data.foo');
48 rivets.bind(el, bindData);
49 expect(data.on).toHaveBeenCalled();
50 });
51 });
52
53 describe('Binds', function() {
54 describe('Text', function() {
55 it('should set the text content of the element', function() {
56 el.setAttribute('data-text', 'data.foo');
57 rivets.bind(el, bindData);
58 expect(el.textContent || el.innerText).toBe(data.get('foo'));
59 });
60
61 it('should correctly handle HTML in the content', function() {
62 el.setAttribute('data-text', 'data.foo');
63 value = '<b>Fail</b>';
64 data.set({foo: value});
65 rivets.bind(el, bindData);
66 expect(el.textContent || el.innerText).toBe(value);
67 });
68 });
69
70 describe('HTML', function() {
71 it('should set the html content of the element', function() {
72 el.setAttribute('data-html', 'data.foo');
73 rivets.bind(el, bindData);
74 expect(el).toHaveTheTextContent(data.get('foo'));
75 });
76
77 it('should correctly handle HTML in the content', function() {
78 el.setAttribute('data-html', 'data.foo');
79 value = '<b>Fail</b>';
80 data.set({foo: value});
81 rivets.bind(el, bindData);
82 expect(el.innerHTML).toBe(value);
83 });
84 });
85
86 describe('Value', function() {
87 it('should set the value of the element', function() {
88 input.setAttribute('data-value', 'data.foo');
89 rivets.bind(input, bindData);
90 expect(input.value).toBe(data.get('foo'));
91 });
92 });
93 });
94
95 describe('Updates', function() {
96 it('should change the value', function() {
97 el.setAttribute('data-text', 'data.foo');
98 rivets.bind(el, bindData);
99 data.set({foo: 'some new value'});
100 expect(el).toHaveTheTextContent(data.get('foo'));
101 });
102 });
103
104 describe('Input', function() {
105 it('should update the model value', function() {
106 input.setAttribute('data-value', 'data.foo');
107 rivets.bind(input, bindData);
108 input.value = 'some new value';
109 var event = document.createEvent('HTMLEvents')
110 event.initEvent('change', true, true);
111 input.dispatchEvent(event);
112 expect(input.value).toBe(data.get('foo'));
113 });
114 });
115 });
1 describe('Rivets', function() { 1 describe('Routines', function() {
2 var data, bindData, el, input; 2 var el, input;
3 3
4 beforeEach(function() { 4 beforeEach(function() {
5 data = new Data({foo: 'bar'});
6 bindData = {data: data};
7 el = document.createElement('div');
8 input = document.createElement('input');
9 input.setAttribute('type', 'text');
10
11 rivets.configure({ 5 rivets.configure({
12 preloadData: true,
13 adapter: { 6 adapter: {
14 subscribe: function(obj, keypath, callback) { 7 subscribe: function() {},
15 obj.on(keypath, callback); 8 unsubscribe: function() {},
16 }, 9 read: function() {},
17 read: function(obj, keypath) { 10 publish: function() {}
18 return obj.get(keypath);
19 },
20 publish: function(obj, keypath, value) {
21 attributes = {};
22 attributes[keypath] = value;
23 obj.set(attributes);
24 }
25 } 11 }
26 }); 12 });
27 });
28
29 describe('Adapter', function() {
30 it('should read the initial value', function() {
31 spyOn(data, 'get');
32 el.setAttribute('data-text', 'data.foo');
33 rivets.bind(el, bindData);
34 expect(data.get).toHaveBeenCalledWith('foo');
35 });
36
37 it('should read the initial value unless preloadData is false', function() {
38 rivets.configure({preloadData: false});
39 spyOn(data, 'get');
40 el.setAttribute('data-value', 'data.foo');
41 rivets.bind(el, bindData);
42 expect(data.get).not.toHaveBeenCalled();
43 });
44 13
45 it('should subscribe to updates', function() { 14 el = document.createElement('div');
46 spyOn(data, 'on'); 15 input = document.createElement('input');
47 el.setAttribute('data-value', 'data.foo'); 16 input.setAttribute('type', 'text');
48 rivets.bind(el, bindData);
49 expect(data.on).toHaveBeenCalled();
50 });
51 }); 17 });
52 18
53 describe('Routines', function() {
54 describe('text', function() { 19 describe('text', function() {
55 it("sets the element's text content", function() { 20 it("sets the element's text content", function() {
56 rivets.routines.text(el, '<em>gluten-free</em>'); 21 rivets.routines.text(el, '<em>gluten-free</em>');
...@@ -201,68 +166,4 @@ describe('Rivets', function() { ...@@ -201,68 +166,4 @@ describe('Rivets', function() {
201 }); 166 });
202 }); 167 });
203 }); 168 });
204 });
205
206 describe('Binds', function() {
207 describe('Text', function() {
208 it('should set the text content of the element', function() {
209 el.setAttribute('data-text', 'data.foo');
210 rivets.bind(el, bindData);
211 expect(el.textContent || el.innerText).toBe(data.get('foo'));
212 });
213
214 it('should correctly handle HTML in the content', function() {
215 el.setAttribute('data-text', 'data.foo');
216 value = '<b>Fail</b>';
217 data.set({foo: value});
218 rivets.bind(el, bindData);
219 expect(el.textContent || el.innerText).toBe(value);
220 });
221 });
222
223 describe('HTML', function() {
224 it('should set the html content of the element', function() {
225 el.setAttribute('data-html', 'data.foo');
226 rivets.bind(el, bindData);
227 expect(el).toHaveTheTextContent(data.get('foo'));
228 });
229
230 it('should correctly handle HTML in the content', function() {
231 el.setAttribute('data-html', 'data.foo');
232 value = '<b>Fail</b>';
233 data.set({foo: value});
234 rivets.bind(el, bindData);
235 expect(el.innerHTML).toBe(value);
236 });
237 });
238
239 describe('Value', function() {
240 it('should set the value of the element', function() {
241 input.setAttribute('data-value', 'data.foo');
242 rivets.bind(input, bindData);
243 expect(input.value).toBe(data.get('foo'));
244 });
245 });
246 });
247
248 describe('Updates', function() {
249 it('should change the value', function() {
250 el.setAttribute('data-text', 'data.foo');
251 rivets.bind(el, bindData);
252 data.set({foo: 'some new value'});
253 expect(el).toHaveTheTextContent(data.get('foo'));
254 });
255 });
256
257 describe('Input', function() {
258 it('should update the model value', function() {
259 input.setAttribute('data-value', 'data.foo');
260 rivets.bind(input, bindData);
261 input.value = 'some new value';
262 var event = document.createEvent('HTMLEvents')
263 event.initEvent('change', true, true);
264 input.dispatchEvent(event);
265 expect(input.value).toBe(data.get('foo'));
266 });
267 });
268 }); 169 });
......