DataGrid - Vertical borders disappear from banded/multi-line headers when there are fixed columns (T1282595) (DevExpress#29993)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/multi_row_header_columns_(fluent.blue.light).png

@@ -0,0 +1,53 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { safeSizeTest } from '../../../../helpers/safeSizeTest';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import { defaultConfig } from '../helpers/data';
+import { changeTheme } from '../../../../helpers/changeTheme';
+import { Themes } from '../../../../helpers/themes';
+
+const DATA_GRID_SELECTOR = '#container';
+
+fixture.disablePageReloads`Sticky columns - Multi Row Header Columns`
+  .page(url(__dirname, '../../../container.html'));
+
+[Themes.genericLight, Themes.materialBlue, Themes.fluentBlue].forEach((theme) => {
+  safeSizeTest(`The multi row header columns should have vertical borders when a column is fixed (${theme} theme) (T1282595)`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+    await t.expect(dataGrid.isReady()).ok();
+
+    await takeScreenshot(`multi_row_header_columns_(${theme}).png`, dataGrid.element);
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }, [800, 800])
+    .before(async () => {
+      await changeTheme(theme);
+      await createWidget('dxDataGrid', {
+        ...defaultConfig,
+        columns: [
+          {
+            dataField: 'ID',
+            fixed: true,
+          },
+          {
+            caption: 'Order',
+            columns: [
+              'OrderNumber',
+              'OrderDate',
+            ],
+          },
+          'SaleAmount',
+          'Terms',
+        ],
+        showBorders: true,
+      });
+    })
+    .after(async () => {
+      await changeTheme(Themes.genericLight);
+    });
+});

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/multi_row_header_columns_(generic.light).png

@@ -399,13 +399,15 @@ $datagrid-text-stub-background-image-path: null !default;
 }
 
 .dx-datagrid, .dx-rtl .dx-datagrid {
-  .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row {
-    td.dx-datagrid-sticky-column-border-right {
-      border-right: 2px solid $datagrid-border-color;
-    }
+  .dx-datagrid-sticky-columns .dx-datagrid-table {
+    .dx-row {
+      td.dx-datagrid-sticky-column-border-right {
+        border-right: 2px solid $datagrid-border-color;
+      }
 
-    td.dx-datagrid-sticky-column-border-left {
-      border-left: 2px solid $datagrid-border-color;
+      td.dx-datagrid-sticky-column-border-left {
+        border-left: 2px solid $datagrid-border-color;
+      }
     }
   }
 }

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/multi_row_header_columns_(material.blue.light).png

@@ -735,6 +735,14 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
           }
         }
       }
+
+      .dx-row {
+        &.dx-header-row {
+          > td {
+            border-right: 1px solid $fluent-grid-base-border-color;
+          }
+        }
+      }
     }
 
     &.dx-header-multi-row:not(.dx-#{$widget-name}-sticky-columns) {
@@ -743,7 +751,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
           .dx-row {
             &.dx-header-row {
               > td {
-                border-right: 1px solid $fluent-grid-base-border-color;
                 border-left: 1px solid $fluent-grid-base-border-color;
 
                 &:first-child {

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withMultiRow.ts

@@ -710,6 +710,14 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           }
         }
       }
+
+      .dx-row {
+        &.dx-header-row {
+          > td {
+            border-right: 1px solid $material-grid-base-border-color;
+          }
+        }
+      }
     }
 
     &.dx-header-multi-row:not(.dx-#{$widget-name}-sticky-columns) {
@@ -718,7 +726,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           .dx-row {
             &.dx-header-row {
               > td {
-                border-right: 1px solid $material-grid-base-border-color;
                 border-left: 1px solid $material-grid-base-border-color;
 
                 &:first-child {