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.functional.ts

@@ -0,0 +1,187 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture.disablePageReloads`Band columns.Matrix`
+  .page(url(__dirname, '../../../container.html'));
+
+const GRID_CONTAINER = '#container';
+
+// [borderLeftWidth, borderRightWidth] in pixels
+type Borders = [left: number, right: number];
+
+interface CellBorderExpectation {
+  columnIndex: number;
+  name: string;
+  expected: Borders;
+}
+
+interface RowBorderExpectation {
+  rowIndex: number;
+  cells: CellBorderExpectation[];
+}
+
+async function checkHeaderCellBorders(
+  t: TestController,
+  dataGrid: DataGrid,
+  expectedRows: RowBorderExpectation[],
+): Promise<void> {
+  const headers = dataGrid.getHeaders();
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const { rowIndex, cells } of expectedRows) {
+    const headerRow = headers.getHeaderRow(rowIndex);
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { columnIndex, name, expected: [leftWidth, rightWidth] } of cells) {
+      const { element } = headerRow.getHeaderCell(columnIndex);
+
+      const borderLeft = await element.getStyleProperty('border-left-width');
+      const borderRight = await element.getStyleProperty('border-right-width');
+
+      await t
+        .expect(parseInt(borderLeft, 10)).eql(
+          leftWidth,
+          `"${name}" (row: ${rowIndex}, col: ${columnIndex}): border-left-width`,
+        )
+        .expect(parseInt(borderRight, 10)).eql(
+          rightWidth,
+          `"${name}" (row: ${rowIndex}, col: ${columnIndex}): border-right-width`,
+        );
+    }
+  }
+}
+
+const configs = [{
+  showColumnLines: true,
+  rtlEnabled: false,
+}, {
+  showColumnLines: false,
+  rtlEnabled: false,
+}, {
+  showColumnLines: true,
+  rtlEnabled: true,
+}, {
+  showColumnLines: false,
+  rtlEnabled: true,
+}];
+
+// Check vertical borders of band header cells
+configs.forEach((
+  { showColumnLines, rtlEnabled }: { showColumnLines: boolean; rtlEnabled: boolean; },
+): void => {
+  // Header layout:
+  // Row 0: | Band Column 1 (cols 0–2)    | Band Column 2 (cols 3–5)    |
+  // Row 1: | Nested BandColumn 1 (0–2)   | Nested Band Column 2 (3–5)  |
+  // Row 2: | Col1 | Col2 | Col3          | Col4 | Col5 | Col6          |
+  test(`Two band columns with three levels (showColumnLines: ${showColumnLines}, rtl: ${rtlEnabled})`, async (t) => {
+    const dataGrid = new DataGrid(GRID_CONTAINER);
+    const getExpectedBorders = (): RowBorderExpectation[] => {
+      if (showColumnLines) {
+        return [
+          {
+            rowIndex: 0,
+            cells: [
+              { columnIndex: 0, name: 'Band Column 1', expected: rtlEnabled ? [1, 0] : [0, 1] },
+              { columnIndex: 3, name: 'Band Column 2', expected: rtlEnabled ? [0, 0] : [1, 0] },
+            ],
+          },
+          {
+            rowIndex: 1,
+            cells: [
+              { columnIndex: 0, name: 'Nested Band Column 1', expected: rtlEnabled ? [1, 0] : [0, 1] },
+              { columnIndex: 3, name: 'Nested Band Column 2', expected: rtlEnabled ? [0, 0] : [1, 0] },
+            ],
+          },
+          {
+            rowIndex: 2,
+            cells: [
+              { columnIndex: 0, name: 'Col1', expected: rtlEnabled ? [1, 0] : [0, 1] },
+              { columnIndex: 1, name: 'Col2', expected: [1, 1] },
+              { columnIndex: 2, name: 'Col3', expected: [1, 1] },
+              { columnIndex: 3, name: 'Col4', expected: [1, 1] },
+              { columnIndex: 4, name: 'Col5', expected: [1, 1] },
+              { columnIndex: 5, name: 'Col6', expected: rtlEnabled ? [0, 0] : [1, 0] },
+            ],
+          },
+        ];
+      }
+
+      return [
+        {
+          rowIndex: 0,
+          cells: [
+            { columnIndex: 0, name: 'Band Column 1', expected: rtlEnabled ? [0, 0] : [0, 0] },
+            { columnIndex: 3, name: 'Band Column 2', expected: rtlEnabled ? [0, 1] : [1, 0] },
+          ],
+        },
+        {
+          rowIndex: 1,
+          cells: [
+            { columnIndex: 0, name: 'Nested Band Column 1', expected: rtlEnabled ? [0, 0] : [0, 0] },
+            { columnIndex: 3, name: 'Nested Band Column 2', expected: rtlEnabled ? [0, 1] : [1, 0] },
+          ],
+        },
+        {
+          rowIndex: 2,
+          cells: [
+            { columnIndex: 0, name: 'Col1', expected: [0, 0] },
+            { columnIndex: 1, name: 'Col2', expected: rtlEnabled ? [0, 1] : [1, 0] },
+            { columnIndex: 2, name: 'Col3', expected: rtlEnabled ? [0, 1] : [1, 0] },
+            { columnIndex: 3, name: 'Col4', expected: rtlEnabled ? [0, 1] : [1, 0] },
+            { columnIndex: 4, name: 'Col5', expected: rtlEnabled ? [0, 1] : [1, 0] },
+            { columnIndex: 5, name: 'Col6', expected: rtlEnabled ? [0, 1] : [1, 0] },
+          ],
+        },
+      ];
+    };
+
+    await t.expect(dataGrid.isReady()).ok();
+    await checkHeaderCellBorders(t, dataGrid, getExpectedBorders());
+  }).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' },
+                { dataField: 'Col2' },
+                { dataField: 'Col3' },
+              ],
+            },
+          ],
+        },
+        {
+          caption: 'Band Column 2',
+          columns: [
+            {
+              caption: 'Nested Band Column 2',
+              columns: [
+                { dataField: 'Col4' },
+                { dataField: 'Col5' },
+                { dataField: 'Col6' },
+              ],
+            },
+          ],
+        },
+      ],
+      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');
-});