unit tests for custom element

Author: Evan You

src/compiler.js

@@ -241,7 +241,7 @@ CompilerProto.compile = function (node, root) {
             }
 
         // custom elements has 2nd highest priority
-        } else if (customElementFn) {
+        } else if (!root && customElementFn) {
 
             addChild(customElementFn)
 

src/utils.js

@@ -153,12 +153,18 @@ var utils = module.exports = {
         var components = options.components,
             partials   = options.partials,
             template   = options.template,
+            elements   = options.elements,
             key
         if (components) {
             for (key in components) {
                 components[key] = utils.toConstructor(components[key])
             }
         }
+        if (elements) {
+            for (key in elements) {
+                elements[key] = utils.toConstructor(elements[key])
+            }
+        }
         if (partials) {
             for (key in partials) {
                 partials[key] = utils.toFragment(partials[key])

test/unit/specs/api.js

@@ -103,7 +103,7 @@ describe('UNIT: API', function () {
 
     describe('component()', function () {
 
-        var testId = 'api-vm-test',
+        var testId = 'api-component-test',
             testId2 = testId + '2',
             opts = {
                 className: 'hihi',
@@ -143,6 +143,64 @@ describe('UNIT: API', function () {
 
     })
 
+    describe('element()', function () {
+        
+        var testId = 'api-element-test',
+            testId2 = testId + '2',
+            testId3 = testId + '3',
+            opts = {
+                className: 'hihi',
+                scope: { hi: 'ok' }
+            },
+            Test = Seed.extend(opts),
+            utils = require('seed/src/utils')
+
+        it('should register a Custom Element constructor', function () {
+            Seed.element(testId, Test)
+            assert.strictEqual(utils.elements[testId], Test)
+        })
+
+        it('should also work with option objects', function () {
+            Seed.element(testId2, opts)
+            assert.ok(utils.elements[testId2].prototype instanceof Seed)
+        })
+
+        it('should accept simple function as-is', function () {
+            var fn = function (el) {
+                el.className = 'hihi3'
+                el.textContent = 'ok3'
+            }
+            Seed.element(testId3, fn)
+            assert.strictEqual(utils.elements[testId3], fn)
+        })
+
+        it('should retrieve the VM if has only one arg', function () {
+            assert.strictEqual(Seed.element(testId), Test)
+        })
+
+        it('should work with custom tag names', function () {
+
+            mock(testId, '<' + testId + '>{{hi}}</' + testId + '>')
+            var t = new Seed({ el: '#' + testId }),
+                child = t.$el.querySelector(testId)
+            assert.strictEqual(child.className, 'hihi')
+            assert.strictEqual(child.textContent, 'ok')
+
+            mock(testId2, '<' + testId2 + '>{{hi}}</' + testId2 + '>')
+            var t2 = new Seed({ el: '#' + testId2 }),
+                child2 = t2.$el.querySelector(testId2)
+            assert.strictEqual(child2.className, 'hihi')
+            assert.strictEqual(child2.textContent, 'ok')
+
+            mock(testId3, '<' + testId3 + '></' + testId3 + '>')
+            var t3 = new Seed({ el: '#' + testId3 }),
+                child3 = t3.$el.querySelector(testId3)
+            assert.strictEqual(child3.className, 'hihi3')
+            assert.strictEqual(child3.textContent, 'ok3')
+        })
+
+    })
+
     describe('partial()', function () {
 
         var testId = 'api-partial-test',
@@ -588,6 +646,66 @@ describe('UNIT: API', function () {
                 })
 
             })
+            
+            describe('elements', function () {
+                
+                it('should allow the VM to use private custom elements', function () {
+                    var Child = Seed.extend({
+                        scope: {
+                            name: 'child'
+                        }
+                    })
+                    var Parent = Seed.extend({
+                        template: '<p>{{name}}</p><child>{{name}}</child>',
+                        scope: {
+                            name: 'dad'
+                        },
+                        elements: {
+                            child: Child
+                        }
+                    })
+                    var p = new Parent()
+                    assert.strictEqual(p.$el.querySelector('p').textContent, 'dad')
+                    assert.strictEqual(p.$el.querySelector('child').textContent, 'child')
+                })
+
+                it('should work with plain option object', function () {
+                    var Parent = Seed.extend({
+                        template: '<p>{{name}}</p><child>{{name}}</child>',
+                        scope: {
+                            name: 'dad'
+                        },
+                        elements: {
+                            child: {
+                                scope: {
+                                    name: 'child'
+                                }
+                            }
+                        }
+                    })
+                    var p = new Parent()
+                    assert.strictEqual(p.$el.querySelector('p').textContent, 'dad')
+                    assert.strictEqual(p.$el.querySelector('child').textContent, 'child')
+                })
+
+                it('should work with a simple function', function () {
+                    var Parent = Seed.extend({
+                        template: '<p>{{name}}</p><child></child>',
+                        scope: {
+                            name: 'dad'
+                        },
+                        elements: {
+                            child: function (el) {
+                                el.textContent = 'child'
+                            }
+                        }
+                    })
+                    var p = new Parent()
+                    assert.strictEqual(p.$el.querySelector('p').textContent, 'dad')
+                    assert.strictEqual(p.$el.querySelector('child').textContent, 'child')
+                })
+
+            })
 
             describe('partials', function () {
 

test/unit/specs/utils.js

@@ -209,6 +209,9 @@ describe('UNIT: Utils', function () {
                 a: { scope: { data: 1 } },
                 b: { scope: { data: 2 } }
             },
+            elements: {
+                c: { scope: { data: 3 }}
+            },
             template: '<a>{{hi}}</a>'
         }
 
@@ -231,12 +234,15 @@ describe('UNIT: Utils', function () {
             assert.equal(options.template.querySelector('a').textContent, '{{hi}}')
         })
 
-        it('should convert plain object components to constructors', function () {
+        it('should convert plain object components & elements to constructors', function () {
             var components = options.components
             assert.ok(components.a.prototype instanceof Seed)
             assert.strictEqual(components.a.options.scope.data, 1)
             assert.ok(components.b.prototype instanceof Seed)
             assert.strictEqual(components.b.options.scope.data, 2)
+            var elements = options.elements
+            assert.ok(elements.c.prototype instanceof Seed)
+            assert.strictEqual(elements.c.options.scope.data, 3)
         })
 
     })