DataGrid: Fix the banded Columns' vertical borders (T1318812)

e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/functional.ts

@@ -0,0 +1,123 @@
+import Button from 'devextreme-testcafe-models/button';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture.disablePageReloads`Band columns.Functional`
+  .page(url(__dirname, '../../../container.html'));
+
+const GRID_CONTAINER = '#container';
+
+test('Changing dataField for a banded column with the columnOption method does not work as expected (T1210340)', async (t) => {
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const changeFieldButton = new Button('#otherContainer');
+
+  await t
+    .expect(dataGrid.getDataCell(0, 4).element.innerText)
+    .eql('2353025')
+    .click(changeFieldButton.element)
+    .expect(dataGrid.getDataCell(0, 4).element.innerText)
+    .eql('0.672');
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [{
+      id: 1,
+      Country: 'Brazil',
+      Area: 8515767,
+      Population_Urban: 0.85,
+      Population_Rural: 0.15,
+      Population_Total: 205809000,
+      GDP_Agriculture: 0.054,
+      GDP_Industry: 0.274,
+      GDP_Services: 0.672,
+      GDP_Total: 2353025,
+    }],
+    columns: [
+      'Country',
+      'Area', {
+        caption: 'Population',
+        columns: [
+          'Population_Total',
+          'Population_Urban',
+        ],
+      }, {
+        caption: 'Nominal GDP',
+        columns: [{
+          caption: 'Total, mln $',
+          dataField: 'GDP_Total',
+          name: 'GDP_Total',
+        }, {
+          caption: 'By Sector',
+          columns: [{
+            caption: 'Agriculture',
+            dataField: 'GDP_Agriculture',
+          }, {
+            caption: 'Industry',
+            dataField: 'GDP_Industry',
+            format: {
+              type: 'percent',
+            },
+          }, {
+            caption: 'Services',
+            dataField: 'GDP_Services',
+          }],
+        }],
+      }],
+    keyExpr: 'id',
+    showBorders: true,
+  });
+
+  await createWidget('dxButton', {
+    text: 'Change fields',
+    onClick() {
+      const grid = ($('#container') as any).dxDataGrid('instance');
+      grid.columnOption('GDP_Total', 'dataField', 'GDP_Services');
+    },
+  }, '#otherContainer');
+});
+
+test('The first header class should update correctly when the first data column is hidden in responsive mode', async (t) => {
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const firstHeaderRow = dataGrid.getHeaders().getHeaderRow(0);
+  const secondHeaderRow = dataGrid.getHeaders().getHeaderRow(1);
+
+  await t
+    .expect(dataGrid.isReady()).ok()
+    .expect(firstHeaderRow.getHeaderCell(0).isFirstHeader)
+    .ok()
+    .expect(firstHeaderRow.getHeaderCell(2).isFirstHeader)
+    .notOk()
+    .expect(secondHeaderRow.getHeaderCell(0).isFirstHeader)
+    .ok()
+    .expect(secondHeaderRow.getHeaderCell(1).isFirstHeader)
+    .notOk();
+
+  await dataGrid.apiOption('width', 275);
+
+  await t
+    .expect(firstHeaderRow.getHeaderCell(0).isFirstHeader)
+    .ok()
+    .expect(firstHeaderRow.getHeaderCell(2).isFirstHeader)
+    .notOk()
+    .expect(secondHeaderRow.getHeaderCell(0).isFirstHeader)
+    .notOk()
+    .expect(secondHeaderRow.getHeaderCell(1).isFirstHeader)
+    .ok();
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    width: 350,
+    columnWidth: 100,
+    columnHidingEnabled: true,
+    dataSource: [{ field1: 1, field2: 2, field3: 3 }],
+    columns: [
+      {
+        caption: 'Band 1',
+        columns: [
+          { dataField: 'field1', hidingPriority: 0 },
+          { dataField: 'field2', hidingPriority: 1 },
+        ],
+      },
+      { dataField: 'field3', hidingPriority: 2 },
+    ],
+  });
+});

