test_onsubmit_value_change.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>Test input value change right after onsubmit event</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <script type="text/javascript" src="../../../satchel/test/satchel_common.js"></script>

  <script type="text/javascript" src="pwmgr_common.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

</head>

<body>

Login Manager test: input value change right after onsubmit event

<script>

  let chromeScriptPromise = runChecksAfterCommonInit();

  async function getSubmitMessage() {

    info("getSubmitMessage");

    let chromeScript = await chromeScriptPromise;

    return new Promise(resolve => {

      chromeScript.addMessageListener("formSubmissionProcessed", function processed(...args) {

        info("got formSubmissionProcessed");

        chromeScript.removeMessageListener("formSubmissionProcessed", processed);

        resolve(args[0]);

});

});

</script>

<p id="display"></p>

<div id="content" style="display: none">

  <form id="form1" action="formTest.js" onsubmit="return false;">

    <input  type="text"     name="uname" id="ufield">

    <input  type="password" name="pword" id="pfield">

    <button type="submit" id="submitBtn">Submit</button>

  </form>

</div>

<pre id="test"></pre>

<script>

  /** Test for Login Manager: input value change right after onsubmit event **/

  add_task(async function checkFormValues() {

    SpecialPowers.wrap(document.getElementById("ufield")).setUserInput("testuser");

    SpecialPowers.wrap(document.getElementById("pfield")).setUserInput("testpass");

    is(getFormElementByName(1, "uname").value, "testuser", "Checking for filled username");

    is(getFormElementByName(1, "pword").value, "testpass", "Checking for filled password");

    document.getElementById("form1").addEventListener("submit", () => {

      // deliberately assign to .value rather than setUserInput:

      // the scenario under test here is that script is changing/populating

      // fields after the user has clicked the submit button

      document.getElementById("ufield").value = "newuser";

      document.getElementById("pfield").value = "newpass";

    }, true);

    document.getElementById("form1").addEventListener("submit", (e) => e.preventDefault());

    let processedPromise = getSubmitMessage();

    let button = document.getElementById("submitBtn");

    button.click();

    let { data } = await processedPromise;

    is(data.usernameField.value, "testuser", "Should have registered \"testuser\" for username");

    is(data.newPasswordField.value, "testpass", "Should have registered \"testpass\" for username");

});

</script>

</body>

</html>