fix(SlippageSelector): fixup custom input focus and tests

storybook/pages/SlippageSelectorPage.qml

@@ -20,8 +20,7 @@ SplitView {
         SplitView.fillHeight: true
 
         SlippageSelector {
-            id: buttonRow
+            id: slippageSelector
-
             anchors.centerIn: parent
         }
     }
@@ -38,12 +37,12 @@ SplitView {
             Label {
                 Layout.fillWidth: true
                 font.weight: Font.Medium
-                text: "Value: %1".arg(buttonRow.value)
+                text: "Value: %1".arg(slippageSelector.value)
             }
             Label {
                 Layout.fillWidth: true
                 font.weight: Font.Medium
-                text: "Valid: " + buttonRow.valid//"%1".arg(buttonRow.valid ? "true" : "false")
+                text: "Valid: %1".arg(slippageSelector.valid ? "true" : "false")
             }
 
             ColumnLayout {
@@ -52,11 +51,16 @@ SplitView {
 
                     Button {
                         text: "set " + modelData
-                        onClicked: buttonRow.value = modelData
+                        onClicked: slippageSelector.value = modelData
                     }
                 }
             }
 
+            Button {
+                text: "Reset defaults"
+                onClicked: slippageSelector.reset()
+            }
+
             Item { Layout.fillHeight: true }
         }
     }

storybook/qmlTests/tests/tst_SlippageSelector.qml

