DataGrid - Use Fluent theme in QUnit (focus, gridView, headerFilter, headerPanel, grouping.integration)

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js

@@ -11,7 +11,7 @@ import { createDataGrid, baseModuleConfig } from '../../helpers/dataGridHelper.j
 import ArrayStore from 'common/data/array_store';
 import { getEmulatorStyles } from '../../helpers/stylesHelper.js';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 const DX_STATE_HOVER_CLASS = 'dx-state-hover';
 const TEXTEDITOR_INPUT_SELECTOR = '.dx-texteditor-input';
@@ -66,7 +66,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
 
         const cellBackgroundColor = 'rgba(0, 0, 0, 0)';
         const $groupedRow = $(dataGrid.getRowElement(0)[0]);
-        assert.equal(window.getComputedStyle($groupedRow[0]).backgroundColor, 'rgb(214, 228, 241)', 'focused grouped row has correct background color in rtl mode');
+        assert.equal(window.getComputedStyle($groupedRow[0]).backgroundColor, 'rgb(208, 229, 251)', 'focused grouped row has correct background color in rtl mode');
         assert.equal(window.getComputedStyle($groupedRow.find('td')[0]).backgroundColor, cellBackgroundColor, 'cell in focused row has no background color');
         assert.equal(window.getComputedStyle($groupedRow.find('td')[1]).backgroundColor, cellBackgroundColor, 'cell in focused row has no background color');
     });
@@ -620,7 +620,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         this.clock.tick(10);
 
         // act
-        $(dataGrid.getCellElement(7, 0))
+        $(dataGrid.getCellElement(5, 0))
             .trigger('dxpointerdown');
 
         this.clock.tick(10);
@@ -654,7 +654,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         assert.ok($(dataGrid.getCellElement(0, 1)).hasClass('dx-focused'));
     });
 
