From 2d61d9f0a3497fe1695b108abd9af11749a5371d Mon Sep 17 00:00:00 2001
From: Peder Hveem Alsvik <pehval@Peders-MacBook-Air.local>
Date: Wed, 23 Mar 2022 21:16:51 +0100
Subject: [PATCH 1/3] test: control method returns String[] or empty array

---
 .../webapp/controller/Main.controller.js      |  3 ++
 .../ui5-js-app/webapp/mockdata/countries.json | 36 +++++++++++++++++++
 .../webapp/test/e2e/prop-array.test.js        | 30 ++++++++++++++++
 examples/ui5-js-app/webapp/view/Main.view.xml |  3 ++
 4 files changed, 72 insertions(+)
 create mode 100644 examples/ui5-js-app/webapp/mockdata/countries.json
 create mode 100644 examples/ui5-js-app/webapp/test/e2e/prop-array.test.js

diff --git a/examples/ui5-js-app/webapp/controller/Main.controller.js b/examples/ui5-js-app/webapp/controller/Main.controller.js
index 4c074ead..a9b1396a 100644
--- a/examples/ui5-js-app/webapp/controller/Main.controller.js
+++ b/examples/ui5-js-app/webapp/controller/Main.controller.js
@@ -19,6 +19,9 @@ sap.ui.define(
 
                 let testModel = new JSONModel(jData)
                 this.getView().setModel(testModel, "testModel")
+
+                let multComboBoxModel = new JSONModel(sap.ui.require.toUrl("test/Sample/mockdata/countries.json"))
+                this.getView().setModel(multComboBoxModel, "countries")
             },
 
             navFwd() {
diff --git a/examples/ui5-js-app/webapp/mockdata/countries.json b/examples/ui5-js-app/webapp/mockdata/countries.json
new file mode 100644
index 00000000..654d5fa9
--- /dev/null
+++ b/examples/ui5-js-app/webapp/mockdata/countries.json
@@ -0,0 +1,36 @@
+{
+  "Countries": [
+    {
+      "key": "CH",
+      "text": "China"
+    },
+    {
+      "key": "IN",
+      "text": "India"
+    },
+    {
+      "key": "US",
+      "text": "United States"
+    },
+    {
+      "key": "ID",
+      "text": "Indonesia"
+    },
+    {
+      "key": "PA",
+      "text": "Pakistan"
+    },
+    {
+      "key": "BR",
+      "text": "Brazil"
+    },
+    {
+      "key": "NG",
+      "text": "Nigeria"
+    },
+    {
+      "key": "BA",
+      "text": "Bangladesh"
+    }
+  ]
+}
diff --git a/examples/ui5-js-app/webapp/test/e2e/prop-array.test.js b/examples/ui5-js-app/webapp/test/e2e/prop-array.test.js
new file mode 100644
index 00000000..0f759ca8
--- /dev/null
+++ b/examples/ui5-js-app/webapp/test/e2e/prop-array.test.js
@@ -0,0 +1,30 @@
+const Main = require("./pageObjects/Main")
+const viewName = "test.Sample.view.Main"
+
+const multiComboBoxSelector = {
+    forceSelect: true,
+    selector: {
+        interaction: "root",
+        id: "multiComboBox",
+        viewName: viewName
+    }
+}
+
+describe("ui5 property array test", () => {
+    before(async () => {
+        await Main.open()
+    })
+
+    it("should get empty array", async () => {
+        const oMultiComboBox = await browser.asControl(multiComboBoxSelector)
+        const aSelectedKeys = await oMultiComboBox.getSelectedKeys()
+        expect(aSelectedKeys.length).toEqual(0)
+    })
+
+    it("select two countries from list", async () => {
+        const oMultiComboBox = await browser.asControl(multiComboBoxSelector)
+        await oMultiComboBox.setSelectedKeys(["IN", "BR"])
+        const aSelectedKeys = await oMultiComboBox.getSelectedKeys()
+        expect(aSelectedKeys.length).toEqual(2)
+    })
+})
diff --git a/examples/ui5-js-app/webapp/view/Main.view.xml b/examples/ui5-js-app/webapp/view/Main.view.xml
index f12b9022..5670d620 100644
--- a/examples/ui5-js-app/webapp/view/Main.view.xml
+++ b/examples/ui5-js-app/webapp/view/Main.view.xml
@@ -62,6 +62,9 @@
 				<Button text="open Dialog"
 					press="openDialog"
 					id="openDialogButton" />
+				<MultiComboBox id="multiComboBox" items="{path: 'countries>/Countries'}">
+					<core:Item key="{countries>key}" text="{countries>text}" />
+				</MultiComboBox>
 			</VBox>
 		</content>
 	</Page>

From 3fdf8e68c030f1d5eda38002649bf8e7825970ce Mon Sep 17 00:00:00 2001
From: Peder Hveem Alsvik <pehval@Peders-MacBook-Air.local>
Date: Wed, 20 Apr 2022 14:17:32 +0200
Subject: [PATCH 2/3] feat: add drag-and-drop ability to wdi5

---
 client-side-js/dragAndDrop.js                 | 18 ++++++++++
 client-side-js/injectUI5.js                   | 13 +++++++
 .../ui5-js-app/webapp/mockdata/countries.json | 36 -------------------
 src/lib/wdi5-control.ts                       | 25 +++++++++++++
 4 files changed, 56 insertions(+), 36 deletions(-)
 create mode 100644 client-side-js/dragAndDrop.js
 delete mode 100644 examples/ui5-js-app/webapp/mockdata/countries.json

diff --git a/client-side-js/dragAndDrop.js b/client-side-js/dragAndDrop.js
new file mode 100644
index 00000000..9c8da48e
--- /dev/null
+++ b/client-side-js/dragAndDrop.js
@@ -0,0 +1,18 @@
+async function clientSide_dragAndDrop(sourceWebElem, destWebElem) {
+    return await browser.executeAsync(
+        (sourceWebElem, destWebElem, done) => {
+            window.bridge.waitForUI5(window.wdi5.waitForUI5Options).then(() => {
+                const oSourceControl = window.wdi5.getUI5CtlForWebObj(sourceWebElem)
+                const oDestControl = window.wdi5.getUI5CtlForWebObj(destWebElem)
+                window.wdi5.simulateDragDrop(oSourceControl, oDestControl)
+            })
+            done(["success"])
+        },
+        sourceWebElem,
+        destWebElem
+    )
+}
+
+module.exports = {
+    clientSide_dragAndDrop
+}
diff --git a/client-side-js/injectUI5.js b/client-side-js/injectUI5.js
index 93d26c1c..69a80cfc 100644
--- a/client-side-js/injectUI5.js
+++ b/client-side-js/injectUI5.js
@@ -304,6 +304,19 @@ async function clientSide_injectUI5(config, waitForUI5Timeout) {
                             console.error("error creating new element by id of control: " + aControl)
                         }
                     }
