developer: add part on mocking data for qt QML

Change-Id: I1a0218689bde77e20fc3203567e05a5130c8b4b5

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

developer/qt-qml-testing-tools.md

 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