Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Errors

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test form autofill - clear form button</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script type="text/javascript" src="../formautofill_common.js"></script>
<script type="text/javascript" src="../../../../../../toolkit/components/satchel/test/satchel_common.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
Form autofill test: clear form button
<script>
"use strict";
const MOCK_ADDR_STORAGE = [{
organization: "Sesame Street",
"street-address": "2 Harrison St\nline2\nline3",
tel: "+13453453456",
}, {
organization: "Mozilla",
"street-address": "331 E. Evelyn Avenue",
}, {
organization: "Tel org",
tel: "+12223334444",
}];
const MOCK_CC_STORAGE = [{
"cc-name": "John Doe",
"cc-number": "4929001587121045",
"cc-exp-month": 4,
"cc-exp-year": 2017,
}, {
"cc-name": "Timothy Berners-Lee",
"cc-number": "5103059495477870",
"cc-exp-month": 12,
"cc-exp-year": 2022,
}];
const MOCK_CC_STORAGE_EXPECTED_FILL = [{
"cc-name": "John Doe",
"cc-number": "4929001587121045",
"cc-exp-month": "04",
"cc-exp-year": 2017,
}, {
"cc-name": "Timothy Berners-Lee",
"cc-number": "5103059495477870",
"cc-exp-month": "12",
"cc-exp-year": 2022,
}];
initPopupListener();
add_task(async function setup_storage() {
await addAddress(MOCK_ADDR_STORAGE[0]);
await addAddress(MOCK_ADDR_STORAGE[1]);
await addAddress(MOCK_ADDR_STORAGE[2]);
await addCreditCard(MOCK_CC_STORAGE[0]);
await addCreditCard(MOCK_CC_STORAGE[1]);
});
async function checkIsFormCleared(patch = {}) {
const form = document.getElementById("form1");
for (const elem of form.elements) {
const expectedValue = patch[elem.id] || "";
checkFieldValue(elem, expectedValue);
await checkFieldHighlighted(elem, false);
}
}
async function confirmClear(selector) {
info("Await for clearing input");
let promise = new Promise(resolve => {
let beforeInputFired = false;
let element = document.querySelector(selector);
element.addEventListener("beforeinput", (event) => {
beforeInputFired = true;
ok(event instanceof InputEvent,
'"beforeinput" event should be dispatched with InputEvent interface');
is(event.cancelable, SpecialPowers.getBoolPref("dom.input_event.allow_to_cancel_set_user_input"),
`"beforeinput" event should be cancelable unless it's disabled by the pref`);
is(event.bubbles, true,
'"beforeinput" event should always bubble');
is(event.inputType, "insertReplacementText",
'inputType value of "beforeinput" should be "insertReplacementText"');
is(event.data, "",
'data value of "beforeinput" should be empty string');
is(event.dataTransfer, null,
'dataTransfer value of "beforeinput" should be null');
is(event.getTargetRanges().length, 0,
'getTargetRanges() of "beforeinput" event should return empty array');
}, {once: true});
element.addEventListener("input", (event) => {
ok(beforeInputFired, `"beforeinput" event should've been fired before "input" on <${element.tagName} type="${element.type}">`);
ok(event instanceof InputEvent,
'"input" event should be dispatched with InputEvent interface');
is(event.cancelable, false,
'"input" event should be never cancelable');
is(event.bubbles, true,
'"input" event should always bubble');
is(event.inputType, "insertReplacementText",
'inputType value of "input" should be "insertReplacementText"');
is(event.data, "",
'data value of "input" should be empty string');
is(event.dataTransfer, null,
'dataTransfer value of "input" should be null');
is(event.getTargetRanges().length, 0,
'getTargetRanges() of "input" should return empty array');
resolve();
}, {once: true})
});
synthesizeKey("KEY_Enter");
await promise;
}
add_task(async function simple_clear() {
await triggerPopupAndHoverItem("#organization", 0);
await triggerAutofillAndCheckProfile(MOCK_ADDR_STORAGE[0]);
await triggerPopupAndHoverItem("#tel", 0);
await confirmClear("#tel");
await checkIsFormCleared();
// Ensure the correctness of the autocomplete popup after the form is cleared
synthesizeKey("KEY_ArrowDown");
await expectPopup();
is(4, getMenuEntries().labels.length, `Checking length of expected menu`);
});
add_task(async function clear_adapted_record() {
await triggerPopupAndHoverItem("#street-address", 0);
await triggerAutofillAndCheckProfile(MOCK_ADDR_STORAGE[0]);
await triggerPopupAndHoverItem("#street-address", 0);
await confirmClear("#street-address");
await checkIsFormCleared();
});
add_task(async function clear_modified_form() {
await triggerPopupAndHoverItem("#organization", 0);
await triggerAutofillAndCheckProfile(MOCK_ADDR_STORAGE[0]);
await setInput("#tel", "+1111111111", true);
await triggerPopupAndHoverItem("#street-address", 0);
await confirmClear("#street-address");
await checkIsFormCleared({tel: "+1111111111"});
});
add_task(async function clear_distinct_section() {
if (!(await canTestOSKeyStoreLogin())) {
todo(false, "Cannot test OS key store login on official builds.");
return;
}
document.getElementById("form1").reset();
await triggerPopupAndHoverItem("#cc-name", 0);
let osKeyStoreLoginShown = Promise.resolve();
if(OSKeyStore.canReauth()) {
osKeyStoreLoginShown = waitForOSKeyStoreLogin(true);
await waitForOSKeyStoreLoginTestSetupComplete();
}
await triggerAutofillAndCheckProfile(MOCK_CC_STORAGE_EXPECTED_FILL[0]);
await osKeyStoreLoginShown;
await triggerPopupAndHoverItem("#organization", 0);
await triggerAutofillAndCheckProfile(MOCK_ADDR_STORAGE[0]);
await triggerPopupAndHoverItem("#street-address", 0);
await confirmClear("#street-address");
for (const [id, val] of Object.entries(MOCK_CC_STORAGE_EXPECTED_FILL[0])) {
const element = document.getElementById(id);
if (!element) {
return;
}
checkFieldValue(element, val);
await checkFieldHighlighted(element, true);
}
await triggerPopupAndHoverItem("#cc-name", 0);
await confirmClear("#cc-name");
await checkIsFormCleared();
// Enforcing this since it is unable to change back in chaos mode.
SpecialPowers.clearUserPref("toolkit.osKeyStore.unofficialBuildOnlyLogin");
});
</script>
<p id="display"></p>
<div id="content">
<form id="form1">
<p>This is a basic form.</p>
<p><label>organization: <input id="organization" autocomplete="organization"></label></p>
<p><label>streetAddress: <input id="street-address" autocomplete="street-address"></label></p>
<p><label>tel: <input id="tel" autocomplete="tel"></label></p>
<p><label>country: <input id="country" autocomplete="country"></label></p>
<p><label>Name: <input id="cc-name" autocomplete="cc-name"></label></p>
<p><label>Card Number: <input id="cc-number" autocomplete="cc-number"></label></p>
<p><label>Expiration month: <input id="cc-exp-month" autocomplete="cc-exp-month"></label></p>
<p><label>Expiration year: <input id="cc-exp-year" autocomplete="cc-exp-year"></label></p>
<p><label>CSC: <input id="cc-csc" autocomplete="cc-csc"></label></p>
</form>
</div>
<pre id="test"></pre>
</body>
</html>