DataGrid(T1163515): The last alternate row in a group and the adjacen…

…t group row do not have a border between them (#24528) (#24586)

Co-authored-by: Ilya Vinogradov <ilya.vinogradov@devexpress.com>

scss/widgets/generic/gridBase/_index.scss

@@ -121,15 +121,15 @@ $grid-masterdetail-padding: 20px;
       & > td,
       & > tr > td {
         background-color: $datagrid-row-alternation-bg;
-
-        // T838734
-        border-top: 1px solid $datagrid-row-alternation-bg;
-        border-bottom: 1px solid $datagrid-row-alternation-bg;
       }
 
       &.dx-row:not(.dx-row-removed) {
         border-bottom-color: transparent;
       }
+
+      // T838734
+      border-top: 1px solid $datagrid-row-alternation-bg;
+      border-bottom: 1px solid $datagrid-row-alternation-bg;
     }
 
     .dx-link {

scss/widgets/material/gridBase/_index.scss

@@ -198,15 +198,15 @@ $grid-masterdetail-padding: 16px;
     .dx-row-alt {
       & > td {
         background-color: $datagrid-row-alternation-bg;
-
-        // T838734
-        border-top: 1px solid $datagrid-row-alternation-bg;
-        border-bottom: 1px solid $datagrid-row-alternation-bg;
       }
 
       &.dx-row:not(.dx-row-removed) {
         border-bottom-color: transparent;
       }
+
+      // T838734
+      border-top: 1px solid $datagrid-row-alternation-bg;
+      border-bottom: 1px solid $datagrid-row-alternation-bg;
     }
 
     .dx-link {

testing/testcafe/tests/dataGrid/markup/T838734_alternateRowSizes.ts

@@ -0,0 +1,55 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import createWidget from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import DataGrid from '../../../model/dataGrid';
+
+fixture.disablePageReloads`Grouping Panel - Borders with enabled alternate rows`
+  .page(url(__dirname, '../../container.html'));
+
+const GRID_SELECTOR = '#container';
+
+const generateData = (rowCount) => new Array(rowCount).fill(null).map((_, idx) => ({
+  A: `A_${idx}`,
+  B: `B_${idx}`,
+  C: `C_${idx}`,
+}));
+
+test('Alternate rows should be the same size', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_SELECTOR);
+
+  await takeScreenshot(
+    'T838734_alternate-rows-same-size.png',
+    dataGrid.element,
+  );
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: generateData(10),
+  columns: ['A', 'B', {
+    dataField: 'C',
+    cellTemplate: ($container, { value }) => {
+      const $root = $('<div>');
+      $('<div>')
+        .text('C template')
+        .appendTo($root);
+      $('<div>')
+        .text(value)
+        .appendTo($root);
+      $root.appendTo($container);
+    },
+  }],
+  onCellPrepared: ({ cellElement, value }) => {
+    if (typeof value === 'string' && value.startsWith('B')) {
+      cellElement.html(`
+      <div>
+        <div>B template:</div>
+        <div>${value}</div>
+      </div>
+      `);
+    }
+  },
+  showRowLines: false,
+  rowAlternationEnabled: true,
+}));

testing/testcafe/tests/dataGrid/markup/group-panel/T1163515_alternateRowGroupBorders.ts