+
+                    window.wdi5.simulateDragDrop = (
+                        oSourceControl,
+                        oDestinationControl,
+                        sAggregationName = "items"
+                    ) => {
+                        const oDrag = new Drag()
+                        oDrag.executeOn(oSourceControl)
+                        const oDrop = new Drop({
+                            aggregationName: sAggregationName
+                        })
+                        oDrop.executeOn(oDestinationControl)
+                    }
                 }
             )
         }
diff --git a/examples/ui5-js-app/webapp/mockdata/countries.json b/examples/ui5-js-app/webapp/mockdata/countries.json
deleted file mode 100644
index 654d5fa9..00000000
--- a/examples/ui5-js-app/webapp/mockdata/countries.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "Countries": [
-    {
-      "key": "CH",
-      "text": "China"
-    },
-    {
-      "key": "IN",
-      "text": "India"
-    },
-    {
-      "key": "US",
-      "text": "United States"
-    },
-    {
-      "key": "ID",
-      "text": "Indonesia"
-    },
-    {
-      "key": "PA",
-      "text": "Pakistan"
-    },
-    {
-      "key": "BR",
-      "text": "Brazil"
-    },
-    {
-      "key": "NG",
-      "text": "Nigeria"
-    },
-    {
-      "key": "BA",
-      "text": "Bangladesh"
-    }
-  ]
-}
diff --git a/src/lib/wdi5-control.ts b/src/lib/wdi5-control.ts
index bd5fab9e..6cca4e95 100644
--- a/src/lib/wdi5-control.ts
+++ b/src/lib/wdi5-control.ts
@@ -5,6 +5,7 @@ import { clientSide_interactWithControl } from "../../client-side-js/interactWit
 import { clientSide_executeControlMethod } from "../../client-side-js/executeControlMethod"
 import { clientSide_getAggregation } from "../../client-side-js/_getAggregation"
 import { clientSide_fireEvent } from "../../client-side-js/fireEvent"
