PivotGrid - Fix unstable tests - QUnit - dataController.tests.js, pivotgrid.tests.js, fieldsArea.tests.js

packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/dataController.tests.js

@@ -6708,34 +6708,42 @@ QUnit.module('Remote paging', {
         assert.strictEqual(changedSpy.callCount, 3, 'changed call count');
     });
 
-    QUnit.skip('load with CustomStore', function(assert) {
+    QUnit.test('load with CustomStore', function(assert) {
         const that = this;
 
-        const dataController = that.setup({
-            paginate: true,
-            fields: [{ dataField: 'row', area: 'row' }],
+        const CustomPivotStore = Class.inherit({
+            ctor: function() {},
+            getFields: function() {
+                return $.Deferred().resolve([]).promise();
+            },
+            supportPaging: function() {
+                return true;
+            },
             load: function(loadOptions) {
                 that.loadArgs.push(loadOptions);
-                return $.Deferred().resolve([{ key: 'row 1' }, { key: 'row 2' }], {
-                    groupCount: 10
-                });
+                return $.Deferred().resolve({
+                    rows: [
+                        { value: 'row 1', text: 'row 1', index: 1 },
+                        { value: 'row 2', text: 'row 2', index: 2 }
+                    ],
+                    columns: [],
+                    values: [[null], [null], [null]],
+                    grandTotalRowIndex: 0,
+                    grandTotalColumnIndex: 0
+                }).promise();
             }
         });
 
-        assert.strictEqual(this.loadArgs.length, 1, 'one load');
-        assert.deepEqual(this.loadArgs[0], {
-            group: [{
-                desc: false,
-                groupInterval: undefined,
-                isExpanded: false,
-                selector: 'row'
-            }],
-            groupSummary: [],
-            requireGroupCount: true,
-            skip: 0,
-            take: 2,
-            totalSummary: []
-        }, 'load args');
+        const dataController = that.setup({
+            paginate: true,
+            store: new CustomPivotStore(),
+            fields: [{ dataField: 'row', area: 'row' }, { area: 'data' }]
+        });
+
+        assert.strictEqual(that.loadArgs.length, 1, 'one load');
+        assert.ok(that.loadArgs[0].rows, 'has rows in load options');
+        assert.strictEqual(that.loadArgs[0].rowSkip, 0, 'rowSkip is 0');
+        assert.strictEqual(that.loadArgs[0].rowTake, 2, 'rowTake is 2');
 
         assert.deepEqual(dataController.getRowsInfo(), [
             [{ dataSourceIndex: 1, text: 'row 1', path: ['row 1'], type: 'D', isLast: true }],

packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldsArea.tests.js

@@ -178,14 +178,39 @@ QUnit.module('Rendering', {
 
 QUnit.module('Hamburger', {
     beforeEach: function() {
+        const fieldChooserBaseMock = {
+            renderField: function(field) {
+                return $('<div>').addClass('dx-area-field').text(field.dataField);
+            },
+            subscribeToEvents: sinon.stub(),
+            renderSortable: sinon.stub()
+        };
+
         this.component = {
             option: sinon.stub(),
-            element: function() {
-                return $('<div>').dxPivotGridFieldChooserBase();
+            $element: function() {
+                const element = $('<div>');
+                element.dxPivotGridFieldChooserBase = function(method) {
+                    if(method === 'instance') {
+                        return fieldChooserBaseMock;
+                    }
+                    return element;
+                };
+                return element;
             },
 
             _createComponent: function(container, Component, options) {
-                return new Component(container, options);
+                const instance = new Component(container, options);
+
+                if(instance.NAME === 'dxPopup' && instance.content) {
+                    const originalContent = instance.content.bind(instance);
+                    instance.content = function() {
+                        const content = originalContent();
+                        return content && content.jquery ? content : $(content);
+                    };
+                }
+
+                return instance;
             }
         };
 
@@ -195,22 +220,28 @@ QUnit.module('Hamburger', {
         this.component.option.withArgs('rowLayout').returns('tree');
 
         this.fields = [
-            { dataField: 'Field Area 1', allowFiltering: true, allowSorting: true, area: 'row' },
-            { dataField: 'Field2', allowFiltering: true, allowSorting: true, area: 'row' }
+            { dataField: 'Field Area 1', allowFiltering: true, allowSorting: true, area: 'row', visible: true },
+            { dataField: 'Field2', allowFiltering: true, allowSorting: true, area: 'row', visible: true }
         ];
 
         this.area = new FieldsArea(this.component, 'row');
+        this.area._shouldCreateButton = function() { return true; };
         this.$container = $('#container').addClass('dx-pivotgrid');
 
         const that = this;
 
         this.renderArea = function() {
             that.area.render(that.$container, that.fields);
         };
+
+        this.clock = sinon.useFakeTimers();
+    },
+    afterEach: function() {
+        this.clock.restore();
     }
 }, () => {
 
-    QUnit.skip('Render hamburger button', function(assert) {
+    QUnit.test('Render hamburger button', function(assert) {
         this.renderArea();
 
         const rows = this.area.tableElement()[0].rows;
@@ -225,17 +256,25 @@ QUnit.module('Hamburger', {
         assert.ok(!popup.option('dragEnabled'));
     });
 
-    QUnit.skip('Show popup with fields', function(assert) {
+    QUnit.test('Show popup with fields', function(assert) {
         this.renderArea();
         const button = $(this.area.tableElement()[0].rows[0].cells[0]).children(0).dxButton('instance');
-
-        button.element().trigger('dxclick');
         const popup = this.area.tableElement().find('.dx-fields-area-popup').dxPopup('instance');
 
-        assert.ok(popup);
-        assert.ok(popup.option('visible'));
-        assert.strictEqual(popup.content().find('.dx-pivotgrid-fields-area-head').length, 1);
-        assert.strictEqual(popup.content().find('.dx-pivotgrid-fields-area-head').find('.dx-area-field').length, 2);
+        assert.ok(popup, 'popup exists');
+        assert.ok(!popup.option('visible'), 'popup is hidden initially');
+
+        const contentTemplate = popup.option('contentTemplate');
+        assert.ok(contentTemplate, 'popup has contentTemplate');
+
+        const templateResult = contentTemplate();
+        assert.ok(templateResult.hasClass('dx-area-field-container'), 'contentTemplate returns table with correct class');
+        assert.strictEqual(templateResult.find('.dx-pivotgrid-fields-area-head').length, 1, 'contentTemplate creates fields area head');
+        assert.strictEqual(templateResult.find('.dx-pivotgrid-fields-area-head td').length, 2, 'contentTemplate creates 2 field cells');
+
+        $(button.$element()).trigger('dxclick');
+
+        assert.ok(popup.option('visible'), 'popup is visible after click');
     });
 
 });

packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js

@@ -6175,7 +6175,7 @@ QUnit.module('Vertical headers', {
     });
 
     // T696415
-    QUnit.skip('headers and data columns has same width', function(assert) {
+    QUnit.test('headers and data columns has same width', function(assert) {
         const fields = [
             { area: 'row', dataField: 'row1' },
             { area: 'column', dataField: 'col1' }
@@ -6199,10 +6199,16 @@ QUnit.module('Vertical headers', {
         this.clock.tick(10);
         grid.$element().css('zoom', 1.35);
         grid.repaint();
+        this.clock.tick(10);
 
         const columnsWidth = grid._columnsArea.getColumnsWidth();
         const dataWidth = grid._dataArea.getColumnsWidth();
-        assert.deepEqual(columnsWidth, dataWidth);
+
+        assert.strictEqual(columnsWidth.length, dataWidth.length, 'arrays have same length');
+
+        for(let i = 0; i < columnsWidth.length; i++) {
+            assert.roughEqual(columnsWidth[i], dataWidth[i], 2, `column ${i} width`);
+        }
     });
 
     function needRunZoomTest() {