gecko-dev/toolkit/components/satchel/test/test_form_autocomplete.html

1038 строки
27 KiB
HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Test for Form History Autocomplete</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<script type="text/javascript" src="satchel_common.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
Form History test: form field autocomplete
<p id="display"></p>
<!-- We presumably can't hide the content for this test. The large top padding is to allow
listening for scrolls to occur. -->
<div id="content" style="padding-top: 20000px;">
<!-- normal, basic form -->
<form id="form1" onsubmit="return false;">
<input type="text" name="field1">
<button type="submit">Submit</button>
</form>
<!-- normal, basic form (new fieldname) -->
<form id="form2" onsubmit="return false;">
<input type="text" name="field2">
<button type="submit">Submit</button>
</form>
<!-- form with autocomplete=off on input -->
<form id="form3" onsubmit="return false;">
<input type="text" name="field2" autocomplete="off">
<button type="submit">Submit</button>
</form>
<!-- form with autocomplete=off on form -->
<form id="form4" autocomplete="off" onsubmit="return false;">
<input type="text" name="field2">
<button type="submit">Submit</button>
</form>
<!-- normal form for testing filtering -->
<form id="form5" onsubmit="return false;">
<input type="text" name="field3">
<button type="submit">Submit</button>
</form>
<!-- normal form for testing word boundary filtering -->
<form id="form6" onsubmit="return false;">
<input type="text" name="field4">
<button type="submit">Submit</button>
</form>
<!-- form with maxlength attribute on input -->
<form id="form7" onsubmit="return false;">
<input type="text" name="field5" maxlength="10">
<button type="submit">Submit</button>
</form>
<!-- form with input type='email' -->
<form id="form8" onsubmit="return false;">
<input type="email" name="field6">
<button type="submit">Submit</button>
</form>
<!-- form with input type='tel' -->
<form id="form9" onsubmit="return false;">
<input type="tel" name="field7">
<button type="submit">Submit</button>
</form>
<!-- form with input type='url' -->
<form id="form10" onsubmit="return false;">
<input type="url" name="field8">
<button type="submit">Submit</button>
</form>
<!-- form with input type='search' -->
<form id="form11" onsubmit="return false;">
<input type="search" name="field9">
<button type="submit">Submit</button>
</form>
<!-- form with input type='number' -->
<form id="form12" onsubmit="return false;">
<input type="text" name="field10"> <!-- TODO: change back to type=number -->
<button type="submit">Submit</button>
</form>
<!-- normal, basic form (with fieldname='searchbar-history') -->
<form id="form13" onsubmit="return false;">
<input type="text" name="searchbar-history">
<button type="submit">Submit</button>
</form>
<!-- form with input type='date' -->
<form id="form14" onsubmit="return false;">
<input type="date" name="field11">
<button type="submit">Submit</button>
</form>
<!-- form with input type='time' -->
<form id="form15" onsubmit="return false;">
<input type="time" name="field12">
<button type="submit">Submit</button>
</form>
<!-- form with input type='range' -->
<form id="form16" onsubmit="return false;">
<input type="range" name="field13" max="64">
<button type="submit">Submit</button>
</form>
<!-- form with input type='color' -->
<form id="form17" onsubmit="return false;">
<input type="color" name="field14">
<button type="submit">Submit</button>
</form>
<!-- form with input type='month' -->
<form id="form18" onsubmit="return false;">
<input type="month" name="field15">
<button type="submit">Submit</button>
</form>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
/** Test for Form History autocomplete **/
var input = $_(1, "field1");
const shiftModifier = Event.SHIFT_MASK;
function setupFormHistory(aCallback) {
updateFormHistory([
{ op : "remove" },
{ op : "add", fieldname : "field1", value : "value1" },
{ op : "add", fieldname : "field1", value : "value2" },
{ op : "add", fieldname : "field1", value : "value3" },
{ op : "add", fieldname : "field1", value : "value4" },
{ op : "add", fieldname : "field2", value : "value1" },
{ op : "add", fieldname : "field3", value : "a" },
{ op : "add", fieldname : "field3", value : "aa" },
{ op : "add", fieldname : "field3", value : "aaz" },
{ op : "add", fieldname : "field3", value : "aa\xe6" }, // 0xae == latin ae pair (0xc6 == AE)
{ op : "add", fieldname : "field3", value : "az" },
{ op : "add", fieldname : "field3", value : "z" },
{ op : "add", fieldname : "field4", value : "a\xe6" },
{ op : "add", fieldname : "field4", value : "aa a\xe6" },
{ op : "add", fieldname : "field4", value : "aba\xe6" },
{ op : "add", fieldname : "field4", value : "bc d\xe6" },
{ op : "add", fieldname : "field5", value : "1" },
{ op : "add", fieldname : "field5", value : "12" },
{ op : "add", fieldname : "field5", value : "123" },
{ op : "add", fieldname : "field5", value : "1234" },
{ op : "add", fieldname : "field6", value : "value" },
{ op : "add", fieldname : "field7", value : "value" },
{ op : "add", fieldname : "field8", value : "value" },
{ op : "add", fieldname : "field9", value : "value" },
{ op : "add", fieldname : "field10", value : "42" },
{ op : "add", fieldname : "field11", value : "2010-10-10" },
{ op : "add", fieldname : "field12", value : "21:21" },
{ op : "add", fieldname : "field13", value : "32" }, // not used, since type=range doesn't have a drop down menu
{ op : "add", fieldname : "field14", value : "#ffffff" }, // not used, since type=color doesn't have autocomplete currently
{ op : "add", fieldname : "searchbar-history", value : "blacklist test" },
], aCallback);
}
// All these non-implemeted types might need autocomplete tests in the future.
var todoTypes = [ "datetime", "week", "datetime-local" ];
var todoInput = document.createElement("input");
for (var type of todoTypes) {
todoInput.type = type;
todo_is(todoInput.type, type, type + " type shouldn't be implemented");
}
function setForm(value) {
input.value = value;
input.focus();
}
// Restore the form to the default state.
function restoreForm() {
setForm("");
}
// Check for expected form data.
function checkForm(expectedValue) {
var formID = input.parentNode.id;
is(input.value, expectedValue, "Checking " + formID + " input");
}
var testNum = 0;
var expectingPopup = false;
function expectPopup()
{
info("expecting popup for test " + testNum);
expectingPopup = true;
}
function popupShownListener()
{
info("popup shown for test " + testNum);
if (expectingPopup) {
expectingPopup = false;
SimpleTest.executeSoon(runTest);
}
else {
ok(false, "Autocomplete popup not expected during test " + testNum);
}
}
registerPopupShownListener(popupShownListener);
/*
* Main section of test...
*
* This is a bit hacky, as many operations happen asynchronously.
* Various mechanisms call runTests as a result of operations:
* - set expectingPopup to true, and the next test will occur when the autocomplete popup is shown
* - call waitForMenuChange(x) to run the next test when the autocomplete popup to have x items in it
* - addEntry calls runs the test when an entry has been added
* - some tests scroll the window. This is because the form fill controller happens to scroll
* the field into view near the end of the search, and there isn't any other good notification
* to listen to for when the search is complete.
* - some items still use setTimeout
*/
function runTest() {
testNum++;
ok(true, "Starting test #" + testNum);
switch(testNum) {
case 1:
// Make sure initial form is empty.
checkForm("");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 2:
checkMenuEntries(["value1", "value2", "value3", "value4"], testNum);
// Check first entry
doKey("down");
checkForm(""); // value shouldn't update
doKey("return"); // not "enter"!
checkForm("value1");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 3:
// Check second entry
doKey("down");
doKey("down");
doKey("return"); // not "enter"!
checkForm("value2");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 4:
// Check third entry
doKey("down");
doKey("down");
doKey("down");
doKey("return");
checkForm("value3");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 5:
// Check fourth entry
doKey("down");
doKey("down");
doKey("down");
doKey("down");
doKey("return");
checkForm("value4");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 6:
// Check first entry (wraparound)
doKey("down");
doKey("down");
doKey("down");
doKey("down");
doKey("down"); // deselects
doKey("down");
doKey("return");
checkForm("value1");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 7:
// Check the last entry via arrow-up
doKey("up");
doKey("return");
checkForm("value4");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 8:
// Check the last entry via arrow-up
doKey("down"); // select first entry
doKey("up"); // selects nothing!
doKey("up"); // select last entry
doKey("return");
checkForm("value4");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 9:
// Check the last entry via arrow-up (wraparound)
doKey("down");
doKey("up"); // deselects
doKey("up"); // last entry
doKey("up");
doKey("up");
doKey("up"); // first entry
doKey("up"); // deselects
doKey("up"); // last entry
doKey("return");
checkForm("value4");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 10:
// Set first entry w/o triggering autocomplete
doKey("down");
doKey("right");
checkForm("value1");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 11:
// Set first entry w/o triggering autocomplete
doKey("down");
doKey("left");
checkForm("value1");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 12:
// Check first entry (page up)
doKey("down");
doKey("down");
doKey("page_up");
doKey("return");
checkForm("value1");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 13:
// Check last entry (page down)
doKey("down");
doKey("page_down");
doKey("return");
checkForm("value4");
// Trigger autocomplete popup
testNum = 49;
expectPopup();
restoreForm();
doKey("down");
break;
/* Test removing entries from the dropdown */
case 50:
checkMenuEntries(["value1", "value2", "value3", "value4"], testNum);
// Delete the first entry (of 4)
setForm("value");
doKey("down");
// On OS X, shift-backspace and shift-delete work, just delete does not.
// On Win/Linux, shift-backspace does not work, delete and shift-delete do.
if (SpecialPowers.OS == "Darwin")
doKey("back_space", shiftModifier);
else
doKey("delete", shiftModifier);
// This tests that on OS X shift-backspace didn't delete the last character
// in the input (bug 480262).
waitForMenuChange(3);
break;
case 51:
checkForm("value");
countEntries("field1", "value1",
function (num) {
ok(!num, testNum + " checking that f1/v1 was deleted");
runTest();
});
break;
case 52:
doKey("return");
checkForm("value2");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 53:
checkMenuEntries(["value2", "value3", "value4"], testNum);
// Check the new first entry (of 3)
doKey("down");
doKey("return");
checkForm("value2");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 54:
// Delete the second entry (of 3)
doKey("down");
doKey("down");
doKey("delete", shiftModifier);
waitForMenuChange(2);
break;
case 55:
checkForm("");
countEntries("field1", "value3",
function (num) {
ok(!num, testNum + " checking that f1/v3 was deleted");
runTest();
});
break;
case 56:
doKey("return");
checkForm("value4")
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 57:
checkMenuEntries(["value2", "value4"], testNum);
// Check the new first entry (of 2)
doKey("down");
doKey("return");
checkForm("value2");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 58:
// Delete the last entry (of 2)
doKey("down");
doKey("down");
doKey("delete", shiftModifier);
checkForm("");
waitForMenuChange(1);
break;
case 59:
countEntries("field1", "value4",
function (num) {
ok(!num, testNum + " checking that f1/v4 was deleted");
runTest();
});
break;
case 60:
doKey("return");
checkForm("value2");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 61:
checkMenuEntries(["value2"], testNum);
// Check the new first entry (of 1)
doKey("down");
doKey("return");
checkForm("value2");
// Trigger autocomplete popup
expectPopup();
restoreForm();
doKey("down");
break;
case 62:
// Delete the only remaining entry
doKey("down");
doKey("delete", shiftModifier);
waitForMenuChange(0);
break;
case 63:
checkForm("");
countEntries("field1", "value2",
function (num) {
ok(!num, testNum + " checking that f1/v2 was deleted");
runTest();
});
break;
case 64:
// Look at form 2, trigger autocomplete popup
input = $_(2, "field2");
testNum = 99;
expectPopup();
restoreForm();
doKey("down");
break;
/* Test entries with autocomplete=off */
case 100:
// Select first entry
doKey("down");
doKey("return");
checkForm("value1");
// Look at form 3, try to trigger autocomplete popup
input = $_(3, "field2");
restoreForm();
// Sometimes, this will fail if scrollTo(0, 0) is called, so that doesn't
// happen here. Fortunately, a different input is used from the last test,
// so a scroll should still occur.
doKey("down");
waitForScroll();
break;
case 101:
// Ensure there's no autocomplete dropdown (autocomplete=off is present)
doKey("down");
doKey("return");
checkForm("");
// Look at form 4, try to trigger autocomplete popup
input = $_(4, "field2");
restoreForm();
doKey("down");
waitForMenuChange(0);
break;
case 102:
// Ensure there's no autocomplete dropdown (autocomplete=off is present)
doKey("down");
doKey("return");
checkForm("");
// Look at form 5, try to trigger autocomplete popup
input = $_(5, "field3");
restoreForm();
testNum = 199;
expectPopup();
input.focus();
sendChar("a");
break;
/* Test filtering as characters are typed. */
case 200:
checkMenuEntries(["a", "aa", "aaz", "aa\xe6", "az"], testNum);
input.focus();
sendChar("a");
waitForMenuChange(3);
break;
case 201:
checkMenuEntries(["aa", "aaz", "aa\xe6"], testNum);
input.focus();
sendChar("\xc6");
waitForMenuChange(1);
break;
case 202:
checkMenuEntries(["aa\xe6"], testNum);
doKey("back_space");
waitForMenuChange(3);
break;
case 203:
checkMenuEntries(["aa", "aaz", "aa\xe6"], testNum);
doKey("back_space");
waitForMenuChange(5);
break;
case 204:
checkMenuEntries(["a", "aa", "aaz", "aa\xe6", "az"], testNum);
input.focus();
sendChar("z");
waitForMenuChange(2);
break;
case 205:
checkMenuEntries(["az", "aaz"], testNum);
input.focus();
doKey("left");
expectPopup();
// Check case-insensitivity.
sendChar("A");
break;
case 206:
checkMenuEntries(["aaz"], testNum);
addEntry("field3", "aazq");
break;
case 207:
// check that results were cached
input.focus();
doKey("right");
sendChar("q");
waitForMenuChange(0);
break;
case 208:
// check that results were cached
checkMenuEntries([], testNum);
addEntry("field3", "aazqq");
break;
case 209:
input.focus();
window.scrollTo(0, 0);
sendChar("q");
waitForMenuChange(0);
break;
case 210:
// check that empty results were cached - bug 496466
checkMenuEntries([], testNum);
doKey("escape");
// Look at form 6, try to trigger autocomplete popup
input = $_(6, "field4");
restoreForm();
testNum = 249;
expectPopup();
input.focus();
sendChar("a");
break;
/* Test substring matches and word boundary bonuses */
case 250:
// alphabetical results for first character
checkMenuEntries(["aa a\xe6", "aba\xe6", "a\xe6"], testNum);
input.focus();
sendChar("\xe6");
waitForMenuChange(3, "a\xe6");
break;
case 251:
// prefix match comes first, then word boundary match
// followed by substring match
checkMenuEntries(["a\xe6", "aa a\xe6", "aba\xe6"], testNum);
restoreForm();
input.focus();
sendChar("b");
waitForMenuChange(1, "bc d\xe6");
break;
case 252:
checkMenuEntries(["bc d\xe6"], testNum);
input.focus();
sendChar(" ");
waitForMenuChange(1);
break;
case 253:
// check that trailing space has no effect after single char.
checkMenuEntries(["bc d\xe6"], testNum);
input.focus();
sendChar("\xc6");
waitForMenuChange(2);
break;
case 254:
// check multi-word substring matches
checkMenuEntries(["bc d\xe6", "aba\xe6"]);
input.focus();
expectPopup();
doKey("left");
sendChar("d");
break;
case 255:
// check inserting in multi-word searches
checkMenuEntries(["bc d\xe6"], testNum);
input.focus();
sendChar("z");
waitForMenuChange(0);
break;
case 256:
checkMenuEntries([], testNum);
// Look at form 7, try to trigger autocomplete popup
input = $_(7, "field5");
testNum = 299;
expectPopup();
restoreForm();
doKey("down");
break;
case 300:
checkMenuEntries(["1", "12", "123", "1234"], testNum);
input.maxLength = 4;
expectPopup();
doKey("escape");
doKey("down");
break;
case 301:
checkMenuEntries(["1", "12", "123", "1234"], testNum);
input.maxLength = 3;
expectPopup();
doKey("escape");
doKey("down");
break;
case 302:
checkMenuEntries(["1", "12", "123"], testNum);
input.maxLength = 2;
expectPopup();
doKey("escape");
doKey("down");
break;
case 303:
checkMenuEntries(["1", "12"], testNum);
input.maxLength = 1;
expectPopup();
doKey("escape");
doKey("down");
break;
case 304:
checkMenuEntries(["1"], testNum);
input.maxLength = 0;
doKey("escape");
doKey("down");
waitForMenuChange(0);
break;
case 305:
checkMenuEntries([], testNum);
input.maxLength = 4;
// now again with a character typed
input.focus();
sendChar("1");
expectPopup();
doKey("escape");
doKey("down");
break;
case 306:
checkMenuEntries(["1", "12", "123", "1234"], testNum);
input.maxLength = 3;
expectPopup();
doKey("escape");
doKey("down");
break;
case 307:
checkMenuEntries(["1", "12", "123"], testNum);
input.maxLength = 2;
expectPopup();
doKey("escape");
doKey("down");
break;
case 308:
checkMenuEntries(["1", "12"], testNum);
input.maxLength = 1;
expectPopup();
doKey("escape");
doKey("down");
break;
case 309:
checkMenuEntries(["1"], testNum);
input.maxLength = 0;
doKey("escape");
doKey("down");
waitForMenuChange(0);
break;
case 310:
checkMenuEntries([], testNum);
input = $_(8, "field6");
testNum = 399;
expectPopup();
restoreForm();
doKey("down");
break;
case 400:
case 401:
case 402:
case 403:
checkMenuEntries(["value"], testNum);
doKey("down");
doKey("return");
checkForm("value");
if (testNum == 400) {
input = $_(9, "field7");
} else if (testNum == 401) {
input = $_(10, "field8");
} else if (testNum == 402) {
input = $_(11, "field9");
} else if (testNum == 403) {
todo(false, "Fix input type=number");
input = $_(12, "field10");
}
expectPopup();
restoreForm();
doKey("down");
break;
case 404:
checkMenuEntries(["42"], testNum);
doKey("down");
doKey("return");
checkForm("42");
input = $_(14, "field11");
restoreForm();
expectPopup();
doKey("down");
break;
case 405:
checkMenuEntries(["2010-10-10"]);
doKey("down");
doKey("return");
checkForm("2010-10-10");
input = $_(15, "field12");
restoreForm();
expectPopup();
doKey("down");
break;
case 406:
checkMenuEntries(["21:21"]);
doKey("down");
doKey("return");
checkForm("21:21");
input = $_(16, "field13");
restoreForm();
doKey("down");
waitForMenuChange(0);
break;
case 407:
checkMenuEntries([]); // type=range does not have a drop down menu
doKey("down");
doKey("return");
checkForm("30"); // default (midway between minimum (0) and maximum (64)) - step
input = $_(17, "field14");
restoreForm();
waitForMenuChange(0);
break;
case 408:
checkMenuEntries([]); // type=color does not have a drop down menu
checkForm("#000000"); // default color value
addEntry("field1", "value1");
break;
case 409:
input = $_(1, "field1");
// Go to test 500.
testNum = 499;
expectPopup();
restoreForm();
doKey("down");
break;
// Check that the input event is fired.
case 500:
input.addEventListener("input", function(event) {
input.removeEventListener("input", arguments.callee, false);
ok(true, testNum + " oninput should have been received");
ok(event.bubbles, testNum + " input event should bubble");
ok(event.cancelable, testNum + " input event should be cancelable");
}, false);
doKey("down");
checkForm("");
doKey("return");
checkForm("value1");
testNum = 599;
setTimeout(runTest, 100);
break;
case 600:
// check we don't show autocomplete for searchbar-history
input = $_(13, "searchbar-history");
// Trigger autocomplete popup
checkForm("");
restoreForm();
doKey("down");
waitForMenuChange(0);
break;
case 601:
checkMenuEntries([], testNum);
input.blur();
SimpleTest.finish();
return;
default:
ok(false, "Unexpected invocation of test #" + testNum);
SimpleTest.finish();
return;
}
}
function addEntry(name, value)
{
updateFormHistory({ op : "add", fieldname : name, value: value }, runTest);
}
// Runs the next test when scroll event occurs
function waitForScroll()
{
addEventListener("scroll", function() {
if (!window.pageYOffset)
return;
removeEventListener("scroll", arguments.callee, false);
setTimeout(runTest, 100);
}, false);
}
function waitForMenuChange(expectedCount, expectedFirstValue)
{
notifyMenuChanged(expectedCount, expectedFirstValue, runTest);
}
function checkMenuEntries(expectedValues, testNum) {
var actualValues = getMenuEntries();
is(actualValues.length, expectedValues.length, testNum + " Checking length of expected menu");
for (var i = 0; i < expectedValues.length; i++)
is(actualValues[i], expectedValues[i], testNum + " Checking menu entry #"+i);
}
function startTest() {
setupFormHistory(function() {
runTest();
});
}
window.onload = startTest;
SimpleTest.waitForExplicitFinish();
SimpleTest.requestFlakyTimeout("untriaged");
</script>
</pre>
</body>
</html>