Update integration tests

googlearchive · Aug 14, 2014 · fc07839 · fc07839
1 parent ff3fdc9
commit fc07839
Show file tree

Hide file tree

Showing 2 changed files with 300 additions and 9 deletions.
diff --git a/test/html/mdv-tests/polymer-expressions-tests.js b/test/html/mdv-tests/polymer-expressions-tests.js
@@ -131,6 +131,14 @@ suite('PolymerExpressions', function() {
     });
   }
 
+  function objToString(str) {
+    return {
+      toString: function() {
+        return str;
+      }
+    };
+  }
+
   test('ClassName Singular', function(done) {
     var div = createTestHtml(
         '<template bind><div class="{{ {foo: bar} | tokenList }}">' +
@@ -753,6 +761,44 @@ suite('PolymerExpressions', function() {
     });
   });
 
+  test('Expressions Conditional 2', function(done) {
+    var div = createTestHtml(
+        '<template bind>' +
+            '{{ checked ? a : b }}' +
+        '</template>');
+    var model = {
+      checked: false,
+      a: 'A',
+      b: 'B'
+    };
+
+    recursivelySetTemplateModel(div, model);
+
+    then(function() {
+      assert.strictEqual('B', div.childNodes[1].textContent);
+
+      model.checked = true;
+
+    }).then(function() {
+      assert.strictEqual('A', div.childNodes[1].textContent);
+
+      model.a = 'AAA';
+    }).then(function() {
+      assert.strictEqual('AAA', div.childNodes[1].textContent);
+
+      model.checked = false;
+
+    }).then(function() {
+      assert.strictEqual('B', div.childNodes[1].textContent);
+
+      model.b = 'BBB';
+    }).then(function() {
+      assert.strictEqual('BBB', div.childNodes[1].textContent);
+
+      done();
+    });
+  });
+
   test('Expressions Literals', function(done) {
     var div = createTestHtml(
         '<template bind>' +
@@ -1096,6 +1142,60 @@ suite('PolymerExpressions', function() {
     });
   });
 
+  test('computed property with object index', function(done) {
+    var div = createTestHtml(
+        '<template bind="{{ }}">' +
+            '<div foo="{{ myObj[dateObj] }}">' +
+        '</template>');
+
+    var model = {
+      myObj: {
+        'Tue Jul 08 2014 12:00:00 GMT-0700 (PDT)': 'bar',
+        'Wed Jul 09 2014 12:00:00 GMT-0700 (PDT)': 'baz'
+      },
+      dateObj: objToString('Tue Jul 08 2014 12:00:00 GMT-0700 (PDT)')
+    };
+
+    recursivelySetTemplateModel(div, model);
+
+    then(function() {
+      assert.equal('bar', div.childNodes[1].getAttribute('foo'));
+      model.dateObj = objToString('Wed Jul 09 2014 12:00:00 GMT-0700 (PDT)');
+
+    }).then(function() {
+      assert.equal('baz', div.childNodes[1].getAttribute('foo'));
+
+      done();
+    });
+  });
+
+  test('computed property with object index - assignment', function(done) {
+    var div = createTestHtml(
+        '<template bind="{{ }}">' +
+            '<input value="{{ myObj[dateObj] }}">' +
+        '</template>');
+
+    var model = {
+      myObj: {
+        'Tue Jul 08 2014 12:00:00 GMT-0700 (PDT)': 'bar',
+      },
+      dateObj: objToString('Tue Jul 08 2014 12:00:00 GMT-0700 (PDT)')
+    };
+
+    recursivelySetTemplateModel(div, model);
+
+    then(function() {
+      assert.equal('bar', div.childNodes[1].value);
+      div.childNodes[1].value = 'baz';
+      dispatchEvent('input', div.childNodes[1]);
+
+    }).then(function() {
+      assert.equal('baz',
+                   model.myObj['Tue Jul 08 2014 12:00:00 GMT-0700 (PDT)']);
+      done();
+    });
+  });
+
   test('two-way computed property', function(done) {
     var div = createTestHtml(
         '<template bind="{{ }}">' +
@@ -2026,4 +2126,122 @@ suite('PolymerExpressions', function() {
     });
   });
 
+  test('lazy conditional', function(done) {
+    var div = createTestHtml(
+        '<template bind=>' +
+          '{{ a ? b : c }}' +
+        '</template>');
+    var count = 0;
+    var model = {
+      a: true,
+      b: 'B',
+      get c() {
+        count++;
+      }
+    };
+
+    recursivelySetTemplateModel(div, model);
+
+    then(function() {
+      assert.equal('B', div.childNodes[1].textContent);
+      assert.equal(0, count);
+
+      model.b = 'BB';
+
+    }).then(function() {
+      assert.equal('BB', div.childNodes[1].textContent);
+      assert.equal(0, count);
+
+      done();
+    });
+  });
+
+  test('lazy conditional 2', function(done) {
+    var div = createTestHtml(
+        '<template bind=>' +
+          '{{ a ? b : c }}' +
+        '</template>');
+    var count = 0;
+    var model = {
+      a: false,
+      get b() {
+        count++;
+      },
+      c: 'C'
+    };
+
+    recursivelySetTemplateModel(div, model);
+
+    then(function() {
+      assert.equal('C', div.childNodes[1].textContent);
+      assert.equal(0, count);
+
+      model.c = 'CC';
+
+    }).then(function() {
+      assert.equal('CC', div.childNodes[1].textContent);
+      assert.equal(0, count);
+
+      done();
+    });
+  });
+
+  test('lazy or', function(done) {
+    var div = createTestHtml(
+        '<template bind=>' +
+          '{{ a || b }}' +
+        '</template>');
+    var count = 0;
+    var model = {
+      a: 'A',
+      get b() {
+        count++;
+      },
+    };
+
+    recursivelySetTemplateModel(div, model);
+
+    then(function() {
+      assert.equal('A', div.childNodes[1].textContent);
+      assert.equal(0, count);
+
+      model.a = 'AA';
+
+    }).then(function() {
+      assert.equal('AA', div.childNodes[1].textContent);
+      assert.equal(0, count);
+
+      done();
+    });
+  });
+
+  test('lazy and', function(done) {
+    var div = createTestHtml(
+        '<template bind=>' +
+          '{{ a && b }}' +
+        '</template>');
+    var count = 0;
+    var model = {
+      a: false,
+      get b() {
+        count++;
+      },
+    };
+
+    recursivelySetTemplateModel(div, model);
+
+    then(function() {
+      assert.equal('false', div.childNodes[1].textContent);
+      assert.equal(0, count);
+
+      model.a = 0;
+
+    }).then(function() {
+      assert.equal('0', div.childNodes[1].textContent);
+      assert.equal(0, count);
+
+      done();
+    });
+  });
+
 });
diff --git a/test/html/mdv-tests/template-binding-tests.js b/test/html/mdv-tests/template-binding-tests.js
@@ -7,8 +7,6 @@
 
 var testDiv;
 
-var wrap = ShadowDOMPolyfill && ShadowDOMPolyfill.wrapIfNeeded || function(a){ return a; };
-
 function clearAllTemplates(node) {
   if (node instanceof HTMLTemplateElement || node.iterator_)
     node.clear();
@@ -432,6 +430,77 @@ suite('Template Instantiation', function() {
     });
   });
 
