/* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ /* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */ /* import-globals-from head.js */
"use strict";
/** * Helper methods for the HTMLTooltip integration tests.
*/
/** * Create an inplace editor linked to a span element and click on the span to * to turn to edit mode. * * @param {Object} options * Options passed to the InplaceEditor/editableField constructor. * @param {Document} doc * Document where the span element will be created. * @param {String} textContent * (optional) String that will be used as the text content of the span.
*/ const createInplaceEditorAndClick = async function (options, doc, textContent) { const span = (options.element = createSpan(doc)); if (textContent) {
span.textContent = textContent;
}
info("Creating an inplace-editor field");
editableField(options);
info("Clicking on the inplace-editor field to turn to edit mode");
span.click();
};
/** * Helper to create a span in the provided document. * * @param {Document} doc * Document where the span element will be created. * @return {Element} the created span element.
*/ function createSpan(doc) {
info("Creating a new span element"); const div = doc.createElementNS(HTML_NS, "div"); const span = doc.createElementNS(HTML_NS, "span");
span.setAttribute("tabindex", "0");
span.style.fontSize = "11px";
span.style.display = "inline-block";
span.style.width = "100px";
span.style.border = "1px solid red";
span.style.fontFamily = "monospace";
/** * Test helper simulating a key event in an InplaceEditor and checking that the * autocompletion works as expected. * * @param {Array} testData * - {String|Object} key, the key to send. An object can be passed with a `key` property. * The other properties will be the options for the event (e.g. `shiftKey`) * - {String} completion, the expected value of the auto-completion * - {Number} index, the index of the selected suggestion in the popup * - {Number|Array} items, the number of suggestions in the popup, or, alternatively * an array of the items label * - {String} postLabel, the expected post label for the selected suggestion * - {Boolean} colorSwatch, if there is a swatch of color expected to be visible * - {Boolean} noSuggestion, true if the keypress doesn't trigger an "after-suggest" event * @param {InplaceEditor} editor * The InplaceEditor instance being tested
*/
async function testCompletion(
[key, completion, index, items, postLabel, colorSwatch, noSuggestion],
editor
) {
let eventOptions = {}; if (typeof key === "object") {
({ key, ...eventOptions } = key);
}
let onVisibilityChange = null; const total = Array.isArray(items) ? items.length : items; const open = total > 0; if (editor.popup.isOpen != open) {
onVisibilityChange = editor.popup.once(
open ? "popup-opened" : "popup-closed"
);
}
let onSuggest; if (/(left|right|back_space|escape)/gi.test(key) || noSuggestion) {
info("Waiting for next keypress event");
onSuggest = once(editor.input, "keypress");
} else {
info("Waiting for after-suggest event on the editor");
onSuggest = editor.once("after-suggest");
}
info("Checking the state"); if (completion !== null) {
is(editor.input.value, completion, "Correct value is autocompleted");
}
if (postLabel) { const selectedItem = editor.popup.getItems()[index]; const selectedElement = editor.popup.elements.get(selectedItem);
ok(
selectedElement.textContent.includes(postLabel), "Selected popup element contains the expected post-label"
);
// Determines if there is a color swatch attached to the label // and if the color swatch's background color matches the post label const swatchSpan = selectedElement.getElementsByClassName( "autocomplete-swatch autocomplete-colorswatch"
); if (colorSwatch) { Assert.strictEqual(
swatchSpan.length,
1, "Displayed the expected color swatch"
); const color = new colorUtils.CssColor(
swatchSpan[0].style.backgroundColor
); const swatchColor = color.rgba; const postColor = new colorUtils.CssColor(postLabel).rgba; Assert.equal(
swatchColor,
postColor, "Color swatch matches postLabel value"
);
} else { Assert.strictEqual(
swatchSpan.length,
0, "As expected no swatches were available"
);
}
}
if (total === 0) {
ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
} else {
ok(editor.popup.isOpen, "Popup is open"); const popupItems = editor.popup.getItems(); if (Array.isArray(items)) { Assert.deepEqual(
popupItems.map(item => item.label),
items, "Suggestions match"
);
} else {
is(
popupItems.length,
total, "Number of suggestions match" +
(popupItems.length !== total
? ` - got ${JSON.stringify(popupItems.map(item => item.label))}`
: "")
);
}
is(editor.popup.selectedIndex, index, "Expected item is selected");
}
}
¤ Dauer der Verarbeitung: 0.14 Sekunden
(vorverarbeitet)
¤
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung ist noch experimentell.
