browser_jsterm_editor_toolbar.js (5941B)
1 /* Any copyright is dedicated to the Public Domain. 2 * http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 // Check that the editor toolbar works as expected when in editor mode. 5 6 "use strict"; 7 8 const TEST_URI = 9 "data:text/html;charset=utf8,<!DOCTYPE html><p>Test editor toolbar"; 10 11 add_task(async function () { 12 await pushPref("devtools.webconsole.input.editor", false); 13 14 const tab = await addTab(TEST_URI); 15 let hud = await openConsole(tab); 16 17 info("Test that the toolbar is not displayed when in editor mode"); 18 let toolbar = getEditorToolbar(hud); 19 is(toolbar, null, "The toolbar isn't displayed when not in editor mode"); 20 await closeToolboxIfOpen(); 21 22 await pushPref("devtools.webconsole.input.editor", true); 23 hud = await openConsole(tab); 24 25 info("Test that the toolbar is displayed when in editor mode"); 26 toolbar = getEditorToolbar(hud); 27 ok(toolbar, "The toolbar is displayed when in editor mode"); 28 29 info("Test that the toolbar has the expected items"); 30 const runButton = toolbar.querySelector( 31 ".webconsole-editor-toolbar-executeButton" 32 ); 33 is(runButton.textContent, "Run", "The button has the expected text"); 34 const keyShortcut = 35 (Services.appinfo.OS === "Darwin" ? "Cmd" : "Ctrl") + " + Enter"; 36 is( 37 runButton.getAttribute("title"), 38 `Run expression (${keyShortcut}). This won’t clear the input.`, 39 "The Run Button has the correct title" 40 ); 41 42 info("Test that clicking on the Run button works as expected"); 43 44 const jsTestStatememts = Object.entries({ 45 // input: output, 46 "`${1 + 1} = 2`": "2 = 2", 47 '`${"area" + 51} = aliens?`': "area51 = aliens?", 48 }); 49 50 for (const [input, output] of jsTestStatememts) { 51 // Setting the input value. 52 setInputValue(hud, input); 53 runButton.click(); 54 await waitFor(() => findMessageByType(hud, input, ".command")); 55 await waitFor(() => findEvaluationResultMessage(hud, output)); 56 ok(true, "The expression and its result are displayed in the output"); 57 ok( 58 isInputFocused(hud), 59 "input is still focused after clicking the Run button" 60 ); 61 } 62 // Clear JS Term beform testing history buttons 63 setInputValue(hud, ""); 64 65 info("Test that clicking the previous expression button works as expected"); 66 const prevHistoryButton = toolbar.querySelector( 67 ".webconsole-editor-toolbar-history-prevExpressionButton" 68 ); 69 is( 70 prevHistoryButton.getAttribute("title"), 71 "Previous Expression", 72 "The Previous Expression Button has the correct title" 73 ); 74 for (const [input] of jsTestStatememts.slice().reverse()) { 75 prevHistoryButton.click(); 76 is( 77 getInputValue(hud), 78 input, 79 `The JS Terminal Editor has the correct previous expresion ${input}` 80 ); 81 } 82 83 info("Test that clicking the next expression button works as expected"); 84 const nextHistoryButton = toolbar.querySelector( 85 ".webconsole-editor-toolbar-history-nextExpressionButton" 86 ); 87 is( 88 nextHistoryButton.getAttribute("title"), 89 "Next Expression", 90 "The Next Expression Button has the correct title" 91 ); 92 nextHistoryButton.click(); 93 const [nextHistoryJsStatement] = jsTestStatememts.slice(-1).pop(); 94 is( 95 getInputValue(hud), 96 nextHistoryJsStatement, 97 `The JS Terminal Editor has the correct next expresion ${nextHistoryJsStatement}` 98 ); 99 nextHistoryButton.click(); 100 is(getInputValue(hud), ""); 101 102 info("Test that clicking the pretty print button works as expected"); 103 const expressionToPrettyPrint = [ 104 // [raw, prettified, prettifiedWithTab, prettifiedWith4Spaces] 105 ["fn=n=>n*n", "fn = n => n * n", "fn = n => n * n", "fn = n => n * n"], 106 [ 107 "{x:1, y:2}", 108 "{\n x: 1,\n y: 2\n}", 109 "{\n\tx: 1,\n\ty: 2\n}", 110 "{\n x: 1,\n y: 2\n}", 111 ], 112 [ 113 "async function test() {await new Promise(res => {})}", 114 "async function test() {\n await new Promise(res => {})\n}", 115 "async function test() {\n\tawait new Promise(res => {})\n}", 116 "async function test() {\n await new Promise(res => {})\n}", 117 ], 118 ]; 119 120 const prettyPrintButton = toolbar.querySelector( 121 ".webconsole-editor-toolbar-prettyPrintButton" 122 ); 123 ok(prettyPrintButton, "The pretty print button is displayed in editor mode"); 124 for (const [ 125 input, 126 output, 127 outputWithTab, 128 outputWith4Spaces, 129 ] of expressionToPrettyPrint) { 130 // Setting the input value. 131 setInputValue(hud, input); 132 await pushPref("devtools.editor.tabsize", 2); 133 prettyPrintButton.click(); 134 is( 135 getInputValue(hud), 136 output, 137 `Pretty print works for expression ${input}` 138 ); 139 // Turn on indent with tab. 140 await pushPref("devtools.editor.expandtab", false); 141 prettyPrintButton.click(); 142 is( 143 getInputValue(hud), 144 outputWithTab, 145 `Pretty print works for expression ${input} when expandtab is false` 146 ); 147 await pushPref("devtools.editor.expandtab", true); 148 // Set indent size to 4. 149 await pushPref("devtools.editor.tabsize", 4); 150 prettyPrintButton.click(); 151 is( 152 getInputValue(hud), 153 outputWith4Spaces, 154 `Pretty print works for expression ${input} when tabsize is 4` 155 ); 156 await pushPref("devtools.editor.tabsize", 2); 157 ok( 158 isInputFocused(hud), 159 "input is still focused after clicking the pretty print button" 160 ); 161 } 162 163 info("Test that clicking the close button works as expected"); 164 const closeButton = toolbar.querySelector( 165 ".webconsole-editor-toolbar-closeButton" 166 ); 167 const closeKeyShortcut = 168 (Services.appinfo.OS === "Darwin" ? "Cmd" : "Ctrl") + " + B"; 169 is( 170 closeButton.title, 171 `Switch back to inline mode (${closeKeyShortcut})`, 172 "Close button has expected title" 173 ); 174 closeButton.click(); 175 await waitFor(() => !isEditorModeEnabled(hud)); 176 ok(true, "Editor mode is disabled when clicking on the close button"); 177 }); 178 179 function getEditorToolbar(hud) { 180 return hud.ui.outputNode.querySelector(".webconsole-editor-toolbar"); 181 }