Skip to content

Commit 3847eb8

Browse files
GoodDayForSurfGoodDayForSurf
committed
Merge branch '25_2' of https://github.com/DevExpress/DevExtreme into 25_2_angular20
2 parents 49efd3d + f507b52 commit 3847eb8

20 files changed

Lines changed: 444 additions & 67 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { testScreenshot } from '../../../../helpers/themeUtils';
88
fixture.disablePageReloads`Column reordering.Visual`
99
.page(url(__dirname, '../../../container.html'));
1010

11-
test.skip('column separator should work properly with expand columns', async (t) => {
11+
test('column separator should work properly with expand columns', async (t) => {
1212
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
1313
const dataGrid = new DataGrid('#container');
1414

‎e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-headers-scroller-spacing-border (fluent.blue.light).png‎

17.1 KB
Loading

‎e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-headers-scroller-spacing-border-rtl (fluent.blue.light).png‎

17.1 KB
Loading

‎e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/keyboardNavigation.functional.ts‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6195,8 +6195,8 @@ test('The last cell should be focused after changing the page size (T1063530)',
61956195
})();
61966196
});
61976197

6198-
test.meta({ unstable: true })(`Focus events should be called when pressing the Ctrl + End key when virtual scrolling and columns are enabled (scrolling.useNative = ${useNativeScrolling})`, async (t) => {
6199-
// arrange
6198+
test(`Focus events should be called when pressing the Ctrl + End key when virtual scrolling and columns are enabled (scrolling.useNative = ${useNativeScrolling})`, async (t) => {
6199+
// arrange
62006200
const dataGrid = new DataGrid('#container');
62016201

62026202
await t.expect(dataGrid.isReady()).ok();
@@ -6223,7 +6223,9 @@ test('The last cell should be focused after changing the page size (T1063530)',
62236223

62246224
// assert
62256225
await t
6226-
.expect(dataGrid.isReady())
6226+
.expect(dataGrid.isScrolledToBottom())
6227+
.ok()
6228+
.expect(dataGrid.isScrolledToRight())
62276229
.ok()
62286230
.expect(dataGrid.getDataCell(199, 34).element.focused)
62296231
.ok()
@@ -6276,8 +6278,8 @@ test('The last cell should be focused after changing the page size (T1063530)',
62766278
})();
62776279
});
62786280

6279-
test.meta({ unstable: true })(`Focus events should be called when pressing the Ctrl + End key when rowRenderingMode is 'virtual' (scrolling.useNative = ${useNativeScrolling})`, async (t) => {
6280-
// arrange
6281+
test(`Focus events should be called when pressing the Ctrl + End key when rowRenderingMode is 'virtual' (scrolling.useNative = ${useNativeScrolling})`, async (t) => {
6282+
// arrange
62816283
const dataGrid = new DataGrid('#container');
62826284

62836285
await t.expect(dataGrid.isReady()).ok();
@@ -6304,7 +6306,9 @@ test('The last cell should be focused after changing the page size (T1063530)',
63046306

63056307
// assert
63066308
await t
6307-
.expect(dataGrid.isReady())
6309+
.expect(dataGrid.isScrolledToBottom())
6310+
.ok()
6311+
.expect(dataGrid.isScrolledToRight())
63086312
.ok()
63096313
.expect(dataGrid.getDataCell(19, 14).element.focused)
63106314
.ok()
@@ -6356,8 +6360,8 @@ test('The last cell should be focused after changing the page size (T1063530)',
63566360
})();
63576361
});
63586362

6359-
test.meta({ unstable: true })(`Focus events should be called when pressing the Ctrl + End key when infinite scrolling is enabled (scrolling.useNative = ${useNativeScrolling})`, async (t) => {
6360-
// arrange
6363+
test(`Focus events should be called when pressing the Ctrl + End key when infinite scrolling is enabled (scrolling.useNative = ${useNativeScrolling})`, async (t) => {
6364+
// arrange
63616365
const dataGrid = new DataGrid('#container');
63626366

63636367
await t.expect(dataGrid.isReady()).ok();
@@ -6382,11 +6386,12 @@ test('The last cell should be focused after changing the page size (T1063530)',
63826386

63836387
// act
63846388
await t
6385-
.pressKey('ctrl+end')
6386-
.expect(dataGrid.isReady()).ok();
6389+
.pressKey('ctrl+end');
63876390

63886391
// assert
63896392
await t
6393+
.expect(dataGrid.isScrolledToRight())
6394+
.ok()
63906395
.expect(dataGrid.getDataCell(19, 14).element.focused)
63916396
.ok()
63926397
.expect(getOrderOfEventCalls())
@@ -6617,8 +6622,8 @@ test('The last cell should be focused after changing the page size (T1063530)',
66176622
})();
66186623
});
66196624

6620-
test.meta({ unstable: true })(`Focus events should be called when pressing the Ctrl + End key when virtual columns, virtual scrolling and focusedRowEnabled are enabled (scrolling.useNative = ${useNativeScrolling})`, async (t) => {
6621-
// arrange
6625+
test(`Focus events should be called when pressing the Ctrl + End key when virtual columns, virtual scrolling and focusedRowEnabled are enabled (scrolling.useNative = ${useNativeScrolling})`, async (t) => {
6626+
// arrange
66226627
const dataGrid = new DataGrid('#container');
66236628

66246629
await t.expect(dataGrid.isReady()).ok();
@@ -6645,7 +6650,9 @@ test('The last cell should be focused after changing the page size (T1063530)',
66456650

66466651
// assert
66476652
await t
6648-
.expect(dataGrid.isReady())
6653+
.expect(dataGrid.isScrolledToBottom())
6654+
.ok()
6655+
.expect(dataGrid.isScrolledToRight())
66496656
.ok()
66506657
.expect(dataGrid.getDataCell(199, 34).element.focused)
66516658
.ok()
@@ -6788,7 +6795,11 @@ test('Focus should be set to the grid to allow keyboard navigation when the focu
67886795
// act
67896796
await t
67906797
.click(searchPanel.input)
6791-
.pressKey('tab tab tab tab tab');
6798+
.pressKey('tab')
6799+
.pressKey('tab')
6800+
.pressKey('tab')
6801+
.pressKey('tab')
6802+
.pressKey('tab');
67926803

67936804
// assert
67946805
await t.expect(secondIDCell.isFocused).ok();
@@ -6804,13 +6815,18 @@ test('Focus should be set to the grid to allow keyboard navigation when the focu
68046815
.notOk('focus should be on the search panel');
68056816

68066817
// act
6807-
await t.pressKey('tab tab tab');
6818+
await t
6819+
.pressKey('tab')
6820+
.pressKey('tab')
6821+
.pressKey('tab');
68086822

68096823
// assert
68106824
await t.expect(secondIDCell.isFocused).ok();
68116825

68126826
// act
6813-
await t.pressKey('tab tab');
6827+
await t
6828+
.pressKey('tab')
6829+
.pressKey('tab');
68146830

68156831
// assert
68166832
await t.expect(button.isFocused).ok();

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

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -524,8 +524,16 @@ test('Navigate to last cell in the last row when virtual scrolling is enabled',
524524
// act
525525
await t
526526
.click(dataGrid.getDataCell(0, 0).element)
527-
.pressKey('ctrl+end')
528-
.wait(100);
527+
.pressKey('ctrl+end');
528+
529+
// assert
530+
await t
531+
.expect(dataGrid.isScrolledToBottom())
532+
.ok()
533+
.expect(dataGrid.isScrolledToRight())
534+
.ok()
535+
.expect(dataGrid.getDataCell(199, 14).element.focused)
536+
.ok();
529537

530538
await testScreenshot(t, takeScreenshot, 'navigate_to_last_cell_in_last_row_when_virtual_scrolling_is_enabled.png', { element: dataGrid.element });
531539

@@ -567,10 +575,16 @@ test('Navigate to first cell in the first row when virtual scrolling is enabled'
567575
// act
568576
await t
569577
.click(dataGrid.getDataCell(199, 14).element)
570-
.pressKey('ctrl+home')
578+
.pressKey('ctrl+home');
579+
580+
// assert
581+
await t
582+
.expect(dataGrid.getDataCell(0, 0).element.focused)
583+
.ok()
571584
.expect(dataGrid.getScrollLeft())
572585
.eql(0)
573-
.wait(1000);
586+
.expect(dataGrid.getScrollTop())
587+
.eql(0);
574588

575589
await testScreenshot(t, takeScreenshot, 'navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_2.png', { element: dataGrid.element });
576590

@@ -602,11 +616,14 @@ test('Navigate to last cell in the last row when virtual scrolling and columns a
602616
// act
603617
await t
604618
.click(dataGrid.getDataCell(0, 0).element)
605-
.pressKey('ctrl+end')
606-
.wait(1000);
619+
.pressKey('ctrl+end');
607620

608621
// assert
609622
await t
623+
.expect(dataGrid.isScrolledToBottom())
624+
.ok()
625+
.expect(dataGrid.isScrolledToRight())
626+
.ok()
610627
.expect(dataGrid.getDataCell(199, 34).element.focused)
611628
.ok();
612629

@@ -647,11 +664,14 @@ test('Navigate to first cell in the first row when virtual scrolling and columns
647664
// act
648665
await t
649666
.click(dataGrid.getDataCell(199, 34).element)
650-
.pressKey('ctrl+home')
651-
.wait(300);
667+
.pressKey('ctrl+home');
652668

653669
// assert
654670
await t
671+
.expect(dataGrid.getScrollLeft())
672+
.eql(0)
673+
.expect(dataGrid.getScrollTop())
674+
.eql(0)
655675
.expect(dataGrid.getDataCell(0, 0).element.focused)
656676
.ok();
657677

@@ -684,19 +704,30 @@ test('Navigate to first cell in the first row when virtual scrolling and columns
684704
// act
685705
await t
686706
.click(dataGrid.getDataCell(0, 1).element)
687-
.pressKey('ctrl+end')
688-
.wait(1000);
707+
.pressKey('ctrl+end');
689708

690709
// assert
691710
await t
711+
.expect(dataGrid.isScrolledToBottom())
712+
.ok()
713+
.expect(dataGrid.isScrolledToRight())
714+
.ok()
692715
.expect(dataGrid.getDataCell(199, 35).element.focused)
693716
.ok();
694717

695718
// act
696719
await t
697720
.click(dataGrid.getDataCell(199, 35).element)
698-
.pressKey('ctrl+home')
699-
.wait(1000);
721+
.pressKey('ctrl+home');
722+
723+
// assert
724+
await t
725+
.expect(dataGrid.getScrollLeft())
726+
.eql(0)
727+
.expect(dataGrid.getScrollTop())
728+
.eql(0)
729+
.expect(dataGrid.getDataCell(0, 1).element.focused)
730+
.ok();
700731

701732
await testScreenshot(t, takeScreenshot, `${useNative ? 'native' : 'simulated'}_scrolling_-_navigate_to_first_cell_row_dragging__virtual_scrolling__virtual_columns.png`, { element: dataGrid.element });
702733

@@ -722,7 +753,7 @@ test('Navigate to first cell in the first row when virtual scrolling and columns
722753
},
723754
}));
724755

725-
test.meta({ unstable: true })(`${useNative ? 'Native' : 'Simulated'} scrolling: Focus should be on the last focusable cell when pressing the Ctrl + End key when row dragging, virtual scrolling and columns are enabled`, async (t) => {
756+
test(`${useNative ? 'Native' : 'Simulated'} scrolling: Focus should be on the last focusable cell when pressing the Ctrl + End key when row dragging, virtual scrolling and columns are enabled`, async (t) => {
726757
// arrange
727758
const dataGrid = new DataGrid('#container');
728759
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -737,7 +768,9 @@ test('Navigate to first cell in the first row when virtual scrolling and columns
737768

738769
// assert
739770
await t
740-
.expect(dataGrid.isReady())
771+
.expect(dataGrid.isScrolledToBottom())
772+
.ok()
773+
.expect(dataGrid.isScrolledToRight())
741774
.ok()
742775
.expect(dataGrid.getDataCell(199, 34).element.focused)
743776
.ok();

‎e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
33
import DataGrid from 'devextreme-testcafe-models/dataGrid';
44
import { ClassNames } from 'devextreme-testcafe-models/dataGrid/classNames';
55
import type { DataGridScrollMode } from 'devextreme/ui/data_grid';
6-
import { insertStylesheetRulesToPage } from '../../../helpers/domUtils';
6+
import { insertStylesheetRulesToPage, removeStylesheetRulesFromPage } from '../../../helpers/domUtils';
77
import url from '../../../helpers/getPageUrl';
88
import { createWidget } from '../../../helpers/createWidget';
99
import { salesApiMock } from './apiMocks/salesApiMock';
@@ -363,6 +363,69 @@ test('Scroll position after grouping when RTL (T388508)', async (t) => {
363363
}],
364364
}));
365365

366+
[false, true].forEach((rtlEnabled) => {
367+
test(`Headers should have a border before the scrollbar gutter when the vertical scrollbar occupies space (rtlEnabled = ${rtlEnabled}) (T1306973)`, async (t) => {
368+
// arrange, act
369+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
370+
const dataGrid = new DataGrid('#container');
371+
372+
await t
373+
.expect(dataGrid.isReady())
374+
.ok();
375+
376+
const headersElement = dataGrid.getHeaders().element;
377+
const paddingProperty = rtlEnabled ? 'padding-left' : 'padding-right';
378+
const padding = parseFloat(await headersElement.getStyleProperty(paddingProperty));
379+
380+
// assert
381+
await t
382+
.expect(headersElement.hasClass('dx-datagrid-scroller-spacing'))
383+
.ok()
384+
.expect(padding)
385+
.eql(14);
386+
387+
await testScreenshot(
388+
t,
389+
takeScreenshot,
390+
`grid-headers-scroller-spacing-border${rtlEnabled ? '-rtl' : ''}.png`,
391+
{ element: '#container' },
392+
);
393+
394+
await t
395+
.expect(compareResults.isValid())
396+
.ok(compareResults.errorMessages());
397+
}).before(async () => {
398+
await insertStylesheetRulesToPage(`
399+
::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; }
400+
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 7px; }
401+
::-webkit-scrollbar-track { background-color: #fafafa; border-${rtlEnabled ? 'right' : 'left'}: 1px solid #e0e0e0; }
402+
`);
403+
404+
return createWidget('dxDataGrid', {
405+
rtlEnabled,
406+
width: 700,
407+
height: 300,
408+
showBorders: true,
409+
dataSource: getData(30, 5),
410+
columns: ['field_0', 'field_1', 'field_2', 'field_3', 'field_4'],
411+
filterRow: {
412+
visible: true,
413+
},
414+
summary: {
415+
totalItems: [{
416+
column: 'field_0',
417+
summaryType: 'count',
418+
}],
419+
},
420+
scrolling: {
421+
useNative: true,
422+
},
423+
});
424+
}).after(async () => {
425+
await removeStylesheetRulesFromPage();
426+
});
427+
});
428+
366429
test('Header container should have padding-right after expanding the master row with a detail grid when using native scrolling (T1004507)', async (t) => {
367430
const dataGrid = new DataGrid('#container');
368431
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

‎e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -181,17 +181,18 @@ test.meta({ browserSize: [900, 800] })('Sticky columns with grouping - overflow
181181
// visual: generic.light
182182
// visual: material.blue.light
183183
// visual: fluent.blue.light
184-
test.meta({ browserSize: [900, 800] })('The header row should be highlighted correctly when dragging column when there are fixed columns and allowColumnReordering=false (generic.light theme)', async (t) => {
184+
test.meta({ browserSize: [900, 800] })('The header row should be highlighted correctly when dragging column when there are fixed columns and allowColumnReordering=false', async (t) => {
185185
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
186186
const dataGrid = new DataGrid('#container');
187187

188188
await t.expect(dataGrid.isReady()).ok();
189-
await t.wait(300);
190189

191190
await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 200, 35);
192-
await t.wait(200);
191+
192+
await t.expect(dataGrid.getHeaders().getHeaderRow(0).isHighlighted()).ok();
193193

194194
await testScreenshot(t, takeScreenshot, 'header_row_highlight_with_fixed_columns.png', { element: dataGrid.element });
195+
195196
await t
196197
.expect(compareResults.isValid())
197198
.ok(compareResults.errorMessages());

‎packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -622,6 +622,12 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
622622
}
623623
}
624624

625+
.dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
626+
> .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
627+
box-shadow: 1px 0 0 $datagrid-border-color;
628+
}
629+
}
630+
625631
.dx-#{$widget-name}-filter-row {
626632
background-color: $datagrid-filter-row-background-color;
627633

@@ -965,6 +971,12 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
965971
}
966972
}
967973

974+
.dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
975+
> .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
976+
box-shadow: -1px 0 0 $datagrid-border-color;
977+
}
978+
}
979+
968980
.dx-#{$widget-name}-rowsview {
969981
&.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
970982
padding-left: 0;

0 commit comments

Comments
 (0)