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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that classes can be added in the class panel
// This array contains the list of test cases. Each test case contains these properties:
// - {String} textEntered The text to be entered in the field
// - {Boolean} expectNoMutation Set to true if we shouldn't wait for a DOM mutation
// - {Array} expectedClasses The expected list of classes to be applied to the DOM and to
// be found in the class panel
const TEST_ARRAY = [
{
textEntered: "",
expectNoMutation: true,
expectedClasses: [],
},
{
textEntered: "class",
expectedClasses: ["class"],
},
{
textEntered: "class",
expectNoMutation: true,
expectedClasses: ["class"],
},
{
textEntered: "a a a a a a a a a a",
expectedClasses: ["class", "a"],
},
{
textEntered: "class2 class3",
expectedClasses: ["class", "a", "class2", "class3"],
},
{
textEntered: " ",
expectNoMutation: true,
expectedClasses: ["class", "a", "class2", "class3"],
},
{
textEntered: " class4",
expectedClasses: ["class", "a", "class2", "class3", "class4"],
},
{
textEntered: " \t class5 \t \t\t ",
expectedClasses: ["class", "a", "class2", "class3", "class4", "class5"],
},
];
add_task(async function () {
await addTab("data:text/html;charset=utf-8,");
const { inspector, view } = await openRuleView();
info("Open the class panel");
view.showClassPanel();
const textField = inspector.panelDoc.querySelector(
"#ruleview-class-panel .add-class"
);
ok(textField, "The input field exists in the class panel");
textField.focus();
let onMutation;
for (const { textEntered, expectNoMutation, expectedClasses } of TEST_ARRAY) {
if (!expectNoMutation) {
onMutation = inspector.once("markupmutation");
}
info(`Enter the test string in the field: ${textEntered}`);
for (const key of textEntered.split("")) {
const onPreviewMutation = inspector.once("markupmutation");
EventUtils.synthesizeKey(key, {}, view.styleWindow);
await onPreviewMutation;
}
info("Submit the change and wait for the textfield to become empty");
const onEmpty = waitForFieldToBeEmpty(textField);
EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
if (!expectNoMutation) {
info("Wait for the DOM to change");
await onMutation;
}
await onEmpty;
info("Check the state of the DOM node");
const className = await getContentPageElementAttribute("body", "class");
const expectedClassName = expectedClasses.length
? expectedClasses.join(" ")
: null;
is(className, expectedClassName, "The DOM node has the right className");
info("Check the content of the class panel");
checkClassPanelContent(
view,
expectedClasses.map(name => {
return { name, state: true };
})
);
}
});
function waitForFieldToBeEmpty(textField) {
return waitForSuccess(() => !textField.value);
}
|
