test_stack-trace.html (3404B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 <!DOCTYPE HTML> 5 <html> 6 <!-- 7 Test the rendering of a stack trace 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>StackTrace component test</title> 12 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 13 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 14 </head> 15 <body> 16 <script src="head.js"></script> 17 <script> 18 "use strict"; 19 20 window.onload = function() { 21 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 22 const React = browserRequire("devtools/client/shared/vendor/react"); 23 const StackTrace = React.createFactory( 24 browserRequire("devtools/client/shared/components/StackTrace") 25 ); 26 ok(StackTrace, "Got the StackTrace factory"); 27 28 add_task(async function() { 29 const stacktrace = [ 30 { 31 filename: "https://myfile.com/mahscripts.js", 32 lineNumber: 55, 33 columnNumber: 10, 34 }, 35 { 36 asyncCause: "because", 37 functionName: "loadFunc", 38 filename: "https://myfile.com/loadee.js", 39 lineNumber: 10, 40 }, 41 ]; 42 43 const props = { 44 stacktrace, 45 onViewSourceInDebugger: () => {}, 46 }; 47 48 const trace = ReactDOM.render(StackTrace(props), window.document.body); 49 await forceRender(trace); 50 51 const traceEl = ReactDOM.findDOMNode(trace); 52 ok(traceEl, "Rendered StackTrace has an element"); 53 54 // Get the child nodes and filter out the text-only whitespace ones 55 const frameEls = Array.from(traceEl.childNodes) 56 .filter(n => n.className && n.className.includes("frame")); 57 ok(frameEls, "Rendered StackTrace has frames"); 58 is(frameEls.length, 3, "StackTrace has 3 frames"); 59 60 // Check the top frame, function name should be anonymous 61 checkFrameString({ 62 el: frameEls[0], 63 functionName: "<anonymous>", 64 source: "https://myfile.com/mahscripts.js", 65 file: "https://myfile.com/mahscripts.js", 66 line: 55, 67 column: 10, 68 shouldLink: true, 69 tooltip: "View source in Debugger → https://myfile.com/mahscripts.js:55:10", 70 }); 71 72 // Check the async cause node 73 is(frameEls[1].className, "frame-link-async-cause", 74 "Async cause has the right class"); 75 is(frameEls[1].textContent, "(Async: because)", "Async cause has the right label"); 76 77 // Check the third frame, the source should be parsed into a valid source URL 78 checkFrameString({ 79 el: frameEls[2], 80 functionName: "loadFunc", 81 source: "https://myfile.com/loadee.js", 82 file: "https://myfile.com/loadee.js", 83 line: 10, 84 column: null, 85 shouldLink: true, 86 tooltip: "View source in Debugger → https://myfile.com/loadee.js:10", 87 }); 88 89 // Check the tabs and newlines in the stack trace textContent 90 const traceText = traceEl.textContent; 91 const traceLines = traceText.split("\n"); 92 ok(!!traceLines.length, "There are newlines in the stack trace text"); 93 is(traceLines.pop(), "", "There is a newline at the end of the stack trace text"); 94 is(traceLines.length, 3, "The stack trace text has 3 lines"); 95 ok(traceLines.every(l => l[0] == "\t"), "Every stack trace line starts with tab"); 96 }); 97 }; 98 </script> 99 </body> 100 </html>