Skip to content

Commit b1ad862

Browse files
dimovpetardimovpetar
committed
feat: add more tests for drag and drop
1 parent 866e3e3 commit b1ad862

File tree

2 files changed

+104
-44
lines changed

2 files changed

+104
-44
lines changed

‎packages/main/test/pageobjects/TabContainerTestPage.js

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,4 @@
11
class TabContainerTestPage {
2-
async getRoot() {
3-
return $(this._sut);
4-
}
5-
6-
async getHeader() {
7-
return browser.$(`${this._sut}`).shadow$(`header`);
8-
}
9-
10-
async getItem(index) {
11-
return (await browser.$$("#list1 ui5-li"))[index];
12-
}
13-
142
async getTabStripItems(tabContainerId) {
153
return browser.$(`#${tabContainerId}`).shadow$$(".ui5-tab-strip-item");
164
}
@@ -32,6 +20,17 @@ class TabContainerTestPage {
3220

3321
return realTabId;
3422
}
23+
24+
getEndOverflow(tabContainerId) {
25+
return browser.$(`#${tabContainerId}`).shadow$(".ui5-tc__overflow--end [ui5-button]");
26+
}
27+
28+
async getCurrentPopoverItems(tabContainerId) {
29+
const staticAreaItemClassName = await browser.getStaticAreaItemClassName(`#${tabContainerId}`);
30+
const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
31+
32+
return popover.$$("[ui5-li-custom]");
33+
}
3534
}
3635

3736
export default new TabContainerTestPage()

‎packages/main/test/specs/TabContainer.spec.js

