it("should export all template objects into templateObjects", function() {
var component = objects.Comp.create(),
htmlDocument = document.implementation.createHTMLDocument(""),
script = htmlDocument.createElement("script"),
latch;
component.element = document.createElement("div");
component.element.setAttribute("data-montage-id", "myDiv");
script.setAttribute("type", Template._SCRIPT_TYPE);
script.textContent = Serializer.create().initWithRequire(require).serialize({owner: component, object1: 1, object2: "string"});
htmlDocument.head.appendChild(script);
var template = Template.create().initWithDocument(htmlDocument);
component.templateObjects = {};
template.instantiateWithComponent(component, function() {
latch = true;
});
waitsFor(function() { return latch; });
runs(function() {
expect(Object.keys(component.templateObjects).length).toBe(2);
})
});
it("should export non-direct children into templateObjects as getters", function() {
var owner = Component.create(),
repetition = Repetition.create(),
comp = Component.create(),
htmlDocument = document.implementation.createHTMLDocument(""),
script = htmlDocument.createElement("script"),
latch;
htmlDocument.body.innerHTML = '<div id="myDiv" data-montage-id="myDiv"><div id="repetition" data-montage-id="repetition"><div id="comp" data-montage-id="comp"></div></div></div>';
owner.element = htmlDocument.getElementById("myDiv");
repetition.element = htmlDocument.getElementById("repetition");
script.setAttribute("type", Template._SCRIPT_TYPE);
script.textContent = Serializer.create().initWithRequire(require).serialize({owner: owner, repetition: repetition, comp: comp});
htmlDocument.head.appendChild(script);
var template = Template.create().initWithDocument(htmlDocument);
owner.templateObjects = {};
template.instantiateWithComponent(owner, function() {
latch = true;
});
waitsFor(function() { return latch; });
runs(function() {
expect(Object.keys(owner.templateObjects).length).toBe(2);
});
});
it("should call deserializedFromTemplate function on the instantiated objects", function() {
var component = objects.Comp.create();
component.element = document.createElement("div");
component.element.setAttribute("data-montage-id", "myDiv");
component.child = objects.Comp.create();
var htmlDocument = document.implementation.createHTMLDocument("");
var script = htmlDocument.createElement("script");
script.setAttribute("type", Template._SCRIPT_TYPE);
script.textContent = Serializer.create().initWithRequire(require).serialize({owner: component});
htmlDocument.head.appendChild(script);
var latch,
componentDeserializedFromTemplateCount,
childDeserializedFromTemplateCount,
template = Template.create().initWithDocument(htmlDocument);
template.instantiateWithComponent(component, function() {
componentDeserializedFromTemplateCount = component.deserializedFromTemplateCount;
childDeserializedFromTemplateCount = component.child.deserializedFromTemplateCount;
latch = true;
});
waitsFor(function() { return latch; });
runs(function() {
expect(componentDeserializedFromTemplateCount).toBe(0);
expect(childDeserializedFromTemplateCount).toBe(1);
});
});
loadTemplate: {value: function(callback) {
if (this._isTemplateLoading) return;
this._isTemplateLoading = true;
var self = this;
var templateModuleId, info, moduleId;
var onTemplateLoad = function(reel) {
self._template = reel;
self._isTemplateLoaded = true;
self._isTemplateLoading = false;
// TODO: only need to change this part on Component.loadTemplate to make it generic for any component, we need a way for a component to say they want to be expanded... at the moment we'll only use it for repetitions I'd say.
reel.flatten(function() {
reel.instantiateWithComponent(self);
if (callback) {
callback();
}
});
}
templateModuleId = this.templateModuleId;
if (!templateModuleId) {
info = Montage.getInfoForObject(this);
moduleId = info.moduleId;
filename = moduleId.split("/").pop();
templateModuleId = info.moduleId + ".reel/" + filename + ".html"
}
Template.create().initWithModuleId(templateModuleId, onTemplateLoad);
}}
it("should maintain external references", function() {
var comp = Montage.create(Component),
rootComp = Montage.create(Component, {
serializeProperties: {value: function(serializer) {
serializer.set("object", comp, "reference");
}}
}),
template = Template.create(),
newRootComp = Montage.create(Component);
rootComp.element = document.createElement("div");
newRootComp.element = document.createElement("div");
template.initWithComponent(rootComp);
template.instantiateWithComponent(newRootComp, function() {
expect(newRootComp.object).toBe(comp);
});
});
it("should find non-direct children of non-clonesChildComponents' components", function() {
var owner = Component.create(),
htmlDocument = document.implementation.createHTMLDocument(""),
script = htmlDocument.createElement("script"),
latch;
htmlDocument.body.innerHTML = '<div id="myDiv" data-montage-id="myDiv"><div id="nonCloningComponent" data-montage-id="nonCloningComponent"><div id="comp" data-montage-id="comp"></div></div></div>';
owner.element = htmlDocument.getElementById("myDiv");
script.setAttribute("type", Template._SCRIPT_TYPE);
script.textContent = JSON.stringify({
"owner":{
"prototype":"montage/ui/component",
"properties":{
"element":{"#":"myDiv"}}},
"nonCloningComponent":{
"prototype":"montage/ui/component",
"properties":{
"hasTemplate": false,
"element":{"#":"nonCloningComponent"}}},
"comp":{
"prototype":"montage/ui/component",
"properties": {
"element":{"#":"comp"}
}
}
}, null, 2);
htmlDocument.head.appendChild(script);
var template = Template.create().initWithDocument(htmlDocument);
owner.templateObjects = {};
template.instantiateWithComponent(owner, function() {
latch = true;
});
waitsFor(function() { return latch; });
runs(function() {
expect(Object.keys(owner.templateObjects).length).toBe(2);
expect(owner.templateObjects.comp.identifier).toBe("comp");
});
});
it("should serialize the properties list defined by the delegate", function() {
var component = Component.create(),
template = Template.create();
component.element = document.createElement("div");
component.element.setAttribute("data-montage-id", "myDiv");
component.aProperty = true;
template.delegate = {
serializeObjectProperties: function(serializer, object, propertyNames) {
for (var i = 0; i < propertyNames.length; i++) {
serializer.set(propertyNames[i], null);
}
serializer.set("aProperty", object.aProperty)
}
};
var template = template.initWithComponent(component);
expect(stripPP(template._ownerSerialization)).toBe('{"owner":{"prototype":"montage/ui/component","properties":{"aProperty":true}}}');
});