+import { clientSide_dragAndDrop } from "../../client-side-js/dragAndDrop"
 
 import { Logger as _Logger } from "./Logger"
 const Logger = _Logger.getInstance()
@@ -128,6 +129,30 @@ export class WDI5Control {
         return this
     }
 
+    /**
+     *
+     * @param dropTarget: WDI5 object representation of the drop target UI5 control.
+     * @returns
+     */
+    async dragAndDrop(dropTarget) {
+        let sourceWebelement, destWebelement
+
+        if (util.types.isProxy(this.getWebElement)) {
+            sourceWebelement = await Promise.resolve(this.getWebElement())
+        } else {
+            sourceWebelement = (await this.getWebElement()) as unknown as WebdriverIO.Element
+        }
+
+        if (util.types.isProxy(dropTarget)) {
+            destWebelement = await Promise.resolve(dropTarget.getWebElement())
+        } else {
+            destWebelement = (await dropTarget.getWebElement()) as unknown as WebdriverIO.Element
+        }
+
+        await clientSide_dragAndDrop(sourceWebelement, destWebelement)
+        return this
+    }
+
     /**
      * used to update the wdio control reference
      * this can be used to manually trigger an control reference update after a ui5 control rerendering

From 1083db2fd627b2ac8193649c43db6e25d00ca6a6 Mon Sep 17 00:00:00 2001
From: "dominik.feininger" <dominik.feininger@js-soft.com>
Date: Fri, 22 Apr 2022 11:18:03 +0200
Subject: [PATCH 3/3] feat(wdio): add (not working) wdio test and testcase

---
 .../webapp/controller/Other.controller.js     | 32 +++++++++-----
 .../webapp/test/e2e/dragAndDrop.test.js       | 43 +++++++++++++++++++
 .../ui5-js-app/webapp/view/Other.view.xml     | 10 ++++-
 3 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 examples/ui5-js-app/webapp/test/e2e/dragAndDrop.test.js

diff --git a/examples/ui5-js-app/webapp/controller/Other.controller.js b/examples/ui5-js-app/webapp/controller/Other.controller.js
index 1726af5f..b015ec9c 100644
--- a/examples/ui5-js-app/webapp/controller/Other.controller.js
+++ b/examples/ui5-js-app/webapp/controller/Other.controller.js
@@ -1,27 +1,37 @@
 sap.ui.define(
-    ['test/Sample/controller/BaseController', 'sap/m/MessageToast', 'sap/m/StandardListItem'],
+    ["test/Sample/controller/BaseController", "sap/m/MessageToast", "sap/m/StandardListItem"],
     function (Controller, MessageToast, StandardListItem) {
-        'use strict';
+        "use strict"
 
-        return Controller.extend('test.Sample.controller.Other', {
+        return Controller.extend("test.Sample.controller.Other", {
             onInit: function () {},
 
             onItemPress(oEvent) {
-                this.getView().byId('idTextFieldClickResult').setText(oEvent.getParameter('listItem').data('key'));
+                this.getView().byId("idTextFieldClickResult").setText(oEvent.getParameter("listItem").data("key"))
 
-                MessageToast.show(oEvent.getParameter('listItem').data('key'));
+                MessageToast.show(oEvent.getParameter("listItem").data("key"))
+            },
+
+            onDragDrop: function (oEvent) {
+                const oDraggedItem = oEvent.getParameter("draggedControl")
+                const oDroppedItem = oEvent.getParameter("droppedControl")
+                const oPeopleList = this.getView().byId("PeopleList")
+                const iDroppedItemIndex = oPeopleList.indexOfItem(oDroppedItem)
+
+                list.removeItem(oDraggedItem)
+                list.insertItem(oDraggedItem, iDroppedItemIndex)
             },
 
             onAddLineItem(oEvent) {
                 this.getView()
-                    .byId('PeopleList')
+                    .byId("PeopleList")
                     .addItem(
                         new StandardListItem({
-                            title: 'FirstName LastName',
-                            type: 'Navigation'
+                            title: "FirstName LastName",
+                            type: "Navigation"
                         })
-                    );
+                    )
             }
-        });
+        })
     }
-);
+)
diff --git a/examples/ui5-js-app/webapp/test/e2e/dragAndDrop.test.js b/examples/ui5-js-app/webapp/test/e2e/dragAndDrop.test.js
new file mode 100644
index 00000000..bd9f462b
--- /dev/null
+++ b/examples/ui5-js-app/webapp/test/e2e/dragAndDrop.test.js
@@ -0,0 +1,43 @@
+const { wdi5 } = require("wdio-ui5-service")
+const Other = require("./pageObjects/Other")
+var dragAndDrop = require("html-dnd").codeForSelectors
+
+describe("list drag and drop", () => {
+    const listSelector = {
+        forceSelect: true,
+        selector: {
+            id: "PeopleList",
+            viewName: "test.Sample.view.Other"
+        }
+    }
+
+    before(async () => {
+        await Other.open()
+    })
+
+    beforeEach(async () => {
+        await browser.screenshot("list-interaction-before")
+    })
+
+    afterEach(async () => {
+        await browser.screenshot("list-interaction-after")
+    })
+
+    it("should change the order of the list", async () => {
+        const elem = await browser.asControl(listSelector).getItems(2).getWebElement()
+        const target = await browser.asControl(listSelector).getItems(8).getWebElement()
+
+        // wdio -> not working see https://github.com/webdriverio/webdriverio/issues/4134
+        // also donw forget to comment wdi5 dragAndDrop method before testing
+        // #1. drag and drop to other element
+        // await elem.dragAndDrop(target)
+
+        // #2. drag and drop relative from current position
+        // await elem.dragAndDrop({ x: 10, y: 300 })
+
+        const listItemsInNewOrder = await browser.asControl(listSelector).getItems(7)
+        const listItemTitle = await listItemsInNewOrder.getTitle()
+
+        expect(listItemTitle).toEqual("Robert King")
+    })
+})
diff --git a/examples/ui5-js-app/webapp/view/Other.view.xml b/examples/ui5-js-app/webapp/view/Other.view.xml
index 1592fcdf..117d7c6b 100644
--- a/examples/ui5-js-app/webapp/view/Other.view.xml
+++ b/examples/ui5-js-app/webapp/view/Other.view.xml
@@ -1,6 +1,7 @@
 <mvc:View controllerName="test.Sample.controller.Other"
 	xmlns:mvc="sap.ui.core.mvc"
 	displayBlock="true"
+	xmlns:dnd="sap.ui.core.dnd"
 	xmlns="sap.m"
 	xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
 
@@ -11,8 +12,15 @@
 		<content>
 			<List id="PeopleList"
 				headerText="{i18n>otherPage.listHeader}"
-				items="{/Employees}"
+				items="{path: '/Employees', sorter: {path: 'EmployeeID', descending: true} }"
 				itemPress="onItemPress">
+				<dragDropConfig>
+					<dnd:DragDropInfo
+						sourceAggregation="items"
+						targetAggregation="items"
+						dropPosition="Between"
+						drop="onDragDrop"/>
+				</dragDropConfig>
 				<StandardListItem title="{FirstName} {LastName}"
 					type="Navigation"
 					data:key="{FirstName} {LastName}" />