-    QUnit.test('onFocusedCellChanged event should contains correct row object if scrolling, rowRenderingMode are virtual', function(assert) {
+    QUnit.test('onFocusedCellChanged event should contain correct row object when scrolling and rowRenderingMode are virtual', function(assert) {
         // arrange
         const data = [];
         let focusedCellChangedCount = 0;
@@ -688,7 +688,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
 
         // act
         const scrollable = dataGrid.getScrollable();
-        scrollable.scrollTo({ y: 600 });
+        scrollable.scrollTo({ y: 850 });
         $(scrollable.container()).trigger('scroll');
         this.clock.tick(10);
         $(dataGrid.getCellElement(0, 0)).trigger(CLICK_EVENT);
@@ -727,14 +727,14 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         this.clock.tick(500);
 
         // act
-        dataGrid.getScrollable().scrollTo({ y: 2000 });
+        dataGrid.getScrollable().scrollTo({ y: 2020 });
         this.clock.tick(500);
 
         // assert
-        assert.equal(dataGrid.getVisibleRows().length, 10, 'Visible row count');
-        assert.equal(dataGrid.getVisibleRows()[0].key, 59, 'First visible row key');
+        assert.equal(dataGrid.getVisibleRows().length, 8, 'Visible row count');
+        assert.equal(dataGrid.getVisibleRows()[0].key, 42, 'First visible row key');
         assert.equal(dataGrid.getRowIndexByKey(1), -1, 'Focused row is not visible');
-        assert.equal(dataGrid.getScrollable().scrollTop(), 2000, 'Scroll position is not changed');
+        assert.equal(dataGrid.getScrollable().scrollTop(), 2020, 'Scroll position is not changed');
     });
 
     // T804082
@@ -1806,7 +1806,7 @@ QUnit.module('Virtual row rendering', baseModuleConfig, () => {
 
         // act
         const scrollable = dataGrid.getScrollable();
-        scrollable.scrollBy(400);
+        scrollable.scrollBy(540);
         this.clock.tick(10);
 
         const firstVisibleRowKey = dataGrid.getVisibleRows()[0].key;
@@ -4461,7 +4461,7 @@ QUnit.module('API methods', baseModuleConfig, () => {
         this.clock.tick(10);
 
         // assert
-        assert.equal(Math.floor(rowData.index / 20), 2, 'scroll position is on third page');
+        assert.equal(Math.floor(rowData.index / 20), 1, 'scroll position is on second page');
         assert.equal(dataGrid.getTopVisibleRowData().index, rowData.index, 'scroll position is not changed');
         assert.equal($(dataGrid.$element()).find('input').val(), (rowData.index + 1).toString(), 'editor in second column with correct row index is opened');
         assert.ok($(dataGrid.$element()).find('input').closest('td').hasClass('dx-focused'), 'cell with editor is focused');

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js

@@ -1,4 +1,4 @@
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 import 'ui/data_grid';
 import 'common/data/odata/store';
@@ -4686,7 +4686,7 @@ QUnit.module('Focused row', getModuleConfig(true), () => {
             // assert
             assert.equal(this.option('focusedRowIndex'), 6, 'FocusedRowIndex');
             assert.equal(this.option('focusedRowKey'), 'Den', 'FocusedRowKey');
-            assert.equal(this.pageIndex(), 2, 'PageIndex');
+            assert.equal(this.pageIndex(), 3, 'PageIndex');
             assert.equal($(rowsView.getCellElement(5, 1)).text(), 'Alice');
             assert.ok(rowsViewWrapper.isRowVisible(5, 1));
         });

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/gridView.tests.js

@@ -1,6 +1,6 @@
 import devices from '__internal/core/m_devices';
 import visibilityChange from 'common/core/events/visibility_change';
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 import $ from 'jquery';
 import 'ui/data_grid';
 import gridCore from '__internal/grids/data_grid/m_core';
@@ -668,7 +668,7 @@ QUnit.module('Grid view', {
             })
         });
 
-        $('#container').height(100).width(1000);
+        $('#container').height(200).width(1000);
 
         gridView.render($('#container'), $.extend(this.options, {
             scrolling: true,
@@ -685,7 +685,7 @@ QUnit.module('Grid view', {
         const pagerView = gridView.getView('pagerView');
 
         // B232626
-        assert.roughEqual(columnsHeaderViewContainer[0].offsetHeight + rowsViewViewContainer[0].offsetHeight + pagerView.getHeight(), 1.01, 100);
+        assert.roughEqual(columnsHeaderViewContainer[0].offsetHeight + rowsViewViewContainer[0].offsetHeight + pagerView.getHeight(), 200, 1.01);
         assert.notStrictEqual(columnsHeaderViewContainer[0].offsetHeight, 0);
         assert.notStrictEqual(rowsViewViewContainer[0].offsetHeight, 0);
         assert.notStrictEqual(pagerView.getHeight(), 0);
@@ -1968,7 +1968,7 @@ QUnit.module('Synchronize columns', {
         // assert
         const $colElements = $testElement.find('.dx-datagrid-headers').find('col');
         assert.strictEqual($colElements.length, 5, 'column count');
-        assert.strictEqual($colElements.get(1).style.width, '100px', 'width of a first command column');
+        assert.strictEqual($colElements.get(1).style.width, '115px', 'width of a first command column');
         assert.strictEqual($colElements.get(2).style.width, '250px', 'width of a second command column');
     });
 
@@ -2090,7 +2090,7 @@ QUnit.module('Synchronize columns', {
 
         // assert
         const $colElements = $testElement.find('.dx-datagrid-rowsview').find('col');
-        assert.strictEqual($colElements.get(0).style.width, '70px', 'width of the select column');
+        assert.strictEqual($colElements.get(0).style.width, '50px', 'width of the select column');
         assert.strictEqual($colElements.get(1).style.width, '30px', 'width of the expand column');
         assert.strictEqual($colElements.get(2).style.width, '30px', 'width of the expand column');
         assert.strictEqual($colElements.get(3).style.width, '45px', 'width of the button column');
@@ -2292,7 +2292,7 @@ QUnit.module('Fixed columns', {
                 { dataField: 'field2', width: 250 },
                 { dataField: 'field3', width: 250 },
                 { dataField: 'field4' }
-            ]
+            ],
         });
 
         // act
@@ -2306,7 +2306,7 @@ QUnit.module('Fixed columns', {
         assert.strictEqual($colElements.get(1).style.width, '', 'width of the second cell');
         assert.strictEqual($colElements.get(2).style.width, '', 'width of the third cell');
         assert.strictEqual($colElements.get(3).style.width, '', 'width of the fourth cell');
-        assert.strictEqual($colElements.get(4).style.width, '111px', 'width of the fifth cell');
+        assert.roughEqual(parseFloat($colElements.get(4).style.width), 128, 1.01, 'width of the fifth cell');
     });
 
     // T800761
@@ -2335,7 +2335,7 @@ QUnit.module('Fixed columns', {
 
         // assert
         const $headerElement = $(gridView.getView('columnHeadersView').getCellElement(0, 0));
-        assert.strictEqual($headerElement.outerWidth(), 215, 'width of the first header'); // width = 200(content width) + 14(padding) + 1(border)
+        assert.roughEqual($headerElement.outerWidth(), 234, 2, 'width of the first header'); // width = 200(content width) + 32(padding) + 2(border)
     });
 });
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/grouping.integration.tests.js

@@ -8,7 +8,7 @@ import DataGridWrapper from '../../helpers/wrappers/dataGridWrappers.js';
 import { createDataGrid, baseModuleConfig } from '../../helpers/dataGridHelper.js';
 import $ from 'jquery';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 const dataGridWrapper = new DataGridWrapper('#dataGrid');
 
@@ -677,7 +677,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
                 contextMenuEnabled: true
             },
             columnHidingEnabled: true,
-            width: 200,
+            width: 250,
             dataSource: [
                 { field1: '1', field2: '2', field3: '3', field4: '4' },
                 { field1: '1', field2: '4', field3: '3', field4: '5' }
@@ -1260,7 +1260,7 @@ QUnit.module('API methods', baseModuleConfig, () => {
         dataGrid.expandRow(['group1']);
 
         // assert
-        assert.equal(dataGrid.getVisibleColumns()[0].visibleWidth, 30, 'visibleWidth for first groupExpand column');
+        assert.roughEqual(dataGrid.getVisibleColumns()[0].visibleWidth, 30, 0.01, 'visibleWidth for first groupExpand column');
     });
 
     QUnit.test('Group Row - expandRow should resolve its promise only after re-rendering (T880769)', function(assert) {
@@ -1409,7 +1409,7 @@ QUnit.module('columnWidth auto option', {
             loadingTimeout: null,
             dataSource: [{ value0: 0, value1: 1, value2: 2 }],
             columnAutoWidth: true,
-            width: 400,
+            width: 380,
             selection: {
                 mode: 'multiple',
                 showCheckBoxesMode: 'always',

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js

@@ -1,4 +1,4 @@
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 import 'ui/data_grid';
 import gridCoreUtils from '__internal/grids/grid_core/m_utils';
@@ -1516,7 +1516,7 @@ QUnit.module('Header Filter', {
         const $headerFilter = that.headerPanel.element().find('.dx-group-panel-item').first().find('.dx-header-filter');
         assert.equal($headerFilter.length, 1, 'have header filter');
         assert.ok(!$headerFilter.hasClass('dx-header-filter-empty'), 'has no class dx-header-filter-empty');
-        assert.strictEqual($headerFilter.css('color'), $headerFilter.parent().css('color'), 'color of the header should be as parent color');
+        assert.strictEqual($headerFilter.css('color'), 'rgb(15, 108, 189)', 'color of the header should be accented');
     });
 
     QUnit.test('Header filter popup should be shown on header filter icon click in groupPanel', function(assert) {
@@ -1613,7 +1613,7 @@ QUnit.module('Header Filter', {
         const $headerFilter = that.headerPanel.element().find('.dx-group-panel-item').first().find('.dx-header-filter');
         assert.equal($headerFilter.length, 1, 'have header filter');
         assert.ok($headerFilter.hasClass('dx-header-filter-empty'), 'has no class dx-header-filter-empty');
-        assert.notStrictEqual($headerFilter.css('color'), $headerFilter.parent().css('color'), 'color of the header filter should hava alpha');
+        assert.equal($headerFilter.css('color'), 'rgba(36, 36, 36, 0.72)', 'color of the header filter should not be accented');
     });
 
     // T260241

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerPanel.tests.js

@@ -1,4 +1,4 @@
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 import 'ui/data_grid';
 
@@ -262,31 +262,6 @@ QUnit.module('Header panel', {
         assert.ok($groupPanelItemChildren.eq(1).hasClass('dx-column-indicators'), 'indicators are after text in group panel');
     });
 
-    QUnit.test('Group panel with sorting, height after change font size', function(assert) {
-        // arrange
-        const headerPanel = this.headerPanel;
-        const testElement = $('#container');
-
-        $.extend(this.columns[0], { groupIndex: 0, allowSorting: true });
-
-        this.options.groupPanel = {
-            visible: true
-        };
-
-        headerPanel.render(testElement);
-
-        const groupHeader = testElement.find('.dx-datagrid-group-panel');
-        const oldHeight = groupHeader.height();
-
-        // act
-        groupHeader.css('font-size', '10px');
-
-        headerPanel.resize();
-
-        // assert
-        assert.ok(oldHeight > groupHeader.height(), 'sort indicator height changed');
-    });
-
     QUnit.test('Draw header panel with group panel and search panel', function(assert) {
         // arrange
         const headerPanel = this.headerPanel;
@@ -361,7 +336,7 @@ QUnit.module('Header panel', {
         const searchPanel = testElement.find('.dx-datagrid-search-panel');
         assert.strictEqual(input.length, 1);
         assert.strictEqual(searchPanel.length, 1);
-        assert.equal(searchPanel.outerWidth(), 213, 'default search panel width');
+        assert.roughEqual(searchPanel.outerWidth(), 213, 0.01, 'default search panel width');
     });
 
     // T947070