зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1438457 - Autocomplete popup should autoselect the first element of the list. r=nchevobbe.
--HG-- extra : rebase_source : 6b7fb664e7005d1e1e2df0185869fae7d83c301a
This commit is contained in:
Родитель
642340d528
Коммит
2196076232
|
@ -51,7 +51,7 @@ class AutocompletePopup extends Component {
|
||||||
|
|
||||||
computeState({ autocompleteProvider, filter }) {
|
computeState({ autocompleteProvider, filter }) {
|
||||||
let list = autocompleteProvider(filter);
|
let list = autocompleteProvider(filter);
|
||||||
let selectedIndex = list.length == 1 ? 0 : -1;
|
let selectedIndex = list.length > 0 ? 0 : -1;
|
||||||
|
|
||||||
return { list, selectedIndex };
|
return { list, selectedIndex };
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,15 +26,19 @@ window.onload = async function () {
|
||||||
* compared with the reference item's value as a test
|
* compared with the reference item's value as a test
|
||||||
*
|
*
|
||||||
* @params {Node} - Node to be compared
|
* @params {Node} - Node to be compared
|
||||||
* @reference {array} - Reference array for comparison
|
* @reference {array} - Reference array for comparison. The selected index is
|
||||||
|
* highlighted as a single element array ie. ["[abc]", "ab", "abcPQR"],
|
||||||
|
* Here the element "abc" is highlighted
|
||||||
*/
|
*/
|
||||||
function compareAutocompleteList(list, reference) {
|
function compareAutocompleteList(list, reference) {
|
||||||
let items = [...list.children].map(el => el.textContent);
|
const delimiter = " - ";
|
||||||
for (let i = 0; i < items.length; i++) {
|
const observedList = [...list.children].map(el => {
|
||||||
let item = items[i];
|
return el.classList.contains("autocomplete-selected")
|
||||||
let ref = reference[i];
|
? `[${el.textContent}]`
|
||||||
is(item, ref, `Item ${i} in list is correct`);
|
: el.textContent
|
||||||
}
|
});
|
||||||
|
is(observedList.join(delimiter), reference.join(delimiter),
|
||||||
|
"Autocomplete items are rendered as expected");
|
||||||
}
|
}
|
||||||
|
|
||||||
let React = browserRequire("devtools/client/shared/vendor/react");
|
let React = browserRequire("devtools/client/shared/vendor/react");
|
||||||
|
@ -96,7 +100,7 @@ window.onload = async function () {
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
|
|
||||||
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
"ABC",
|
"[ABC]",
|
||||||
"a1",
|
"a1",
|
||||||
"a2",
|
"a2",
|
||||||
"a3",
|
"a3",
|
||||||
|
@ -105,8 +109,6 @@ window.onload = async function () {
|
||||||
"abc",
|
"abc",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
is(refs.autocomplete.state.selectedIndex, -1, "Initialised selectedIndex is -1");
|
|
||||||
|
|
||||||
// Blur event
|
// Blur event
|
||||||
$(".devtools-searchinput").blur();
|
$(".devtools-searchinput").blur();
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
|
@ -121,35 +123,84 @@ window.onload = async function () {
|
||||||
// ArrowDown
|
// ArrowDown
|
||||||
synthesizeKey("KEY_ArrowDown");
|
synthesizeKey("KEY_ArrowDown");
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
is(refs.autocomplete.state.selectedIndex, 0, "selectedIndex is 0");
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
ok($(".devtools-autocomplete-listbox .autocomplete-item:nth-child(1)")
|
"ABC",
|
||||||
|
"[a1]",
|
||||||
|
"a2",
|
||||||
|
"a3",
|
||||||
|
"a4",
|
||||||
|
"a5",
|
||||||
|
"abc",
|
||||||
|
]);
|
||||||
|
ok($(".devtools-autocomplete-listbox .autocomplete-item:nth-child(2)")
|
||||||
.className.includes("autocomplete-selected"),
|
.className.includes("autocomplete-selected"),
|
||||||
"Selection class applied");
|
"Selection class applied");
|
||||||
|
|
||||||
// ArrowUp should roll back to the bottom of the list
|
// A double ArrowUp should roll back to the bottom of the list
|
||||||
|
synthesizeKey("KEY_ArrowUp");
|
||||||
synthesizeKey("KEY_ArrowUp");
|
synthesizeKey("KEY_ArrowUp");
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
is(refs.autocomplete.state.selectedIndex, 6, "ArrowUp works");
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
|
"ABC",
|
||||||
|
"a1",
|
||||||
|
"a2",
|
||||||
|
"a3",
|
||||||
|
"a4",
|
||||||
|
"a5",
|
||||||
|
"[abc]",
|
||||||
|
]);
|
||||||
|
|
||||||
// PageDown should take -5 places up
|
// PageDown should take -5 places up
|
||||||
synthesizeKey("KEY_PageUp");
|
synthesizeKey("KEY_PageUp");
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
is(refs.autocomplete.state.selectedIndex, 1, "PageUp works");
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
|
"ABC",
|
||||||
|
"[a1]",
|
||||||
|
"a2",
|
||||||
|
"a3",
|
||||||
|
"a4",
|
||||||
|
"a5",
|
||||||
|
"abc",
|
||||||
|
]);
|
||||||
|
|
||||||
// PageDown should take +5 places down
|
// PageDown should take +5 places down
|
||||||
synthesizeKey("KEY_PageDown");
|
synthesizeKey("KEY_PageDown");
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
is(refs.autocomplete.state.selectedIndex, 6, "PageDown works");
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
|
"ABC",
|
||||||
|
"a1",
|
||||||
|
"a2",
|
||||||
|
"a3",
|
||||||
|
"a4",
|
||||||
|
"a5",
|
||||||
|
"[abc]",
|
||||||
|
]);
|
||||||
|
|
||||||
// Home should take to the top of the list
|
// Home should take to the top of the list
|
||||||
synthesizeKey("KEY_Home");
|
synthesizeKey("KEY_Home");
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
is(refs.autocomplete.state.selectedIndex, 0, "Home works");
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
|
"[ABC]",
|
||||||
|
"a1",
|
||||||
|
"a2",
|
||||||
|
"a3",
|
||||||
|
"a4",
|
||||||
|
"a5",
|
||||||
|
"abc",
|
||||||
|
]);
|
||||||
|
|
||||||
// End should take to the bottom of the list
|
// End should take to the bottom of the list
|
||||||
synthesizeKey("KEY_End");
|
synthesizeKey("KEY_End");
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
is(refs.autocomplete.state.selectedIndex, 6, "End works");
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
|
"ABC",
|
||||||
|
"a1",
|
||||||
|
"a2",
|
||||||
|
"a3",
|
||||||
|
"a4",
|
||||||
|
"a5",
|
||||||
|
"[abc]",
|
||||||
|
]);
|
||||||
|
|
||||||
// Key down in existing state should rollover to the top
|
// Key down in existing state should rollover to the top
|
||||||
synthesizeKey("KEY_ArrowDown");
|
synthesizeKey("KEY_ArrowDown");
|
||||||
|
@ -164,7 +215,10 @@ window.onload = async function () {
|
||||||
synthesizeKey("KEY_Backspace");
|
synthesizeKey("KEY_Backspace");
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
ok($(".devtools-autocomplete-popup"), "Popup is up");
|
ok($(".devtools-autocomplete-popup"), "Popup is up");
|
||||||
compareAutocompleteList($(".devtools-autocomplete-listbox"), ["ABC", "abc"]);
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
|
"[ABC]",
|
||||||
|
"abc"
|
||||||
|
]);
|
||||||
|
|
||||||
// Enter key selection
|
// Enter key selection
|
||||||
synthesizeKey("KEY_ArrowUp");
|
synthesizeKey("KEY_ArrowUp");
|
||||||
|
@ -212,7 +266,10 @@ window.onload = async function () {
|
||||||
// Test for string "pqr ab" which should show list of ABC, abc
|
// Test for string "pqr ab" which should show list of ABC, abc
|
||||||
sendString(" ab");
|
sendString(" ab");
|
||||||
await forceRender(component);
|
await forceRender(component);
|
||||||
compareAutocompleteList($(".devtools-autocomplete-listbox"), ["ABC", "abc"]);
|
compareAutocompleteList($(".devtools-autocomplete-listbox"), [
|
||||||
|
"[ABC]",
|
||||||
|
"abc"
|
||||||
|
]);
|
||||||
|
|
||||||
// Select the first element, value now should be "pqr ABC"
|
// Select the first element, value now should be "pqr ABC"
|
||||||
synthesizeMouseAtCenter(
|
synthesizeMouseAtCenter(
|
||||||
|
|
Загрузка…
Ссылка в новой задаче