Skip to content

Commit

Permalink
Merge pull request #27 from /issues/25-race-w-model
Browse files Browse the repository at this point in the history 
Issues/25 race w model
  • Loading branch information
@tomalec
tomalec authored Mar 28, 2017
2 parents 58875f8 + 88f3d4f commit ff51cc0
Show file tree
Hide file tree
Showing 7 changed files with 687 additions and 234 deletions.
16 changes: 10 additions & 6 deletions starcounter-include.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
var clone = document.importNode(templ.content, true);
this.compositionElement = clone.children[0]; // .getElementsByTagName("juicy-composition");
this.template = this.compositionElement.firstElementChild; // .getElementsByTagName("TEMPLATE");
var that = this;

this.template.addEventListener('stamping', function fetchCompositions(event) {
var mergedComposition;
var templates = event.detail.querySelectorAll('template[is="declarative-shadow-dom"],template[is="starcounter-composition"]');
Expand All @@ -80,10 +80,14 @@
mergedComposition.appendChild(individualComposition.content);
});
}
that.defaultComposition = mergedComposition;
starcounterInclude.defaultComposition = mergedComposition;

if (this.model != starcounterInclude.partial) {
this.model = starcounterInclude.partial
}
// notify composition property
// TODO: consider moving entire partialChanged or appendChild here
that._compositionChanged();
starcounterInclude._compositionChanged();
});
html && this.template.setAttribute('content', html);

