fix(wallet): fix rename account modal states

Considerations: - Change validation mode for StatusText to have validity from the start - Don't show a color selection if the selected color doesn't match the available color palette - Don't enable button if nothing changed - Tests - Add test for validation mode that shows how the valid property behaves based on findings. - Fix text to expect valid on no input for the default control Fixes: #8211
status-im · Jan 5, 2023 · 16af9df · 16af9df
1 parent 297280c
commit 16af9df
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 57 deletions.
diff --git a/ui/StatusQ/tests/TestControls/tst_test-StatusImageCrop.qml b/ui/StatusQ/tests/TestControls/tst_test-StatusImageCrop.qml
@@ -31,7 +31,7 @@ Item {
             Component.onCompleted: setCropRect(Qt.rect(10, 0, sourceSize.width - 20, sourceSize.height))
         }
     }
-    
+
     Loader {
         id: testLoader
 

diff --git a/ui/StatusQ/tests/TestControls/tst_test-StatusInput.qml b/ui/StatusQ/tests/TestControls/tst_test-StatusInput.qml
@@ -7,110 +7,162 @@ import StatusQ.Controls.Validators 0.1
 import StatusQ.TestHelpers 0.1
 
 Item {
+    id: root
+
     width: 300
     height: 100
 
-    property int _defaultValidationMode
-
-    Component.onCompleted: {
-        _defaultValidationMode = statusInput.validationMode
-    }
-    StatusInput {
-        id: statusInput
-        label: "Control under test"
-        charLimit: 30
-        placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
-        focus: true
-
-        validators: [
-            StatusRegularExpressionValidator {
-                regularExpression: /^[0-9A-Za-z_\$-\s]*$/
-            }
-        ]
+    function loadControl(test, sourceComponent) {
+        let testItem = test.createTemporaryObject(sourceComponent, root)
+        test.verify(test.waitForRendering(testItem))
+        test.mouseClick(testItem)
+        return testItem
     }
 
     TestCase {
         id: regexTC
 
+        property StatusInput testControl: null
+
         name: "RegexValidationTest"
 
         when: windowShown
 
+        Component {
+            id: defaultComponent
+
+            StatusInput {
+                label: "Control under test"
+                charLimit: 30
+                placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
+
+                anchors.fill: parent
+                focus: true
+
+                validators: [
+                    StatusRegularExpressionValidator {
+                        regularExpression: /^[0-9A-Za-z_\$-\s]*$/
+                    }
+                ]
+            }
+        }
+
         //
         // Test guards
+
         function init() {
             qtOuput.restartCapturing()
-            mouseClick(statusInput)
-        }
-
-        function cleanup() {
-            statusInput.text = ""
-            statusInput.validationMode = _defaultValidationMode
+            regexTC.testControl = root.loadControl(regexTC, defaultComponent)
         }
 
         //
         // Tests
         function test_initial_empty_is_valid() {
-            verify(statusInput.valid, "Expected valid input")
+            verify(!regexTC.testControl.valid, "Expected valid input")
+
+            verify(qtOuput.qtOuput().length === 0, `No output expected. Found:\n"${qtOuput.qtOuput()}"\n`)
         }
 
         function test_regex_validation() {
-            TestUtils.pressKeyAndWait(regexTC, statusInput, Qt.Key_1)
-            verify(statusInput.valid, "Expected valid input")
-            TestUtils.pressKeyAndWait(regexTC, statusInput, Qt.Key_Ampersand)
-            verify(!statusInput.valid, "Expected invalid input")
+            TestUtils.pressKeyAndWait(regexTC, regexTC.testControl, Qt.Key_1)
+            verify(regexTC.testControl.valid, "Expected valid input")
+            TestUtils.pressKeyAndWait(regexTC, regexTC.testControl, Qt.Key_Ampersand)
+            verify(!regexTC.testControl.valid, "Expected invalid input")
+
+            verify(qtOuput.qtOuput().length === 0, `No output expected. Found:\n"${qtOuput.qtOuput()}"\n`)
         }
 
         function test_no_invalid_input() {
-            statusInput.validationMode = StatusInput.ValidationMode.IgnoreInvalidInput
-
-            verify(statusInput.valid, "Expected valid input")
-            verify(statusInput.text.length === 0, "Expected no input")
-            TestUtils.pressKeyAndWait(regexTC, statusInput, Qt.Key_2)
-            verify(statusInput.valid, "Expected valid input")
-            verify(statusInput.text === "2", "Expect one character")
-            TestUtils.pressKeyAndWait(regexTC, statusInput, Qt.Key_Ampersand)
-            verify(statusInput.valid, "Expected invalid input")
-            verify(statusInput.text === "2", "Expect the same input")
+            regexTC.testControl.validationMode = StatusInput.ValidationMode.IgnoreInvalidInput
+
+            verify(regexTC.testControl.valid, "Expected valid input")
+            verify(regexTC.testControl.text.length === 0, "Expected no input")
+            TestUtils.pressKeyAndWait(regexTC, regexTC.testControl, Qt.Key_2)
+            verify(regexTC.testControl.valid, "Expected valid input")
+            verify(regexTC.testControl.text === "2", "Expect one character")
+            TestUtils.pressKeyAndWait(regexTC, regexTC.testControl, Qt.Key_Ampersand)
+            verify(regexTC.testControl.valid, "Expected invalid input")
+            verify(regexTC.testControl.text === "2", "Expect the same input")
+
+            verify(qtOuput.qtOuput().length === 0, `No output expected. Found:\n"${qtOuput.qtOuput()}"\n`)
         }
 
-        // Use case expected in case new validation changes are enabled with old unvalid data
+        // Use case expected in case new validation changes are enabled with old invalid data
         function test_user_can_delete_initial_invalid_input() {
             const appendInvalidChars = "#@!*"
 
-            statusInput.text = "invalid $" + appendInvalidChars
-            TestUtils.pressKeyAndWait(regexTC, statusInput, Qt.Key_End)
-            verify(!statusInput.valid, "Expected invalid input due to characters not matching")
+            regexTC.testControl.text = "invalid $" + appendInvalidChars
+            TestUtils.pressKeyAndWait(regexTC, regexTC.testControl, Qt.Key_End)
+            verify(!regexTC.testControl.valid, "Expected invalid input due to characters not matching")
             // Delete invalid characters to get a valid text
             for(let i = 0; i < appendInvalidChars.length; ++i)
-                TestUtils.pressKeyAndWait(regexTC, statusInput, Qt.Key_Backspace)
-            verify(statusInput.valid, "Expected valid input")
+                TestUtils.pressKeyAndWait(regexTC, regexTC.testControl, Qt.Key_Backspace)
+            verify(regexTC.testControl.valid, "Expected valid input")
+
+            verify(qtOuput.qtOuput().length === 0, `No output expected. Found:\n"${qtOuput.qtOuput()}"\n`)
         }
     }
 
     TestCase {
-        id: qmlWarnTC
+        id: bindedTC
 
-        name: "StatusInput"
+        property StatusInput testControl: null
 
+        name: "BindedValuesTest"
         when: windowShown
 
-        //
-        // Test guards
+        property QtObject dataObject: QtObject {
+            property string text: "Test text"
+            property string emoji: "👍"
+            property string color: "#FF0000"
+        }
 
-        function initTestCase() {
+        Component {
+            id: bindedTextComponent
+
+            StatusInput {
+                charLimit: 10
+                input.isIconSelectable: true
+                placeholderText: qsTr("Enter an account name...")
+                text: bindedTC.dataObject.text
+                input.asset.emoji: bindedTC.dataObject.emoji
+                input.asset.color: bindedTC.dataObject.color
+
+                anchors.fill: parent
+                focus: true
+
+                validators: [
+                    StatusMinLengthValidator {
+                        errorMessage: qsTr("You need to enter an account name")
+                        minLength: 1
+                    },
+                    StatusRegularExpressionValidator {
+                        regularExpression: /^[^<>]+$/
+                        errorMessage: qsTr("This is not a valid account name")
+                    }
+                ]
+            }
         }
 
-        function cleanup() {
-            statusInput.text = ""
-            statusInput.validationMode = _defaultValidationMode
+        //
+        // Test guards
+
+        function init() {
+            bindedTC.testControl = root.loadControl(regexTC, bindedTextComponent)
         }
 
         //
         // Tests
+        function test_assigning_valid_value_works() {
+            qtOuput.restartCapturing()
+
+            verify(!testControl.valid, "Expected input not validated yet")
+            testControl.validationMode = StatusInput.ValidationMode.Always
+            verify(waitForRendering(testControl))
+            verify(testControl.valid, "Expected valid input")
+            bindedTC.dataObject.text = "Test<New"
+            verify(!testControl.valid, "Expected valid input")
 
-        function test_initial_empty_is_valid() {
-            mouseClick(statusInput)
             verify(qtOuput.qtOuput().length === 0, `No output expected. Found:\n"${qtOuput.qtOuput()}"\n`)
         }
     }

diff --git a/ui/app/AppLayouts/Profile/popups/RenameAccontModal.qml b/ui/app/AppLayouts/Profile/popups/RenameAccontModal.qml
@@ -48,6 +48,7 @@ StatusModal {
 
         StatusInput {
             id: accountNameInput
+
             anchors.horizontalCenter: parent.horizontalCenter
             input.edit.objectName: "renameAccountNameInput"
             input.isIconSelectable: true
@@ -56,6 +57,9 @@ StatusModal {
             input.asset.emoji: currentAccount.emoji
             input.asset.color: currentAccount.color
             input.asset.name: !currentAccount.emoji ? "filled-account": ""
+
+            validationMode: StatusInput.ValidationMode.Always
+
             onIconClicked: {
                 popup.emojiPopup.open()
                 popup.emojiPopup.x = popup.x + accountNameInput.x + Style.current.padding
@@ -87,12 +91,12 @@ StatusModal {
                     if(model[i] === currentAccount.color)
                         return i
                 }
+                return -1
             }
             onSelectedColorChanged: {
                 if(selectedColor !== currentAccount.color) {
                     accountNameInput.input.asset.color = selectedColor
                 }
-
             }
         }
 
@@ -109,6 +113,8 @@ StatusModal {
             text: qsTr("Change Name")
 
             enabled: accountNameInput.text !== "" && accountNameInput.valid
+                        && (accountNameInput.text !== currentAccount.name
+                            || (accountColorInput.selectedColorIndex >= 0 && accountColorInput.selectedColor !== currentAccount.color))
 
             MessageDialog {
                 id: changeError
@@ -117,7 +123,7 @@ StatusModal {
                 standardButtons: StandardButton.Ok
             }
 
-            onClicked : {                
+            onClicked : {
                 if (!accountNameInput.valid) {
                      return
                  }