1 files changed, 294 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_filter_by_input.js b/devtools/client/webconsole/test/browser/browser_webconsole_filter_by_input.js
new file mode 100644
index 0000000000..e2a8e13f72
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_filter_by_input.js
@@ -0,0 +1,294 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that the text filter box works to filter based on location.
+
+"use strict";
+
+// In this test, we are trying to test the filtering functionality of the filter
+// input. We test filtering not only for the contents of logs themseleves but
+// also for the filenames.
+//
+// We simulate an HTML file which executes two Javascript files, one with an
+// ASCII filename outputs some ASCII logs and the other one with a Unicode
+// filename outputs some Unicode logs.
+
+const SEASON = {
+  english: "season",
+  chinese: "\u5b63",
+};
+const SEASONS = [
+  {
+    english: "spring",
+    chinese: "\u6625",
+    escapedChinese: "\\u6625",
+  },
+  {
+    english: "summer",
+    chinese: "\u590f",
+    escapedChinese: "\\u590f",
+  },
+  {
+    english: "autumn",
+    chinese: "\u79cb",
+    escapedChinese: "\\u79cb",
+  },
+  {
+    english: "winter",
+    chinese: "\u51ac",
+    escapedChinese: "\\u51ac",
+  },
+];
+
+// filenames
+const HTML_FILENAME = `test.html`;
+const JS_ASCII_FILENAME = `${SEASON.english}.js`;
+const JS_UNICODE_FILENAME = `${SEASON.chinese}.js`;
+const ENCODED_JS_UNICODE_FILENAME = encodeURIComponent(JS_UNICODE_FILENAME);
+
+// file contents
+const HTML_CONSOLE_OUTPUT = `Test filtering ${SEASON.english} names.`;
+const HTML_CONTENT = `<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test filtering logs by filling keywords in the filter input.</title>
+<script>
+console.log("${HTML_CONSOLE_OUTPUT}");
+</script>
+<script src="/${JS_ASCII_FILENAME}"></script>
+<script src="/${ENCODED_JS_UNICODE_FILENAME}"></script>`;
+
+add_task(async function () {
+  const testUrl = createServerAndGetTestUrl();
+  const hud = await openNewTabAndConsole(testUrl);
+
+  // Let's wait for the last logged message of each file to be displayed in the
+  // output, in order to make sure all the logged messages have been displayed.
+  const lastSeason = SEASONS[SEASONS.length - 1];
+  await waitFor(
+    () =>
+      findConsoleAPIMessage(hud, lastSeason.english) &&
+      findConsoleAPIMessage(hud, lastSeason.chinese)
+  );
+
+  // One external Javascript file outputs every season name in English, and the
+  // other Javascript file outputs every season name in Chinese.
+  // The HTML file outputs one line on its own.
+  // So the total number of all the logs is the doubled number of seasons plus
+  // one.
+  let visibleLogs = getVisibleLogs(hud);
+  is(
+    visibleLogs.length,
+    SEASONS.length * 2 + 1,
+    "the total number of all the logs before starting filtering"
+  );
+  checkLogContent(visibleLogs[0], HTML_CONSOLE_OUTPUT, HTML_FILENAME);
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(visibleLogs[i + 1], SEASONS[i].english, JS_ASCII_FILENAME);
+  }
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(
+      visibleLogs[i + 1 + SEASONS.length],
+      SEASONS[i].chinese,
+      JS_UNICODE_FILENAME
+    );
+  }
+  // checking the visibility of clear button, it should be visible only when
+  // there is text inside filter input box
+  await setFilterState(hud, { text: "" });
+  is(getClearButton(hud).hidden, true, "Clear button is hidden");
+  await setFilterState(hud, { text: JS_ASCII_FILENAME });
+  is(getClearButton(hud).hidden, false, "Clear button is visible");
+
+  // All the logs outputted by the ASCII Javascript file are visible, the others
+  // are hidden.
+  await setFilterState(hud, { text: JS_ASCII_FILENAME });
+  visibleLogs = getVisibleLogs(hud);
+  is(
+    visibleLogs.length,
+    SEASONS.length,
+    `the number of all the logs containing ${JS_ASCII_FILENAME}`
+  );
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(visibleLogs[i], SEASONS[i].english, JS_ASCII_FILENAME);
+  }
+
+  // Every season name in English is outputted once.
+  for (const curSeason of SEASONS) {
+    await setFilterState(hud, { text: curSeason.english });
+    visibleLogs = getVisibleLogs(hud);
+    is(
+      visibleLogs.length,
+      1,
+      `the number of all the logs containing ${curSeason.english}`
+    );
+    checkLogContent(visibleLogs[0], curSeason.english, JS_ASCII_FILENAME);
+  }
+
+  // All the logs outputted by the Unicode Javascript file are visible, the
+  // others are hidden.
+  await setFilterState(hud, { text: JS_UNICODE_FILENAME });
+  visibleLogs = getVisibleLogs(hud);
+  is(
+    visibleLogs.length,
+    SEASONS.length,
+    `the number of all the logs containing ${JS_UNICODE_FILENAME}`
+  );
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(visibleLogs[i], SEASONS[i].chinese, JS_UNICODE_FILENAME);
+  }
+
+  // Every season name in Chinese is outputted once.
+  for (const curSeason of SEASONS) {
+    await setFilterState(hud, { text: curSeason.chinese });
+    visibleLogs = getVisibleLogs(hud);
+    is(
+      visibleLogs.length,
+      1,
+      `the number of all the logs containing ${curSeason.chinese}`
+    );
+    checkLogContent(visibleLogs[0], curSeason.chinese, JS_UNICODE_FILENAME);
+  }
+
+  // The filename of the ASCII Javascript file contains the English word season,
+  // so all the logs outputted by the file are visible, besides, the HTML
+  // outputs one line containing the English word season, so it is also visible.
+  // The other logs are hidden. So the number of all the visible logs is the
+  // season number plus one.
+  await setFilterState(hud, { text: SEASON.english });
+  visibleLogs = getVisibleLogs(hud);
+  is(
+    visibleLogs.length,
+    SEASONS.length + 1,
+    `the number of all the logs containing ${SEASON.english}`
+  );
+  checkLogContent(visibleLogs[0], HTML_CONSOLE_OUTPUT, HTML_FILENAME);
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(visibleLogs[i + 1], SEASONS[i].english, JS_ASCII_FILENAME);
+  }
+
+  // The filename of the Unicode Javascript file contains the Chinese word
+  // season, so all the logs outputted by the file are visible. The other logs
+  // are hidden. So the number of all the visible logs is the season number.
+  await setFilterState(hud, { text: SEASON.chinese });
+  visibleLogs = getVisibleLogs(hud);
+  is(
+    visibleLogs.length,
+    SEASONS.length,
+    `the number of all the logs containing ${SEASON.chinese}`
+  );
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(visibleLogs[i], SEASONS[i].chinese, JS_UNICODE_FILENAME);
+  }
+
+  // After clearing the text in the filter input box, all the logs are visible
+  // again.
+  await setFilterState(hud, { text: "" });
+  checkAllMessagesAreVisible(hud);
+
+  // clearing the text in the filter input box using clear button, so after which
+  // all logs will be visible again
+  await setFilterState(hud, { text: JS_ASCII_FILENAME });
+
+  info("Click the input clear button");
+  clickClearButton(hud);
+  await waitFor(() => getClearButton(hud).hidden === true);
+  checkAllMessagesAreVisible(hud);
+});
+
+// Create an HTTP server to simulate a response for the a URL request and return
+// the URL.
+function createServerAndGetTestUrl() {
+  const httpServer = createTestHTTPServer();
+
+  httpServer.registerContentType("html", "text/html");
+  httpServer.registerContentType("js", "application/javascript");
+
+  httpServer.registerPathHandler(
+    "/" + HTML_FILENAME,
+    function (request, response) {
+      response.setStatusLine(request.httpVersion, 200, "OK");
+      response.write(HTML_CONTENT);
+    }
+  );
+  httpServer.registerPathHandler(
+    "/" + JS_ASCII_FILENAME,
+    function (request, response) {
+      response.setStatusLine(request.httpVersion, 200, "OK");
+      response.setHeader("Content-Type", "application/javascript", false);
+      let content = "";
+      for (const curSeason of SEASONS) {
+        content += `console.log("${curSeason.english}");`;
+      }
+      response.write(content);
+    }
+  );
+  httpServer.registerPathHandler(
+    "/" + ENCODED_JS_UNICODE_FILENAME,
+    function (request, response) {
+      response.setStatusLine(request.httpVersion, 200, "OK");
+      response.setHeader("Content-Type", "application/javascript", false);
+      let content = "";
+      for (const curSeason of SEASONS) {
+        content += `console.log("${curSeason.escapedChinese}");`;
+      }
+      response.write(content);
+    }
+  );
+  const port = httpServer.identity.primaryPort;
+  return `http://localhost:${port}/${HTML_FILENAME}`;
+}
+
+function getClearButton(hud) {
+  return hud.ui.outputNode.querySelector(
+    ".devtools-searchbox .devtools-searchinput-clear"
+  );
+}
+
+function clickClearButton(hud) {
+  getClearButton(hud).click();
+}
+
+function getVisibleLogs(hud) {
+  const outputNode = hud.ui.outputNode;
+  return outputNode.querySelectorAll(".message");
+}
+
+function checkAllMessagesAreVisible(hud) {
+  const visibleLogs = getVisibleLogs(hud);
+  is(
+    visibleLogs.length,
+    SEASONS.length * 2 + 1,
+    "the total number of all the logs after clearing filtering"
+  );
+  checkLogContent(visibleLogs[0], HTML_CONSOLE_OUTPUT, HTML_FILENAME);
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(visibleLogs[i + 1], SEASONS[i].english, JS_ASCII_FILENAME);
+  }
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(
+      visibleLogs[i + 1 + SEASONS.length],
+      SEASONS[i].chinese,
+      JS_UNICODE_FILENAME
+    );
+  }
+}
+/**
+ * Check if the content of a log message is what we expect.
+ *
+ * @param Object node
+ *        The node for the log message.
+ * @param String expectedMessageBody
+ *        The string we expect to match the message body in the log message.
+ * @param String expectedFilename
+ *        The string we expect to match the filename in the log message.
+ */
+function checkLogContent(node, expectedMessageBody, expectedFilename) {
+  const messageBody = node.querySelector(".message-body").textContent;
+  const location = node.querySelector(".message-location").textContent;
+  // The location detail contains the line number and the column number, let's
+  // strip them to get the filename.
+  const filename = location.split(":")[0];
+
+  is(messageBody, expectedMessageBody, "the expected message body");
+  is(filename, expectedFilename, "the expected filename");
+}