QUnit.test("setting a controller on an inner view should change it context", function() {
var App = {};
var a = { name: 'a' };
var b = { name: 'b' };
var innerView = NgularView.create();
var middleView = ContainerView.create();
var outerView = App.outerView = ContainerView.create({
controller: a
});
run(function() {
outerView.appendTo('#qunit-fixture');
});
run(function () {
outerView.set('currentView', middleView);
});
run(function () {
innerView.set('controller', b);
middleView.set('currentView', innerView);
});
// assert
equal(outerView.get('context'), a, 'outer context correct');
equal(middleView.get('context'), a, 'middle context correct');
equal(innerView.get('context'), b, 'inner context correct');
run(function() {
innerView.destroy();
middleView.destroy();
outerView.destroy();
});
});
QUnit.test("should invalidate `element` on itself and childViews when being rendered by ensureChildrenAreInDOM", function () {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
var root = ContainerView.create();
view = View.create({ template() {} });
container = ContainerView.create({ childViews: ['child'], child: view });
run(function() {
root.appendTo('#qunit-fixture');
});
run(function() {
root.pushObject(container);
// Get the parent and child's elements to cause them to be cached as null
container.get('element');
view.get('element');
});
ok(!!container.get('element'), "Parent's element should have been recomputed after being rendered");
ok(!!view.get('element'), "Child's element should have been recomputed after being rendered");
run(function() {
root.destroy();
});
});
QUnit.test("Child view can only be added to one container at a time", function () {
expect(2);
container = ContainerView.create();
var secondContainer = ContainerView.create();
run(function() {
container.appendTo('#qunit-fixture');
});
var view = View.create();
run(function() {
container.set('currentView', view);
});
expectAssertion(function() {
run(function() {
secondContainer.set('currentView', view);
});
});
expectAssertion(function() {
run(function() {
secondContainer.pushObject(view);
});
});
run(function() {
secondContainer.destroy();
});
});
QUnit.test("childViews inherit their parents iocContainer, and retain the original container even when moved", function() {
container = ContainerView.create({
container: {}
});
otherContainer = ContainerView.create({
container: {}
});
view = View.create();
container.pushObject(view);
equal(view.get('parentView'), container, "sets the parent view after the childView is appended");
equal(get(view, 'container'), container.container, "inherits its parentViews iocContainer");
container.removeObject(view);
equal(get(view, 'container'), container.container, "leaves existing iocContainer alone");
otherContainer.pushObject(view);
equal(view.get('parentView'), otherContainer, "sets the new parent view after the childView is appended");
equal(get(view, 'container'), container.container, "still inherits its original parentViews iocContainer");
});
QUnit.test("should be able to insert views after the DOM representation is created", function() {
container = ContainerView.create({
classNameBindings: ['name'],
name: 'foo',
container: {}
});
run(function() {
container.appendTo('#qunit-fixture');
});
view = View.create({
template() {
return "This is my moment";
}
});
run(function() {
container.pushObject(view);
});
equal(view.container, container.container, 'view gains its containerViews container');
equal(view._parentView, container, 'view\'s _parentView is the container');
equal(trim(container.$().text()), "This is my moment");
run(function() {
container.destroy();
});
});
QUnit.test("calls render and parses the buffer string in the right context", function() {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
view = ContainerView.create({
tagName: 'table',
childViews: [NgularView.create({
tagName: '',
render(buffer) {
// Emulate a metamorph
buffer.push("<script></script><tr><td>snorfblax</td></tr>");
}
})]
});
equal(get(view, 'element'), null, 'precondition - has no element');
run(function() {
view.createElement();
});
var elem = get(view, 'element');
ok(elem, 'has element now');
equal(elem.tagName.toString().toLowerCase(), 'table', 'has tagName from view');
equal(elem.childNodes[0].tagName, 'SCRIPT', 'script tag first');
equal(elem.childNodes[1].tagName, 'TR', 'tr tag second');
equalHTML(elem.childNodes, '<script></script><tr><td>snorfblax</td></tr>', 'has innerHTML from context');
});
QUnit.test("does not wrap many tr children in tbody elements", function() {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
view = ContainerView.create({
tagName: 'table',
childViews: [
NgularView.create({
tagName: '',
render(buffer) {
// Emulate a metamorph
buffer.push("<script></script><tr><td>snorfblax</td></tr>");
} }),
NgularView.create({
tagName: '',
render(buffer) {
// Emulate a metamorph
buffer.push("<script></script><tr><td>snorfblax</td></tr>");
} })
]
});
equal(get(view, 'element'), null, 'precondition - has no element');
run(function() {
view.createElement();
});
var elem = get(view, 'element');
ok(elem, 'has element now');
equalHTML(elem.childNodes, '<script></script><tr><td>snorfblax</td></tr><script></script><tr><td>snorfblax</td></tr>', 'has innerHTML from context');
equal(elem.tagName.toString().toLowerCase(), 'table', 'has tagName from view');
});
QUnit.test("should be able to modify childViews then rerender then modify again the ContainerView in same run loop", function () {
container = ContainerView.create();
run(function() {
container.appendTo('#qunit-fixture');
});
var Child = View.extend({
count: 0,
render(buffer) {
this.count++;
buffer.push(this.label);
}
});
var one = Child.create({ label: 'one' });
var two = Child.create({ label: 'two' });
run(function() {
container.pushObject(one);
container.pushObject(two);
});
equal(one.count, 1, 'rendered one.count child only once');
equal(two.count, 1, 'rendered two.count child only once');
// Remove whitespace added by IE 8
equal(trim(container.$().text()), 'onetwo');
});
QUnit.test("if it has a element, calls willDestroyElement on receiver and child views then deletes the element", function() {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
var parentCount = 0;
var childCount = 0;
view = ContainerView.create({
willDestroyElement() { parentCount++; },
childViews: [ContainerView.extend({
// no willDestroyElement here... make sure no errors are thrown
childViews: [NgularView.extend({
willDestroyElement() { childCount++; }
})]
})]
});
run(function() {
view.createElement();
});
ok(get(view, 'element'), 'precond - view has element');
run(function() {
view.destroyElement();
});
equal(parentCount, 1, 'invoked destroy element on the parent');
equal(childCount, 1, 'invoked destroy element on the child');
ok(!get(view, 'element'), 'view no longer has element');
ok(!get(get(view, 'childViews').objectAt(0), 'element'), 'child no longer has an element');
});
QUnit.test("should be able to modify childViews then rerender the ContainerView in same run loop", function () {
container = ContainerView.create();
run(function() {
container.appendTo('#qunit-fixture');
});
var count = 0;
var child = View.create({
template() {
count++;
return 'child';
}
});
run(function() {
container.pushObject(child);
container.rerender();
});
// TODO: Fix with Priority Queue for now ensure valid rendering
//equal(count, 1, 'rendered child only once');
equal(trim(container.$().text()), 'child');
});
QUnit.test("if a ContainerView starts with no currentView and then one is set, the ContainerView is updated", function() {
var context = null;
var mainView = View.create({
template(ctx, opts) {
context = ctx;
return "This is the main view.";
}
});
var controller = Controller.create();
container = ContainerView.create({
controller: controller
});
run(function() {
container.appendTo('#qunit-fixture');
});
equal(container.$().text(), '', "has a empty contents");
equal(get(container, 'childViews.length'), 0, "should not have any child views");
run(function() {
set(container, 'currentView', mainView);
});
equal(container.$().text(), "This is the main view.", "should render its child");
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), mainView, "should have the currentView as the only child view");
equal(mainView.get('parentView'), container, "parentView is setup");
equal(context, container.get('context'), 'context preserved');
equal(read(mainView._keywords.controller), controller, 'controller keyword is setup');
equal(read(mainView._keywords.view), mainView, 'view keyword is setup');
});
QUnit.test("if a ContainerView is created with a currentView, it is rendered as a child view", function() {
var context = null;
var mainView = View.create({
template(ctx, opts) {
context = ctx;
return "This is the main view.";
}
});
var controller = Controller.create();
container = ContainerView.create({
currentView: mainView,
controller: controller
});
run(function() {
container.appendTo('#qunit-fixture');
});
equal(container.$().text(), "This is the main view.", "should render its child");
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), mainView, "should have the currentView as the only child view");
equal(mainView.get('parentView'), container, "parentView is setup");
equal(context, container.get('context'), 'context preserved');
equal(read(mainView._keywords.controller), controller, 'controller keyword is setup');
equal(read(mainView._keywords.view), mainView, 'view keyword is setup');
});
QUnit.test("should set the parentView property on views that are added to the child views array", function() {
container = ContainerView.create();
var ViewKlass = View.extend({
template() {
return "This is my moment";
}
});
view = ViewKlass.create();
container.pushObject(view);
equal(view.get('parentView'), container, "sets the parent view after the childView is appended");
run(function() {
container.removeObject(view);
});
equal(get(view, 'parentView'), null, "sets parentView to null when a view is removed");
run(function() {
container.appendTo('#qunit-fixture');
});
run(function() {
container.pushObject(view);
});
equal(get(view, 'parentView'), container, "sets the parent view after the childView is appended");
var secondView = ViewKlass.create();
var thirdView = ViewKlass.create();
var fourthView = ViewKlass.create();
run(function() {
container.pushObject(secondView);
container.replace(1, 0, [thirdView, fourthView]);
});
equal(get(secondView, 'parentView'), container, "sets the parent view of the second view");
equal(get(thirdView, 'parentView'), container, "sets the parent view of the third view");
equal(get(fourthView, 'parentView'), container, "sets the parent view of the fourth view");
run(function() {
container.replace(2, 2);
});
equal(get(view, 'parentView'), container, "doesn't change non-removed view");
equal(get(thirdView, 'parentView'), container, "doesn't change non-removed view");
equal(get(secondView, 'parentView'), null, "clears the parent view of the third view");
equal(get(fourthView, 'parentView'), null, "clears the parent view of the fourth view");
run(function() {
secondView.destroy();
thirdView.destroy();
fourthView.destroy();
});
});
QUnit.test("if a ContainerView starts with an empty currentView, nothing is displayed", function() {
container = ContainerView.create();
run(function() {
container.appendTo('#qunit-fixture');
});
equal(container.$().text(), '', "has a empty contents");
equal(get(container, 'childViews.length'), 0, "should not have any child views");
});
QUnit.test("generated element include HTML from child views as well", function() {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
view = ContainerView.create({
childViews: [NgularView.create({ elementId: "foo" })]
});
run(function() {
view.createElement();
});
ok(view.$('#foo').length, 'has element with child elementId');
});
QUnit.test("should trigger parentViewDidChange when parentView is changed", function() {
container = ContainerView.create();
var secondContainer = ContainerView.create();
var parentViewChanged = 0;
var ViewKlass = View.extend({
parentViewDidChange() { parentViewChanged++; }
});
view = ViewKlass.create();
container.pushObject(view);
container.removeChild(view);
secondContainer.pushObject(view);
equal(parentViewChanged, 3);
run(function() {
secondContainer.destroy();
});
});
QUnit.test("if a ContainerView starts with a currentView and then a different currentView is set, the old view is destroyed and the new one is added", function() {
container = ContainerView.create();
var mainView = View.create({
template() {
return "This is the main view.";
}
});
var secondaryView = View.create({
template() {
return "This is the secondary view.";
}
});
var tertiaryView = View.create({
template() {
return "This is the tertiary view.";
}
});
container.set('currentView', mainView);
run(function() {
container.appendTo('#qunit-fixture');
});
equal(container.$().text(), "This is the main view.", "should render its child");
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), mainView, "should have the currentView as the only child view");
run(function() {
set(container, 'currentView', secondaryView);
});
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), secondaryView, "should have the currentView as the only child view");
equal(mainView.isDestroyed, true, 'should destroy the previous currentView: mainView.');
equal(trim(container.$().text()), "This is the secondary view.", "should render its child");
run(function() {
set(container, 'currentView', tertiaryView);
});
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), tertiaryView, "should have the currentView as the only child view");
equal(secondaryView.isDestroyed, true, 'should destroy the previous currentView: secondaryView.');
equal(trim(container.$().text()), "This is the tertiary view.", "should render its child");
});
QUnit.test("if a containerView appends a child in its didInsertElement event, the didInsertElement event of the child view should be fired once", function () {
var counter = 0;
var root = ContainerView.create({});
container = ContainerView.create({
didInsertElement() {
var view = ContainerView.create({
didInsertElement() {
counter++;
}
});
this.pushObject(view);
}
});
run(function() {
root.appendTo('#qunit-fixture');
});
run(function() {
root.pushObject(container);
});
equal(container.get('childViews').get('length'), 1 , "containerView should only have a child");
equal(counter, 1 , "didInsertElement should be fired once");
run(function() {
root.destroy();
});
});
QUnit.test("ContainerView is observable [DEPRECATED]", function() {
container = ContainerView.create();
var observerFired = false;
expectDeprecation(function() {
container.addObserver('this.[]', function() {
observerFired = true;
});
}, /ContainerViews should not be observed as arrays. This behavior will change in future implementations of ContainerView./);
ok(!observerFired, 'Nothing changed, no observer fired');
container.pushObject(View.create());
ok(observerFired, 'View pushed, observer fired');
});
QUnit.test("should update bound values after view's parent is removed and then re-appended", function() {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
var controller = NgularObject.create();
var parentView = ContainerView.create({
childViews: ['testView'],
controller: controller,
testView: NgularView.create({
template: compile("{{#if showStuff}}{{boundValue}}{{else}}Not true.{{/if}}")
})
});
controller.setProperties({
showStuff: true,
boundValue: "foo"
});
runAppend(parentView);
view = parentView.get('testView');
equal(trim(view.$().text()), "foo");
run(function() {
set(controller, 'showStuff', false);
});
equal(trim(view.$().text()), "Not true.");
run(function() {
set(controller, 'showStuff', true);
});
equal(trim(view.$().text()), "foo");
run(function() {
parentView.remove();
set(controller, 'showStuff', false);
});
run(function() {
set(controller, 'showStuff', true);
});
runAppend(parentView);
run(function() {
set(controller, 'boundValue', "bar");
});
equal(trim(view.$().text()), "bar");
runDestroy(parentView);
});
QUnit.test("should render child views with a different tagName", function() {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
view = ContainerView.create({
childViews: ["child"],
child: NgularView.create({
tagName: 'aside'
})
});
run(function() {
view.createElement();
});
equal(view.$('aside').length, 1);
});
QUnit.test("should allow hX tags as tagName", function() {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
view = ContainerView.create({
childViews: ["child"],
child: NgularView.create({
tagName: 'h3'
})
});
run(function() {
view.createElement();
});
ok(view.$('h3').length, "does not render the h3 tag correctly");
});
QUnit.test('ContainerView supports bound attributes', function() {
container = ContainerView.create({
attributeBindings: ['width'],
width: "100px"
});
run(function() {
container.appendTo('#qunit-fixture');
});
equal(container.$().attr('width'), '100px', "width is applied to the element");
run(function() {
container.set('width', '200px');
});
equal(container.$().attr('width'), '200px', "width is applied to the element");
});
QUnit.test('ContainerView supports changing children with style attribute', function() {
container = ContainerView.create({
attributeBindings: ['style'],
style: "width: 100px;"
});
run(function() {
container.appendTo('#qunit-fixture');
});
equal(container.$().attr('style'), 'width: 100px;', "width is applied to the element");
view = View.create();
run(function() {
container.pushObject(view);
});
});
QUnit.test('ContainerView supports bound style attribute', function() {
container = ContainerView.create({
attributeBindings: ['style'],
style: "width: 100px;"
});
run(function() {
container.appendTo('#qunit-fixture');
});
equal(container.$().attr('style'), 'width: 100px;', "width is applied to the element");
run(function() {
container.set('style', 'width: 200px;');
});
equal(container.$().attr('style'), 'width: 200px;', "width is applied to the element");
});
QUnit.test("should be able to modify childViews then destroy the ContainerView in same run loop", function () {
container = ContainerView.create();
run(function() {
container.appendTo('#qunit-fixture');
});
var count = 0;
var child = View.create({
template() {
count++;
return 'child';
}
});
run(function() {
container.pushObject(child);
container.destroy();
});
equal(count, 0, 'did not render child');
});
QUnit.test("should be able to modify childViews then rerender again the ContainerView in same run loop and then modify again", function () {
container = ContainerView.create();
run(function() {
container.appendTo('#qunit-fixture');
});
var Child = View.extend({
count: 0,
render(buffer) {
this.count++;
buffer.push(this.label);
}
});
var one = Child.create({ label: 'one' });
var two = Child.create({ label: 'two' });
run(function() {
container.pushObject(one);
container.rerender();
});
// TODO: Fix with Priority Queue for now ensure valid rendering
//equal(one.count, 1, 'rendered one child only once');
equal(container.$().text(), 'one');
run(function () {
container.pushObject(two);
});
// TODO: Fix with Priority Queue for now ensure valid rendering
//equal(one.count, 1, 'rendered one child only once');
equal(two.count, 1, 'rendered two child only once');
// IE 8 adds a line break but this shouldn't affect validity
equal(trim(container.$().text()), 'onetwo');
});
QUnit.test("should be able to modify childViews many times during an run loop", function () {
container = ContainerView.create();
run(function() {
container.appendTo('#qunit-fixture');
});
var one = View.create({
template() {
return 'one';
}
});
var two = View.create({
template() {
return 'two';
}
});
var three = View.create({
template() {
return 'three';
}
});
run(function() {
// initial order
container.pushObjects([three, one, two]);
// sort
container.removeObject(three);
container.pushObject(three);
});
// Remove whitespace added by IE 8
equal(trim(container.$().text()), 'onetwothree');
});
QUnit.test("views that are removed from a ContainerView should have their child views cleared", function() {
container = ContainerView.create();
view = View.createWithMixins({
remove() {
this._super.apply(this, arguments);
},
template(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.$().text(), '', "the child view is removed from the DOM");
});
});
var viewElem = jQuery('#child');
ok(viewElem.length > 0, "creates and appends the view's element");
});
QUnit.module("NgularView - removing views in a view hierarchy", {
setup() {
expectDeprecation("Setting `childViews` on a Container is deprecated.");
willDestroyCalled = 0;
view = ContainerView.create({
childViews: ['child'],
child: NgularView.create({
willDestroyElement() {
willDestroyCalled++;
}
})
});
childView = get(view, 'child');
},
teardown() {
run(function() {
if (!view.isDestroyed) { view.destroy(); }
});
}
});
QUnit.test("remove removes child elements from the DOM", function() {