diff options
Diffstat (limited to 'devtools/client/inspector/rules/test/browser_rules_class_panel_add.js')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_class_panel_add.js | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js new file mode 100644 index 0000000000..dfba3a63bf --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js @@ -0,0 +1,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); +} |