@@ -0,0 +1,192 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { changeTheme } from '../../../../helpers/changeTheme';
+import createWidget from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import DataGrid from '../../../../model/dataGrid';
+import { Themes } from '../../helpers/themes';
+
+// TODO: Enable multi-theming testcafe run in the future.
+fixture.disablePageReloads`Grouping Panel - Borders with enabled alternate rows`
+  .page(url(__dirname, '../../../container.html'));
+
+const GRID_SELECTOR = '#container';
+
+const getTestParams = ({
+  theme,
+  rowAlternationEnabled,
+  showColumnLines,
+  showRowLines,
+  showBorders,
+  hasFixedColumn,
+  hasMasterDetail,
+}) => [
+  `theme: ${theme}`,
+  `alt rows: ${rowAlternationEnabled}`,
+  `column lines: ${showColumnLines}`,
+  `row lines: ${showRowLines}`,
+  `borders: ${showBorders}`,
+  `fixed columns: ${hasFixedColumn}`,
+  `master detail: ${hasMasterDetail}`,
+].join(', ');
+
+const getScreenshotParams = ({
+  theme,
+  rowAlternationEnabled,
+  showColumnLines,
+  showRowLines,
+  showBorders,
+  hasFixedColumn,
+  hasMasterDetail,
+}) => [
+  `${theme === Themes.materialBlue ? 'material' : ''}`,
+  `${rowAlternationEnabled ? 'r-alt' : ''}`,
+  `${showColumnLines ? 'lines-c' : ''}`,
+  `${showRowLines ? 'lines-r' : ''}`,
+  `${showBorders ? 'borders' : ''}`,
+  `${hasFixedColumn ? 'f-columns' : ''}`,
+  `${hasMasterDetail ? 'm-detail' : ''}`,
+].filter((value) => !!value)
+  .join('_');
+const createDataGrid = async ({
+  rowAlternationEnabled,
+  showColumnLines,
+  showRowLines,
+  showBorders,
+  hasFixedColumn,
+  hasMasterDetail,
+}) => {
+  await createWidget('dxDataGrid', {
+    dataSource: [
+      {
+        group: 'A',
+        label: 'LABEL_A_0',
+        value: 'VALUE_A_0',
+        count: 1,
+      },
+      {
+        group: 'A',
+        label: 'LABEL_A_1',
+        value: 'VALUE_A_1',
+        count: 2,
+      },
+      {
+        group: 'B',
+        label: 'LABEL_B_0',
+        value: 'VALUE_B_0',
+        count: 3,
+      },
+      {
+        group: 'B',
+        label: 'LABEL_B_1',
+        value: 'VALUE_B_1',
+        count: 4,
+      },
+      {
+        group: 'B',
+        label: 'LABEL_B_2',
+        value: 'VALUE_B_2',
+        count: 5,
+      },
+      {
+        group: 'C',
+        label: 'LABEL_C_0',
+        value: 'VALUE_C_0',
+        count: 6,
+      },
+      {
+        group: 'C',
+        label: 'LABEL_C_1',
+        value: 'VALUE_C_1',
+        count: 7,
+      },
+    ],
+    columns: [
+      {
+        dataField: 'group',
+        groupIndex: 0,
+      },
+      {
+        dataField: 'label',
+        fixed: hasFixedColumn,
+      },
+      'value',
+      'count',
+    ],
+    summary: {
+      groupItems: [{
+        column: 'count',
+        summaryType: 'sum',
+      }],
+    },
+    masterDetail: hasMasterDetail
+      ? {
+        enabled: true,
+        autoExpandAll: true,
+        template: ($container) => {
+          $('<div>')
+            .text('MASTER DETAIL')
+            .appendTo($container);
+        },
+      }
+      : undefined,
+    editing: {
+      mode: 'row',
+      allowDeleting: true,
+      confirmDelete: false,
+    },
+    showBorders,
+    rowAlternationEnabled,
+    showRowLines,
+    showColumnLines,
+  });
+};
+
+const markupTest = (matrixOptions) => {
+  test(`Should show group panel borders with ${getTestParams(matrixOptions)}`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid(GRID_SELECTOR);
+    const rowIdx = matrixOptions.hasMasterDetail ? 8 : 5;
+    const colIdx = matrixOptions.hasMasterDetail ? 5 : 4;
+    const deleteBtn = matrixOptions.hasFixedColumn
+      ? dataGrid.getFixedDataRow(rowIdx).getCommandCell(colIdx).element
+      : dataGrid.getDataRow(rowIdx).getCommandCell(colIdx).element;
+
+    const screenshotParams = getScreenshotParams(matrixOptions);
+    const additionalScreenshotName = screenshotParams.length ? `_${screenshotParams}` : '';
+    await takeScreenshot(`borders${additionalScreenshotName}.png`, dataGrid.element);
+    await t.click(deleteBtn);
+    await takeScreenshot(`borders-repaint${additionalScreenshotName}.png`, dataGrid.element);
+
+    await t.expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await changeTheme(matrixOptions.theme);
+    await createDataGrid(matrixOptions);
+  }).after(async () => changeTheme(Themes.genericLight));
+};
+
+[Themes.materialBlue, Themes.genericLight].forEach((theme) => {
+  [true, false].forEach((hasFixedColumn) => {
+    [true, false].forEach((hasMasterDetail) => {
+      [true, false].forEach((rowAlternationEnabled) => {
+        [true, false].forEach((showColumnLines) => {
+          [true, false].forEach((showRowLines) => {
+            [true, false].forEach((showBorders) => {
+              const matrixOptions = {
+                theme,
+                rowAlternationEnabled,
+                showColumnLines,
+                showRowLines,
+                showBorders,
+                hasFixedColumn,
+                hasMasterDetail,
+              };
+
+              markupTest(matrixOptions);
+            });
+          });
+        });
+      });
+    });
+  });
+});