test_smart-trace.html (5044B)
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 <section id=s1></section> 17 <section id=s2></section> 18 <section id=s3></section> 19 <section id=s4></section> 20 <script src="head.js"></script> 21 <script> 22 "use strict"; 23 24 window.onload = function() { 25 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 26 const React = browserRequire("devtools/client/shared/vendor/react"); 27 const SmartTrace = React.createFactory( 28 browserRequire("devtools/client/shared/components/SmartTrace")); 29 ok(SmartTrace, "Got the SmartTrace factory"); 30 31 const stacktrace = [ 32 { 33 filename: "https://myfile.com/mahscripts.js", 34 lineNumber: 55, 35 columnNumber: 10, 36 functionName: null, 37 }, 38 { 39 functionName: "loadFunc", 40 filename: "https://myfile.com/loader.js -> https://myfile.com/loadee.js", 41 lineNumber: 10, 42 }, 43 ]; 44 45 add_task(async function testBasic() { 46 info("Check basic rendering"); 47 let onReadyCount = 0; 48 const props = { 49 stacktrace, 50 onViewSourceInDebugger: () => {}, 51 onReady: () => { 52 onReadyCount++; 53 }, 54 }; 55 await renderSmartTraceAndAssertContent( 56 window.document.body.querySelector("#s1"), 57 props 58 ); 59 is(onReadyCount, 1, "onReady was called once"); 60 }); 61 62 add_task(async function testZeroDelay() { 63 info("Check rendering with source map service and 0 initial delay"); 64 let onReadyCount = 0; 65 const props = { 66 stacktrace, 67 onViewSourceInDebugger: () => {}, 68 onReady: () => { 69 onReadyCount++; 70 }, 71 initialRenderDelay: 0, 72 sourceMapURLService: { 73 subscribeByLocation: () => {} 74 }, 75 }; 76 await renderSmartTraceAndAssertContent( 77 window.document.body.querySelector("#s2"), 78 props 79 ); 80 is(onReadyCount, 1, "onReady was called once"); 81 }); 82 83 add_task(async function testNullDelay() { 84 info("Check rendering with source map service and null initial delay"); 85 let onReadyCount = 0; 86 const props = { 87 stacktrace, 88 onViewSourceInDebugger: () => {}, 89 onReady: () => { 90 onReadyCount++; 91 }, 92 initialRenderDelay: 0, 93 sourceMapURLService: { 94 subscribeByLocation: () => {} 95 }, 96 }; 97 await renderSmartTraceAndAssertContent( 98 window.document.body.querySelector("#s3"), 99 props 100 ); 101 is(onReadyCount, 1, "onReady was called once"); 102 }); 103 104 add_task(async function testDelay() { 105 info("Check rendering with source map service and initial delay"); 106 let onReadyCount = 0; 107 const props = { 108 stacktrace, 109 onViewSourceInDebugger: () => {}, 110 onReady: () => { 111 onReadyCount++; 112 }, 113 initialRenderDelay: 500, 114 sourceMapURLService: { 115 subscribeByLocation: () => {} 116 }, 117 }; 118 const el = window.document.body.querySelector("#s4"); 119 await renderSmartTraceAndAssertContent( 120 el, 121 props, 122 false 123 ); 124 is(onReadyCount, 0, "onReady wasn't called at first"); 125 info(`Wait for ${props.initialRenderDelay}ms so the stacktrace should be rendered`) 126 await new Promise(res => setTimeout(res, props.initialRenderDelay)) 127 is(onReadyCount, 1, "onReady was called after waiting for the initial delay"); 128 assertRenderedElementContent(el); 129 }); 130 131 async function renderSmartTraceAndAssertContent(el, props, shouldBeRendered = true) { 132 let trace; 133 await new Promise(resolve => { 134 trace = ReactDOM.render(SmartTrace(props), el, resolve); 135 }); 136 137 const traceEl = ReactDOM.findDOMNode(trace); 138 139 if (!shouldBeRendered) { 140 ok(!traceEl, "SmartTrace wasn't rendered initially"); 141 return; 142 } 143 144 ok(traceEl, "Rendered SmartTrace has an element"); 145 assertRenderedElementContent(traceEl); 146 } 147 148 function assertRenderedElementContent(el) { 149 const frameEls = Array.from(el.querySelectorAll(".frame")); 150 ok(frameEls, "Rendered SmartTrace has frames"); 151 is(frameEls.length, 2, "SmartTrace has 2 frames"); 152 153 checkSmartFrameString({ 154 el: frameEls[0], 155 functionName: "<anonymous>", 156 location: "https://myfile.com/mahscripts.js:55", 157 tooltip: "View source in Debugger → https://myfile.com/mahscripts.js:55", 158 }); 159 160 // Check the third frame, the source should be parsed into a valid source URL 161 checkSmartFrameString({ 162 el: frameEls[1], 163 functionName: "loadFunc", 164 location: "https://myfile.com/loadee.js:10", 165 tooltip: "View source in Debugger → https://myfile.com/loadee.js:10", 166 }); 167 } 168 169 }; 170 </script> 171 </body> 172 </html>