add unit tests to cover more components and the latest sugaring in g-components

test/ajax.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('g-ajax', function() {
+  var ajax;
+
+  setup(function() {
+    ajax = document.createElement('g-ajax');
+    work.appendChild(ajax);
+    // init properties
+    ajax.url = 'http://gdata.youtube.com/feeds/api/videos/';
+    ajax.params = '{"alt":"json", "q":"chrome"}';
+    ajax.handleAs = 'json';
+  });
+
+  teardown(function() {
+    work.textContent = '';
+  });
+
+  test('go', function(done) {
+    ajax.go();
+    ajax.addEventListener('response', function(e) {
+      var r = e.detail.response;
+      expect(r.feed.entry.length).to.be.greaterThan(1);
+      done();
+    });
+  });
+
+  test('auto', function(done) {
+    ajax.auto = true;
+    ajax.addEventListener('response', function(e) {
+      var r = e.detail.response;
+      expect(r.feed.entry.length).to.be.greaterThan(1);
+      done();
+    });
+  });
+});

test/component.js

@@ -16,36 +16,35 @@ suite('component', function() {
     work.textContent = '';
   });
 
-  function async(inFn) {
-    setTimeout(inFn, 1);
-  }
-
-  test('string attribute', function() {
+  test('string attribute', function(done) {
     foo.str = 'hello world';
     expect(foo.$protected._str).to.be('hello world');
     foo.setAttribute('str', 'good bye');
     async(function() {
       expect(foo.$protected._str).to.be('good bye');
+      done();
     });
   });
 
-  test('boolean attribute', function() {
+  test('boolean attribute', function(done) {
     foo.bool = true;
     expect(foo.$protected._bool).to.be(true);
     foo.bool = false;
     expect(foo.$protected._bool).to.be(false);
     foo.setAttribute('bool', true);
     async(function() {
       expect(foo.$protected._bool).to.be(true);
+      done();
     })
   });
 
-  test('number attribute', function() {
+  test('number attribute', function(done) {
     foo.num = 3;
     expect(foo.$protected._num).to.be(3);
     foo.setAttribute('num', 5);
     async(function() {
       expect(foo.$protected._num).to.be(5);
+      done();
     })
   });
 
@@ -77,6 +76,68 @@ suite('component', function() {
     expect(foo.$protected._click).to.be(undefined);
     foo.click();
     expect(foo.$protected._click).to.be(true);
-  })
+  });
+
+  test('custom event', function() {
+    expect(foo.$protected._ref1click).to.be(undefined);
+    foo.$protected.$.ref1.click();
+    expect(foo.$protected._ref1click).to.be(true);
+  });
+
+  test('bind property to DOM', function(done) {
+    var s = 'bind property to DOM';
+    foo.strp = s;
+    async(function() {
+      var ref = foo.$protected.$.ref3;
+      expect(ref.textContent).to.be(s);
+      done();
+    });
+  });
+
+  test('bind attribute to DOM', function(done) {
+    var s = 'bind attribute to DOM';
+    foo.setAttribute('str', s);
+    async(function() {
+      var ref = foo.$protected.$.ref4;
+      expect(ref.textContent).to.be(s);
+      done();
+    });
+  });
+
+  test('ready', function() {
+    expect(foo.str).to.be('I am ready');
+  });
+
+  test('public method', function() {
+    var s = 'calling public method';
+    foo.publicMethod(s);
+    expect(foo.$protected._fooValue).to.be(s);
+  });
+
+  test('protected method', function() {
+    expect(foo.protectedMethod).to.be(undefined);
+    var s = 'calling protected method';
+    foo.$protected.protectedMethod(s);
+    expect(foo.$protected._fooValue).to.be(s);
+  });
+
+  test('custom MDV binding (single dependency)', function(done) {
+    foo.name = 'John Doe';
+    async(function() {
+      var ref = foo.$protected.$.ref5;
+      expect(ref.textContent).to.be('Hello, ' + foo.name);
+      done();
+    });
+  });
+
+  test('custom MDV binding (multiple dependencies)', function(done) {
+    foo.firstName = 'John';
+    foo.lastName = 'Doe';
+    async(function() {
+      var ref = foo.$protected.$.ref6;
+      expect(ref.textContent).to.be(foo.lastName + ', ' + foo.firstName);
+      done();
+    });
+  });
 });
 

test/g-foo.html

@@ -8,17 +8,42 @@
 <element name="g-foo" attributes="str bool num" handlers="click: clickHandler">
   <link rel="components" href="../src/g-component.html">
   <template>
-    <div id="ref1" atclick="ref1ClickHandler">
+    <div id="ref1" on-click="ref1ClickHandler">
       <div id="ref2">hello!!!</div>
+      <div id="ref3">{{strp}}</div>
+      <div id="ref4">{{str}}</div>
+      <div id="ref5">{{helloString}}</div>
+      <div id="ref6">{{fullName}}</div>
     </div>
-    <content></content>
   </template>
   <script>
     this.component({
       publish: {
         strp: '',
         boolp: false,
-        nump: 0
+        nump: 0,
+        name: '',
+        firstName: '',
+        lastName: '',
+        publicMethod: function(inValue) {
+          this._fooValue = inValue;
+        }
+      },
+      bind: {
+        helloString: ['name'],
+        fullName: ['firstName', 'lastName']
+      },
+      helloStringOutput: function(inName) {
+        return 'Hello, ' + inName;
+      },
+      fullNameOutput: function(inFirstName, inLastName) {
+        return inLastName + ', ' + inFirstName;
+      },
+      ready: function() {
+        this.str = 'I am ready';
+      },
+      protectedMethod: function(inValue) {
+        this._fooValue = inValue;
       },
       strChanged: function() {
         this._str = this.str;
@@ -39,9 +64,11 @@
         this._nump = this.nump;
       },
       clickHandler: function() {
+        console.log('clickHandler')
         this._click = true;
       },
       ref1ClickHandler: function() {
+        console.log('ref1ClickHandler')
         this._ref1click = true;
       }
     });

test/icon-button.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('g-icon-button', function() {
+  var iconButton;
+
+  setup(function() {
+    iconButton = document.createElement('g-icon-button');
+    work.appendChild(iconButton);
+  });
+
+  teardown(function() {
+    work.textContent = '';
+  });
+
+  suite('attributes', function() {
+    test('src', function(done) {
+      var src = 'http://foo.com/bar.png';
+      iconButton.src = src;
+      async(function() {
+        var icon = shadowQuery(iconButton, 'g-icon');
+        expect(icon.src).to.be(src);
+        done();
+      });
+    });
+
+    test('active', function() {
+      iconButton.active = true;
+      expect(iconButton.classList.contains('selected')).to.be(true);
+      iconButton.active = false;
+      expect(iconButton.classList.contains('selected')).to.be(false);
+    });
+  });
+});

test/icon.js

@@ -17,11 +17,14 @@ suite('g-icon', function() {
   });
 
   suite('attributes', function() {
-    test('src', function() {
+    test('src', function(done) {
       var src = 'http://foo.com/bar.png';
       icon.src = src;
-      var i = ShadowDOM.localQuery(icon.shadow, '.icon');
-      expect(i.style.backgroundImage).to.be('url(' + src + ')');
+      async(function() {
+        var i = shadowQuery(icon, '.icon');
+        expect(i.style.backgroundImage).to.be('url(' + src + ')');
+        done();
+      });
     });
   });
 });

test/index.html

@@ -13,12 +13,16 @@
     <script src="../third_party/expect.js/expect.js"></script>
     <script src="../third_party/mocha/mocha.js"></script>
     <!-- -->
-    <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+    <script src="../../polyfills/Components/components-polyfill.js"></script>
     <link rel="components" href="g-foo.html">
     <link rel="components" href="../src/g-icon.html">
+    <link rel="components" href="../src/g-icon-button.html">
     <link rel="components" href="../src/g-selection.html">
     <link rel="components" href="../src/g-selector.html">
     <link rel="components" href="../src/g-togglebutton.html">
+    <link rel="components" href="../src/g-menu-item.html">
+    <link rel="components" href="../src/g-menu.html">
+    <link rel="components" href="../src/g-ajax.html">
     <style>
       #work {
         display: none;
@@ -32,11 +36,16 @@
     </script>
     <!--  -->
     <div id="work"></div>
+    <script src="utils.js"></script>
     <script src="component.js"></script>
     <script src="icon.js"></script>
+    <script src="icon-button.js"></script>
     <script src="selection.js"></script>
     <script src="selector.js"></script>
     <script src="togglebutton.js"></script>
+    <script src="menu-item.js"></script>
+    <script src="menu.js"></script>
+    <script src="ajax.js"></script>
     <!--  -->
     <script>
       window.addEventListener('WebComponentsReady', function() {

test/menu-item.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('g-menu-item', function() {
+  var item;
+
+  setup(function() {
+    item = document.createElement('g-menu-item');
+    work.appendChild(item);
+  });
+
+  teardown(function() {
+    work.textContent = '';
+  });
+
+  suite('attributes', function() {
+    test('src', function(done) {
+      var src = 'http://foo.com/bar.png';
+      item.src = src;
+      async(function() {
+        var icon = shadowQuery(item, 'g-icon');
+        expect(icon.src).to.be(src);
+        done();
+      });
+    });
+
+    test('label', function(done) {
+      var label = 'mylabel';
+      item.label = label;
+      async(function() {
+        var span = shadowQuery(item, 'span');
+        expect(span.textContent).to.be(label);
+        done();
+      });
+    });
+  });
+});