Token/Asset selectors fixes

- clear search on close (AssetSelectorCompact) - sectionProperty removed - highlighting fixed in TokenSelectorPanel - setCustom renamed to setSelection - test data moved into Component object
status-im · Sep 23, 2024 · 00fe754 · 00fe754
1 parent 249e1ae
commit 00fe754
Show file tree

Hide file tree

Showing 13 changed files with 170 additions and 165 deletions.
diff --git a/storybook/pages/AssetSelectorCompactPage.qml b/storybook/pages/AssetSelectorCompactPage.qml
@@ -23,7 +23,7 @@ Pane {
                 }
             ],
 
-            sectionText: "My assets on Mainnet"
+            sectionName: "My assets on Mainnet"
         },
         {
             tokensKey: "key_2",
@@ -41,7 +41,7 @@ Pane {
                 }
             ],
 
-            sectionText: "My assets on Mainnet"
+            sectionName: "My assets on Mainnet"
         },
         {
             tokensKey: "key_2",
@@ -53,7 +53,7 @@ Pane {
             tokensKey: "DAI",
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         },
         {
             tokensKey: "key_3",
@@ -65,7 +65,7 @@ Pane {
             tokensKey: "ZRX",
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         }
     ]
 
@@ -86,7 +86,6 @@ Pane {
         width: 400
 
         model: assetsModel
-        sectionProperty: "sectionText"
 
         onSelected: console.log("asset selected:", key)
     }

diff --git a/storybook/pages/AssetSelectorPage.qml b/storybook/pages/AssetSelectorPage.qml
@@ -22,7 +22,7 @@ Pane {
                 }
             ],
 
-            sectionText: "My assets on Mainnet"
+            sectionName: "My assets on Mainnet"
         },
         {
             tokensKey: "eth_key",
@@ -39,7 +39,7 @@ Pane {
                 }
             ],
 
-            sectionText: "My assets on Mainnet"
+            sectionName: "My assets on Mainnet"
         },
         {
             tokensKey: "dai_key",
@@ -50,7 +50,7 @@ Pane {
             iconSource: Constants.tokenIcon("DAI"),
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         },
         {
             tokensKey: "zrx_key",
@@ -61,7 +61,7 @@ Pane {
             iconSource: Constants.tokenIcon("ZRX"),
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         }
     ]
 
@@ -81,7 +81,6 @@ Pane {
         anchors.centerIn: parent
 
         model: assetsModel
-        sectionProperty: "sectionText"
 
         onSelected: console.log("asset selected:", key)
     }

diff --git a/storybook/pages/SearchableAssetsPanelPage.qml b/storybook/pages/SearchableAssetsPanelPage.qml
@@ -29,7 +29,7 @@ Pane {
                 }
             ],
 
-            sectionText: ""
+            sectionName: ""
         },
         {
             tokensKey: "eth_key",
@@ -53,7 +53,7 @@ Pane {
                 }
             ],
 
