Skip to content

Commit 0f577f1

Browse files
Alyar666Alyar
Alyar666
authored and
Alyar
committed
DataGrid - Testcafe tests - Row dragging: unskip tests
1 parent 5e45493 commit 0f577f1

File tree

7 files changed

+283
-82
lines changed

7 files changed

+283
-82
lines changed

‎e2e/testcafe-devextreme/helpers/mouseUpEvents.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,37 @@ export const MouseUpEvents = {
3232
disable: disableMouseUpEvent,
3333
enable: enableMouseUpEvent,
3434
};
35+
36+
/**
37+
* Performs a drag operation on a row with MouseUpEvents temporarily disabled.
38+
* This is useful for autoscroll tests where we need to keep the row in drag state.
39+
*
40+
* @param t - TestController instance
41+
* @param element - Selector for the element to drag
42+
* @param options - drag options
43+
* @param options.offsetX - X-offset for the drag operation
44+
* @param options.offsetY - Y-offset for the drag operation
45+
* @param options.speed - speed of the drag operation (default is 0.1)
46+
*/
47+
export const dragWithDisabledMouseUp = async (
48+
t: TestController,
49+
element: Selector,
50+
{
51+
offsetX,
52+
offsetY,
53+
speed = 0.1,
54+
}: {
55+
offsetX: number;
56+
offsetY: number;
57+
speed?: number;
58+
},
59+
): Promise<void> => {
60+
await MouseUpEvents.disable(MouseAction.dragToOffset);
61+
await t.drag(
62+
element,
63+
offsetX,
64+
offsetY,
65+
{ speed },
66+
);
67+
await MouseUpEvents.enable(MouseAction.dragToOffset);
68+
};

‎e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1179218-virtual-scrolling-dragging-row (fluent.blue.light).png‎

-9.44 KB
Binary file not shown.

‎e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/etalons/T1179218-virtual-scrolling-dragging-row (fluent.blue.light).png‎

9.41 KB
Loading

e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging.ts renamed to e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/functional.ts

Lines changed: 87 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
/* eslint-disable @typescript-eslint/no-misused-promises */
22
import { ClientFunction, Selector } from 'testcafe';
3-
import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
43
import DataGrid, { CLASS as DataGridClassNames } from 'devextreme-testcafe-models/dataGrid';
54
import { ClassNames } from 'devextreme-testcafe-models/dataGrid/classNames';
6-
import { MouseUpEvents, MouseAction } from '../../../helpers/mouseUpEvents';
7-
import url from '../../../helpers/getPageUrl';
8-
import { createWidget } from '../../../helpers/createWidget';
9-
import { testScreenshot } from '../../../helpers/themeUtils';
5+
import { dragWithDisabledMouseUp } from '../../../../helpers/mouseUpEvents';
6+
import url from '../../../../helpers/getPageUrl';
7+
import { createWidget } from '../../../../helpers/createWidget';
8+
import { isScrollAtEnd, getOffsetToTriggerAutoScroll } from '../../helpers/rowDraggingHelpers';
109

1110
const CLASS = { ...DataGridClassNames, ...ClassNames };
1211

@@ -55,8 +54,8 @@ const generateData = (rowCount, columnCount): Record<string, unknown>[] => {
5554
return items;
5655
};
5756

58-
fixture`Row dragging`
59-
.page(url(__dirname, '../../container.html'));
57+
fixture`Row dragging.Functional`
58+
.page(url(__dirname, '../../../container.html'));
6059