e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/matrix.ts

@@ -0,0 +1,174 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { testScreenshot } from '../../../../helpers/themeUtils';
+import { Themes } from '../../../../helpers/themes';
+
+fixture.disablePageReloads`Band columns.Matrix`
+  .page(url(__dirname, '../../../container.html'));
+
+const GRID_CONTAINER = '#container';
+
+const configs = [{
+  showColumnLines: true,
+  rtlEnabled: false,
+}, {
+  showColumnLines: true,
+  rtlEnabled: true,
+}, {
+  showColumnLines: false,
+  rtlEnabled: false,
+}, {
+  showColumnLines: false,
+  rtlEnabled: true,
+}];
+
+configs.forEach((
+  { showColumnLines, rtlEnabled }: { showColumnLines: boolean; rtlEnabled: boolean; },
+): void => {
+  test.meta({ themes: [Themes.materialBlue, Themes.genericLight] })(`The grid with grouped and fixed columns should display correct vertical borders when showColumnLines=${showColumnLines} and rtl=${rtlEnabled}(T1318812)`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid(GRID_CONTAINER);
+
+    await t.expect(dataGrid.isReady()).ok();
+
+    await testScreenshot(
+      t,
+      takeScreenshot,
+      `T1318812__datagrid__band-and-grouped-and-fixed-columns__vertical-borders(showColumnLines=${showColumnLines},rtl=${rtlEnabled}).png`,
+      { element: dataGrid.element },
+    );
+
+    await t.expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await createWidget('dxDataGrid', {
+      dataSource: [
+        {
+          Col1: 'Data A', Col2: 'Desc A', Col3: 'Group 1', Col4: 'X', Col5: 100, Col6: 50,
+        },
+        {
+          Col1: 'Data B', Col2: 'Desc B', Col3: 'Group 1', Col4: 'Y', Col5: 200, Col6: 20,
+        },
+        {
+          Col1: 'Data C', Col2: 'Desc C', Col3: 'Group 2', Col4: 'Z', Col5: 300, Col6: 10,
+        },
+      ],
+      columns: [
+        {
+          caption: 'Band Column 1',
+          columns: [
+            {
+              caption: 'Nested BandColumn 1',
+              columns: [
+                { dataField: 'Col1', width: 150 },
+                { dataField: 'Col2', width: 300 },
+                { dataField: 'Col3', width: 300, groupIndex: 0 },
+              ],
+            },
+          ],
+        },
+        {
+          caption: 'Band Column 2',
+          fixed: true,
+          columns: [
+            {
+              caption: 'Nested Band Column 2',
+              columns: [
+                { dataField: 'Col4', width: 120 },
+              ],
+            },
+          ],
+        },
+        {
+          caption: 'Band Column 3',
+          columns: [
+            {
+              caption: 'Nested Band Column 3',
+              columns: [
+                { dataField: 'Col5', width: 150 },
+                { dataField: 'Col6', width: 150 },
+              ],
+            },
+          ],
+        },
+      ],
+      showColumnLines,
+      rtlEnabled,
+      columnWidth: 100,
+    });
+  });
+
+  test.meta({ themes: [Themes.materialBlue, Themes.genericLight] })(`The grid should display correct vertical borders when showColumnLines=${showColumnLines} and rtl=${rtlEnabled}(T1318812)`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid(GRID_CONTAINER);
+
+    await t.expect(dataGrid.isReady()).ok();
+
+    await testScreenshot(
+      t,
+      takeScreenshot,
+      `T1318812__datagrid__band-columns__vertical-borders(showColumnLines=${showColumnLines},rtl=${rtlEnabled}).png`,
+      { element: dataGrid.element },
+    );
+
+    await t.expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await createWidget('dxDataGrid', {
+      dataSource: [
+        {
+          Col1: 'Data A', Col2: 'Desc A', Col3: 'Group 1', Col4: 'X', Col5: 100, Col6: 50,
+        },
+        {
+          Col1: 'Data B', Col2: 'Desc B', Col3: 'Group 1', Col4: 'Y', Col5: 200, Col6: 20,
+        },
+        {
+          Col1: 'Data C', Col2: 'Desc C', Col3: 'Group 2', Col4: 'Z', Col5: 300, Col6: 10,
+        },
+      ],
+      columns: [
+        'Col1',
+        {
+          caption: 'Band Column 1',
+          columns: [
+            {
+              caption: 'Nested BandColumn 1',
+              columns: [
+                { dataField: 'Col2', width: 300 },
+                { dataField: 'Col3', width: 300 },
+              ],
+            },
+          ],
+        },
+        {
+          caption: 'Band Column 2',
+          columns: [
+            {
+              caption: 'Nested Band Column 2',
+              columns: [
+                { dataField: 'Col4', width: 120 },
+              ],
+            },
+          ],
+        },
+        {
+          caption: 'Band Column 3',
+          columns: [
+            {
+              caption: 'Nested Band Column 3',
+              columns: [
+                { dataField: 'Col5', width: 150 },
+                { dataField: 'Col6', width: 150 },
+              ],
+            },
+          ],
+        },
+      ],
+      showColumnLines,
+      rtlEnabled,
+      columnWidth: 100,
+    });
+  });
+});