@@ -12,30 +12,25 @@ Item {
 
     Component {
         id: componentUnderTest
-        StatusButtonRow {
+        SlippageSelector {
             anchors.centerIn: parent
         }
     }
 
-    property StatusButtonRow controlUnderTest: null
+    property SlippageSelector controlUnderTest: null
 
     TestCase {
-        name: "StatusButtonRow"
+        name: "SlippageSelector"
         when: windowShown
 
         function init() {
             controlUnderTest = createTemporaryObject(componentUnderTest, root)
         }
 
-        function test_basicGeometry() {
+        function test_basicSetup() {
             verify(!!controlUnderTest)
             verify(controlUnderTest.width > 0)
             verify(controlUnderTest.height > 0)
-        }
-
-        function test_defaultValueIsCurrentAndValid() {
-            verify(!!controlUnderTest)
-            verify(controlUnderTest.currentValue === controlUnderTest.defaultValue)
             verify(controlUnderTest.valid)
         }
 
@@ -43,13 +38,14 @@ Item {
             verify(!!controlUnderTest)
             const buttonsRepeater = findChild(controlUnderTest, "buttonsRepeater")
             verify(!!buttonsRepeater)
+            waitForRendering(buttonsRepeater)
             for (let i = 0; i < buttonsRepeater.count; i++) {
                 const button = buttonsRepeater.itemAt(i)
                 verify(!!button)
                 mouseClick(button)
                 tryCompare(button, "checked", true)
                 tryCompare(button, "type", StatusBaseButton.Type.Primary)
-                tryCompare(controlUnderTest, "currentValue", controlUnderTest.model[i])
+                tryCompare(controlUnderTest, "value", button.value)
                 verify(controlUnderTest.valid)
             }
         }
@@ -69,7 +65,7 @@ Item {
             keyClick(Qt.Key_4)
             keyClick(Qt.Key_2)
 
-            tryCompare(controlUnderTest, "currentValue", 1.42)
+            tryCompare(controlUnderTest, "value", 1.42)
             verify(controlUnderTest.valid)
 
             // delete contents (4x)
@@ -85,80 +81,51 @@ Item {
             // click again the first button
             const buttonsRepeater = findChild(controlUnderTest, "buttonsRepeater")
             verify(!!buttonsRepeater)
+            waitForRendering(buttonsRepeater)
             const firstButton = buttonsRepeater.itemAt(0)
             verify(!!firstButton)
             mouseClick(firstButton)
-            tryCompare(controlUnderTest, "currentValue", firstButton.value)
+            tryCompare(controlUnderTest, "value", firstButton.value)
             verify(controlUnderTest.valid)
         }
 
-        function test_setCustomInitialValue() {
+        function test_setCustomValue() {
-            controlUnderTest.destroy()
+            const theValue = 1.42
-            controlUnderTest = createTemporaryObject(componentUnderTest, root, {currentValue: 1.42})
 
             verify(!!controlUnderTest)
             verify(controlUnderTest.valid)
+            controlUnderTest.value = theValue
+
             const customInput = findChild(controlUnderTest, "customInput")
             verify(!!customInput)
             tryCompare(customInput, "cursorVisible", true)
-            tryCompare(customInput, "value", 1.42)
+            tryCompare(customInput, "value", theValue)
+
+            verify(controlUnderTest.value, theValue)
+            verify(controlUnderTest.valid)
         }
 
         function test_resetDefaults() {
             verify(!!controlUnderTest)
+            const initialValue = controlUnderTest.value
             const buttonsRepeater = findChild(controlUnderTest, "buttonsRepeater")
             verify(!!buttonsRepeater)
+            waitForRendering(buttonsRepeater)
             const firstButton = buttonsRepeater.itemAt(0)
-            verify(!!firstButton)
+            waitForRendering(firstButton)
+            tryCompare(firstButton, "visible", true)
             mouseClick(firstButton)
-            tryCompare(controlUnderTest, "currentValue", firstButton.value)
+            tryCompare(controlUnderTest, "value", firstButton.value)
-            tryCompare(controlUnderTest, "currentValue", controlUnderTest.model[0])
 
             controlUnderTest.reset()
-            tryCompare(controlUnderTest, "currentValue", controlUnderTest.defaultValue)
+            tryCompare(controlUnderTest, "value", initialValue)
             verify(controlUnderTest.valid)
-        }
-
-        function test_customSymbolValue() {
-            const customSymbol = "+++"
-            verify(!!controlUnderTest)
-            controlUnderTest.symbolValue = customSymbol
-
-            const buttonsRepeater = findChild(controlUnderTest, "buttonsRepeater")
-            verify(!!buttonsRepeater)
-            for (let i = 0; i < buttonsRepeater.count; i++) {
-                const button = buttonsRepeater.itemAt(i)
-                verify(!!button)
-                verify(button.text.endsWith(customSymbol))
-            }
 
             const customButton = findChild(controlUnderTest, "customButton")
-            verify(!!customButton)
+            tryCompare(customButton, "visible", true)
-            mouseClick(customButton)
+
             const customInput = findChild(controlUnderTest, "customInput")
-            verify(!!customInput)
+            tryCompare(customInput, "visible", false)
-            verify(customInput.currencySymbol === customSymbol)
-        }
-
-        function test_customModel() {
-            controlUnderTest.destroy()
-            controlUnderTest = createTemporaryObject(componentUnderTest, root,
-                                                     {model: [.1, .2, .3, .4, .5]})
-
-            verify(!!controlUnderTest)
-            verify(controlUnderTest.currentValue === controlUnderTest.defaultValue)
-            verify(controlUnderTest.valid)
-
-            const buttonsRepeater = findChild(controlUnderTest, "buttonsRepeater")
-            verify(!!buttonsRepeater)
-            verify(buttonsRepeater.count === controlUnderTest.model.length)
-            const firstButton = buttonsRepeater.itemAt(0)
-            verify(!!firstButton)
-            mouseClick(firstButton)
-            tryCompare(firstButton, "checked", true)
-            tryCompare(controlUnderTest, "currentValue", firstButton.value)
-            tryCompare(controlUnderTest, "currentValue", controlUnderTest.model[0])
-            verify(controlUnderTest.valid)
         }
     }
 }

ui/imports/shared/controls/SlippageSelector.qml

@@ -7,10 +7,14 @@ import StatusQ.Controls 0.1
 Control {
     id: root
 
-    property double value: 0.5
+    property double value: d.defaultValue
-    readonly property bool valid: customInput.visible && customInput.valid
+    readonly property bool valid: customInput.activeFocus && customInput.valid
                                   || buttons.value !== null
 
+    function reset() {
+        value = d.defaultValue
+    }
+
     onValueChanged: {
         if (d.internalUpdate)
             return false
@@ -20,13 +24,14 @@ Control {
         if (custom) {
             customButton.visible = false
             customInput.value = value
+            customInput.forceActiveFocus()
         } else {
             customButton.visible = true
         }
     }
 
     Component.onCompleted: {
-        buttons.model.append(d.values.map(i => ({ text: "%L1 %2".arg(i).arg(d.customSymbol), value: i })))
+        buttons.model.append(d.values.map((i) => ({ text: "%L1 %2".arg(i).arg(d.customSymbol), value: i })))
         valueChanged()
     }
 
@@ -35,6 +40,7 @@ Control {
 
         readonly property string customSymbol: "%"
         readonly property var values: [0.1, 0.5, 1]
+        readonly property double defaultValue: 0.5
         property bool internalUpdate: false
 
         function update(value) {
@@ -44,16 +50,16 @@ Control {
         }
     }
 
+    background: null
     contentItem: RowLayout {
         spacing: buttons.spacing
 
         StatusButtonRow {
             id: buttons
-
             model: ListModel {}
 
             Binding on value {
-                value: customInput.visible ? null : root.value
+                value: customInput.activeFocus ? null : root.value
             }
 
             onValueChanged: {
@@ -89,7 +95,12 @@ Control {
             maxValue: 100.0
             currencySymbol: d.customSymbol
             onValueChanged: d.update(value)
-            onFocusChanged: if (focus) d.update(value)
+            onFocusChanged: {
+                if (focus && valid)
+                    d.update(value)
+                else if (!valid)
+                    clear()
+            }
         }
     }
 }