Merge pull request #369 from sheelc/query-selectors

Query selectors

lib/jasmine-core/jasmine-html.js

@@ -55,7 +55,7 @@ jasmineRequire.HtmlReporter = function() {
       );
       getContainer().appendChild(htmlReporterMain);
 
-      symbols = find(".symbol-summary")[0];
+      symbols = find(".symbol-summary");
     };
 
     var totalSpecsDefined;
@@ -125,10 +125,10 @@ jasmineRequire.HtmlReporter = function() {
     this.jasmineDone = function() {
       var elapsed = now() - startTime;
 
-      var banner = find(".banner")[0];
+      var banner = find(".banner");
       banner.appendChild(createDom("span", {className: "duration"}, "finished in " + elapsed / 1000 + "s"));
 
-      var alert = find(".alert")[0];
+      var alert = find(".alert");
 
       alert.appendChild(createDom("span", { className: "exceptions" },
         createDom("label", { className: "label", 'for': "raise-exceptions" }, "raise exceptions"),
@@ -138,7 +138,7 @@ jasmineRequire.HtmlReporter = function() {
           type: "checkbox"
         })
       ));
-      var checkbox = find("input")[0];
+      var checkbox = find("input");
 
       checkbox.checked = !env.catchingExceptions();
       checkbox.onclick = options.onRaiseExceptionsClick;
@@ -157,7 +157,7 @@ jasmineRequire.HtmlReporter = function() {
       var statusBarClassName = "bar " + ((failureCount > 0) ? "failed" : "passed");
       alert.appendChild(createDom("span", {className: statusBarClassName}, statusBarMessage));
 
-      var results = find(".results")[0];
+      var results = find(".results");
       results.appendChild(summary);
 
       summaryList(topResults, summary);
@@ -203,16 +203,16 @@ jasmineRequire.HtmlReporter = function() {
             createDom('a', {className: "spec-list-menu", href: "#"}, "Spec List"),
             createDom("span", {}, " | Failures ")));
 
-        find(".failures-menu")[0].onclick = function() {
+        find(".failures-menu").onclick = function() {
           setMenuModeTo('failure-list');
         };
-        find(".spec-list-menu")[0].onclick = function() {
+        find(".spec-list-menu").onclick = function() {
           setMenuModeTo('spec-list');
         };
 
         setMenuModeTo('failure-list');
 
-        var failureNode = find(".failures")[0];
+        var failureNode = find(".failures");
         for (var i = 0; i < failures.length; i++) {
           failureNode.appendChild(failures[i]);
         }
@@ -222,12 +222,7 @@ jasmineRequire.HtmlReporter = function() {
     return this;
 
     function find(selector) {
-      if (selector.match(/^\./)) {
+      return getContainer().querySelector(selector);
-        var className = selector.substring(1);
-        return getContainer().getElementsByClassName(className);
-      } else {
-        return getContainer().getElementsByTagName(selector);
-      }
     }
 
     function createDom(type, attrs, childrenVarArgs) {

spec/html/HtmlReporterSpec.js

@@ -13,22 +13,20 @@ describe("New HtmlReporter", function() {
     reporter.initialize();
 
     // Main top-level elements
-    var divs = container.getElementsByTagName("div");
+    expect(container.querySelector("div.html-reporter")).toBeTruthy();
-    expect(findElement(divs, "html-reporter")).toBeTruthy();
+    expect(container.querySelector("div.banner")).toBeTruthy();
-    expect(findElement(divs, "banner")).toBeTruthy();
+    expect(container.querySelector("div.alert")).toBeTruthy();
-    expect(findElement(divs, "alert")).toBeTruthy();
+    expect(container.querySelector("div.results")).toBeTruthy();
-    expect(findElement(divs, "results")).toBeTruthy();
 
-    var uls = container.getElementsByTagName("ul");
+    expect(container.querySelector("ul.symbol-summary")).toBeTruthy();
-    expect(findElement(uls, "symbol-summary")).toBeTruthy();
 
     // title banner
-    var banner = container.getElementsByClassName("banner")[0];
+    var banner = container.querySelector(".banner");
 
-    var title = banner.getElementsByClassName("title")[0];
+    var title = banner.querySelector(".title");
     expect(title.innerHTML).toMatch(/Jasmine/);
 
-    var version = banner.getElementsByClassName("version")[0];
+    var version = banner.querySelector(".version");
     expect(version.innerHTML).toEqual(jasmine.version);
   });
 
@@ -47,8 +45,7 @@ describe("New HtmlReporter", function() {
 
       reporter.specDone({id: 789, status: "disabled", fullName: "symbols should have titles"});
 
-      var statuses = container.getElementsByClassName('symbol-summary')[0];
+      var specEl = container.querySelector('.symbol-summary li');
-      var specEl = statuses.getElementsByTagName('li')[0];
       expect(specEl.getAttribute("class")).toEqual("disabled");
       expect(specEl.getAttribute("id")).toEqual("spec_789");
       expect(specEl.getAttribute("title")).toEqual("symbols should have titles");
@@ -68,8 +65,7 @@ describe("New HtmlReporter", function() {
 
       reporter.specDone({id: 789, status: "pending"});
 
-      var statuses = container.getElementsByClassName('symbol-summary')[0];
+      var specEl = container.querySelector('.symbol-summary li');
-      var specEl = statuses.getElementsByTagName('li')[0];
       expect(specEl.getAttribute("class")).toEqual("pending");
       expect(specEl.getAttribute("id")).toEqual("spec_789");
     });
@@ -88,8 +84,8 @@ describe("New HtmlReporter", function() {
 
       reporter.specDone({id: 123, status: "passed"});
 
-      var statuses = container.getElementsByClassName("symbol-summary")[0];
+      var statuses = container.querySelector(".symbol-summary");
-      var specEl = statuses.getElementsByTagName("li")[0];
+      var specEl = statuses.querySelector("li");
       expect(specEl.getAttribute("class")).toEqual("passed");
       expect(specEl.getAttribute("id")).toEqual("spec_123");
     });
@@ -113,8 +109,7 @@ describe("New HtmlReporter", function() {
         failedExpectations: []
       });
 
-      var statuses = container.getElementsByClassName('symbol-summary')[0];
+      var specEl = container.querySelector(".symbol-summary li");
-      var specEl = statuses.getElementsByTagName('li')[0];
       expect(specEl.getAttribute("class")).toEqual("failed");
       expect(specEl.getAttribute("id")).toEqual("spec_345");
     });
@@ -141,8 +136,7 @@ describe("New HtmlReporter", function() {
       fakeNow.andReturn(600);
       reporter.jasmineDone();
 
-      var banner = container.getElementsByClassName("banner")[0];
+      var duration = container.querySelector(".banner .duration");
-      var duration = banner.getElementsByClassName("duration")[0];
       expect(duration.innerHTML).toMatch(/finished in 0.1s/);
     });
 
@@ -204,7 +198,7 @@ describe("New HtmlReporter", function() {
       reporter.suiteDone({id: 1});
 
       reporter.jasmineDone();
-      var summary = container.getElementsByClassName("summary")[0];
+      var summary = container.querySelector(".summary");
 
       expect(summary.childNodes.length).toEqual(1);
 
@@ -255,7 +249,7 @@ describe("New HtmlReporter", function() {
         reporter.initialize();
         reporter.jasmineDone();
 
-        var raisingExceptionsUI = container.getElementsByClassName("raise")[0];
+        var raisingExceptionsUI = container.querySelector(".raise");
         expect(raisingExceptionsUI.checked).toBe(false);
       });
 
@@ -280,7 +274,7 @@ describe("New HtmlReporter", function() {
         env.catchExceptions(false);
         reporter.jasmineDone();
 
-        var raisingExceptionsUI = container.getElementsByClassName("raise")[0];
+        var raisingExceptionsUI = container.querySelector(".raise");
         expect(raisingExceptionsUI.checked).toBe(true);
       });
 
@@ -306,7 +300,7 @@ describe("New HtmlReporter", function() {
         reporter.initialize();
         reporter.jasmineDone();
 
-        var input = container.getElementsByClassName("raise")[0];
+        var input = container.querySelector(".raise");
         input.click();
         expect(exceptionsClickHandler).toHaveBeenCalled();
       });
@@ -343,8 +337,7 @@ describe("New HtmlReporter", function() {
       });
 
       it("reports the specs counts", function() {
-        var alert = container.getElementsByClassName("alert")[0];
+        var alertBars = container.querySelectorAll(".alert .bar");
-        var alertBars = alert.getElementsByClassName("bar");
 
         expect(alertBars.length).toEqual(1);
         expect(alertBars[0].getAttribute('class')).toMatch(/passed/);
@@ -352,16 +345,15 @@ describe("New HtmlReporter", function() {
       });
 
       it("reports no failure details", function() {
-        var specFailure = container.getElementsByClassName("failures")[0];
+        var specFailure = container.querySelector(".failures");
 
         expect(specFailure.childNodes.length).toEqual(0);
       });
 
       it("reports no pending specs", function() {
-        var alert = container.getElementsByClassName("alert")[0];
+        var alertBar = container.querySelector(".alert .bar");
-        var alertBars = alert.getElementsByClassName("bar");
 
-        expect(alertBars[0].innerHTML).not.toMatch(/pending spec[s]/);
+        expect(alertBar.innerHTML).not.toMatch(/pending spec[s]/);
       });
     });
 
@@ -390,14 +382,13 @@ describe("New HtmlReporter", function() {
       });
 
       it("reports the pending specs count", function() {
-        var alert = container.getElementsByClassName("alert")[0];
+        var alertBar = container.querySelector(".alert .bar");
-        var alertBars = alert.getElementsByClassName("bar");
 
-        expect(alertBars[0].innerHTML).toMatch(/1 spec, 0 failures, 1 pending spec/);
+        expect(alertBar.innerHTML).toMatch(/1 spec, 0 failures, 1 pending spec/);
       });
 
       it("reports no failure details", function() {
-        var specFailure = container.getElementsByClassName("failures")[0];
+        var specFailure = container.querySelector(".failures");
 
         expect(specFailure.childNodes.length).toEqual(0);
       });
@@ -442,15 +433,14 @@ describe("New HtmlReporter", function() {
       });
 
       it("reports the specs counts", function() {
-        var alert = container.getElementsByClassName("alert")[0];
+        var alertBar = container.querySelector(".alert .bar");
-        var alertBars = alert.getElementsByClassName("bar");
 
-        expect(alertBars[0].getAttribute('class')).toMatch(/failed/);
+        expect(alertBar.getAttribute('class')).toMatch(/failed/);
-        expect(alertBars[0].innerHTML).toMatch(/2 specs, 1 failure/);
+        expect(alertBar.innerHTML).toMatch(/2 specs, 1 failure/);
       });
 
       it("reports failure messages and stack traces", function() {
-        var specFailures = container.getElementsByClassName("failures")[0];
+        var specFailures = container.querySelector(".failures");
 
         var failure = specFailures.childNodes[0];
         expect(failure.getAttribute("class")).toMatch(/failed/);
@@ -471,36 +461,19 @@ describe("New HtmlReporter", function() {
       });
 
       it("allows switching between failure details and the spec summary", function() {
-        var menuBar = container.getElementsByClassName("bar")[1];
+        var menuBar = container.querySelectorAll(".bar")[1];
 
         expect(menuBar.getAttribute("class")).not.toMatch(/hidden/);
 
-        var link = menuBar.getElementsByTagName('a')[0];
+        var link = menuBar.querySelector('a');
         expect(link.text).toEqual("Failures");
         expect(link.getAttribute("href")).toEqual("#");
       });
 
       it("sets the reporter to 'Failures List' mode", function() {
-        var reporterNode = container.getElementsByClassName("html-reporter")[0];
+        var reporterNode = container.querySelector(".html-reporter");
         expect(reporterNode.getAttribute("class")).toMatch("failure-list");
       });
     });
   });
-
-  // utility functions
-  function findElements(divs, withClass) {
-    var els = [];
-    for (var i = 0; i < divs.length; i++) {
-      if (divs[i].className == withClass) els.push(divs[i]);
-    }
-    return els;
-  }
-
-  function findElement(divs, withClass) {
-    var els = findElements(divs, withClass);
-    if (els.length > 0) {
-      return els[0];
-    }
-    throw new Error("couldn't find div with class " + withClass);
-  }
 });

src/html/HtmlReporter.js

@@ -27,7 +27,7 @@ jasmineRequire.HtmlReporter = function() {
       );
       getContainer().appendChild(htmlReporterMain);
 
-      symbols = find(".symbol-summary")[0];
+      symbols = find(".symbol-summary");
     };
 
     var totalSpecsDefined;
@@ -97,10 +97,10 @@ jasmineRequire.HtmlReporter = function() {
     this.jasmineDone = function() {
       var elapsed = now() - startTime;
 
-      var banner = find(".banner")[0];
+      var banner = find(".banner");
       banner.appendChild(createDom("span", {className: "duration"}, "finished in " + elapsed / 1000 + "s"));
 
-      var alert = find(".alert")[0];
+      var alert = find(".alert");
 
       alert.appendChild(createDom("span", { className: "exceptions" },
         createDom("label", { className: "label", 'for': "raise-exceptions" }, "raise exceptions"),
@@ -110,7 +110,7 @@ jasmineRequire.HtmlReporter = function() {
           type: "checkbox"
         })
       ));
-      var checkbox = find("input")[0];
+      var checkbox = find("input");
 
       checkbox.checked = !env.catchingExceptions();
       checkbox.onclick = options.onRaiseExceptionsClick;
@@ -129,7 +129,7 @@ jasmineRequire.HtmlReporter = function() {
       var statusBarClassName = "bar " + ((failureCount > 0) ? "failed" : "passed");
       alert.appendChild(createDom("span", {className: statusBarClassName}, statusBarMessage));
 
-      var results = find(".results")[0];
+      var results = find(".results");
       results.appendChild(summary);
 
       summaryList(topResults, summary);
@@ -175,16 +175,16 @@ jasmineRequire.HtmlReporter = function() {
             createDom('a', {className: "spec-list-menu", href: "#"}, "Spec List"),
             createDom("span", {}, " | Failures ")));
 
-        find(".failures-menu")[0].onclick = function() {
+        find(".failures-menu").onclick = function() {
           setMenuModeTo('failure-list');
         };
-        find(".spec-list-menu")[0].onclick = function() {
+        find(".spec-list-menu").onclick = function() {
           setMenuModeTo('spec-list');
         };
 
         setMenuModeTo('failure-list');
 
-        var failureNode = find(".failures")[0];
+        var failureNode = find(".failures");
         for (var i = 0; i < failures.length; i++) {
           failureNode.appendChild(failures[i]);
         }
@@ -194,12 +194,7 @@ jasmineRequire.HtmlReporter = function() {
     return this;
 
     function find(selector) {
-      if (selector.match(/^\./)) {
+      return getContainer().querySelector(selector);
-        var className = selector.substring(1);
-        return getContainer().getElementsByClassName(className);
-      } else {
-        return getContainer().getElementsByTagName(selector);
-      }
     }
 
     function createDom(type, attrs, childrenVarArgs) {