functional tests for template and expression

src/compiler.js

@@ -37,6 +37,7 @@ function Compiler (vm, options) {
     // extend options
     options = compiler.options = options || makeHash()
     utils.extend(compiler, options.compilerOptions)
+    utils.convertPartials(options.partials)
 
     // initialize element
     compiler.setupElement(options)

src/main.js

@@ -46,7 +46,7 @@ ViewModel.viewmodel = function (id, Ctor) {
  */
 ViewModel.partial = function (id, partial) {
     if (!partial) return utils.partials[id]
-    utils.partials[id] = templateToFragment(partial)
+    utils.partials[id] = utils.templateToFragment(partial)
     return this
 }
 
@@ -87,7 +87,7 @@ function extend (options) {
     }
     // convert template to documentFragment
     if (options.template) {
-        options.templateFragment = templateToFragment(options.template)
+        options.templateFragment = utils.templateToFragment(options.template)
     }
     // allow extended VM to be further extended
     ExtendedVM.extend = extend
@@ -111,7 +111,6 @@ function extend (options) {
  */
 function inheritOptions (child, parent, topLevel) {
     child = child || utils.hash()
-    convertPartials(child.partials)
     if (!parent) return child
     for (var key in parent) {
         if (key === 'el' || key === 'proto') continue
@@ -124,36 +123,4 @@ function inheritOptions (child, parent, topLevel) {
     return child
 }
 
-/**
- *  Convert an object of partials to dom fragments
- */
-function convertPartials (partials) {
-    if (!partials) return
-    for (var key in partials) {
-        if (typeof partials[key] === 'string') {
-            partials[key] = templateToFragment(partials[key])
-        }
-    }
-}
-
-/**
- *  Convert a string template to a dom fragment
- */
-function templateToFragment (template) {
-    if (template.charAt(0) === '#') {
-        var templateNode = document.querySelector(template)
-        if (!templateNode) return
-        template = templateNode.innerHTML
-    }
-    var node = document.createElement('div'),
-        frag = document.createDocumentFragment(),
-        child
-    node.innerHTML = template.trim()
-    /* jshint boss: true */
-    while (child = node.firstChild) {
-        frag.appendChild(child)
-    }
-    return frag
-}
-
 module.exports = ViewModel

src/utils.js

@@ -11,7 +11,7 @@ function makeHash () {
     return Object.create(null)
 }
 
-module.exports = {
+var utils = module.exports = {
 
     hash: makeHash,
 
@@ -65,6 +65,39 @@ module.exports = {
         }
     },
 
+    /**
+     *  Convert an object of partial strings
+     *  to domFragments
+     */
+    convertPartials: function (partials) {
+        if (!partials) return
+        for (var key in partials) {
+            if (typeof partials[key] === 'string') {
+                partials[key] = utils.templateToFragment(partials[key])
+            }
+        }
+    },
+
+    /**
+     *  Convert a string template to a dom fragment
+     */
+    templateToFragment: function (template) {
+        if (template.charAt(0) === '#') {
+            var templateNode = document.querySelector(template)
+            if (!templateNode) return
+            template = templateNode.innerHTML
+        }
+        var node = document.createElement('div'),
+            frag = document.createDocumentFragment(),
+            child
+        node.innerHTML = template.trim()
+        /* jshint boss: true */
+        while (child = node.firstChild) {
+            frag.appendChild(child)
+        }
+        return frag
+    },
+
     /**
      *  log for debugging
      */

test/functional/fixtures/bind.js

@@ -0,0 +1,26 @@
+// PhantomJS doesn't have fn.bind()
+// - WAT?
+
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function (oThis) {
+    if (typeof this !== "function") {
+      // closest thing possible to the ECMAScript 5 internal IsCallable function
+      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+    }
+
+    var aArgs = Array.prototype.slice.call(arguments, 1), 
+        fToBind = this, 
+        fNOP = function () {},
+        fBound = function () {
+          return fToBind.apply(this instanceof fNOP && oThis
+                                 ? this
+                                 : oThis,
+                               aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}

test/functional/fixtures/expression.html

@@ -3,22 +3,37 @@
     <head>
         <title></title>
         <meta charset="utf-8">
+        <script src="bind.js"></script>
         <script src="../../../dist/seed.js"></script>
     </head>
     <body>
-        <div id="demo">
+        <div id="normal">
             <p sd-text="one + ' ' + two + '!'"></p>
-            <input sd-model="one"> <input sd-model="two">
+            <input id="one" sd-model="one" name="one"> <input id="two" sd-model="two" name="two">
+        </div>
+        <div id="lazy">
+            <p sd-text="one + ' ' + two + '!'"></p>
+            <form id="form">
+                <input sd-model="one" name="three"> <input sd-model="two" name="four">
+            </form>
         </div>
         <script>
-            Seed.config({ debug: true })
-            var demo = new Seed({
-                el: '#demo',
+            var normal = new Seed({
+                el: '#normal',
                 scope: {
                     one: 'Hello',
                     two: 'World'
                 }
             })
+
+            var lazy = new Seed({
+                el: '#lazy',
+                lazy: true,
+                scope: {
+                    one: 'Hi',
+                    two: 'Ho'
+                }
+            })
         </script>
     </body>
 </html>

test/functional/fixtures/simple.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <title>Simple Example</title>
-        <meta charset="utf-8">
-        <style type="text/css">
-            .red { color: red; }
-        </style>
-        <script src="../../../dist/seed.js"></script>
-    </head>
-    <body>
-        <input type="checkbox" sd-model="checked">
-        <span sd-text="hello.msg | uppercase" sd-class="red:checked"></span>
-        <h1 sd-if="checked">Now you see me</h1>
-        <script>
-            Seed.config({ debug: true })
-            var demo = new Seed({
-                el: 'body'
-            })
-            demo.hello = {
-                msg: 'yoyoyo'
-            }
-        </script>
-    </body>
-</html>

test/functional/fixtures/template.html

@@ -3,11 +3,13 @@
     <head>
         <title></title>
         <meta charset="utf-8">
+        <script src="bind.js"></script>
         <script src="../../../dist/seed.js"></script>
     </head>
     <body>
 
-        <div id="japan" sd-template="test"></div>
+        <div id="usa" sd-partial="global"></div>
+        <div id="japan" sd-partial="local"></div>
 
         <script type="text/sd-template" id="test">
             <p>{{hi}}!</p>
@@ -17,6 +19,7 @@
 
             // direct usage
             var china  = new Seed({
+                id: 'china',
                 template: '#test'
             })
             document.body.appendChild(china.$el)
@@ -26,11 +29,28 @@
 
             // extended usage
             var Hawaii = Seed.extend({
+                id: 'hawaii',
                 template: '#test'
             })
             var hawaii = new Hawaii()
             document.body.appendChild(hawaii.$el)
-            hawaii.hi = 'Aloha!'
+            hawaii.hi = 'Aloha'
+
+            // global partial
+            Seed.partial('global', document.querySelector('#test').innerHTML)
+            var usa = new Seed({
+                el: '#usa'
+            })
+            usa.hi = 'Hi dude'
+
+            // direct partial
+            var japan = new Seed({
+                el: '#japan',
+                partials: {
+                    local: document.querySelector('#test').innerHTML
+                }
+            })
+            japan.hi = 'こんにちは'
         </script>
     </body>
 </html>

test/functional/specs/expression.js

@@ -0,0 +1,35 @@
+casper.test.begin('Expression', 8, function (test) {
+    
+    casper
+    .start('./fixtures/expression.html', function () {
+
+        test.assertSelectorHasText('#normal p', 'Hello World!')
+        test.assertSelectorHasText('#lazy p', 'Hi Ho!')
+        test.assertField('one', 'Hello')
+        test.assertField('two', 'World')
+        test.assertField('three', 'Hi')
+        test.assertField('four', 'Ho')
+
+        // lazy
+        this.fill('#form', {
+            three: 'three',
+            four: 'four'
+        })
+        test.assertSelectorHasText('#lazy p', 'three four!')
+
+        // normal
+        this.evaluate(function () {
+            var one = document.getElementById('one')
+            var e = document.createEvent('MouseEvent')
+            e.initMouseEvent('keyup', true, true, null, 1, 0, 0, 0, 0, false, false, false, false, 0, null)
+            one.value = 'Bye'
+            one.dispatchEvent(e)
+        })
+        test.assertSelectorHasText('#normal p', 'Bye World!')
+        
+    })
+    .run(function () {
+        test.done()
+    })
+
+})

test/functional/specs/simple.js

@@ -1,19 +0,0 @@
-casper.test.begin('testing it out', 5, function (test) {
-    
-    casper
-    .start('./fixtures/simple.html', function () {
-        test.assertSelectorHasText('span', 'YOYOYO', 'filter should work')
-        test.assertNotVisible('h1', 'h1 should not be visible')
-        test.assertDoesntExist('span.red', 'span should not be .red')
-    })
-
-    .thenClick('input[type="checkbox"]', function () {
-        test.assertVisible('h1', 'h1 should be visible after clicking checkbox')
-        test.assertExists('span.red', 'span should have .red after clicking checkbox')
-    })
-
-    .run(function () {
-        test.done()
-    })
-
-})

test/functional/specs/template.js

@@ -0,0 +1,15 @@
+casper.test.begin('Template', 4, function (test) {
+    
+    casper
+    .start('./fixtures/template.html', function () {
+        test.assertSelectorHasText('#usa', 'Hi dude', 'global partial')
+        test.assertSelectorHasText('#japan', 'こんにちは', 'local partial')
+        test.assertSelectorHasText('#china', '你好', 'direct option')
+        test.assertSelectorHasText('#hawaii', 'Aloha', 'extend option')
+    })
+
+    .run(function () {
+        test.done()
+    })
+
+})