diff options
Diffstat (limited to 'browser/extensions/formautofill/test/mochitest/creditCard/test_preview_highlight_with_multiple_cc_number_fields.html')
-rw-r--r-- | browser/extensions/formautofill/test/mochitest/creditCard/test_preview_highlight_with_multiple_cc_number_fields.html | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/browser/extensions/formautofill/test/mochitest/creditCard/test_preview_highlight_with_multiple_cc_number_fields.html b/browser/extensions/formautofill/test/mochitest/creditCard/test_preview_highlight_with_multiple_cc_number_fields.html new file mode 100644 index 0000000000..c39877d1b7 --- /dev/null +++ b/browser/extensions/formautofill/test/mochitest/creditCard/test_preview_highlight_with_multiple_cc_number_fields.html @@ -0,0 +1,174 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test form autofill - preview and highlight with multiple cc number fields</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: preview and highlight multiple cc number fields + +<script> +"use strict"; + +const MOCK_STORAGE = [{ + "cc-name": "Test Name", + "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_STORAGE_EXPECTED_FILL = [{ + "cc-name": "Test Name", + "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, +}] + +const MOCK_STORAGE_PREVIEW = [{ + "cc-name": "Test Name", + "cc-number": "************1045", + "cc-exp-month": "04", + "cc-exp-year": "2017", +}, { + "cc-name": "Timothy Berners-Lee", + "cc-number": "************7870", + "cc-exp-month": "12", + "cc-exp-year": "2022", +}]; + + +/* + This function is similar to checkFormFieldsStyle in formautofill_common.js, but deals with the case + when one value is spread across multiple fields. + + This function is needed because of the multiple cc-number filling behavior introduced in Bug 1688607. + Since the cc-number is stored as a whole value in the profile, + there has to be specific handling in the test to assert the correct fillable value. + Otherwise, we would try to grab a value out of profile["cc-number1"] which doesn't exist. +*/ +async function checkMultipleCCNumberFormStyle(profile, isPreviewing = true) { + const elements = document.querySelectorAll("input, select"); + for (const element of elements) { + let fillableValue; + if (element.id.includes("cc-number") && isPreviewing) { + fillableValue = profile["cc-number"].slice(-8); + } else if (element.id.includes("cc-number")) { + fillableValue = profile["cc-number"]; + } else { + fillableValue = profile[element.id]; + } + let previewValue = (isPreviewing && fillableValue) || ""; + await checkFieldHighlighted(element, !!fillableValue); + await checkFieldPreview(element, previewValue); + + } +} + +/* + This function sets up 'change' event listeners so that we can safely + assert an element's value after autofilling has occurred. + This is essentially a barebones copy of triggerAutofillAndCheckProfile + that exists in formautofill_common.js. + + We can't use triggerAutofillAndCheckProfile because "cc-number1" through "cc-number4" + do not exist in the profile. + Again, we store the whole cc-number in the profile, not its subsections. + So if we tried to grab the element by ID using "cc-number", this element would not exist in the doc, + causing triggerAutofillAndCheckProfile to throw an exception. +*/ +async function setupListeners(elements, profile) { + for (const element of elements) { + let id = element.id; + element.addEventListener("change", () => { + let filledValue; + if (id == "cc-number1") { + filledValue = profile["cc-number"].slice(0, 4); + } else if (id == "cc-number2") { + filledValue = profile["cc-number"].slice(4, 8); + } else if (id == "cc-number3") { + filledValue = profile["cc-number"].slice(8, 12); + } else if (id == "cc-number4") { + filledValue = profile["cc-number"].slice(12, 16); + } else { + filledValue = profile[element.id]; + } + checkFieldValue(element, filledValue); + }, {once: true}) + } + +} + +initPopupListener(); + +add_task(async function setup_storage() { + await addCreditCard(MOCK_STORAGE[0]); + await addCreditCard(MOCK_STORAGE[1]); +}); + +add_task(async function check_preview() { + let canTest = await canTestOSKeyStoreLogin(); + if (!canTest) { + todo(canTest, "Cannot test OS key store login on official builds."); + return; + } + let popup = expectPopup(); + const focusedInput = await setInput("#cc-name", ""); + await popup; + for (let i = 0; i < MOCK_STORAGE_PREVIEW.length; i++) { + synthesizeKey("KEY_ArrowDown"); + await notifySelectedIndex(i); + await checkMultipleCCNumberFormStyle(MOCK_STORAGE_PREVIEW[i]); + } + + focusedInput.blur(); +}); + +add_task(async function check_filled_highlight() { + let canTest = await canTestOSKeyStoreLogin(); + if (!canTest) { + todo(canTest, "Cannot test OS key store login on official builds."); + return; + } + await triggerPopupAndHoverItem("#cc-name", 0); + let osKeyStoreLoginShown = waitForOSKeyStoreLogin(true); + // filled 1st credit card option + synthesizeKey("KEY_Enter"); + await osKeyStoreLoginShown; + let elements = document.querySelectorAll("input, select"); + let profile = MOCK_STORAGE_EXPECTED_FILL[0]; + await setupListeners(elements, profile); + await checkMultipleCCNumberFormStyle(profile, false); +}); +</script> +<p id="display"></p> +<div id="content"> + + <form id="form1"> + <p>This is a basic credit card form.</p> + <p>card number subsection 1: <input id="cc-number1" maxlength="4"></p> + <p>card number subsection 2: <input id="cc-number2" maxlength="4"></p> + <p>card number subsection 3: <input id="cc-number3" maxlength="4"></p> + <p>card number subsection 4: <input id="cc-number4" maxlength="4"></p> + <p>cardholder name: <input id="cc-name" autocomplete="cc-name"></p> + <p>expiration month: <input id="cc-exp-month" autocomplete="cc-exp-month"></p> + <p>expiration year: <input id="cc-exp-year" autocomplete="cc-exp-year"></p> + </form> +</div> +<pre id="test"></pre> +</body> +</html> |