test("should dispatch events to views", function() {
var receivedEvent;
var parentMouseDownCalled = 0;
var childKeyDownCalled = 0;
var parentKeyDownCalled = 0;
var childView = View.createWithMixins({
render: function(buffer) {
buffer.push('<span id="wot">ewot</span>');
},
keyDown: function(evt) {
childKeyDownCalled++;
return false;
}
});
view = View.createWithMixins({
render: function(buffer) {
buffer.push('some <span id="awesome">awesome</span> content');
this.appendChild(childView);
},
mouseDown: function(evt) {
parentMouseDownCalled++;
receivedEvent = evt;
},
keyDown: function(evt) {
parentKeyDownCalled++;
}
});
run(function() {
view.appendTo('#qunit-fixture');
});
view.$().trigger('mousedown');
ok(receivedEvent, "passes event to associated event method");
receivedEvent = null;
parentMouseDownCalled = 0;
view.$('span#awesome').trigger('mousedown');
ok(receivedEvent, "event bubbles up to nearest View");
equal(parentMouseDownCalled, 1, "does not trigger the parent handlers twice because of browser bubbling");
receivedEvent = null;
jQuery('#wot').trigger('mousedown');
ok(receivedEvent, "event bubbles up to nearest View");
jQuery('#wot').trigger('keydown');
equal(childKeyDownCalled, 1, "calls keyDown on child view");
equal(parentKeyDownCalled, 0, "does not call keyDown on parent if child handles event");
});
QUnit.test("drop handler should receive event with dataTransfer property", function() {
var receivedEvent;
var dropCalled = 0;
view = View.createWithMixins({
render(buffer) {
buffer.push('please drop stuff on me');
this._super(buffer);
},
drop(evt) {
receivedEvent = evt;
dropCalled++;
}
});
run(function() {
view.append();
});
fireNativeWithDataTransfer(view.$().get(0), 'drop', 'success');
equal(dropCalled, 1, "called drop handler once");
equal(receivedEvent.dataTransfer, 'success', "copies dataTransfer property to jQuery event");
});
QUnit.test('propagates dependent-key invalidated bindings upstream', function() {
view = EmberView.create({
parentProp: 'parent-value',
template: compile('{{view view.childView childProp=view.parentProp}}'),
childView: EmberView.createWithMixins({
template: compile('child template'),
childProp: Ember.computed('dependencyProp', {
get(key) {
return this.get('dependencyProp');
},
set(key, value) {
// Avoid getting stomped by the template attrs
return this.get('dependencyProp');
}
}),
dependencyProp: 'old-value'
})
});
run(view, view.append);
equal(view.get('parentProp'), 'parent-value', 'precond - parent value is there');
var childView = view.get('childView');
run(() => childView.set('dependencyProp', 'new-value'));
equal(childView.get('childProp'), 'new-value', 'pre-cond - new value is propagated to CP');
equal(view.get('parentProp'), 'new-value', 'new value is propagated across template');
});
test("default implementation does not render child views", function() {
var rendered = 0;
var updated = 0;
var parentRendered = 0;
var parentUpdated = 0 ;
view = ContainerView.createWithMixins({
childViews: ["child"],
render: function(buffer) {
parentRendered++;
this._super(buffer);
},
child: EmberView.createWithMixins({
render: function(buffer) {
rendered++;
this._super(buffer);
}
})
});
run(function() {
view.createElement();
});
equal(rendered, 1, 'rendered the child once');
equal(parentRendered, 1);
equal(view.$('div').length, 1);
});
expectAssertion(function() {
EmberView.createWithMixins({
elementId: 'test',
classNameBindings: computed(function() {
return ['className'];
}).volatile()
});
}, /Only arrays are allowed/i);
expectAssertion(function() {
EmberView.createWithMixins({
elementId: 'test',
classNames: computed(function() {
return ['className'];
}).volatile()
});
}, /Only arrays of static class strings.*For dynamic classes/i);
test("it should return false if no action is specified", function() {
expect(1);
var view = View.createWithMixins(ViewTargetActionSupport, {
controller: EmberObject.create()
});
ok(false === view.triggerAction(), "a valid target and action were specified");
});
test("should bind to the property if no registered helper found for a mustache without parameters", function() {
view = EmberView.createWithMixins({
template: EmberHandlebars.compile("{{view.foobarProperty}}"),
foobarProperty: computed(function() {
return 'foobarProperty';
})
});
appendView();
ok(view.$().text() === 'foobarProperty', "Property was bound to correctly");
});
QUnit.test('should bind to the property if no registered helper found for a mustache without parameters', function() {
view = EmberView.createWithMixins({
template: compile('{{view.foobarProperty}}'),
foobarProperty: computed(function() {
return 'foobarProperty';
})
});
runAppend(view);
ok(view.$().text() === 'foobarProperty', 'Property was bound to correctly');
});
test("it should support actions specified as strings", function() {
expect(2);
var view = View.createWithMixins(ViewTargetActionSupport, {
controller: EmberObject.create({
anEvent: function() {
ok(true, "anEvent method was called");
}
}),
action: 'anEvent'
});
ok(true === view.triggerAction(), "a valid target and action were specified");
});
test("it should invoke the send() method on the controller with the view's context", function() {
expect(3);
var view = View.createWithMixins(ViewTargetActionSupport, {
context: {},
controller: EmberObject.create({
send: function(evt, context) {
equal(evt, 'anEvent', "send() method was invoked with correct event name");
equal(context, view.context, "send() method was invoked with correct context");
}
}),
action: 'anEvent'
});
ok(true === view.triggerAction(), "a valid target and action were specified");
});
test("event handlers should be wrapped in a run loop", function() {
expect(1);
view = View.createWithMixins({
elementId: 'test-view',
eventManager: EmberObject.create({
mouseDown: function() {
ok(run.currentRunLoop, 'a run loop should have started');
}
})
});
run(function() { view.append(); });
jQuery('#test-view').trigger('mousedown');
});
run(function() {
ViewTest.fakeController = EmberObject.create({
fakeThing: 'controllerPropertyValue'
});
view = EmberView.createWithMixins({
fooBinding: 'ViewTest.fakeController.fakeThing',
render: function(buffer) {
buffer.push(this.get('foo'));
}
});
ok(!view.get('element'), "precond - does not have an element before appending");
view.append();
});
test("template view should call the function of the associated template with itself as the context", function() {
container.register('template:testTemplate', EmberHandlebars.compile("<h1 id='twas-called'>template was called for {{view.personName}}. Yea {{view.personName}}</h1>"));
view = EmberView.createWithMixins({
container: container,
templateName: 'testTemplate',
_personName: "Tom DAAAALE",
_i: 0,
personName: computed(function() {
this._i++;
return this._personName + this._i;
})
});
appendView();
equal("template was called for Tom DAAAALE1. Yea Tom DAAAALE1", view.$('#twas-called').text(), "the named template was called with the view as the data source");
});
test("should invoke renderChildViews if layer is destroyed then re-rendered", function() {
var rendered = 0;
var parentRendered = 0;
var parentUpdated = 0 ;
view = ContainerView.createWithMixins({
childViews: ["child"],
render: function(buffer) {
parentRendered++;
this._super(buffer);
},
child: EmberView.createWithMixins({
render: function(buffer) {
rendered++;
this._super(buffer);
}
})
});
run(function() {
view.append();
});
equal(rendered, 1, 'rendered the child once');
equal(parentRendered, 1);
equal(view.$('div').length, 1);
run(function() {
view.rerender();
});
equal(rendered, 2, 'rendered the child twice');
equal(parentRendered, 2);
equal(view.$('div').length, 1);
run(function() {
view.destroy();
});
});
QUnit.test('renders contained view with omitted start tag and parent view context', function() {
expectDeprecation('Setting `childViews` on a Container is deprecated.');
view = ContainerView.createWithMixins({
tagName: 'table',
childViews: ['row'],
row: View.createWithMixins({
tagName: 'tr'
})
});
run(view, view.append);
equal(view.element.tagName, 'TABLE', 'container view is table');
equal(view.element.childNodes[2].tagName, 'TR', 'inner view is tr');
run(view, view.rerender);
equal(view.element.tagName, 'TABLE', 'container view is table');
equal(view.element.childNodes[2].tagName, 'TR', 'inner view is tr');
});
QUnit.test('propagates dependent-key invalidated sets upstream', function() {
view = EmberView.create({
parentProp: 'parent-value',
template: compile('{{view view.childView childProp=view.parentProp}}'),
childView: EmberView.createWithMixins({
template: compile('child template'),
childProp: 'old-value'
})
});
run(view, view.append);
equal(view.get('parentProp'), 'parent-value', 'precond - parent value is there');
var childView = view.get('childView');
run(function() {
childView.set('childProp', 'new-value');
});
equal(view.get('parentProp'), 'new-value', 'new value is propagated across template');
});
QUnit.test("when a collection view is emptied, deeply nested views elements are not removed from the DOM and then destroyed again", function() {
var assertProperDestruction = Mixin.create({
destroyElement() {
if (this._state === 'inDOM') {
ok(this.get('element'), this + ' still exists in DOM');
}
return this._super.apply(this, arguments);
}
});
var ChildView = View.extend(assertProperDestruction, {
render(buf) {
// emulate nested template
this.appendChild(View.createWithMixins(assertProperDestruction, {
template() { return "<div class='inner_element'></div>"; }
}));
}
});
var view = CollectionView.create({
content: Ember.A([1]),
itemViewClass: ChildView
});
run(function() {
view.append();
});
equal(jQuery('.inner_element').length, 1, "precond - generates inner element");
run(function() {
view.get('content').clear();
});
equal(jQuery('.inner_element').length, 0, "elements removed");
run(function() {
view.remove();
});
});
QUnit.test('renders a contained view with omitted start tag and tagless parent view context', function() {
view = EmberView.createWithMixins({
tagName: 'table',
template: compile('{{view view.pivot}}'),
pivot: EmberView.extend({
tagName: '',
template: compile('{{view view.row}}'),
row: EmberView.extend({
tagName: 'tr'
})
})
});
run(view, view.append);
equal(view.element.tagName, 'TABLE', 'container view is table');
ok(view.$('tr').length, 'inner view is tr');
run(view, view.rerender);
equal(view.element.tagName, 'TABLE', 'container view is table');
ok(view.$('tr').length, 'inner view is tr');
});
test("views that are removed from a ContainerView should have their child views cleared", function() {
container = ContainerView.create();
view = View.createWithMixins({
remove: function() {
this._super();
},
template: function(context, options) {
options.data.view.appendChild(View);
}
});
container.pushObject(view);
run(function() {
container.appendTo('#qunit-fixture');
});
equal(get(view, 'childViews.length'), 1, "precond - renders one child view");
run(function() {
container.removeObject(view);
});
equal(get(view, 'childViews.length'), 0, "child views are cleared when removed from container view");
equal(container.$().html(),'', "the child view is removed from the DOM");
});
test("should not dispatch events to views not inDOM", function() {
var receivedEvent;
view = View.createWithMixins({
render: function(buffer) {
buffer.push('some <span id="awesome">awesome</span> content');
this._super(buffer);
},
mouseDown: function(evt) {
receivedEvent = evt;
}
});
run(function() {
view.append();
});
var $element = view.$();
run(function() {
view.set('element', null); // Force into preRender
});
$element.trigger('mousedown');
ok(!receivedEvent, "does not pass event to associated event method");
receivedEvent = null;
$element.find('span#awesome').trigger('mousedown');
ok(!receivedEvent, "event does not bubble up to nearest View");
receivedEvent = null;
// Cleanup
$element.remove();
});
render: function(buf) {
// emulate nested template
this.appendChild(View.createWithMixins(assertProperDestruction, {
template: function() { return "<div class='inner_element'></div>"; }
}));
}