e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/runtimeChange.ts → e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/visual.ts

@@ -1,12 +1,11 @@
 import { ClientFunction } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
-import Button from 'devextreme-testcafe-models/button';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { testScreenshot } from '../../../../helpers/themeUtils';
 
-fixture.disablePageReloads`Band columns: runtime change`
+fixture.disablePageReloads`Band columns.Visual`
   .page(url(__dirname, '../../../container.html'));
 
 const GRID_CONTAINER = '#container';
@@ -114,71 +113,3 @@ test('Should change usual columns to band columns without error in React (T12136
     showBorders: true,
   });
 });
-
-test('Changing dataField for a banded column with the columnOption method does not work as expected (T1210340)', async (t) => {
-  const dataGrid = new DataGrid(GRID_CONTAINER);
-  const changeFieldButton = new Button('#otherContainer');
-
-  await t
-    .expect(dataGrid.getDataCell(0, 4).element.innerText)
-    .eql('2353025')
-    .click(changeFieldButton.element)
-    .expect(dataGrid.getDataCell(0, 4).element.innerText)
-    .eql('0.672');
-}).before(async () => {
-  await createWidget('dxDataGrid', {
-    dataSource: [{
-      id: 1,
-      Country: 'Brazil',
-      Area: 8515767,
-      Population_Urban: 0.85,
-      Population_Rural: 0.15,
-      Population_Total: 205809000,
-      GDP_Agriculture: 0.054,
-      GDP_Industry: 0.274,
-      GDP_Services: 0.672,
-      GDP_Total: 2353025,
-    }],
-    columns: [
-      'Country',
-      'Area', {
-        caption: 'Population',
-        columns: [
-          'Population_Total',
-          'Population_Urban',
-        ],
-      }, {
-        caption: 'Nominal GDP',
-        columns: [{
-          caption: 'Total, mln $',
-          dataField: 'GDP_Total',
-          name: 'GDP_Total',
-        }, {
-          caption: 'By Sector',
-          columns: [{
-            caption: 'Agriculture',
-            dataField: 'GDP_Agriculture',
-          }, {
-            caption: 'Industry',
-            dataField: 'GDP_Industry',
-            format: {
-              type: 'percent',
-            },
-          }, {
-            caption: 'Services',
-            dataField: 'GDP_Services',
-          }],
-        }],
-      }],
-    keyExpr: 'id',
-    showBorders: true,
-  });
-
-  await createWidget('dxButton', {
-    text: 'Change fields',
-    onClick() {
-      const grid = ($('#container') as any).dxDataGrid('instance');
-      grid.columnOption('GDP_Total', 'dataField', 'GDP_Services');
-    },
-  }, '#otherContainer');
-});