- {{element a tag="li"}}{{element b tag="li"}}{{element c}}{{element d}}
empty
{{/empty}}{{#collection letters}}{{letter}}{{/collection}}'),
55 | letters: new Thorax.Collection()
56 | });
57 | a.render();
58 | expect(a.$('.empty').html()).to.equal('empty');
59 | a.letters.reset(_.clone(letterCollection.models));
60 | expect(a.$('.empty').length).to.equal(0);
61 | expect(a.$('[data-collection-cid] div').eq(0).html()).to.equal('a');
62 | var b = new Thorax.View({
63 | template: Handlebars.compile('{{#empty letters}}empty a
{{/empty}}{{#collection letters}}{{letter}}{{else}}empty b{{/collection}}'),
64 | letters: new Thorax.Collection()
65 | });
66 | b.render();
67 | expect(b.$('.empty').html()).to.equal('empty a');
68 | expect(b.$('[data-collection-cid] div').eq(0).html()).to.equal('empty b');
69 | b.letters.reset(letterCollection.models);
70 | expect(b.$('.empty').length).to.equal(0);
71 | expect(b.$('[data-collection-cid] div').eq(0).html()).to.equal('a');
72 | });
73 |
74 | it("multiple empty helpers binding the same object will not cause multiple renders", function() {
75 | var spy = this.spy();
76 | var view = new Thorax.View({
77 | events: {
78 | rendered: spy
79 | },
80 | template: Handlebars.compile("{{#empty collection}}{{/empty}}{{#empty collection}}{{/empty}}"),
81 | collection: new Thorax.Collection()
82 | });
83 | view.ensureRendered();
84 | expect(spy.callCount).to.equal(1);
85 | view.collection.add({key: 'value'});
86 | expect(spy.callCount).to.equal(2);
87 | });
88 | });
89 |
--------------------------------------------------------------------------------
/test/src/helpers/super.js:
--------------------------------------------------------------------------------
1 | describe('super helper', function() {
2 |
3 | it("super helper", function() {
4 | var parent, child;
5 | Handlebars.templates['super-named-test'] = Handlebars.compile('');
6 | parent = Thorax.View.extend({
7 | name: 'super-named-test'
8 | });
9 | child = new (parent.extend({
10 | template: Handlebars.compile('{{super}}')
11 | }))();
12 | child.render();
13 | expect(child.$('.parent').length).to.equal(1);
14 | expect(child.$('.child').length).to.equal(1);
15 |
16 | // same as above but with template attr using name
17 | parent = Thorax.View.extend({
18 | template: 'super-named-test'
19 | });
20 | child = new (parent.extend({
21 | template: Handlebars.compile('{{super}}')
22 | }))();
23 | child.render();
24 | expect(child.$('.parent').length).to.equal(1);
25 | expect(child.$('.child').length).to.equal(1);
26 |
27 | parent = Thorax.View.extend({
28 | name: 'super-test',
29 | template: Handlebars.compile('')
30 | });
31 | child = new (parent.extend({
32 | template: Handlebars.compile('{{super}}')
33 | }))();
34 | child.render();
35 | expect(child.$('.parent').length).to.equal(1);
36 | expect(child.$('.child').length).to.equal(1);
37 |
38 | parent = Thorax.View.extend({
39 | template: Handlebars.compile('{{#collection letters tag="ul"}}template
')[0]; 14 | } 15 | }); 16 | childReturningElement.render(); 17 | expect(childReturningElement.$('p').html()).to.equal('template'); 18 | var childReturning$ = new Thorax.View({ 19 | template: function() { 20 | return $('template
'); 21 | } 22 | }); 23 | childReturning$.render(); 24 | expect(childReturning$.$('p').html()).to.equal('template'); 25 | }); 26 | 27 | it("template yield", function() { 28 | Handlebars.templates['yield-child'] = Handlebars.compile('{{@yield}}'); 29 | Handlebars.templates['yield-parent'] = Handlebars.compile('{{#template "yield-child"}}content{{/template}}
'); 30 | var view = new Thorax.View({ 31 | name: 'yield-parent' 32 | }); 33 | view.render(); 34 | expect(view.$('p > span').html()).to.equal('content'); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /test/src/helpers/url.js: -------------------------------------------------------------------------------- 1 | describe('url helper', function() { 2 | it("url helper", function() { 3 | var href = Handlebars.helpers.url.call({}, '/a/{{b}}', {'expand-tokens': true}); 4 | expect(href).to.equal('#/a/'); 5 | href = Handlebars.helpers.url.call({b: 'b'}, '/a/{{b}}', {'expand-tokens': true}); 6 | expect(href).to.equal('#/a/b'); 7 | href = Handlebars.helpers.url.call({b: 'c'}, '/a/{{b}}', {'expand-tokens': true}); 8 | expect(href).to.equal('#/a/c'); 9 | 10 | href = Handlebars.helpers.url('a', 'c', {}); 11 | expect(href).to.equal('#a/c'); 12 | }); 13 | 14 | describe('urls are properly encoded', function () { 15 | it('when joining multiple arguments automatically', function () { 16 | // uses encodeURIComponent in /src/helpers/url.js 17 | var slug = "hello world, sup!", 18 | actual = Handlebars.helpers.url('articles', slug, {}), 19 | expected = '#articles/hello%20world%2C%20sup!'; 20 | 21 | expect(actual).to.equal(expected); 22 | }); 23 | it('when using expand-tokens=true (bug)', function () { 24 | // uses Thorax.Util.expandToken from /src/util.js, line 260 25 | var context = {slug: "hello world, sup!"}, 26 | actual = Handlebars.helpers.url.call(context, '/articles/{{slug}}', {'expand-tokens': true}), 27 | expected = '#/articles/hello%20world%2C%20sup!'; 28 | 29 | expect(actual).to.equal(expected); 30 | }); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/src/helpers/view.js: -------------------------------------------------------------------------------- 1 | describe('view helper', function() { 2 | it("throws an error when template compiled without data", function() { 3 | expect(function() { 4 | Handlebars.helpers.view({}, {}); 5 | }).to.throwError(); 6 | }); 7 | 8 | it("throws an error when any hash arguments are passed on an instance", function() { 9 | var view = new Thorax.View({ 10 | instance: new Thorax.View({ 11 | template: Handlebars.compile('') 12 | }), 13 | template: Handlebars.compile('{{view instance tag="span" key="value"}}') 14 | }); 15 | expect(function() { 16 | view.render(); 17 | }).to.throwError(); 18 | }); 19 | 20 | it("should allow hash arguments when a view class name is passed", function() { 21 | Thorax.View.extend({ 22 | tagName: 'p', 23 | name: 'HashArgsClassTest', 24 | template: Handlebars.compile('{{key}}') 25 | }); 26 | var view = new Thorax.View({ 27 | template: Handlebars.compile('{{view "HashArgsClassTest" key="value"}}
')
28 | });
29 | view.render();
30 | expect(view.$('span').html()).to.equal('value');
31 | });
32 |
33 | it('should use the registry to lookup view clases', function() {
34 | //test nested
35 | Thorax.Views.Outer = {
36 | Inner: Thorax.View.extend({
37 | tagName: 'span',
38 | template: function() { return 'inner'; }
39 | }),
40 | More: {
41 | Nested: Thorax.View.extend({
42 | tagName: 'span',
43 | template: function() { return 'nested'; }
44 | })
45 | }
46 | };
47 |
48 | var view = new Thorax.View({
49 | template: Handlebars.compile('{{view "Outer.Inner"}}
{{view "Outer.More.Nested"}}
')
50 | });
51 | view.render();
52 | expect(view.$('p > span').html()).to.equal('inner', 'test nested registryGet');
53 | expect(view.$('div > span').html()).to.equal('nested', 'test nested registryGet');
54 |
55 | view = new Thorax.View({
56 | name: 'extension-test'
57 | });
58 | view.render();
59 | expect(view.html()).to.equal('123');
60 | });
61 |
62 | it("fail silently when no view initialized", function() {
63 | var parent = new Thorax.View({
64 | template: Handlebars.compile("{{view child}}")
65 | });
66 | parent.render();
67 | expect(parent.$el.html()).to.equal('');
68 | });
69 |
70 | it("child views", function() {
71 | var childRenderedCount = 0,
72 | parentRenderedCount = 0;
73 | Thorax.View.extend({
74 | name: 'child',
75 | initialize: function() {
76 | this.on('rendered', function() {
77 | ++childRenderedCount;
78 | });
79 | }
80 | });
81 | var Parent = Thorax.View.extend({
82 | name: 'parent',
83 | initialize: function() {
84 | this.on('rendered', function() {
85 | ++parentRenderedCount;
86 | });
87 | this.childModel = new Thorax.Model({
88 | value: 'a'
89 | });
90 | this.child = new Thorax.Views.child({
91 | model: this.childModel
92 | });
93 | }
94 | });
95 | var parent = new Parent();
96 | parent.render();
97 | expect(parent.$('[data-view-name="child"] > div').html()).to.equal('a', 'view embedded');
98 | expect(parentRenderedCount).to.equal(1);
99 | expect(childRenderedCount).to.equal(1);
100 |
101 | parent.render();
102 | expect(parent.$('[data-view-name="child"] > div').html()).to.equal('a', 'view embedded');
103 | expect(parentRenderedCount).to.equal(2, 're-render of parent does not render child');
104 | expect(childRenderedCount).to.equal(1, 're-render of parent does not render child');
105 |
106 | parent.childModel.set({value: 'b'});
107 | expect(parent.$('[data-view-name="child"] > div').html()).to.equal('b', 'view embedded');
108 | expect(parentRenderedCount).to.equal(2, 're-render of child does not parent child');
109 | expect(childRenderedCount).to.equal(2, 're-render of child does not render parent');
110 |
111 | //ensure recursion does not happen when child view has the same model
112 | //as parent
113 | parent.setModel(parent.childModel);
114 | parent.model.set({value: 'c'});
115 | expect(parentRenderedCount).to.equal(4);
116 | expect(childRenderedCount).to.equal(3);
117 | });
118 |
119 | it("child views within #each", function() {
120 | var parent = new Thorax.View({
121 | template: Handlebars.compile('{{#each views}}{{view this}}{{/each}}'),
122 | views: [
123 | new Thorax.View({
124 | template: Handlebars.compile("a")
125 | }),
126 | new Thorax.View({
127 | template: Handlebars.compile("b")
128 | })
129 | ]
130 | });
131 | parent.render();
132 | expect(parent.$el.text().replace(/\r\n/g, '')).to.equal('ab');
133 | });
134 |
135 | it('child views within #each with mutation', function() {
136 | var parent = new Thorax.View({
137 | template: Handlebars.compile('{{#each views}}{{view this}}{{/each}}'),
138 | views: [
139 | new Thorax.View({
140 | template: Handlebars.compile('a')
141 | }),
142 | new Thorax.View({
143 | template: Handlebars.compile('b')
144 | }),
145 | new Thorax.View({
146 | template: Handlebars.compile('c')
147 | })
148 | ]
149 | });
150 | parent.render();
151 | expect(parent.$el.text().replace(/\r\n/g, '')).to.equal('abc');
152 |
153 | parent.views.splice(1, 1);
154 | parent.render();
155 | expect(parent.$el.text().replace(/\r\n/g, '')).to.equal('ac');
156 | });
157 |
158 | it("template passed to constructor and view block", function() {
159 | var view = new Thorax.View({
160 | template: Handlebars.compile('{{key}}
'), 161 | key: 'value' 162 | }); 163 | view.render(); 164 | expect(view.$('p').html()).to.equal('value'); 165 | 166 | var view = new (Thorax.View.extend({ 167 | template: Handlebars.compile('{{key}}
'), 168 | key: 'value' 169 | }))(); 170 | view.render(); 171 | expect(view.$('p').html()).to.equal('value'); 172 | 173 | var Child = Thorax.View.extend({ 174 | template: Handlebars.compile('{{key}}
'),
175 | key: 'value'
176 | });
177 |
178 | var a = new Child();
179 | var b = new Child();
180 |
181 | var parent = new Thorax.View({
182 | template: Handlebars.compile('{{#view b}}
'),
183 | a: a,
184 | b: b
185 | });
186 | parent.render();
187 | expect(parent.$('.child-a').length).to.equal(1);
188 | expect(parent.$('.child-a').html()).to.equal('value');
189 | expect(parent.$('.child-b').length).to.equal(1);
190 | expect(parent.$('.child-b').html()).to.equal('value');
191 |
192 | //ensure that override does not persist to view itself
193 | b.render();
194 | expect(b.$('.child-a').html()).to.equal('value');
195 |
196 | //test nesting
197 | var outer = new Thorax.View({
198 | template: Handlebars.compile('{{key}}
{{/view}}{{view a}}{{#view inner}}
'),
199 | inner: new Thorax.View({
200 | child: new Thorax.View()
201 | })
202 | });
203 | outer.render();
204 | expect(outer.$('.c').html()).to.equal('value');
205 | });
206 |
207 | it("child view re-render will keep dom events intact", function() {
208 | if ($serverSide) {
209 | return;
210 | }
211 |
212 | var callCount = 0;
213 | var parent = new Thorax.View({
214 | name: 'parent-event-dom-test',
215 | child: new Thorax.View({
216 | name: 'child-event-dom-test',
217 | events: {
218 | 'click .test': function() {
219 | ++callCount;
220 | }
221 | },
222 | template: function() { return ''; }
223 | }),
224 | template: Handlebars.compile("{{view child}}")
225 | });
226 | parent.render();
227 | $('body').append(parent.el);
228 | parent.child.$('.test').trigger('click');
229 | expect(callCount).to.equal(1);
230 | parent.render();
231 | parent.child.$('.test').trigger('click');
232 | expect(callCount).to.equal(2);
233 | parent.$el.remove();
234 | });
235 |
236 | it("$.fn.view", function() {
237 | var child = new Thorax.View({
238 | template: Handlebars.compile('')
239 | });
240 | var parent = new Thorax.View({
241 | template: Handlebars.compile('{{#view child}}
{{/view}}value
{{/view}}{{view child}}
'),
242 | child: child
243 | });
244 | parent.render();
245 | parent.retain();
246 |
247 | expect(child.$('div.child').view()).to.equal(child);
248 | expect(parent.$('div.parent').view()).to.equal(parent);
249 | expect(parent.$('div.child').view()).to.equal(child);
250 | });
251 |
252 | it("multiple views initialized by name will not be re-rendered", function() {
253 | var spy = this.spy(function() {
254 | return Thorax.View.prototype.initialize.apply(this, arguments);
255 | });
256 | Thorax.View.extend({
257 | name: 'named-view',
258 | template: Handlebars.compile('inner'),
259 | initialize: spy
260 | });
261 | var view = new Thorax.View({
262 | template: Handlebars.compile('{{view "named-view"}}{{view "named-view"}}')
263 | });
264 | view.render();
265 | var firstCids = _.keys(view.children);
266 | expect(spy.callCount).to.equal(2);
267 | expect(view.$('div').eq(0).html()).to.equal('inner');
268 | expect(view.$('div').eq(1).html()).to.equal('inner');
269 |
270 | view.render();
271 | expect(spy.callCount).to.equal(2);
272 | expect(view.$('div').eq(0).html()).to.equal('inner');
273 | expect(view.$('div').eq(1).html()).to.equal('inner');
274 |
275 | var secondCids = _.keys(view.children);
276 | expect(firstCids.length).to.equal(secondCids.length);
277 | expect(firstCids[0]).to.equal(secondCids[0]);
278 | expect(firstCids[1]).to.equal(secondCids[1]);
279 | });
280 |
281 | it("views embedded with view helper do not incorrectly set parent", function() {
282 | var view = new Thorax.View({
283 | child: new Thorax.View({
284 | template: Handlebars.compile('{{#collection}}{{/collection}}')
285 | }),
286 | template: Handlebars.compile('{{view child}}'),
287 | collection: new Thorax.Collection()
288 | });
289 | view.render();
290 | var collectionView = _.find(view.child.children, function(child) {
291 | return child._helperName === 'collection';
292 | });
293 | expect(collectionView.parent).to.equal(view.child);
294 |
295 | // ensure overrides do not modify either
296 | view = new Thorax.View({
297 | child: new Thorax.View({
298 | template: function() {}
299 | }),
300 | template: Handlebars.compile('{{#view child}}{{#collection}}{{/collection}}{{/view}}'),
301 | collection: new Thorax.Collection()
302 | });
303 | view.render();
304 | emptyView = _.find(view.child.children, function(child) {
305 | return child._helperName === 'collection';
306 | });
307 | expect(emptyView.parent).to.equal(view.child);
308 | });
309 |
310 | it('ensure manually initialized child view is not destroyed if it goes out of scope in template', function() {
311 | var child = new Thorax.View({
312 | template: Handlebars.compile('content')
313 | });
314 | child.retain();
315 |
316 | var parent = new Thorax.View({
317 | child: child,
318 | showChild: true,
319 | template: Handlebars.compile('{{#showChild}}{{view child}}{{/showChild}}')
320 | });
321 | parent.render();
322 | expect(parent.$('span').length).to.equal(1);
323 |
324 | parent.showChild = false;
325 | parent.render();
326 | expect(parent.$('span').length).to.equal(0);
327 |
328 | parent.showChild = true;
329 | parent.render();
330 | expect(parent.$('span').length).to.equal(1);
331 | });
332 |
333 | it('ensure automatically initialized child view is destroyed if it goes out of scope in template', function() {
334 | var spy = this.spy();
335 | var ScopedChildTestView = Thorax.View.extend({
336 | name: 'scoped-child-test',
337 | events: {
338 | rendered: spy
339 | },
340 | template: Handlebars.compile('content')
341 | });
342 | var parent = new Thorax.View({
343 | showChild: true,
344 | template: Handlebars.compile('{{#showChild}}{{view "scoped-child-test"}}{{/showChild}}')
345 | });
346 | parent.render();
347 | expect(parent.$('span').length).to.equal(1);
348 | expect(spy.callCount).to.equal(1);
349 |
350 | parent.showChild = false;
351 | parent.render();
352 | expect(parent.$('span').length).to.equal(0);
353 |
354 | parent.showChild = true;
355 | parent.render();
356 | expect(parent.$('span').length).to.equal(1);
357 | // should be a new instance
358 | expect(spy.callCount).to.equal(2);
359 | });
360 | });
361 |
--------------------------------------------------------------------------------
/test/src/layout.js:
--------------------------------------------------------------------------------
1 | /*global $serverSide:true */
2 |
3 | describe('layout', function() {
4 | var _serverSide = window.$serverSide,
5 | _fruitLoops = window.FruitLoops;
6 | beforeEach(function() {
7 | window.FruitLoops = {
8 | emit: this.spy()
9 | };
10 | });
11 | afterEach(function() {
12 | $serverSide = _serverSide;
13 | window.FruitLoops = _fruitLoops;
14 | });
15 |
16 | function bindCounter(view) {
17 | var counter = {};
18 | view.bind('all', function(eventName) {
19 | // For activated, ensure that we actually have DOM content
20 | if (eventName === 'activated') {
21 | expect(this.html().length).to.be.greaterThan(0);
22 | }
23 |
24 | counter[eventName] = (counter[eventName] || 0) + 1;
25 | });
26 | return counter;
27 | }
28 |
29 | describe('view lifecycle', function() {
30 | var a,
31 | aEventCounter,
32 | b,
33 | bEventCounter,
34 | layout;
35 |
36 | beforeEach(function() {
37 | layout = new Thorax.LayoutView();
38 |
39 | a = new Thorax.View({
40 | render: function(output, callback) {
41 | Thorax.View.prototype.render.call(this, 'a', callback);
42 | }
43 | });
44 | aEventCounter = bindCounter(a);
45 |
46 | b = new Thorax.View({
47 | render: function(output, callback) {
48 | Thorax.View.prototype.render.call(this, 'b', callback);
49 | }
50 | });
51 | bEventCounter = bindCounter(b);
52 | });
53 |
54 | it('should process', function() {
55 | $serverSide = false;
56 | expect(layout.getView()).to.not.be.ok();
57 |
58 | layout.setView(a, {async: false});
59 | expect(layout.getView()).to.equal(a, 'layout sets view');
60 | expect(layout.$('[data-view-cid]').length).to.be.above(0, 'layout updates HTML');
61 |
62 | b.render();
63 | layout.setView(b, {async: false});
64 | expect(layout.getView()).to.equal(b, 'layout sets view');
65 |
66 | //lifecycle checks
67 | expect(aEventCounter).to.eql({
68 | 'before:rendered': 1,
69 | rendered: 1,
70 | 'before:append': 1,
71 | append: 1,
72 | activated: 1,
73 | ready: 1,
74 | deactivated: 1,
75 | destroyed: 1
76 | });
77 |
78 | expect(bEventCounter).to.eql({
79 | 'before:rendered': 1,
80 | rendered: 1,
81 | 'before:append': 1,
82 | append: 1,
83 | activated: 1,
84 | ready: 1
85 | });
86 |
87 | layout.setView(false);
88 | expect(layout.getView()).to.not.be.ok();
89 | expect(bEventCounter).to.eql({
90 | 'before:rendered': 1,
91 | rendered: 1,
92 | 'before:append': 1,
93 | append: 1,
94 | activated: 1,
95 | ready: 1,
96 | deactivated: 1,
97 | destroyed: 1
98 | });
99 | });
100 |
101 | it('should process server-side', function(done) {
102 | $serverSide = true;
103 | expect(layout.getView()).to.not.be.ok();
104 |
105 | layout.once('change:view:end', function() {
106 | expect(layout.getView()).to.equal(a, 'layout sets view');
107 | expect(layout.$('[data-view-cid]')).to.not.be.empty();
108 | expect(aEventCounter).to.eql({
109 | 'before:rendered': 1,
110 | rendered: 1,
111 | 'before:append': 1,
112 | append: 1,
113 | activated: 1,
114 | ready: 1
115 | });
116 |
117 | layout.setView(b, {async: false});
118 | expect(layout.getView()).to.equal(b, 'layout sets view');
119 | expect(layout.$('[data-view-cid]')).to.be.empty();
120 | expect(window.FruitLoops.emit.calledOnce).to.be.ok();
121 |
122 | //lifecycle checks
123 | expect(aEventCounter).to.eql({
124 | 'before:rendered': 1,
125 | rendered: 1,
126 | 'before:append': 1,
127 | append: 1,
128 | activated: 1,
129 | ready: 1,
130 | deactivated: 1,
131 | destroyed: 1
132 | });
133 |
134 | expect(bEventCounter).to.eql({});
135 |
136 | layout.setView(false);
137 | expect(layout.getView()).to.not.be.ok();
138 | expect(bEventCounter).to.eql({
139 | deactivated: 1,
140 | destroyed: 1
141 | });
142 |
143 | done();
144 | });
145 | layout.setView(a, {serverRender: true});
146 | expect(layout.getView()).to.be(undefined);
147 |
148 | this.clock.tick(1000);
149 | });
150 | });
151 |
152 | it("LayoutView destroy will destroy child view", function() {
153 | var callCounts = {
154 | parent: 0,
155 | layout: 0,
156 | child: 0
157 | };
158 | var parent = new Thorax.View({
159 | events: {
160 | destroyed: function() {
161 | ++callCounts.parent;
162 | }
163 | },
164 | template: Handlebars.compile("{{view this.layout}}"),
165 | layout: new Thorax.LayoutView({
166 | events: {
167 | destroyed: function() {
168 | ++callCounts.layout;
169 | }
170 | }
171 | })
172 | });
173 | parent.render();
174 | parent.layout.setView(new Thorax.View({
175 | template: function() {},
176 | events: {
177 | destroyed: function() {
178 | ++callCounts.child;
179 | }
180 | }
181 | }), {async: false});
182 | parent.release();
183 | expect(callCounts.parent).to.equal(1);
184 | expect(callCounts.layout).to.equal(1);
185 | expect(callCounts.child).to.equal(1);
186 | });
187 |
188 | it("Layout will not destroy view if retained", function() {
189 | var aSpy = this.spy(),
190 | bSpy = this.spy();
191 | var a = new Thorax.View({
192 | name: 'a',
193 | events: {
194 | destroyed: aSpy
195 | },
196 | template: Handlebars.compile("")
197 | });
198 | var b = new Thorax.View({
199 | name: 'b',
200 | events: {
201 | destroyed: bSpy
202 | },
203 | template: Handlebars.compile("")
204 | });
205 | var layout = new Thorax.LayoutView();
206 | layout.setView(a, {async: false});
207 | b.retain();
208 | layout.setView(b, {async: false});
209 | layout.setView(false);
210 | expect(aSpy.callCount).to.equal(1);
211 | expect(bSpy.callCount).to.equal(0);
212 | b.release();
213 | expect(bSpy.callCount).to.equal(1);
214 | });
215 |
216 | it("Layout can set view el", function() {
217 | $('body').append('');
218 | var view = new Thorax.LayoutView({
219 | el: $('#test-target')[0]
220 | });
221 | view.render();
222 | expect(view.$el.parent()[0]).to.equal($('#test-target-container')[0]);
223 | $('#test-target-container').remove();
224 | });
225 |
226 | it('layouts with templates and {{layout-element}}', function() {
227 | var layoutWithTemplate = new Thorax.LayoutView({
228 | template: Handlebars.compile('
{{layout-element}}
')
229 | });
230 | layoutWithTemplate.setView(new Thorax.View({
231 | serverRender: true,
232 | template: Handlebars.compile('')
233 | }), {async: false});
234 | expect($(layoutWithTemplate.el).attr('data-layout-cid')).to.not.be.ok();
235 | expect(layoutWithTemplate.$('[data-layout-cid]').length).to.equal(1);
236 | expect(layoutWithTemplate.$('.outer').length).to.equal(1);
237 | expect(layoutWithTemplate.$('.inner').length).to.equal(1);
238 | });
239 |
240 | it('should fail if missing layout-element', function() {
241 | var layoutWithTemplateWithoutLayoutTag = new Thorax.LayoutView({
242 | template: Handlebars.compile('')
243 | });
244 | expect(function() {
245 | layoutWithTemplateWithoutLayoutTag.setView(new Thorax.View({
246 | template: Handlebars.compile('')
247 | }));
248 | }).to.throwError();
249 | });
250 |
251 | it("layout-element used outside of a LayoutView with throw", function() {
252 | var view = new Thorax.View({
253 | template: Handlebars.compile('{{layout-element}}')
254 | });
255 | expect(_.bind(view.render, view)).to.throwError();
256 | });
257 |
258 | it("transition option can be passed to setView", function(done) {
259 | this.clock.restore();
260 |
261 | var layout = new Thorax.LayoutView();
262 | var a = new Thorax.View({
263 | serverRender: true,
264 | template: function() {
265 | return 'a';
266 | }
267 | });
268 | var b = new Thorax.View({
269 | serverRender: true,
270 | template: function() {
271 | return 'b';
272 | }
273 | });
274 | layout.setView(a, {
275 | serverRender: true,
276 | transition: function(newView, oldView, append, remove) {
277 | append();
278 | remove();
279 |
280 | expect(layout.$('span').html()).to.equal('a');
281 | layout.setView(b, {
282 | serverRender: true,
283 | transition: function(newView, oldView, append, remove) {
284 | append();
285 | remove();
286 |
287 | expect(layout.$('span').html()).to.equal('b');
288 | done();
289 | }
290 | });
291 | }
292 | });
293 | });
294 |
295 | it('setView should not throw even if old view is destroyed', function() {
296 | var layout = new Thorax.LayoutView();
297 | var a = new Thorax.View({
298 | serverRender: true,
299 | template: function() {
300 | return 'a';
301 | }
302 | });
303 | var b = new Thorax.View({
304 | serverRender: true,
305 | template: function() {
306 | return 'b';
307 | }
308 | });
309 | layout.setView(a, {async: false});
310 | expect(layout.$('span').html()).to.equal('a');
311 | a.release();
312 | layout.setView(b, {async: false});
313 | expect(layout.$('span').html()).to.equal('b');
314 | });
315 |
316 | it('keeps the set view in the DOM after render', function() {
317 | var layoutView = new Thorax.LayoutView({
318 | template: Handlebars.compile('My Layout View {{layout-element}}
') 319 | }); 320 | 321 | var childView = new Thorax.View({ 322 | template: Handlebars.compile('My Child View
') 323 | }); 324 | 325 | layoutView.setView(childView, {serverRender: true, async: false}); 326 | 327 | expect(layoutView.$(".layout-view").length).to.not.equal(0); 328 | expect(layoutView.$(".child-view").length).to.not.equal(0); 329 | 330 | layoutView.render(); 331 | 332 | expect(layoutView.$(".layout-view").length).to.not.equal(0); 333 | expect(layoutView.$(".child-view").length).to.not.equal(0); 334 | }); 335 | }); 336 | -------------------------------------------------------------------------------- /test/src/model.js: -------------------------------------------------------------------------------- 1 | /*global $serverSide */ 2 | 3 | describe('model', function() { 4 | it("shouldFetch", function() { 5 | var options = {fetch: true}; 6 | var a = new (Thorax.Model.extend())(); 7 | expect(a.shouldFetch(options)).to.not.be.ok(); 8 | 9 | var b = new (Thorax.Model.extend({urlRoot: '/'}))(); 10 | expect(b.shouldFetch(options)).to.be(true); 11 | 12 | var c = new (Thorax.Model.extend({urlRoot: '/'}))(); 13 | c.set({key: 'value'}); 14 | expect(c.shouldFetch(options)).to.not.be.ok(); 15 | 16 | var d = new (Thorax.Collection.extend())(); 17 | expect(d.shouldFetch(options)).to.not.be.ok(); 18 | 19 | var e = new (Thorax.Collection.extend({url: '/'}))(); 20 | expect(e.shouldFetch(options)).to.be(true); 21 | 22 | var f = new (Thorax.Collection.extend({url: '/'}))(); 23 | expect(e.shouldFetch({fetch: false})).to.be(false); 24 | }); 25 | 26 | it("allow model url to be a string", function() { 27 | var model = new (Thorax.Model.extend({ 28 | url: '/test' 29 | }))(); 30 | expect(model.shouldFetch({fetch: true})).to.be(true); 31 | }); 32 | 33 | describe('model view binding', function() { 34 | var model, 35 | template; 36 | beforeEach(function() { 37 | model = new Thorax.Model({letter: 'a'}); 38 | template = Handlebars.compile('');
10 | });
11 |
12 | describe('store/load', function() {
13 | it('should create a new id if none', function() {
14 | Thorax.ServerMarshal.store($el, 'name');
15 | expect($el.attr('data-server-data')).to.equal('0');
16 |
17 | $el = $('
');
18 | Thorax.ServerMarshal.store($el, 'name');
19 | expect($el.attr('data-server-data')).to.equal('1');
20 | });
21 | it('should reuse existing ids', function() {
22 | Thorax.ServerMarshal.store($el, 'name');
23 | expect($el.attr('data-server-data')).to.equal('0');
24 |
25 | Thorax.ServerMarshal.store($el, 'other');
26 | expect($el.attr('data-server-data')).to.equal('0');
27 | });
28 |
29 | describe('primitive values', function() {
30 | if ($serverSide) {
31 | return;
32 | }
33 |
34 | it('should store constants', function() {
35 | _.each(['foo', 1234, true, false, 0, '', null], function(value) {
36 | Thorax.ServerMarshal.store($el, 'value', value);
37 | expect(Thorax.ServerMarshal.load($el[0], 'value')).to.eql(value);
38 | });
39 | });
40 | it('should store lookups', function() {
41 | var context = {
42 | aField: {aField: true}
43 | };
44 |
45 | Thorax.ServerMarshal.store($el, 'value', context.aField, 'aField', {data: {root: context}});
46 | expect(Thorax.ServerMarshal.load($el[0], 'value', context)).to.eql(context.aField);
47 | expect(Thorax.ServerMarshal.load($el[0], 'value', undefined, context)).to.eql(context.aField);
48 | });
49 | });
50 | describe('arrays', function() {
51 | if ($serverSide) {
52 | return;
53 | }
54 |
55 | it('should store constant children', function() {
56 | Thorax.ServerMarshal.store($el, 'array', ['foo', 1234, true, false, 0, '', null]);
57 | expect(Thorax.ServerMarshal.load($el[0], 'array')).to.eql(['foo', 1234, true, false, 0, '', null]);
58 | });
59 | it('should store with lookup references', function() {
60 | var context = {
61 | aField: {aField: true}
62 | };
63 |
64 | Thorax.ServerMarshal.store($el, 'array', ['foo', context.aField], [null, 'aField'], {data: {view: context}});
65 | expect(Thorax.ServerMarshal.load($el[0], 'array', context)).to.eql(['foo', context.aField]);
66 | expect(Thorax.ServerMarshal.load($el[0], 'array', undefined, context)).to.eql(['foo', context.aField]);
67 | expect(Thorax.ServerMarshal.load($el[0], 'array', {}, context)).to.eql(['foo', context.aField]);
68 | });
69 | it('should throw on complex values without lookups', function() {
70 | var context = {
71 | aField: {aField: true}
72 | };
73 |
74 | expect(function() {
75 | Thorax.ServerMarshal.store($el, 'array', ['foo', context.aField], [null, null]);
76 | }).to.throwError(/server-marshall-object/);
77 | expect(function() {
78 | Thorax.ServerMarshal.store($el, 'array', ['foo', context.aField]);
79 | }).to.throwError(/server-marshall-object/);
80 | });
81 | });
82 | describe('objects', function() {
83 | if ($serverSide) {
84 | return;
85 | }
86 |
87 | it('should store constant children', function() {
88 | Thorax.ServerMarshal.store($el, 'obj', {
89 | thing1: 'foo',
90 | thing2: 1234,
91 | thing3: true,
92 | thing4: false,
93 | thing5: 0,
94 | thing6: '',
95 | thing7: null
96 | });
97 | expect(Thorax.ServerMarshal.load($el[0], 'obj')).to.eql({
98 | thing1: 'foo',
99 | thing2: 1234,
100 | thing3: true,
101 | thing4: false,
102 | thing5: 0,
103 | thing6: '',
104 | thing7: null
105 | });
106 | });
107 | it('should store with lookup references', function() {
108 | var context = {
109 | aField: {aField: true}
110 | };
111 |
112 | Thorax.ServerMarshal.store($el, 'obj', {foo: context.aField}, {foo: 'aField'}, {data: {view: context}});
113 | expect(Thorax.ServerMarshal.load($el[0], 'obj', context)).to.eql({foo: context.aField});
114 | expect(Thorax.ServerMarshal.load($el[0], 'obj', undefined, context)).to.eql({foo: context.aField});
115 | expect(Thorax.ServerMarshal.load($el[0], 'obj', {}, context)).to.eql({foo: context.aField});
116 | });
117 | it('should throw on complex values without lookups', function() {
118 | var context = {
119 | aField: {aField: true}
120 | };
121 |
122 | expect(function() {
123 | Thorax.ServerMarshal.store($el, 'obj', {'foo': context.aField}, {});
124 | }).to.throwError(/server-marshall-object/);
125 | });
126 | it('should throw on complex values with depthed path', function() {
127 | var context = {
128 | aField: {aField: true}
129 | };
130 |
131 | expect(function() {
132 | Thorax.ServerMarshal.store($el, 'obj', {'foo': context.aField}, {'foo': '../foo'});
133 | }).to.throwError(/server-marshall-object/);
134 | });
135 | it('should throw on complex values from subexpressions', function() {
136 | var context = {
137 | aField: {aField: true}
138 | };
139 |
140 | expect(function() {
141 | Thorax.ServerMarshal.store($el, 'obj', {'foo': context.aField}, {'foo': true});
142 | }).to.throwError(/server-marshall-object/);
143 | });
144 |
145 | it('should track with contextPath on view', function() {
146 | var context = {
147 | aField: {aField: true}
148 | };
149 | var options = {
150 | data: {
151 | view: {
152 | foo: {
153 | bar: context
154 | }
155 | },
156 | contextPath: 'foo.bar'
157 | }
158 | };
159 |
160 | Thorax.ServerMarshal.store($el, 'obj', {foo: context.aField}, {foo: 'aField'}, options);
161 | expect(Thorax.ServerMarshal.load($el[0], 'obj', {foo: {bar: context}})).to.eql({foo: context.aField});
162 | });
163 |
164 | it('should track with contextPath on context', function() {
165 | var context = {
166 | aField: {aField: true}
167 | };
168 | var options = {
169 | data: {
170 | root: {
171 | foo: {
172 | bar: context
173 | }
174 | },
175 | contextPath: 'foo.bar'
176 | }
177 | };
178 |
179 | Thorax.ServerMarshal.store($el, 'obj', {foo: context.aField}, {foo: 'aField'}, options);
180 | expect(Thorax.ServerMarshal.load($el[0], 'obj', {foo: {bar: context}})).to.eql({foo: context.aField});
181 | });
182 |
183 | it('should throw with different value on contextPath', function() {
184 | var context = {
185 | aField: {aField: true}
186 | };
187 | var options = {
188 | data: {
189 | root: {
190 | foo: {
191 | bar: 'lets go fishing'
192 | }
193 | },
194 | contextPath: 'foo.bar'
195 | }
196 | };
197 |
198 | expect(function() {
199 | Thorax.ServerMarshal.store($el, 'obj', {foo: context.aField}, {foo: 'aField'}, options);
200 | }).to.throwError(/server-marshall-object/);
201 | });
202 | });
203 | });
204 |
205 | describe('serialize', function() {
206 | it('should not fail with circular references', function() {
207 | var context = {
208 | aField: {aField: true}
209 | };
210 | context.aField.aField = context.aField;
211 |
212 | Thorax.ServerMarshal.store($el, 'obj', {foo: context.aField}, {foo: 'aField'}, {data: {view: context}});
213 |
214 | expect(Thorax.ServerMarshal.serialize()).to.match(/"\$lut":\s*"aField"/);
215 | });
216 | });
217 |
218 | describe('destroy', function() {
219 | it('should cleanup lut', function() {
220 | var $el1 = $('
'),
221 | $el2 = $('
'),
222 | $el3 = $('
');
223 |
224 | Thorax.ServerMarshal.store($el1, 'foo', 'bar1');
225 | Thorax.ServerMarshal.store($el2, 'foo', 'bar2');
226 | Thorax.ServerMarshal.store($el3, 'foo', 'bar3');
227 |
228 | expect(JSON.parse(Thorax.ServerMarshal.serialize())).to.eql([
229 | {"foo": 'bar1'},
230 | {"foo": 'bar2'},
231 | {"foo": 'bar3'}
232 | ]);
233 |
234 | Thorax.ServerMarshal.destroy($el2);
235 | expect(JSON.parse(Thorax.ServerMarshal.serialize())).to.eql([
236 | {foo: 'bar1'},
237 | null,
238 | {foo: 'bar3'}
239 | ]);
240 |
241 | Thorax.ServerMarshal.destroy($el3);
242 | expect(JSON.parse(Thorax.ServerMarshal.serialize())).to.eql([
243 | {foo: 'bar1'}
244 | ]);
245 | });
246 | });
247 | });
248 |
--------------------------------------------------------------------------------
/test/src/util.js:
--------------------------------------------------------------------------------
1 | describe('util', function() {
2 | describe('#tag', function() {
3 | it('should handle close tags', function() {
4 | expect(Thorax.Util.tag({tagName: 'div'})).to.equal('');
5 | expect(Thorax.Util.tag({tagName: 'div'}, 'foo')).to.equal('![]()
');
9 | });
10 | it('should throw on void tag with content', function() {
11 | expect(function() {
12 | Thorax.Util.tag({tagName: 'hr'}, 'something');
13 | }).to.throwError(/void-tag-content/);
14 | });
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/test/zepto-backbone-1-0.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Thorax Test Suite
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/test/zepto.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Thorax Test Suite
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
foo
');
6 | });
7 | it('should handle void tags', function() {
8 | expect(Thorax.Util.tag({tagName: 'img'})).to.equal('