1 files changed, 100 insertions, 0 deletions
diff --git a/devtools/client/shared/components/test/chrome/test_stack-trace.html b/devtools/client/shared/components/test/chrome/test_stack-trace.html
new file mode 100644
index 0000000000..56d9288f06
--- /dev/null
+++ b/devtools/client/shared/components/test/chrome/test_stack-trace.html
@@ -0,0 +1,100 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<!DOCTYPE HTML>
+<html>
+<!--
+Test the rendering of a stack trace
+-->
+<head>
+  <meta charset="utf-8">
+  <title>StackTrace component test</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body>
+<script src="head.js"></script>
+<script>
+"use strict";
+
+window.onload = function() {
+  const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+  const React = browserRequire("devtools/client/shared/vendor/react");
+  const StackTrace = React.createFactory(
+    browserRequire("devtools/client/shared/components/StackTrace")
+  );
+  ok(StackTrace, "Got the StackTrace factory");
+
+  add_task(async function() {
+    const stacktrace = [
+      {
+        filename: "https://myfile.com/mahscripts.js",
+        lineNumber: 55,
+        columnNumber: 10,
+      },
+      {
+        asyncCause: "because",
+        functionName: "loadFunc",
+        filename: "https://myfile.com/loadee.js",
+        lineNumber: 10,
+      },
+    ];
+
+    const props = {
+      stacktrace,
+      onViewSourceInDebugger: () => {},
+    };
+
+    const trace = ReactDOM.render(StackTrace(props), window.document.body);
+    await forceRender(trace);
+
+    const traceEl = ReactDOM.findDOMNode(trace);
+    ok(traceEl, "Rendered StackTrace has an element");
+
+    // Get the child nodes and filter out the text-only whitespace ones
+    const frameEls = Array.from(traceEl.childNodes)
+      .filter(n => n.className && n.className.includes("frame"));
+    ok(frameEls, "Rendered StackTrace has frames");
+    is(frameEls.length, 3, "StackTrace has 3 frames");
+
+    // Check the top frame, function name should be anonymous
+    checkFrameString({
+      el: frameEls[0],
+      functionName: "<anonymous>",
+      source: "https://myfile.com/mahscripts.js",
+      file: "https://myfile.com/mahscripts.js",
+      line: 55,
+      column: 10,
+      shouldLink: true,
+      tooltip: "View source in Debugger → https://myfile.com/mahscripts.js:55:10",
+    });
+
+    // Check the async cause node
+    is(frameEls[1].className, "frame-link-async-cause",
+       "Async cause has the right class");
+    is(frameEls[1].textContent, "(Async: because)", "Async cause has the right label");
+
+    // Check the third frame, the source should be parsed into a valid source URL
+    checkFrameString({
+      el: frameEls[2],
+      functionName: "loadFunc",
+      source: "https://myfile.com/loadee.js",
+      file: "https://myfile.com/loadee.js",
+      line: 10,
+      column: null,
+      shouldLink: true,
+      tooltip: "View source in Debugger → https://myfile.com/loadee.js:10",
+    });
+
+    // Check the tabs and newlines in the stack trace textContent
+    const traceText = traceEl.textContent;
+    const traceLines = traceText.split("\n");
+    ok(!!traceLines.length, "There are newlines in the stack trace text");
+    is(traceLines.pop(), "", "There is a newline at the end of the stack trace text");
+    is(traceLines.length, 3, "The stack trace text has 3 lines");
+    ok(traceLines.every(l => l[0] == "\t"), "Every stack trace line starts with tab");
+  });
+};
+</script>
+</body>
+</html>