michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:    http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: /**
michael@0:  * Tests if requests render correct information in the details UI.
michael@0:  */
michael@0: 
michael@0: function test() {
michael@0:   initNetMonitor(SIMPLE_SJS).then(([aTab, aDebuggee, aMonitor]) => {
michael@0:     info("Starting test... ");
michael@0: 
michael@0:     let { document, L10N, Editor, NetMonitorView } = aMonitor.panelWin;
michael@0:     let { RequestsMenu, NetworkDetails } = NetMonitorView;
michael@0:     let TAB_UPDATED = aMonitor.panelWin.EVENTS.TAB_UPDATED;
michael@0:     RequestsMenu.lazyUpdate = false;
michael@0: 
michael@0:     Task.spawn(function () {
michael@0:       yield waitForNetworkEvents(aMonitor, 1);
michael@0:       is(RequestsMenu.selectedItem, null,
michael@0:         "There shouldn't be any selected item in the requests menu.");
michael@0:       is(RequestsMenu.itemCount, 1,
michael@0:         "The requests menu should not be empty after the first request.");
michael@0:       is(NetMonitorView.detailsPaneHidden, true,
michael@0:         "The details pane should still be hidden after the first request.");
michael@0: 
michael@0:       EventUtils.sendMouseEvent({ type: "mousedown" },
michael@0:         document.getElementById("details-pane-toggle"));
michael@0: 
michael@0:       isnot(RequestsMenu.selectedItem, null,
michael@0:         "There should be a selected item in the requests menu.");
michael@0:       is(RequestsMenu.selectedIndex, 0,
michael@0:         "The first item should be selected in the requests menu.");
michael@0:       is(NetMonitorView.detailsPaneHidden, false,
michael@0:         "The details pane should not be hidden after toggle button was pressed.");
michael@0: 
michael@0:       yield waitFor(aMonitor.panelWin, TAB_UPDATED)
michael@0:       testHeadersTab();
michael@0:       testCookiesTab();
michael@0:       testParamsTab();
michael@0:       yield testResponseTab();
michael@0:       testTimingsTab();
michael@0:       yield teardown(aMonitor);
michael@0:       finish();
michael@0:     });
michael@0: 
michael@0:     function testHeadersTab() {
michael@0:       let tab = document.querySelectorAll("#details-pane tab")[0];
michael@0:       let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0];
michael@0: 
michael@0:       is(tab.getAttribute("selected"), "true",
michael@0:         "The headers tab in the network details pane should be selected.");
michael@0: 
michael@0:       is(tabpanel.querySelector("#headers-summary-url-value").getAttribute("value"),
michael@0:         SIMPLE_SJS, "The url summary value is incorrect.");
michael@0:       is(tabpanel.querySelector("#headers-summary-url-value").getAttribute("tooltiptext"),
michael@0:         SIMPLE_SJS, "The url summary tooltiptext is incorrect.");
michael@0:       is(tabpanel.querySelector("#headers-summary-method-value").getAttribute("value"),
michael@0:         "GET", "The method summary value is incorrect.");
michael@0:       is(tabpanel.querySelector("#headers-summary-status-circle").getAttribute("code"),
michael@0:         "200", "The status summary code is incorrect.");
michael@0:       is(tabpanel.querySelector("#headers-summary-status-value").getAttribute("value"),
michael@0:         "200 Och Aye", "The status summary value is incorrect.");
michael@0: 
michael@0:       is(tabpanel.querySelectorAll(".variables-view-scope").length, 2,
michael@0:         "There should be 2 header scopes displayed in this tabpanel.");
michael@0:       ok(tabpanel.querySelectorAll(".variable-or-property").length >= 12,
michael@0:         "There should be at least 12 header values displayed in this tabpanel.");
michael@0:       // Can't test for an exact total number of headers, because it seems to
michael@0:       // vary across pgo/non-pgo builds.
michael@0: 
michael@0:       is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
michael@0:         "The empty notice should not be displayed in this tabpanel.");
michael@0: 
michael@0:       let responseScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
michael@0:       let requestScope = tabpanel.querySelectorAll(".variables-view-scope")[1];
michael@0: 
michael@0:       is(responseScope.querySelector(".name").getAttribute("value"),
michael@0:         L10N.getStr("responseHeaders") + " (" +
michael@0:         L10N.getFormatStr("networkMenu.sizeKB", L10N.numberWithDecimals(173/1024, 3)) + ")",
michael@0:         "The response headers scope doesn't have the correct title.");
michael@0: 
michael@0:       ok(requestScope.querySelector(".name").getAttribute("value").contains(
michael@0:         L10N.getStr("requestHeaders") + " (0"),
michael@0:         "The request headers scope doesn't have the correct title.");
michael@0:       // Can't test for full request headers title because the size may
michael@0:       // vary across platforms ("User-Agent" header differs). We're pretty
michael@0:       // sure it's smaller than 1 MB though, so it starts with a 0.
michael@0: 
michael@0:       is(responseScope.querySelectorAll(".variables-view-variable .name")[0].getAttribute("value"),
michael@0:         "Connection", "The first response header name was incorrect.");
michael@0:       is(responseScope.querySelectorAll(".variables-view-variable .value")[0].getAttribute("value"),
michael@0:         "\"close\"", "The first response header value was incorrect.");
michael@0:       is(responseScope.querySelectorAll(".variables-view-variable .name")[1].getAttribute("value"),
michael@0:         "Content-Length", "The second response header name was incorrect.");
michael@0:       is(responseScope.querySelectorAll(".variables-view-variable .value")[1].getAttribute("value"),
michael@0:         "\"12\"", "The second response header value was incorrect.");
michael@0:       is(responseScope.querySelectorAll(".variables-view-variable .name")[2].getAttribute("value"),
michael@0:         "Content-Type", "The third response header name was incorrect.");
michael@0:       is(responseScope.querySelectorAll(".variables-view-variable .value")[2].getAttribute("value"),
michael@0:         "\"text/plain; charset=utf-8\"", "The third response header value was incorrect.");
michael@0:       is(responseScope.querySelectorAll(".variables-view-variable .name")[5].getAttribute("value"),
michael@0:         "foo-bar", "The last response header name was incorrect.");
michael@0:       is(responseScope.querySelectorAll(".variables-view-variable .value")[5].getAttribute("value"),
michael@0:         "\"baz\"", "The last response header value was incorrect.");
michael@0: 
michael@0:       is(requestScope.querySelectorAll(".variables-view-variable .name")[0].getAttribute("value"),
michael@0:         "Host", "The first request header name was incorrect.");
michael@0:       is(requestScope.querySelectorAll(".variables-view-variable .value")[0].getAttribute("value"),
michael@0:         "\"example.com\"", "The first request header value was incorrect.");
michael@0:       is(requestScope.querySelectorAll(".variables-view-variable .name")[5].getAttribute("value"),
michael@0:         "Connection", "The penultimate request header name was incorrect.");
michael@0:       is(requestScope.querySelectorAll(".variables-view-variable .value")[5].getAttribute("value"),
michael@0:         "\"keep-alive\"", "The penultimate request header value was incorrect.");
michael@0: 
michael@0:       let lastReqHeaderName = requestScope.querySelectorAll(".variables-view-variable .name")[6];
michael@0:       let lastReqHeaderValue = requestScope.querySelectorAll(".variables-view-variable .value")[6];
michael@0:       if (lastReqHeaderName && lastReqHeaderValue) {
michael@0:         is(lastReqHeaderName.getAttribute("value"),
michael@0:           "Cache-Control", "The last request header name was incorrect.");
michael@0:         is(lastReqHeaderValue.getAttribute("value"),
michael@0:           "\"max-age=0\"", "The last request header value was incorrect.");
michael@0:       } else {
michael@0:         info("The number of request headers was 6 instead of 7. Technically, " +
michael@0:              "not a failure in this particular test, but needs investigation.");
michael@0:       }
michael@0:     }
michael@0: 
michael@0:     function testCookiesTab() {
michael@0:       EventUtils.sendMouseEvent({ type: "mousedown" },
michael@0:         document.querySelectorAll("#details-pane tab")[1]);
michael@0: 
michael@0:       let tab = document.querySelectorAll("#details-pane tab")[1];
michael@0:       let tabpanel = document.querySelectorAll("#details-pane tabpanel")[1];
michael@0: 
michael@0:       is(tab.getAttribute("selected"), "true",
michael@0:         "The cookies tab in the network details pane should be selected.");
michael@0: 
michael@0:       is(tabpanel.querySelectorAll(".variables-view-scope").length, 0,
michael@0:         "There should be no cookie scopes displayed in this tabpanel.");
michael@0:       is(tabpanel.querySelectorAll(".variable-or-property").length, 0,
michael@0:         "There should be no cookie values displayed in this tabpanel.");
michael@0:       is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 1,
michael@0:         "The empty notice should be displayed in this tabpanel.");
michael@0:     }
michael@0: 
michael@0:     function testParamsTab() {
michael@0:       EventUtils.sendMouseEvent({ type: "mousedown" },
michael@0:         document.querySelectorAll("#details-pane tab")[2]);
michael@0: 
michael@0:       let tab = document.querySelectorAll("#details-pane tab")[2];
michael@0:       let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
michael@0: 
michael@0:       is(tab.getAttribute("selected"), "true",
michael@0:         "The params tab in the network details pane should be selected.");
michael@0: 
michael@0:       is(tabpanel.querySelectorAll(".variables-view-scope").length, 0,
michael@0:         "There should be no param scopes displayed in this tabpanel.");
michael@0:       is(tabpanel.querySelectorAll(".variable-or-property").length, 0,
michael@0:         "There should be no param values displayed in this tabpanel.");
michael@0:       is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 1,
michael@0:         "The empty notice should be displayed in this tabpanel.");
michael@0: 
michael@0:       is(tabpanel.querySelector("#request-params-box")
michael@0:         .hasAttribute("hidden"), false,
michael@0:         "The request params box should not be hidden.");
michael@0:       is(tabpanel.querySelector("#request-post-data-textarea-box")
michael@0:         .hasAttribute("hidden"), true,
michael@0:         "The request post data textarea box should be hidden.");
michael@0:     }
michael@0: 
michael@0:     function testResponseTab() {
michael@0:       EventUtils.sendMouseEvent({ type: "mousedown" },
michael@0:         document.querySelectorAll("#details-pane tab")[3]);
michael@0: 
michael@0:       return Task.spawn(function () {
michael@0:         yield waitFor(aMonitor.panelWin, TAB_UPDATED);
michael@0: 
michael@0:         let tab = document.querySelectorAll("#details-pane tab")[3];
michael@0:         let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
michael@0: 
michael@0:         is(tab.getAttribute("selected"), "true",
michael@0:           "The response tab in the network details pane should be selected.");
michael@0: 
michael@0:         is(tabpanel.querySelector("#response-content-info-header")
michael@0:           .hasAttribute("hidden"), true,
michael@0:           "The response info header should be hidden.");
michael@0:         is(tabpanel.querySelector("#response-content-json-box")
michael@0:           .hasAttribute("hidden"), true,
michael@0:           "The response content json box should be hidden.");
michael@0:         is(tabpanel.querySelector("#response-content-textarea-box")
michael@0:           .hasAttribute("hidden"), false,
michael@0:           "The response content textarea box should not be hidden.");
michael@0:         is(tabpanel.querySelector("#response-content-image-box")
michael@0:           .hasAttribute("hidden"), true,
michael@0:           "The response content image box should be hidden.");
michael@0: 
michael@0:         let aEditor = yield NetMonitorView.editor("#response-content-textarea");
michael@0:         is(aEditor.getText(), "Hello world!",
michael@0:           "The text shown in the source editor is incorrect.");
michael@0:         is(aEditor.getMode(), Editor.modes.text,
michael@0:           "The mode active in the source editor is incorrect.");
michael@0:       });
michael@0:     }
michael@0: 
michael@0:     function testTimingsTab() {
michael@0:       EventUtils.sendMouseEvent({ type: "mousedown" },
michael@0:         document.querySelectorAll("#details-pane tab")[4]);
michael@0: 
michael@0:       let tab = document.querySelectorAll("#details-pane tab")[4];
michael@0:       let tabpanel = document.querySelectorAll("#details-pane tabpanel")[4];
michael@0: 
michael@0:       is(tab.getAttribute("selected"), "true",
michael@0:         "The timings tab in the network details pane should be selected.");
michael@0: 
michael@0:       ok(tabpanel.querySelector("#timings-summary-blocked .requests-menu-timings-total")
michael@0:         .getAttribute("value").match(/[0-9]+/),
michael@0:         "The blocked timing info does not appear to be correct.");
michael@0: 
michael@0:       ok(tabpanel.querySelector("#timings-summary-dns .requests-menu-timings-total")
michael@0:         .getAttribute("value").match(/[0-9]+/),
michael@0:         "The dns timing info does not appear to be correct.");
michael@0: 
michael@0:       ok(tabpanel.querySelector("#timings-summary-connect .requests-menu-timings-total")
michael@0:         .getAttribute("value").match(/[0-9]+/),
michael@0:         "The connect timing info does not appear to be correct.");
michael@0: 
michael@0:       ok(tabpanel.querySelector("#timings-summary-send .requests-menu-timings-total")
michael@0:         .getAttribute("value").match(/[0-9]+/),
michael@0:         "The send timing info does not appear to be correct.");
michael@0: 
michael@0:       ok(tabpanel.querySelector("#timings-summary-wait .requests-menu-timings-total")
michael@0:         .getAttribute("value").match(/[0-9]+/),
michael@0:         "The wait timing info does not appear to be correct.");
michael@0: 
michael@0:       ok(tabpanel.querySelector("#timings-summary-receive .requests-menu-timings-total")
michael@0:         .getAttribute("value").match(/[0-9]+/),
michael@0:         "The receive timing info does not appear to be correct.");
michael@0:     }
michael@0: 
michael@0:     aDebuggee.location.reload();
michael@0:   });
michael@0: }