From ab448c2b8cabd38450c7adb7b1a88679f39b7cc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Blin?=
 <sebastien.blin@savoirfairelinux.com>
Date: Tue, 13 Feb 2024 10:22:04 -0500
Subject: [PATCH] developer: add part on mocking data for qt QML

Change-Id: I1a0218689bde77e20fc3203567e05a5130c8b4b5
---
 developer/index.rst               |  1 +
 developer/qt-qml-testing-tools.md | 77 ++++++++++++++++++++++++++++++-
 2 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/developer/index.rst b/developer/index.rst
index d5ee50c5..8be2a722 100644
--- a/developer/index.rst
+++ b/developer/index.rst
@@ -14,6 +14,7 @@ designed and how its various parts work together.
    apis-of-jami
    account-management
    contact-management
+   design-process
    swarm
    drt
    calls
diff --git a/developer/qt-qml-testing-tools.md b/developer/qt-qml-testing-tools.md
index fcd43784..79950ddd 100644
--- a/developer/qt-qml-testing-tools.md
+++ b/developer/qt-qml-testing-tools.md
@@ -1,6 +1,79 @@
 Qt and QML testing tools
 ========================
 
+## QML
+
+qml_tests launch all the tests related to the interface. The daemon and libclient SHOULD be trusted in this part, we do not want to test scenarios related to connectivity. Ideally, we should work on fake data to avoid depending on network events. This may be difficult sometimes and some tools may be missed because tests in this part are a work in progress. Here are some tools/principles to be able to quickly write tests.
+
+### Mocking Data
+
+Let's say I want to test the UI for an AccountComboBox depending on a list of accounts. Instead of creating accounts, we should create a fake list.
+The easy way to do this is to serialize/unserialize a real AccountComboBox model. First, we need to get a serialized model:
+
+```
+diff --git a/src/app/mainview/components/AccountComboBoxPopup.qml b/src/app/mainview/components/AccountComboBoxPopup.qml
+index 2f1b633a..0df2594d 100644
+--- a/src/app/mainview/components/AccountComboBoxPopup.qml
++++ b/src/app/mainview/components/AccountComboBoxPopup.qml
+@@ -43,6 +43,15 @@ Popup {
+         color: JamiTheme.transparentColor
+     }
+
++    function saveModel() {
++        var modelData = []
++        for (var i = 0; i < listView.model.count; ++i) {
++            modelData.push(listView.model.get(i))
++        }
++        var json = JSON.stringify(modelData)
++        console.warn(json)
++    }
++
+     focus: true
+     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
+@@ -241,6 +250,7 @@ Popup {
+                 width: root.width
+                 onClicked: {
+                     root.close();
++                    root.saveModel();
+                     LRCInstance.currentAccountId = ID;
+                 }
+             }
+```
+
+`saveModel()` will print the serialized structure whenever the developer will click on the combobox. Here's the result:
+
+```json
+[{"Alias":"AmarOk","ID":"a2d724d18a943e6c","NotificationCount":0,"Status":5,"Type":1,"Username":"amarok"},{"Alias":"Munnin","ID":"8a22b7d0176327db","NotificationCount":0,"Status":5,"Type":1,"Username":"munnin"},{"Alias":"TEST JAMI","ID":"3b7d2b9e2af83a47","NotificationCount":0,"Status":5,"Type":2,"Username":"696"},{"Alias":"Sébastien Blin","ID":"131ad59045a9a146","NotificationCount":0,"Status":5,"Type":1,"Username":"sblin"}]
+```
+
+Now, the developper can easily use it in a test. The best way is to add this data in a variable or a separated js file (cf https://doc.qt.io/qt-6/qtqml-documents-networktransparency.html). And use it in a test e.g.:
+
+```qml
+TestWrapper {
+    AccountComboBoxPopup {
+        id: uut
+
+        function loadMockData() {
+            return JSON.parse('[\
+                {"Alias":"Foo","ID":"a2d724d18a943e6c","NotificationCount":0,"Status":5,"Type":1,"Username":"foo"}, \
+                {"Alias":"Bar","ID":"8a22b7d0176327db","NotificationCount":0,"Status":5,"Type":1,"Username":"bar"}, \
+                {"Alias":"TEST JAMI","ID":"3b7d2b9e2af83a47","NotificationCount":0,"Status":5,"Type":2,"Username":"696"}, \
+                {"Alias":"Whatever","ID":"131ad59045a9a146","NotificationCount":0,"Status":5,"Type":1,"Username":"whatever"}]')
+        }
+
+        TestCase {
+            name: "Check model size"
+            function test_checkModelSize() {
+                var accountList = findChild(uut, "accountList")
+                accountList.model = uut.loadMockData()
+                compare(accountList.model.length, 4)
+            }
+        }
+    }
+}
+```
+
 ## C++
 
 ### Google Test
@@ -29,12 +102,12 @@ int main(int argc, char *argv[])
 }
 ```
 
-## QML 
+## QML
 
 ### QtQuickTest
 
 #### Installation
-- Ubuntu / Debian: `apt install qml-module-qqtest libqt5quicktest5` 
+- Ubuntu / Debian: `apt install qml-module-qqtest libqt5quicktest5`
 
 - Example main.cpp
 ```
-- 
GitLab