Lines changed: 93 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,7 @@ describe("TabContainer popover", () => {
408408

409409
describe("TabContainer drag and drop tests", () => {
410410
const getDragOffset = async (draggedElement, dropTargetElement, targetPosition) => {
411-
const EXTRA_OFFSET = 30; // TODO
411+
const OFFSET = 5;
412412
const draggedRectangle = {
413413
...await draggedElement.getLocation(),
414414
...await draggedElement.getSize()
@@ -417,27 +417,31 @@ describe("TabContainer drag and drop tests", () => {
417417
const dropTargetElementRectangle = {
418418
...await dropTargetElement.getLocation(),
419419
...await dropTargetElement.getSize()
420-
}
420+
};
421421

422-
const draggedElementXCenter = (draggedRectangle.x + draggedRectangle.width / 2);
423-
const draggedElementYCenter = (draggedRectangle.y + draggedRectangle.height / 2);
424-
const droppedElementXCenter = (dropTargetElementRectangle.x + dropTargetElementRectangle.width / 2);
425-
const droppedElementYCenter = (dropTargetElementRectangle.y + dropTargetElementRectangle.height / 2);
422+
const draggedElementXCenter = draggedRectangle.x + draggedRectangle.width / 2;
423+
const draggedElementYCenter = draggedRectangle.y + draggedRectangle.height / 2;
426424

427-
let offsetToXCenter = Math.round(droppedElementXCenter - draggedElementXCenter);
428-
let offsetToYCenter = Math.round(droppedElementYCenter - draggedElementYCenter);
425+
let dropTargetX;
426+
let dropTargetY;
429427

430428
if (targetPosition === "Before") {
431-
offsetToXCenter -= EXTRA_OFFSET;
432-
offsetToYCenter -= EXTRA_OFFSET
429+
dropTargetX = dropTargetElementRectangle.x + OFFSET;
430+
dropTargetY = dropTargetElementRectangle.y + OFFSET;
433431
} else if (targetPosition === "After") {
434-
offsetToXCenter += EXTRA_OFFSET;
435-
offsetToYCenter += EXTRA_OFFSET;
432+
dropTargetX = dropTargetElementRectangle.x + dropTargetElementRectangle.width - OFFSET;
433+
dropTargetY = dropTargetElementRectangle.y + dropTargetElementRectangle.height - OFFSET;
434+
} else { // "On"
435+
dropTargetX = dropTargetElementRectangle.x + dropTargetElementRectangle.width / 2;
436+
dropTargetY = dropTargetElementRectangle.y + dropTargetElementRectangle.height / 2;
436437
}
437438

439+
const offsetToX = Math.round(dropTargetX - draggedElementXCenter);
440+
const offsetToY = Math.round(dropTargetY - draggedElementYCenter);
441+
438442
return {
439-
x: offsetToXCenter,
440-
y: offsetToYCenter
443+
x: offsetToX,
444+
y: offsetToY
441445
};
442446
};
443447

@@ -469,6 +473,12 @@ describe("TabContainer drag and drop tests", () => {
469473
await stripItemToDrag.dragAndDrop({ x: dragOffset.x, y: 0 });
470474
}
471475

476+
const dragAndDropInPopover = async (popoverItemToDrag, popoverDropTarget, placement) => {
477+
const dragOffset = await getDragOffset(popoverItemToDrag, popoverDropTarget, placement);
478+
479+
await popoverItemToDrag.dragAndDrop({ x: 0, y: dragOffset.y }, { duration: 5000});
480+
}
481+
472482
before(async () => {
473483
await browser.url(`test/pages/TabContainerDragAndDrop.html`);
474484
await browser.setWindowSize(1024, 1000);
@@ -477,39 +487,90 @@ describe("TabContainer drag and drop tests", () => {
477487
it("Moving item After another", async () => {
478488
await browser.pause(5000); // TODO: this workaround avoids test crash. Find way to avoid it
479489
let displayedStripItems = await tabContainer.getDisplayedTabStripItems("tabContainerDnd");
480-
let firstStripItem = displayedStripItems[0];
481-
const secondStripItem = displayedStripItems[1];
490+
let draggedStripItem = displayedStripItems[0];
491+
let dropTargetStripItem = displayedStripItems[1];
482492
let expectedOrder = await Promise.all(await browser.$$(`#tabContainerDnd > *`).map(e => e .getAttribute("id")));
483493

484-
await dragAndDropInStrip(firstStripItem, secondStripItem, "After");
485-
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(firstStripItem), await tabContainer.getRealTabId(secondStripItem));
494+
await dragAndDropInStrip(draggedStripItem, dropTargetStripItem, "After");
495+
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(draggedStripItem), await tabContainer.getRealTabId(dropTargetStripItem));
486496
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
487497

488498
displayedStripItems = await tabContainer.getDisplayedTabStripItems("tabContainerDnd");
489-
firstStripItem = displayedStripItems[1];
490-
const lastStripItem = displayedStripItems[displayedStripItems.length - 1];
491-
await dragAndDropInStrip(firstStripItem, lastStripItem, "After");
492-
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(firstStripItem), await tabContainer.getRealTabId(lastStripItem));
499+
draggedStripItem = displayedStripItems[1];
500+
dropTargetStripItem = displayedStripItems[displayedStripItems.length - 1];
501+
await dragAndDropInStrip(draggedStripItem, dropTargetStripItem, "After");
502+
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(draggedStripItem), await tabContainer.getRealTabId(dropTargetStripItem));
493503
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
494504
});
495505

496506
it("Moving item Before another", async () => {
497-
let displayedStripItems = await tabContainer.getDisplayedTabStripItems("tabContainerDnd");
498-
const secondToLastStripItem = displayedStripItems[displayedStripItems.length - 2];
499-
let lastStripItem = displayedStripItems[displayedStripItems.length - 1];
507+
let displayedStripItems = await tabContainer.getDisplayedTabStripItems("tabContainerDnd");
508+
let draggedStripItem = displayedStripItems[displayedStripItems.length - 1];
509+
let dropTargetStripItem = displayedStripItems[displayedStripItems.length - 2];
500510
let expectedOrder = await Promise.all(await browser.$$(`#tabContainerDnd > *`).map(e => e .getAttribute("id")));
501511

502-
await dragAndDropInStrip(lastStripItem, secondToLastStripItem, "Before");
503-
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(lastStripItem), await tabContainer.getRealTabId(secondToLastStripItem));
512+
await dragAndDropInStrip(draggedStripItem, dropTargetStripItem, "Before");
513+
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(draggedStripItem), await tabContainer.getRealTabId(dropTargetStripItem));
504514
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
505515

506516
displayedStripItems = await tabContainer.getDisplayedTabStripItems("tabContainerDnd");
507-
const firstStripItem = displayedStripItems[0];
508-
lastStripItem = displayedStripItems[displayedStripItems.length - 2];
509-
await dragAndDropInStrip(lastStripItem, firstStripItem, "Before");
510-
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(lastStripItem), await tabContainer.getRealTabId(firstStripItem));
517+
draggedStripItem = displayedStripItems[displayedStripItems.length - 2];
518+
dropTargetStripItem = displayedStripItems[0];
519+
await dragAndDropInStrip(draggedStripItem, dropTargetStripItem, "Before");
520+
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(draggedStripItem), await tabContainer.getRealTabId(dropTargetStripItem));
521+
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
522+
});
523+
524+
it ("Moving item On another", async () => {
525+
let displayedStripItems = await tabContainer.getDisplayedTabStripItems("tabContainerDnd");
526+
let draggedStripItem = displayedStripItems[1];
527+
let draggedStripItemId = await tabContainer.getRealTabId(draggedStripItem);
528+
let dropTargetStripItem = displayedStripItems[2];
529+
let expectedOrder = await Promise.all(await browser.$$(`#tabContainerDnd > *`).map(e => e .getAttribute("id")));
530+
531+
await dragAndDropInStrip(draggedStripItem, dropTargetStripItem, "On");
532+
expectedOrder = expectedOrder.filter(id => id !== draggedStripItemId);
533+
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
534+
});
535+
536+
it("Moving item After another in end overflow popover", async () => {
537+
await tabContainer.getEndOverflow("tabContainerDnd").click();
538+
539+
let displayedPopoverItems = await tabContainer.getCurrentPopoverItems("tabContainerDnd");
540+
let draggedPopoverItem = displayedPopoverItems[1];
541+
let dropTargetPopoverItem = displayedPopoverItems[2];
542+
let expectedOrder = await Promise.all(await browser.$$(`#tabContainerDnd > *`).map(e => e .getAttribute("id")));
543+
544+
await dragAndDropInPopover(draggedPopoverItem, dropTargetPopoverItem, "After");
545+
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(draggedPopoverItem), await tabContainer.getRealTabId(dropTargetPopoverItem));
546+
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
547+
548+
displayedPopoverItems = await tabContainer.getCurrentPopoverItems("tabContainerDnd");
549+
draggedPopoverItem = displayedPopoverItems[2];
550+
dropTargetPopoverItem = displayedPopoverItems[7];
551+
await dragAndDropInPopover(draggedPopoverItem, dropTargetPopoverItem, "After");
552+
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(draggedPopoverItem), await tabContainer.getRealTabId(dropTargetPopoverItem));
511553
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
512554
});
513555

514-
// TODO: 1) move inside the popover 2) move from strip to popover 3) move from popover to strip 4) long drag over
556+
it("Moving item Before another in end overflow popover", async () => {
557+
let displayedPopoverItems = await tabContainer.getCurrentPopoverItems("tabContainerDnd");
558+
let draggedPopoverItem = displayedPopoverItems[7];
559+
let dropTargetPopoverItem = displayedPopoverItems[6];
560+
let expectedOrder = await Promise.all(await browser.$$(`#tabContainerDnd > *`).map(e => e .getAttribute("id")));
561+
562+
await dragAndDropInPopover(draggedPopoverItem, dropTargetPopoverItem, "Before");
563+
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(draggedPopoverItem), await tabContainer.getRealTabId(dropTargetPopoverItem));
564+
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
565+
566+
displayedPopoverItems = await tabContainer.getCurrentPopoverItems("tabContainerDnd");
567+
draggedPopoverItem = displayedPopoverItems[2];
568+
dropTargetPopoverItem = displayedPopoverItems[1]
569+
await dragAndDropInPopover(draggedPopoverItem, dropTargetPopoverItem, "Before");
570+
expectedOrder = moveElementById(expectedOrder, await tabContainer.getRealTabId(draggedPopoverItem), await tabContainer.getRealTabId(dropTargetPopoverItem));
571+
assert.ok(await compareItemsOrder("tabContainerDnd", expectedOrder), "Items order has changed");
572+
573+
// close the popover
574+
await tabContainer.getEndOverflow("tabContainerDnd").click();
575+
});
515576
});

0 commit comments

Comments
 (0)