+  test('Bind If minimal discardChanges', function(done) {
+
+    var div = createTestHtml(
+        '<template bind="{{ bound }}" if="{{ predicate }}">' +
+          'value:{{ value }}' +
+        '</template>');
+    var m = { bound: null, predicate: 0 };
+    var template = div.firstChild;
+
+    var discardChangesCalled = { bound: 0, predicate: 0 };
+    template.bindingDelegate = {
+      prepareBinding: function(path, name, node) {
+        return function(model, node, oneTime) {
+          var result = new PathObserver(model, path); 
+          result.discardChanges = function() {
+            discardChangesCalled[path]++;
+            return PathObserver.prototype.discardChanges.call(this);
+          }
+          return result;
+        }
+      }
+    };
+
+    template.model = m;
+
+    then(function() {
+      assert.strictEqual(0, discardChangesCalled.bound);
+      assert.strictEqual(0, discardChangesCalled.predicate);
+
+      assert.strictEqual(1, div.childNodes.length);
+
+      m.predicate = 1;
+
+    }).then(function() {
+      assert.strictEqual(1, discardChangesCalled.bound);
+      assert.strictEqual(0, discardChangesCalled.predicate);
+
+      assert.strictEqual(2, div.childNodes.length);
+      assert.strictEqual('value:', div.lastChild.textContent);
+
+      m.bound = { value: 2 };
+
+    }).then(function() {
+      assert.strictEqual(1, discardChangesCalled.bound);
+      assert.strictEqual(1, discardChangesCalled.predicate);
+
+      assert.strictEqual(2, div.childNodes.length);
+      assert.strictEqual('value:2', div.lastChild.textContent);
+
+      m.bound.value = 3;
+
+    }).then(function() {
+      assert.strictEqual(1, discardChangesCalled.bound);
+      assert.strictEqual(1, discardChangesCalled.predicate);
+
+      assert.strictEqual(2, div.childNodes.length);
+      assert.strictEqual('value:3', div.lastChild.textContent);
+
+      template.model = undefined;
+
+    }).then(function() {
+      assert.strictEqual(1, discardChangesCalled.bound);
+      assert.strictEqual(1, discardChangesCalled.predicate);
+
+      assert.strictEqual(1, div.childNodes.length);
+
+      done();
+    });
+
+  });
+
   test('Empty If', function(done) {
     var div = createTestHtml(
         '<template if>{{ value }}</template>');
@@ -1513,15 +1582,19 @@ suite('Template Instantiation', function() {
       assert.strictEqual(4, div.childNodes.length);
       assert.strictEqual('Hi, Fry', div.childNodes[3].textContent);
 
-      div.childNodes[2].setAttribute('ref', 'B');
-      model.push('Leela');
+      // In IE 11, MutationObservers do not fire before setTimeout.
+      // So rather than using "then" to queue up the next test, we use a
+      // MutationObserver here to detect the change to "ref".
+      new MutationObserver(function() {
+        assert.strictEqual(5, div.childNodes.length);
+        assert.strictEqual('Hola, Fry', div.childNodes[3].textContent);
+        assert.strictEqual('Hola, Leela', div.childNodes[4].textContent);
 
-    }).then(function() {
-      assert.strictEqual(5, div.childNodes.length);
-      assert.strictEqual('Hola, Fry', div.childNodes[3].textContent);
-      assert.strictEqual('Hola, Leela', div.childNodes[4].textContent);
+        done();
+      }).observe(template, { attributes: true, attributeFilter: ['ref'] });
 
-      done();
+      template.setAttribute('ref', 'B');
+      model.push('Leela');
     });
   });