XWIKI-22121: Improve the registration experience

* Improved consistency of the test with LinkedHashMaps. * Fixed the issue with mustMatch fields status not being updated when their pair was updated.
xwiki · Nov 21, 2024 · bb85135 · bb85135
1 parent 45ef3b0
commit bb85135
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/...t/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/AbstractRegistrationPage.java b/...t/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/AbstractRegistrationPage.java
@@ -19,7 +19,7 @@
  */
 package org.xwiki.test.ui.po;
 
-import java.util.HashMap;
+import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
 
@@ -65,7 +65,7 @@ public void fillInJohnSmithValues()
     public void fillRegisterForm(final String firstName, final String lastName, final String username,
         final String password, final String confirmPassword, final String email)
     {
-        Map<String, String> map = new HashMap<String, String>();
+        Map<String, String> map = new LinkedHashMap<String, String>();
         // remove the onfocus on login, to avoid any problem to put the value.
         getDriver().executeJavascript("try{ document.getElementById('xwikiname').onfocus = null; " +
             "}catch(err){}");
@@ -78,12 +78,14 @@ public void fillRegisterForm(final String firstName, final String lastName, fina
         if (StringUtils.isNotEmpty(username)) {
             map.put("xwikiname", username);
         }
-        if (StringUtils.isNotEmpty(password)) {
-            map.put("register_password", password);
-        }
+        // We invert the order of password fields fill to test that the validation of this second password is properly
+        // updated when the first password field is changed.
         if (StringUtils.isNotEmpty(confirmPassword)) {
             map.put("register2_password", confirmPassword);
         }
+        if (StringUtils.isNotEmpty(password)) {
+            map.put("register_password", password);
+        }
         if (StringUtils.isNotEmpty(email)) {
             map.put("register_email", email);
         }

diff --git a/...-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/FormContainerElement.java b/...-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/FormContainerElement.java
@@ -22,6 +22,7 @@
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.HashMap;
+import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.Set;
@@ -72,7 +73,7 @@ protected WebElement getFormElement()
 
     public void fillFieldsByName(Map<String, String> valuesByNames)
     {
-        Map<WebElement, String> valuesByElements = new HashMap<>((int) (valuesByNames.size() / 0.75));
+        Map<WebElement, String> valuesByElements = new LinkedHashMap<>((int) (valuesByNames.size() / 0.75));
 
         for (String name : valuesByNames.keySet()) {
             valuesByElements.put(getFormElement().findElement(By.name(name)), valuesByNames.get(name));

diff --git a/...platform-web/xwiki-platform-web-templates/src/main/resources/templates/register_macros.vm b/...platform-web/xwiki-platform-web-templates/src/main/resources/templates/register_macros.vm
@@ -300,6 +300,14 @@ $xwiki.get('ssfx').use('uicomponents/widgets/validation/livevalidation.css', tru
           #if ($mustMatch.name && $mustMatch.failureMessage && !$mustMatch.noscript)
             ${fieldName}Validator.add(Validate.Confirmation, {match: $$("input[name=$!mustMatch.name]")[0],
               failureMessage: "$!mustMatch.failureMessage", identifier: 'must-match'});
+            // We want to update the validation status of the field when its mustmatch field is updated.
+            // We use the 'blur' event, which is the same as the one used to trigger validation in
+            // livevalidation_prototype.js 
+            $$("input[name=$!mustMatch.name]")[0].on("blur", function() {
+              // Somehow in this context I couldn't get the 'trigger' function from jquery to work
+              // so instead we trigger the event with native javascript.
+              $$("input[name=$!fieldName]")[0].dispatchEvent(new Event("blur"));
+            });
           #end
         #end
         ##