-            sectionText: ""
+            sectionName: ""
         },
         {
             tokensKey: "dai_key",
@@ -64,7 +64,7 @@ Pane {
             iconSource: Constants.tokenIcon("DAI"),
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         },
         {
             tokensKey: "zrx_key",
@@ -75,7 +75,7 @@ Pane {
             iconSource: Constants.tokenIcon("ZRX"),
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         }
     ]
 
@@ -102,7 +102,6 @@ Pane {
         highlightedKey: "key_2"
 
         model: assetsModel
-        sectionProperty: "sectionText"
 
         onSelected: console.log("selected:", key)
     }

diff --git a/storybook/qmlTests/tests/tst_AssetSelector.qml b/storybook/qmlTests/tests/tst_AssetSelector.qml
@@ -12,68 +12,65 @@ Item {
     width: 600
     height: 600
 
-    readonly property var assetsData: [
-        {
-            tokensKey: "stt_key",
-            communityId: "",
-            name: "Status Test Token",
-            currencyBalanceAsString: "42,23 USD",
-            symbol: "STT",
-            iconSource: Constants.tokenIcon("STT"),
-
-            balances: [
-                {
-                    balanceAsString: "0,56",
-                    iconUrl: "network/Network=Ethereum"
-                }
-            ],
-
-            sectionText: "My assets on Mainnet"
-        },
-        {
-            tokensKey: "eth_key",
-            communityId: "",
-            name: "Ether",
-            currencyBalanceAsString: "4 276,86 USD",
-            symbol: "ETH",
-            iconSource: Constants.tokenIcon("ETH"),
-
-            balances: [
-                {
-                    balanceAsString: "0,12",
-                    iconUrl: "network/Network=Ethereum"
-                }
-            ],
-
-            sectionText: "My assets on Mainnet"
-        },
-        {
-            tokensKey: "dai_key",
-            communityId: "",
-            name: "Dai Stablecoin",
-            currencyBalanceAsString: "45,92 USD",
-            symbol: "DAI",
-            iconSource: Constants.tokenIcon("DAI"),
-            balances: [],
-
-            sectionText: "Popular assets"
-        }
-    ]
-
-    ListModel {
-        id: assetsModel
-
-        Component.onCompleted: append(assetsData)
-    }
-
     Component {
         id: selectorCmp
 
         AssetSelector {
             id: selector
 
             anchors.centerIn: parent
-            model: assetsModel
+
+            readonly property var assetsData: [
+                {
+                    tokensKey: "stt_key",
+                    communityId: "",
+                    name: "Status Test Token",
+                    currencyBalanceAsString: "42,23 USD",
+                    symbol: "STT",
+                    iconSource: Constants.tokenIcon("STT"),
+
+                    balances: [
+                        {
+                            balanceAsString: "0,56",
+                            iconUrl: "network/Network=Ethereum"
+                        }
+                    ],
+
+                    sectionName: "My assets on Mainnet"
+                },
+                {
+                    tokensKey: "eth_key",
+                    communityId: "",
+                    name: "Ether",
+                    currencyBalanceAsString: "4 276,86 USD",
+                    symbol: "ETH",
+                    iconSource: Constants.tokenIcon("ETH"),
+
+                    balances: [
+                        {
+                            balanceAsString: "0,12",
+                            iconUrl: "network/Network=Ethereum"
+                        }
+                    ],
+
+                    sectionName: "My assets on Mainnet"
+                },
+                {
+                    tokensKey: "dai_key",
+                    communityId: "",
+                    name: "Dai Stablecoin",
+                    currencyBalanceAsString: "45,92 USD",
+                    symbol: "DAI",
+                    iconSource: Constants.tokenIcon("DAI"),
+                    balances: [],
+
+                    sectionName: "Popular assets"
+                }
+            ]
+
+            model: ListModel {
+                Component.onCompleted: append(selector.assetsData)
+            }
 
             readonly property SignalSpy selectedSpy: SignalSpy {
                 target: selector
@@ -89,8 +86,6 @@ Item {
         function test_basic() {
             const selector  = createTemporaryObject(selectorCmp, root)
             selector.nonInteractiveKey = "eth_key"
-            selector.sectionProperty = "sectionText"
-
             compare(selector.isSelected, false)
             waitForRendering(selector)
 
@@ -102,7 +97,6 @@ Item {
             const panel = findChild(selector.Overlay.overlay, "searchableAssetsPanel")
             compare(panel.model, selector.model)
             compare(panel.nonInteractiveKey, selector.nonInteractiveKey)
-            compare(panel.sectionProperty, selector.sectionProperty)
         }
 
         function test_basicSelection() {
@@ -121,7 +115,7 @@ Item {
             const listView = findChild(selector.Overlay.overlay, "assetsListView")
             verify(listView)
 
-            compare(listView.count, root.assetsData.length)
+            compare(listView.count, selector.assetsData.length)
             waitForRendering(listView)
 
             const delegate1 = listView.itemAtIndex(0)
@@ -196,7 +190,7 @@ Item {
             waitForRendering(selector)
 
             const imageUrl = Constants.tokenIcon("DAI")
-            selector.setCustom("Custom", imageUrl, "custom_key")
+            selector.setSelection("Custom", imageUrl, "custom_key")
 
             compare(selector.isSelected, true)
             compare(selector.selectedSpy.count, 0)