Fix new specs so they pass in IE8

spec/components/customElementBehaviors.js

@@ -422,14 +422,13 @@ describe('Components: Custom elements', function() {
             ko.components.unregister('special-list');
         });
 
-        // First define a reusable 'special-list' component that produces a <ul> in which the <li>s have special CSS classes
-        // It also injects and binds a supplied template for each list item
+        // First define a reusable 'special-list' component that produces a <ul> in which the <li>s are filled with the supplied template
         // Note: It would be even simpler to write "template: { nodes: $componentTemplateNodes }", which would also work.
         //       However it's useful to have test coverage for the more longwinded approach of passing nodes via your
         //       viewmodel as well, so retaining the longer syntax for this test.
         ko.components.register('special-list', {
             template: '<ul class="my-special-list" data-bind="foreach: specialListItems">'
-                    +     '<li class="special-list-item" data-bind="template: { nodes: $component.suppliedItemTemplate }">'
+                    +     '<li data-bind="template: { nodes: $component.suppliedItemTemplate }">'
                     +     '</li>'
                     + '</ul>',
             viewModel: {
@@ -445,7 +444,7 @@ describe('Components: Custom elements', function() {
         // Now make some view markup that uses <special-list> and supplies a template to be used inside each list item
         testNode.innerHTML = '<h1>Cheeses</h1>'
                            + '<special-list params="items: cheeses">'
-                           +     '<em data-bind="text: name"></em> has quality <em data-bind="text: quality"></em>'
+                           +     '<em data-bind="text: name">x</em> has quality <em data-bind="text: quality">x</em>'
                            + '</special-list>';
 
         // Finally, bind it all to some data
@@ -462,13 +461,13 @@ describe('Components: Custom elements', function() {
         expect(testNode.childNodes[1].childNodes[0].tagName.toLowerCase()).toEqual('ul');
         expect(testNode.childNodes[1].childNodes[0].className).toEqual('my-special-list');
         expect(testNode.childNodes[1].childNodes[0]).toContainHtml(
-            '<li class="special-list-item" data-bind="template: { nodes: $component.supplieditemtemplate }">'
+            '<li data-bind="template: { nodes: $component.supplieditemtemplate }">'
           +     '<em data-bind="text: name">brie</em> has quality <em data-bind="text: quality">7</em>'
           + '</li>'
-          + '<li class="special-list-item" data-bind="template: { nodes: $component.supplieditemtemplate }">'
+          + '<li data-bind="template: { nodes: $component.supplieditemtemplate }">'
           +     '<em data-bind="text: name">cheddar</em> has quality <em data-bind="text: quality">9</em>'
           + '</li>'
-          + '<li class="special-list-item" data-bind="template: { nodes: $component.supplieditemtemplate }">'
+          + '<li data-bind="template: { nodes: $component.supplieditemtemplate }">'
           +     '<em data-bind="text: name">roquefort</em> has quality <em data-bind="text: quality">3</em>'
           + '</li>'
         );

spec/lib/jasmine.extensions.js

@@ -26,7 +26,7 @@ jasmine.Matchers.prototype.toContainHtml = function (expectedHtml) {
 };
 
 jasmine.nodeText = function(node) {
-    return 'textContent' in node ? node.textContent : node.innerText;
+    return node.nodeType == 3 ? node.data : 'textContent' in node ? node.textContent : node.innerText;
 }
 
 jasmine.Matchers.prototype.toContainText = function (expectedText) {

spec/templatingBehaviors.js

@@ -483,19 +483,19 @@ describe('Templating', function() {
         var model = {
             testNodes: [
                 document.createTextNode("begin"),
-                document.createElement("div"),
+                document.createElement("span"),
                 document.createTextNode("end")
             ],
             testData: { name: ko.observable("alpha") }
         };
         model.testNodes[1].setAttribute("data-bind", "template: 'innerTemplate'"); // See that bindings are applied to the injected nodes
 
         ko.applyBindings(model, testNode);
-        expect(testNode.childNodes[0]).toContainHtml("begin<div>the name is alpha</div>end");
+        expect(testNode.childNodes[0]).toContainHtml("begin<span>the name is alpha</span>end");
 
         // The injected bindings update to match model changes as usual
         model.testData.name("beta");
-        expect(testNode.childNodes[0]).toContainHtml("begin<div>the name is beta</div>end");
+        expect(testNode.childNodes[0]).toContainHtml("begin<span>the name is beta</span>end");
     });
 
     it('Should accept a "nodes" option that gives the template nodes, and it can be used in conjunction with "foreach"', function() {
@@ -504,7 +504,7 @@ describe('Templating', function() {
         // This time we'll check that the nodes array doesn't have to be a real array - it can be the .childNodes
         // property of a DOM element, which is subtly different.
         var templateContainer = document.createElement("div");
-        templateContainer.innerHTML = "[<div data-bind='text: name'></div>]";
+        templateContainer.innerHTML = "[<span data-bind='text: name'></span>]";
         var model = {
             testNodes: templateContainer.childNodes,
             testData: ko.observableArray([{ name: ko.observable("alpha") }, { name: "beta" }, { name: "gamma" }])