Expand Down Expand Up @@ -158,15 +162,15 @@
}
if (!html) {
this.template.removeAttribute("content");
if (this.template.model != this.partial) {
this.template.model = this.partial
}
} else {
this.template.setAttribute("content", html);
}
this._forceLayoutChange = true;
this._lastHtml = html;
}
if (this.template.model != this.partial) {
this.template.model = this.partial
}
};
LauncherPartialPrototype._compositionChanged = function(composition) {
if (this.partial && composition === undefined) {
Expand Down
233 changes: 163 additions & 70 deletions test/partialAttribute/given_in_HTML.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,80 +42,173 @@

<script>
// describe('`partial` attribute is set/updated using HTML methods')
var scInclude;
describe('with `Html` property', testSettingPartialAttribute('full', {
"Html": "../templateToInclude.html",
"doesItWork": "works!"
}));
describe('with `Html` set to null', testSettingPartialAttribute('htmlnull', {
"Html": null,
"doesItWork": "works!"
}));

function testSettingPartialAttribute(fixtureId, model, referenceHtml) {
referenceHtml = arguments.length >= 3 ? referenceHtml : model.Html;
return function() {
var oldModel = {
"Html": "../old_templateToInclude.html",
"doesItWork": "worked!"
var scInclude, importedTemplate, previousModel;
describe('with `Html` property', function(){
afterEach(function(){
if(scInclude.parentElement){
scInclude.parentElement.removeChild(scInclude);
}
});
var fixtureId = 'full',
model = {
"Html": "../templateToInclude.html",
"doesItWork": "works!"
};
afterEach(function (done) {
// give more time to polyfill cleanup
setTimeout(done);
});
describe('once element is created programatically', testAllAttributes(function() {
var scInclude = {};
scInclude.add = document.createElement('starcounter-include');
scInclude.add.setAttribute('partial', JSON.stringify(model));
scInclude.update = document.createElement('starcounter-include');
scInclude.update.setAttribute('partial', JSON.stringify(oldModel));
scInclude.update.setAttribute('partial', JSON.stringify(model));
return scInclude;
}));
describe('before element was upgraded (directly into HTML markup)', testAllAttributes(function() {
var scInclude = {};
scInclude.add = scInclude.update = fixture(fixtureId);
return scInclude;
}));
describe('after element was attached', testAllAttributes(function() {
var scInclude = {};
scInclude.add = fixture('nothing');
scInclude.update = fixture('old');
scInclude.add.setAttribute('partial', JSON.stringify(model));
scInclude.update.setAttribute('partial', JSON.stringify(model));
return scInclude;
}));
describe('after element was detached', testAllAttributes(function() {
var scInclude = {};
scInclude.add = fixture('nothing');
scInclude.update = fixture('old');
scInclude.add.parentElement.removeChild(scInclude.add);
scInclude.update.parentElement.removeChild(scInclude.update);
scInclude.add.setAttribute('partial', JSON.stringify(model));
scInclude.update.setAttribute('partial', JSON.stringify(model));
return scInclude;
}));

function testAllAttributes(createInstances) {
return function() {
var scInclude;
beforeEach(function() {
scInclude = createInstances();
});

it('should attach `.Html` property as content attribute for `<imported-template>`', function() {
expect(scInclude.add.querySelector_template_for_buggy_polyfill().getAttribute("content")).to.equal(referenceHtml);
expect(scInclude.update.querySelector_template_for_buggy_polyfill().getAttribute("content")).to.equal(referenceHtml);
});
it('should attach partial model to `imported-template`', function() {
expect(JSON.stringify(scInclude.add.querySelector_template_for_buggy_polyfill().model)).to.equal(JSON.stringify(model));
expect(JSON.stringify(scInclude.update.querySelector_template_for_buggy_polyfill().model)).to.equal(JSON.stringify(model));
});

};
function testAllAttributes(){
beforeEach(function(){
importedTemplate = scInclude.querySelector_template_for_buggy_polyfill();
});
it('should attach `.Html` property as content attribute for `imported-template`', function () {
expect(importedTemplate.getAttribute("content")).to.equal(scInclude.partial.Html);
});
it('should NOT attach partial model to `imported-template` immediately', function () {
expect((importedTemplate.model)).to.equal(previousModel || null);
});
it('should attach same partial model to `imported-template` on `stamping` (after connected to DOM)', function (done) {
// attach element if not attached yet.
if(!document.contains(scInclude)){
console.info('attaching');
document.body.appendChild(scInclude);
}
importedTemplate.addEventListener('stamping', function onceStamped(){
expect(importedTemplate.model).to.equal(scInclude.partial);
done();
});
});
}
describe('set once element is created programatically', function(){
beforeEach(function(){
scInclude = document.createElement('starcounter-include');
previousModel = null;
scInclude.setAttribute('partial', JSON.stringify(model));
});
testAllAttributes();
});

describe('set after element was attached', function(){
beforeEach(function(){
scInclude = fixture('nothing');
previousModel = null;
scInclude.setAttribute('partial', JSON.stringify(model));
});
testAllAttributes();
});
describe('changed after element was attached', function(){
beforeEach(function(done){
scInclude = fixture('old');
previousModel = scInclude.partial;
scInclude.querySelector_template_for_buggy_polyfill().addEventListener('stamping', function afterStamped(){
scInclude.querySelector_template_for_buggy_polyfill().removeEventListener('stamping', afterStamped);
scInclude.setAttribute('partial', JSON.stringify(model));
done();
});

});
testAllAttributes();
});

describe('set after element was detached', function(){
beforeEach(function(){
scInclude = fixture('nothing');
previousModel = null;
scInclude.parentElement.removeChild(scInclude);
scInclude.setAttribute('partial', JSON.stringify(model));
});
testAllAttributes();
});
describe('chnaged after element was detached', function(){
beforeEach(function(done){
scInclude = fixture('old');
previousModel = scInclude.partial;
scInclude.querySelector_template_for_buggy_polyfill().addEventListener('stamping', function afterStamped(){
scInclude.querySelector_template_for_buggy_polyfill().removeEventListener('stamping', afterStamped);
scInclude.parentElement.removeChild(scInclude);
scInclude.setAttribute('partial', JSON.stringify(model));
done();
});
});
testAllAttributes();
});
});
describe('with `Html` set to null', function(){
afterEach(function(){
if(scInclude.parentElement){
scInclude.parentElement.removeChild(scInclude);
}
});
var fixtureId = 'htmlnull',
model = {
"Html": null,
"doesItWork": "works!"
};

function testAllAttributes(){
beforeEach(function(){
importedTemplate = scInclude.querySelector_template_for_buggy_polyfill();
});
it('should attach `.Html` property as content attribute for `imported-template`', function () {
expect(importedTemplate.getAttribute("content")).to.equal(scInclude.partial.Html);
});
it('should attach partial model to `imported-template` immediately', function () {
expect((importedTemplate.model)).to.equal(scInclude.partial);
});
}
};
describe('set once element is created programatically', function(){
beforeEach(function(){
scInclude = document.createElement('starcounter-include');
previousModel = null;
scInclude.setAttribute('partial', JSON.stringify(model));
});
testAllAttributes();
});

describe('set after element was attached', function(){
beforeEach(function(){
scInclude = fixture('nothing');
previousModel = null;
scInclude.setAttribute('partial', JSON.stringify(model));
});
testAllAttributes();
});
describe('changed after element was attached', function(){
beforeEach(function(done){
scInclude = fixture('old');
previousModel = scInclude.partial;
scInclude.querySelector_template_for_buggy_polyfill().addEventListener('stamping', function afterStamped(){
scInclude.querySelector_template_for_buggy_polyfill().removeEventListener('stamping', afterStamped);
scInclude.setAttribute('partial', JSON.stringify(model));
done();
});

});
testAllAttributes();
});

describe('set after element was detached', function(){
beforeEach(function(){
scInclude = fixture('nothing');
previousModel = null;
scInclude.parentElement.removeChild(scInclude);
scInclude.setAttribute('partial', JSON.stringify(model));
});
testAllAttributes();
});
describe('chnaged after element was detached', function(){
beforeEach(function(done){
scInclude = fixture('old');
previousModel = scInclude.partial;
scInclude.querySelector_template_for_buggy_polyfill().addEventListener('stamping', function afterStamped(){
scInclude.querySelector_template_for_buggy_polyfill().removeEventListener('stamping', afterStamped);
scInclude.parentElement.removeChild(scInclude);
scInclude.setAttribute('partial', JSON.stringify(model));
done();
});
});
testAllAttributes();
});
});


describe('when attribute is removed, should remove content and model attribute and model property from `<imported-template>`', function () {

Expand Down
Loading

0 comments on commit ff51cc0

Please sign in to comment.