mardi 25 septembre 2018

SAPUI5 OPA5 test drag'n'drop (ideally with no external libraries)

I'm kindly asking for help in topic of the drag and drop testing in SAPUI5.

Let's say I have sap.m.Table in which I want to change the order of the elements. The config is next:

<Table id="attributeList" mode="MultiSelect" itemPress="handleAttributeSelect"
    items="{path: 'state>attributes', sorter: {path : 'properties/order', descending: true}}">
    <dragDropConfig>
         <dnd:DragInfo groupName="attributesList" sourceAggregation="items"/>
         <dnd:DropInfo id="" groupName="attributesList" drop="onDropAttributeInList"
              targetAggregation="items" dropPosition="Between"/>
    </dragDropConfig>

I tried jquery-simulate implementing test scenario with next important parts

1) Index.html (start file for tests)

<script src="./thirdparty/jquery-simulate.js"></script>

<script>
     sap.ui.require([
        "jquery.sap.global",
        "sap/ui/test/gherkin/opa5TestHarness",
        // Code coverage will be calculated for all modules loaded after the harness
        "test/Steps",
        "test/arrangements/Frame",
        "test/pages/Object",
        "test/pages/tabs/Properties",
        "test/pages/tabs/Attributes",
        "test/pages/Worklist",
        "sap/ui/thirdparty/jqueryui/jquery-ui-core",
        "sap/ui/thirdparty/jqueryui/jquery-ui-widget",
        "sap/ui/thirdparty/jqueryui/jquery-ui-mouse",
        "sap/ui/thirdparty/jqueryui/jquery-ui-draggable",
        "sap/ui/thirdparty/jqueryui/jquery-ui-droppable"
    ], function ($, opa5TestHarness, Steps, Arrangement) {

2) opa5 part:

  iDragAndDropTheRowOfTheTable: function (sTableId, iDragStartPosition, iDragEndPosition) {
        return this.waitFor({
            autoWait: 3000,
            id: sTableId,
            success: function (oTable) {
                var oDraggable = $(oTable.getItems()[iDragStartPosition].getDomRef()).draggable(),
                    oDroppable = $(oTable.getItems()[iDragEndPosition].getDomRef()).droppable(),

                    sDyProperty = (iDragStartPosition > iDragEndPosition) ? "bottom" : "top",

                    iDraggableOffset = oDraggable.offset(),
                    iDroppableOffset = oDroppable.offset(),

                    iDx = iDroppableOffset.left - iDraggableOffset.left,
                    iDy = iDroppableOffset[sDyProperty] - iDraggableOffset[sDyProperty];

                oDraggable.simulate("drag", {dx: iDx, dy: iDy, handle: "corner"});
            }
        });
    }

In each test scenario I have table with 3 rows and there're 4 tests: 1) drag 1st and drop after non-last 2) drag 1st and drop after last 3) drag last and drop before non-first 4) drag last and drop before first

So in the first test I swap rows 1 and 2. As a current result I have first row highlighted like after mousedown but nothing drags. And this is the moment I need some help with.

Aucun commentaire:

Enregistrer un commentaire