tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_creditcard_autocomplete_off.html (3182B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <title>Test basic autofill</title>
      6  <script src="/tests/SimpleTest/SimpleTest.js"></script>
      7  <script src="/tests/SimpleTest/EventUtils.js"></script>
      8  <script type="text/javascript" src="../formautofill_common.js"></script>
      9  <script type="text/javascript" src="../../../../../../toolkit/components/satchel/test/satchel_common.js"></script>
     10  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
     11 </head>
     12 <body>
     13 Form autofill test: simple form credit card autofill
     14 
     15 <script>
     16 "use strict";
     17 
     18 const MOCK_STORAGE = [{
     19  cc: {
     20    "cc-name": "John Doe",
     21    "cc-number": "4929001587121045",
     22    "cc-exp-month": 4,
     23    "cc-exp-year": 2017,
     24  },
     25  expected: {
     26    image: "chrome://formautofill/content/third-party/cc-logo-visa.svg"
     27  },
     28 }, {
     29  cc: {
     30    "cc-name": "Timothy Berners-Lee",
     31    "cc-number": "5103059495477870",
     32    "cc-exp-month": 12,
     33    "cc-exp-year": 2022,
     34  },
     35  expected: {
     36    image: "chrome://formautofill/content/third-party/cc-logo-mastercard.svg"
     37  },
     38 }];
     39 
     40 async function setupCreditCardStorage() {
     41  await addCreditCard(MOCK_STORAGE[0].cc);
     42  await addCreditCard(MOCK_STORAGE[1].cc);
     43 }
     44 
     45 async function setupFormHistory() {
     46  await updateFormHistory([
     47    {op: "add", fieldname: "cc-name", value: "John Smith"},
     48    {op: "add", fieldname: "cc-number", value: "6011029476355493"},
     49  ]);
     50 }
     51 
     52 function replaceStars(str)
     53 {
     54  return str.replaceAll("*", "•")
     55 }
     56 
     57 initPopupListener();
     58 
     59 // Show Form History popup for non-autocomplete="off" field only
     60 add_task(async function history_only_menu_checking() {
     61  await setupFormHistory();
     62 
     63  await setInput("#cc-number", "");
     64  synthesizeKey("KEY_ArrowDown");
     65  await expectPopup();
     66  checkMenuEntries(["6011029476355493"], false);
     67 
     68  await setInput("#cc-name", "");
     69  synthesizeKey("KEY_ArrowDown");
     70  await notExpectPopup();
     71 });
     72 
     73 // Show Form Autofill popup for the credit card fields.
     74 add_task(async function check_menu_when_both_with_autocomplete_off() {
     75  await setupCreditCardStorage();
     76 
     77  await setInput("#cc-number", "");
     78  synthesizeKey("KEY_ArrowDown");
     79  await expectPopup();
     80  checkMenuEntriesComment(MOCK_STORAGE.map(patchRecordCCNumber).map(({ cc, expected }) => JSON.stringify({
     81    primary: replaceStars(cc.ccNumberFmt),
     82    secondary: cc["cc-name"],
     83    ariaLabel: `${getCCTypeName(cc)} ${cc.ccNumberFmt.replaceAll("*", "")} ${cc["cc-name"]}`,
     84    image: expected.image,
     85  })));
     86 
     87  await setInput("#cc-name", "");
     88  synthesizeKey("KEY_ArrowDown");
     89  await expectPopup();
     90  checkMenuEntriesComment(MOCK_STORAGE.map(patchRecordCCNumber).map(({ cc, expected }) => JSON.stringify({
     91    primary: cc["cc-name"],
     92    secondary: replaceStars(cc.ccNumberFmt),
     93    ariaLabel: `${getCCTypeName(cc)} ${cc["cc-name"]} ${cc.ccNumberFmt}`,
     94    image: expected.image,
     95  })));
     96 });
     97 
     98 </script>
     99 
    100 <p id="display"></p>
    101 
    102 <div id="content">
    103  <form id="form1">
    104    <p>This is a Credit Card form with autocomplete="off" cc-name field.</p>
    105    <p><label>Name: <input id="cc-name" autocomplete="off"></label></p>
    106    <p><label>Card Number: <input id="cc-number" autocomplete="cc-number"></label></p>
    107  </form>
    108 </div>
    109 
    110 <pre id="test"></pre>
    111 </body>
    112 </html>