From 1171ab397b4b21f2a74c907c23348b36c1b27677 Mon Sep 17 00:00:00 2001 From: Adam Lee Date: Tue, 24 May 2016 00:18:05 -0400 Subject: [PATCH 1/5] - added test case for overriding methods when using prototype - added test case for propagating content when using prototype --- spec/core.js | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/spec/core.js b/spec/core.js index d0c46c6..689bb69 100644 --- a/spec/core.js +++ b/spec/core.js @@ -1301,6 +1301,48 @@ describe("x-tag ", function () { prototype: CompA.prototype }); }); + + it('should allow a method to be overridden', function(){ + var executeCount = 0; + var CompA1 = xtag.register('comp-a1', { + methods: { + someMethod: function () { + executeCount++; + } + } + }); + + var CompB1 = xtag.register('comp-b1', { + prototype: CompA1.prototype, + methods: { + someMethod: function () { + // super call + CompA1.prototype.someMethod.call(this); + executeCount++; + } + } + }); + + var elementB1 = document.createElement('comp-b1'); + elementB1.someMethod(); + + expect(executeCount).toEqual(2); + }); + + it('should propagate content', function(){ + var CompA2 = xtag.register('comp-a2', { + content: '', + }); + + var CompB2 = xtag.register('comp-b2', { + prototype: CompA2.prototype, + }); + + var elementA2 = document.createElement('comp-a2'); + var elementB2 = document.createElement('comp-b2'); + expect(elementA2.firstElementChild.nodeName.toLowerCase()).toEqual('span'); + expect(elementB2.firstElementChild.nodeName.toLowerCase()).toEqual('span'); + }); it('should be able to extend existing elements', function(){ xtag.register("x-foo-extend", { From 48dc7a44fdf753b386a2c521e1b5c283004acce5 Mon Sep 17 00:00:00 2001 From: Adam Lee Date: Tue, 24 May 2016 00:27:05 -0400 Subject: [PATCH 2/5] fix linter errors in test spec --- spec/core.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/spec/core.js b/spec/core.js index 689bb69..95b8ac3 100644 --- a/spec/core.js +++ b/spec/core.js @@ -1289,17 +1289,17 @@ describe("x-tag ", function () { }); it('should allow an inherited custom element prototype to be used', function(){ - var CompA = xtag.register('comp-a', { - methods: { - sayHi: function () { - console.log('hi'); - } - } - }); - - var CompB = xtag.register('comp-b', { - prototype: CompA.prototype - }); + var CompA = xtag.register('comp-a', { + methods: { + sayHi: function () { + console.log('hi'); + } + } + }); + + var CompB = xtag.register('comp-b', { + prototype: CompA.prototype + }); }); it('should allow a method to be overridden', function(){ @@ -1331,11 +1331,11 @@ describe("x-tag ", function () { it('should propagate content', function(){ var CompA2 = xtag.register('comp-a2', { - content: '', + content: '' }); var CompB2 = xtag.register('comp-b2', { - prototype: CompA2.prototype, + prototype: CompA2.prototype }); var elementA2 = document.createElement('comp-a2'); From d54414f0f0117515d8d390db138ce3d8de97ad19 Mon Sep 17 00:00:00 2001 From: Adam Lee Date: Tue, 24 May 2016 00:32:27 -0400 Subject: [PATCH 3/5] - fix linter errors in core --- src/core.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/core.js b/src/core.js index c040502..8220f13 100644 --- a/src/core.js +++ b/src/core.js @@ -308,6 +308,7 @@ } }, register: function (name, options) { + var z; var _name; if (typeof name == 'string') _name = name.toLowerCase(); else throw 'First argument must be a Custom Element string name'; @@ -317,7 +318,7 @@ delete options.prototype; var tag = xtag.tags[_name].compiled = applyMixins(xtag.merge({}, xtag.defaultOptions, options)); - for (var z in tag.events) tag.events[z] = xtag.parseEvent(z, tag.events[z]); + for (z in tag.events) tag.events[z] = xtag.parseEvent(z, tag.events[z]); for (z in tag.lifecycle) tag.lifecycle[z.split(':')[0]] = xtag.applyPseudos(z, tag.lifecycle[z], tag.pseudos, tag.lifecycle[z]); for (z in tag.methods) tag.prototype[z.split(':')[0]] = { value: xtag.applyPseudos(z, tag.methods[z], tag.pseudos, tag.methods[z]), enumerable: true }; for (z in tag.accessors) parseAccessor(tag, z); @@ -409,13 +410,13 @@ var extended = tag['extends'] && (definition['extends'] = tag['extends']); if (basePrototype && !instance) { - for (var z in basePrototype) tag.prototype[z] = basePrototype[z]; + for (z in basePrototype) tag.prototype[z] = basePrototype[z]; } - definition['prototype'] = Object.create( + definition.prototype = Object.create( extended ? Object.create(doc.createElement(extended).constructor).prototype : instance ? basePrototype : win.HTMLElement.prototype, tag.prototype - ) + ); return doc.registerElement(_name, definition); }, From 6fe00076f23eb03d937b53ff55a3f8981d53f705 Mon Sep 17 00:00:00 2001 From: Adam Lee Date: Tue, 24 May 2016 10:09:37 -0400 Subject: [PATCH 4/5] added test cases for mixins propagation --- spec/core.js | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/spec/core.js b/spec/core.js index 95b8ac3..7546bb4 100644 --- a/spec/core.js +++ b/spec/core.js @@ -1343,6 +1343,63 @@ describe("x-tag ", function () { expect(elementA2.firstElementChild.nodeName.toLowerCase()).toEqual('span'); expect(elementB2.firstElementChild.nodeName.toLowerCase()).toEqual('span'); }); + + it('should propagate mixins', function(){ + xtag.mixins.test = { + methods: { + someTestFunction: function () { + + } + } + }; + + var CompA3 = xtag.register('comp-a3', { + mixins: ['test'] + }); + + var CompB3 = xtag.register('comp-b3', { + prototype: CompA3.prototype + }); + + var elementA3 = document.createElement('comp-a3'); + var elementB3 = document.createElement('comp-b3'); + expect(elementA3.someTestFunction).toBeDefined(); + expect(elementB3.someTestFunction).toBeDefined(); + }); + + it('should propagate multiple mixins', function(){ + xtag.mixins.test = { + methods: { + someTestFunction: function () { + + } + } + }; + xtag.mixins.test1 = { + methods: { + someTestFunction1: function () { + + } + } + }; + + var CompA4 = xtag.register('comp-a4', { + mixins: ['test', 'test1'] + }); + + var CompB4 = xtag.register('comp-b4', { + prototype: CompA4.prototype + }); + + var elementA4 = document.createElement('comp-a4'); + var elementB4 = document.createElement('comp-b4'); + expect(elementA4.someTestFunction).toBeDefined(); + expect(elementB4.someTestFunction).toBeDefined(); + expect(elementA4.someTestFunction1).toBeDefined(); + expect(elementB4.someTestFunction1).toBeDefined(); + }); + + it('should be able to extend existing elements', function(){ xtag.register("x-foo-extend", { From c07f6350e26a9e5f809836e63301508bdf283f8d Mon Sep 17 00:00:00 2001 From: Adam Lee Date: Wed, 25 May 2016 01:09:49 -0400 Subject: [PATCH 5/5] added test case for mixins lifecycle hooks not firing for subclassed components using prototype --- spec/core.js | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/spec/core.js b/spec/core.js index 7546bb4..954bd16 100644 --- a/spec/core.js +++ b/spec/core.js @@ -1398,8 +1398,36 @@ describe("x-tag ", function () { expect(elementA4.someTestFunction1).toBeDefined(); expect(elementB4.someTestFunction1).toBeDefined(); }); - - + + it('should trigger lifecycle hooks from mixins when using prototype', function(){ + var countTriggers = 0; + xtag.mixins.test2 = { + lifecycle: { + created: function () { + countTriggers++; + } + } + }; + xtag.mixins.test3 = { + lifecycle: { + created: function () { + countTriggers++; + } + } + }; + + var CompA5 = xtag.register('comp-a5', { + mixins: ['test2', 'test3'] + }); + + var CompB5 = xtag.register('comp-b5', { + prototype: CompA5.prototype + }); + + var elementB5 = document.createElement('comp-b5'); + testbox.appendChild(elementB5); + expect(countTriggers).toEqual(2); + }); it('should be able to extend existing elements', function(){ xtag.register("x-foo-extend", {