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