6160
// T903351
6261
test('The placeholder should appear when a cross-component dragging rows after scrolling the window', async (t) => {
@@ -468,7 +467,7 @@ test('Headers should not be hidden during auto scrolling when virtual scrollling
468467
});
469468

470469
// T1078513
471-
test.meta({ unstable: true })('Footer should not be hidden during auto scrolling when virtual scrollling is specified', async (t) => {
470+
test('Footer should not be hidden during auto scrolling when virtual scrolling is specified', async (t) => {
472471
const dataGrid = new DataGrid('#container');
473472
await t.drag(dataGrid.getDataRow(0).getDragCommand(), 0, 90, { speed: 0.1 });
474473

@@ -573,16 +572,38 @@ test('The draggable element should be displayed correctly after horizontal scrol
573572
test.meta({ unstable: true })('Dragging with scrolling should be prevented by e.cancel (T1179555)', async (t) => {
574573
const dataGrid = new DataGrid('#container');
575574

576-
await dataGrid.scrollBy(t, { top: 10000 });
577575
await t.expect(dataGrid.isReady()).ok();
578576

579-
await MouseUpEvents.disable(MouseAction.dragToOffset);
577+
await dataGrid.scrollBy(t, { top: 10000 });
578+
579+
await t
580+
.expect(dataGrid.getDataRow(99).getDataCell(1).element.textContent)
581+
.eql('99')
582+
.expect(isScrollAtEnd('vertical'))
583+
.ok();
584+
585+
const visibleRows = await dataGrid.apiGetVisibleRows();
586+
const scrollTopOffsetByTheme = await getOffsetToTriggerAutoScroll(
587+
visibleRows.length - 2,
588+
1,
589+
);
580590

581-
await t.drag(dataGrid.getDataRow(98).getDragCommand(), 0, -180, { speed: 0.1 });
591+
await dragWithDisabledMouseUp(
592+
t,
593+
dataGrid.getDataRow(98).getDragCommand(),
594+
{ offsetX: 0, offsetY: scrollTopOffsetByTheme, speed: 0.8 },
595+
);
582596

583-
await t.expect(Selector('.dx-sortable-placeholder').visible).notOk();
597+
// Wait for autoscrolling
598+
await t.wait(2000);
584599

585-
await MouseUpEvents.enable(MouseAction.dragToOffset);
600+
await t
601+
.expect(dataGrid.getDataRow(0).getDataCell(1).element.textContent)
602+
.eql('0')
603+
.expect(dataGrid.getScrollTop())
604+
.eql(0);
605+
606+
await t.expect(Selector('.dx-sortable-placeholder').visible).notOk();
586607
}).before(async (t) => {
587608
await t.maximizeWindow();
588609
return createWidget('dxDataGrid', {
@@ -661,56 +682,76 @@ test('The placeholder should have correct position after dragging the row to the
661682
}));
662683

663684
// T1126013
664-
test.meta({ unstable: true })('toIndex should not be corrected when source item gets removed from DOM', async (t) => {
665-
const fromIndex = 2;
666-
const toIndex = 4;
667-
685+
test('toIndex should not be corrected when source item gets removed from DOM', async (t) => {
686+
// arrange
668687
const dataGrid = new DataGrid('#container');
688+
const AUTOSCROLL_WAIT_TIME = 2000;
689+
const AUTOSCROLL_SPEED_FACTOR = 0.5;
690+
691+
await t.expect(dataGrid.isReady()).ok();
692+
693+
// act - scroll to the bottom to make the last row visible
669694
await dataGrid.scrollTo(t, { y: 3000 });
670695

671-
const sourceKey = await ClientFunction((grid, idx) => {
672-
const instance: any = grid.getInstance();
673-
const visibleRows = instance.getVisibleRows();
674-
return visibleRows[idx]?.key;
675-
}, { dependencies: {} })(dataGrid, fromIndex);
696+
// assert
697+
await t
698+
.expect(dataGrid.getDataRow(49).getDataCell(1).element.textContent)
699+
.eql('50-1')
700+
.expect(isScrollAtEnd('vertical'))
701+
.ok();
676702

677-
const initialIndices = await ClientFunction((grid) => {
678-
const instance: any = grid.getInstance();
679-
return instance.getVisibleRows().map((r: any) => r.key);
680-
})(dataGrid);
681-
const sourceInitialIndex = initialIndices.indexOf(sourceKey);
703+
let visibleRows = await dataGrid.apiGetVisibleRows();
704+
const draggableRow = visibleRows[1];
682705

683-
await dataGrid.moveRow(fromIndex, 0, 50, true);
684-
await dataGrid.moveRow(fromIndex, 0, -20);
685-
await dataGrid.moveRow(toIndex, 0, 5);
706+
// Calculate offsetY to trigger upward autoscroll when dragging the row.
707+
// Using speedFactor 0.5 to ensure medium scrolling speed.
708+
const scrollOffsetForFastAutoScroll = await getOffsetToTriggerAutoScroll(
709+
draggableRow.rowIndex,
710+
AUTOSCROLL_SPEED_FACTOR,
711+
);
686712

687-
await ClientFunction((grid) => {
688-
const instance = grid.getInstance();
689-
$(instance.element()).trigger($.Event('dxpointerup'));
690-
})(dataGrid);
713+
// act - drag a row up the grid to start auto-scrolling.
714+
await dataGrid.moveRow(draggableRow.rowIndex, 0, 150, true);
715+
await dataGrid.moveRow(draggableRow.rowIndex, 0, 100);
716+
await dataGrid.moveRow(draggableRow.rowIndex, 0, scrollOffsetForFastAutoScroll);
691717

692-
const finalIndex = await ClientFunction((grid, key) => {
693-
const instance: any = grid.getInstance();
694-
const visibleRows = instance.getVisibleRows();
695-
return visibleRows.findIndex((r: any) => r.key === key);
696-
})(dataGrid, sourceKey);
718+
// Waiting for autoscrolling
719+
await t.wait(AUTOSCROLL_WAIT_TIME);
697720

698-
const expectedFinalIndex = (toIndex - 1) - (sourceInitialIndex < toIndex ? 1 : 0);
721+
// assert
722+
await t
723+
.expect(dataGrid.getDataRow(0).getDataCell(1).element.textContent)
724+
.eql('1-1')
725+
.expect(dataGrid.getScrollTop())
726+
.eql(0);
699727

700-
await t.expect(finalIndex)
701-
.eql(expectedFinalIndex, `Dragged row key ${sourceKey} expected at ${expectedFinalIndex} but ended up at index ${finalIndex}`);
728+
// act - drag and drop the row to the third position (after row 2-1).
729+
const rowHeight = await dataGrid.getDataRow(0).element.offsetHeight;
730+
731+
await dataGrid.moveRow(draggableRow.rowIndex, 0, rowHeight / 2);
732+
await dataGrid.dropRow();
733+
734+
// assert
735+
await t.expect(dataGrid.isReady()).ok();
736+
737+
visibleRows = await dataGrid.apiGetVisibleRows();
738+
739+
await t
740+
.expect(visibleRows[0].key)
741+
.eql('1-1')
742+
.expect(visibleRows[1].key)
743+
.eql('2-1')
744+
.expect(visibleRows[2].key)
745+
.eql(draggableRow.key);
702746
}).before(async (t) => {
703747
await t.maximizeWindow();
704748
const items = generateData(50, 1);
705749
return createWidget('dxDataGrid', {
706-
height: 250,
750+
height: 260,
707751
keyExpr: 'field1',
708752
scrolling: {
709753
mode: 'virtual',
710754
},
711-
paging: {
712-
pageSize: 4,
713-
},
714755
dataSource: items,
715756
rowDragging: {
716757
scrollSpeed: 300,
@@ -785,39 +826,3 @@ test('Item should appear in a correct spot when dragging to a different page wit
785826
showBorders: true,
786827
});
787828
});
788-
789-
// T1179218
790-
test.meta({ unstable: true })('Rows should appear correctly during dragging when virtual scrolling is enabled and rowDragging.dropFeedbackMode = "push"', async (t) => {
791-
const dataGrid = new DataGrid('#container');
792-
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
793-
794-
// drag the row down
795-
await dataGrid.moveRow(0, 30, 150, true);
796-
await dataGrid.moveRow(0, 30, 350);
797-
798-
// waiting for autoscrolling
799-
await t.wait(2000);
800-
801-
// drag the row up
802-
await dataGrid.moveRow(0, 30, 75);
803-
804-
await testScreenshot(t, takeScreenshot, 'T1179218-virtual-scrolling-dragging-row.png', { element: dataGrid.element });
805-
await t
806-
.expect(compareResults.isValid())
807-
.ok(compareResults.errorMessages());
808-
}).before(async (t) => {
809-
await t.maximizeWindow();
810-
return createWidget('dxDataGrid', {
811-
height: 440,
812-
keyExpr: 'id',
813-
scrolling: {
814-
mode: 'virtual',
815-
},
816-
dataSource: [...new Array(100)].fill(null).map((_, index) => ({ id: index })),
817-
columns: ['id'],
818-
rowDragging: {
819-
allowReordering: true,
820-
dropFeedbackMode: 'push',
821-
},
822-
});
823-
});

‎e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/visual.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
2+
import DataGrid from 'devextreme-testcafe-models/dataGrid';
3+
import url from '../../../../helpers/getPageUrl';
4+
import { createWidget } from '../../../../helpers/createWidget';
5+
import { testScreenshot } from '../../../../helpers/themeUtils';
6+
import { getOffsetToTriggerAutoScroll, isScrollAtEnd } from '../../helpers/rowDraggingHelpers';
7+
8+
fixture`Row dragging.Visual`
9+
.page(url(__dirname, '../../../container.html'));
10+
11+
// T1179218
12+
test('Rows should appear correctly during dragging when virtual scrolling is enabled and rowDragging.dropFeedbackMode = "push"', async (t) => {
13+
const dataGrid = new DataGrid('#container');
14+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
15+
16+
// drag the row down
17+
await dataGrid.moveRow(0, 30, 150, true);
18+
await dataGrid.moveRow(0, 30, await getOffsetToTriggerAutoScroll(0, 1, 'down'));
19+
20+
// waiting for autoscrolling
21+
await t.wait(2000);
22+
23+
await t
24+
.expect(dataGrid.getDataRow(99).getDataCell(1).element.textContent)
25+
.eql('99')
26+
.expect(isScrollAtEnd('vertical'))
27+
.ok();
28+
29+
// drag the row up
30+
await dataGrid.moveRow(0, 30, await getOffsetToTriggerAutoScroll(0, 1));
31+
32+
// waiting for autoscrolling
33+
await t.wait(2000);
34+
35+
await t
36+
.expect(dataGrid.getDataRow(0).getDataCell(1).element.textContent)
37+
.eql('0')
38+
.expect(dataGrid.getScrollTop())
39+
.eql(0);
40+
41+
await testScreenshot(t, takeScreenshot, 'T1179218-virtual-scrolling-dragging-row.png', { element: dataGrid.element });
42+
await t
43+
.expect(compareResults.isValid())
44+
.ok(compareResults.errorMessages());
45+
}).before(async (t) => {
46+
await t.maximizeWindow();
47+
return createWidget('dxDataGrid', {
48+
height: 440,
49+
keyExpr: 'id',
50+
scrolling: {
51+
mode: 'virtual',
52+
},
53+
dataSource: [...new Array(100)].fill(null).map((_, index) => ({ id: index })),
54+
columns: ['id'],
55+
rowDragging: {
56+
allowReordering: true,
57+
dropFeedbackMode: 'push',
58+
},
59+
});
60+
});

0 commit comments

Comments
 (0)