it('can map a widget', function() {
$('body').append('<script type="text/dust-template" data-name="widget-tmpl"><div class="widget" id="widget"></div></script>');
Template.init();
var MyWidget = Widget.extend(function MyWidget() {
Widget.apply(this, arguments);
this.testProp = 'abc';
});
testView = new View(el, new Model());
testView.template = 'widget-tmpl';
testView.mapWidget('.widget', MyWidget);
testView.render().success(function() {
expect(testView.widgets.get('widget').testProp).toEqual('abc');
});
$('script[data-name="model-tmpl"]').remove();
});
it('can redraw whole view using a custom model', function() {
var promise,
otherModel = new Model({color: 'orange', primary: false});
$('body').append('<script type="text/dust-template" data-name="model-tmpl"><p class="redraw">Color is {color}.</p><p>It is {^primary}not {/primary}primary</p></script>');
Template.init();
testView = new View(el, model);
testView.template = 'model-tmpl';
promise = testView.render();
promise.success(function() {
expect(testView.hasRendered).toEqual(true);
expect($(testView.el).length).toBe(1);
expect($(testView.el).html()).toBe('<p class="redraw">Color is blue.</p><p>It is primary</p>');
testView.redraw(otherModel);
expect($(testView.el).html()).toBe('<p class="redraw">Color is orange.</p><p>It is not primary</p>');
});
$('script[data-name="model-tmpl"]').remove();
});
it('can redraw whole view', function() {
var promise;
$('body').append('<script type="text/dust-template" data-name="model-tmpl"><h2>Hello World</h2><p>Color is {color}.</p></script>');
Template.init();
testView = new View(el, model);
testView.template = 'model-tmpl';
promise = testView.render();
promise.success(function() {
expect(testView.hasRendered).toEqual(true);
expect($(testView.el).length).toBe(1);
expect($(testView.el).html()).toBe('<h2>Hello World</h2><p>Color is blue.</p>');
model.set('color', 'red');
testView.redraw();
expect($(testView.el).html()).toBe('<h2>Hello World</h2><p>Color is red.</p>');
});
$('script[data-name="model-tmpl"]').remove();
});
it('can redraw part of a based on a selector', function() {
var promise;
$('body').append('<script type="text/dust-template" data-name="model-tmpl"><p class="redraw">Color is {color}.</p><p>It is {^primary}not {/primary}primary</p></script>');
Template.init();
testView = new View(el, model);
testView.template = 'model-tmpl';
promise = testView.render();
promise.success(function() {
expect(testView.hasRendered).toEqual(true);
expect($(testView.el).length).toBe(1);
expect($(testView.el).html()).toBe('<p class="redraw">Color is blue.</p><p>It is primary</p>');
model.set('color', 'orange');
model.set('primary', false);
testView.redraw('p.redraw');
expect($(testView.el).html()).toBe('<p class="redraw">Color is orange.</p><p>It is primary</p>');
});
$('script[data-name="model-tmpl"]').remove();
});
function _newTemplate(code, name) {
name = name || 'tmpl';
$('body').append('<script data-name="' + name + '" type="text/dust-template" class="script-tmpl">' + code + '</script>');
Template.init();
return Template.get(name);
}
beforeEach(function() {
$('body').append('<script type="text/dust-template" data-name="hello-world"><form>Hello World <input type="text"><div class="button">Button</div></form></script>');
model = new Model({color: 'blue', primary: true});
Template.init();
testView = new View(el);
});
beforeEach(function(){
spyOn(noop, 'success');
$('body').append('<script type="text/dust-template" data-name="hello-world">Hello World</script>');
Template.init();
});