CardView - prepare to e2e testing & make simple tests

.github/workflows/testcafe_tests.yml

@@ -112,6 +112,9 @@ jobs:
           { componentFolder: "dataGrid", name: "dataGrid (3/5)", indices: "3/5" },
           { componentFolder: "dataGrid", name: "dataGrid (4/5)", indices: "4/5" },
           { componentFolder: "dataGrid", name: "dataGrid (5/5)", indices: "5/5" },
+          { componentFolder: "cardView", name: "cardView" },
+          { componentFolder: "cardView", name: "cardView - material", theme: 'material.blue.light' },
+          { componentFolder: "cardView", name: "cardView - fluent", theme: 'fluent.blue.light' },
           { componentFolder: "pivotGrid", name: "pivotGrid", concurrency: 1 },
           { componentFolder: "pivotGrid", name: "pivotGrid - material", theme: 'material.blue.light', concurrency: 1 },
           { componentFolder: "pivotGrid", name: "pivotGrid - fluent", theme: 'fluent.blue.light', concurrency: 1 },

e2e/testcafe-devextreme/tests/cardView/pager.ts

@@ -0,0 +1,50 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+
+async function createCardViewWithPager(): Promise<any> {
+  const dataSource = Array.from({ length: 20 }, (_, i) => ({ text: i.toString(), value: i}));
+  return createWidget('dxCardView', {
+    dataSource,
+    paging: {
+      pageSize: 2,
+      pageIndex: 5,
+    },
+    pager: {
+      showPageSizeSelector: true,
+      allowedPageSizes: [2, 3, 4],
+      showInfo: true,
+      showNavigationButtons: true,
+    },
+  });
+}
+fixture.disablePageReloads`Pager`
+  .page(url(__dirname, '../container.html'));
+
+test('Page index interaction', async (t) => {
+  const cardView = new CardView('#container');
+  const pager = cardView.getPager();
+  await t
+    .expect(pager.getPageSize(0).selected)
+    .ok('page size 2 selected')
+    .expect(pager.getNavPage('6').selected)
+    .ok('page 6 selected')
+    .expect(pager.getInfoText().textContent)
+    .eql('Page 6 of 10 (20 items)')
+    .expect(cardView.getCard(1).getFieldValueCell('Text').innerText)
+    .eql('11')
+
+  // set page index 7
+  await t
+    .click(pager.getNavPage('7').element)
+    .expect(cardView.getCard(1).getFieldValueCell('Text').innerText)
+    .eql('13')
+    .expect(pager.getInfoText().textContent)
+    .eql('Page 7 of 10 (20 items)');
+
+  // navigate to prev page (6)
+  await t
+    .click(pager.getPrevNavButton().element)
+    .expect(pager.getInfoText().textContent)
+    .eql('Page 6 of 10 (20 items)');
+}).before(async () => createCardViewWithPager());

packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/pager.ts

@@ -10,7 +10,7 @@ export interface PagerProps {
   pageIndexChanged?: (value: number) => void;
   pageSizeChanged?: (value: number) => void;
 
-  gridCompatibility?: boolean;
+  isGridCompatibility?: boolean;
 
   pageSizes?: number[];
 

packages/devextreme/js/__internal/grids/new/grid_core/pager/view.tsx

@@ -41,6 +41,7 @@ export class PagerView extends View<PagerProps> {
 
   protected override getProps(): SubsGets<PagerProps> {
     return combined({
+      itemCount: this.dataController.totalCount,
       allowedPageSizes: this.allowedPageSizes,
       visible: this.visible,
       pageIndex: computed(
@@ -50,11 +51,13 @@ export class PagerView extends View<PagerProps> {
       pageIndexChanged: (value): void => this.dataController.pageIndex.update(value - 1),
       pageSize: this.dataController.pageSize,
       pageSizeChanged: (value): void => this.dataController.pageSize.update(value),
-      gridCompatibility: false,
+      isGridCompatibility: false,
       pageCount: this.dataController.pageCount,
       showPageSizeSelector: this.options.oneWay('pager.showPageSizeSelector'),
       _skipValidation: true,
       tabIndex: 0,
+      showInfo: this.options.oneWay('pager.showInfo'),
+      showNavigationButtons: this.options.oneWay('pager.showNavigationButtons'),
     });
   }
 }

packages/testcafe-models/cardView/card.ts

@@ -0,0 +1,23 @@
+export const CLASS = {
+    header: 'dx-cardview-card-header',
+    content: 'dx-cardview-content',
+    field: 'dx-cardview-field',
+    fieldName: 'dx-cardview-field-name',
+    fieldValue: 'dx-cardview-field-value',
+}
+
+export default class Card {
+    element: Selector;
+
+    constructor(selector: Selector) {
+      this.element = selector;
+    }
+
+    getFieldCaptionCell(fieldCaption: String): Selector {
+        return this.element.find(`.${CLASS.fieldName}`).withText(fieldCaption + ':');
+    }
+
+    getFieldValueCell(fieldCaption: String): Selector {
+        return this.getFieldCaptionCell(fieldCaption).nextSibling();
+    }
+}

packages/testcafe-models/cardView/index.ts

@@ -0,0 +1,29 @@
+import type { WidgetName } from '../types';
+import GridCore from '../gridCore';
+import { CLASS as CLASS_BASE } from '../gridCore';
+import Card from './card';
+
+export const CLASS = {
+    ...CLASS_BASE,
+    cardView: 'dx-cardview',
+    headers: 'headers',
+    headerItem: 'header-item',
+    card: 'card',
+}
+
+export default class CardView extends GridCore {
+  constructor(id: string | Selector) {
+    super(id);
+  }
+
+  getName(): WidgetName { return 'dxCardView'; }
+
+  getContainer(): Selector {
+    return this.element.find(`.${CLASS.cardView}`);
+  }
+
+  getCard(nth = 0): Card {
+    const cards = this.element.find(`.${this.addWidgetPrefix(CLASS.card)}`);
+    return new Card(cards.nth(nth));
+  }
+}

packages/testcafe-models/dataGrid/index.ts

@@ -1,12 +1,10 @@
 import { ClientFunction, Selector } from 'testcafe';
 import DataGridInstance from 'devextreme/ui/data_grid';
 import type { SelectionSensitivity } from 'devextreme/ui/data_grid';
-import Widget from '../internal/widget';
 import Toolbar from '../toolbar';
 import DataRow from './data/row';
 import GroupRow from './groupRow';
 import FilterPanel from './filter/panel';
-import Pager from '../pagination';
 import EditForm from './editForm';
 import HeaderPanel from './headers/panel';
 import DataCell from './data/cell';
@@ -21,8 +19,11 @@ import AdaptiveDetailRow from './adaptiveDetailRow';
 import ColumnChooser from './columnChooser';
 import TextBox from '../textBox';
 import { GroupPanel } from './groupPanel';
+import GridCore from '../gridCore';
+import { CLASS as CLASS_BASE } from '../gridCore';
 
 export const CLASS = {
+  ...CLASS_BASE,
   dataGrid: 'dx-datagrid',
   headers: 'headers',
   headerPanel: 'header-panel',
@@ -36,7 +37,6 @@ export const CLASS = {
   filterRow: 'filter-row',
   filterRangeOverlay: 'filter-range-overlay',
   focusOverlay: 'focus-overlay',
-  pager: 'pager',
   editFormRow: 'edit-form',
   button: 'dx-button',
   formButtonsContainer: 'form-buttons-container',
@@ -126,25 +126,18 @@ const moveElement = ($element: JQuery, x: number, y: number, isStart = false): v
   }
 };
 
-export default class DataGrid extends Widget {
+export default class DataGrid extends GridCore {
   dataRows: Selector;
 
-  body: Selector;
-
   constructor(id: string | Selector) {
     super(id);
 
     this.dataRows = this.element.find(`.${CLASS.dataRow}`);
-    this.body = Selector('body');
   }
 
   // eslint-disable-next-line class-methods-use-this
   getName(): WidgetName { return 'dxDataGrid'; }
 
-  addWidgetPrefix(className = ''): string {
-    return Widget.addClassPrefix(this.getName(), className);
-  }
-
   getContainer(): Selector {
     return this.element.find(`.${CLASS.dataGrid}`);
   }
@@ -267,10 +260,6 @@ export default class DataGrid extends Widget {
     return this.body.find(`.dx-${CLASS.invalidMessage}.dx-${CLASS.invalidMessage}-always.${this.addWidgetPrefix(CLASS.invalidMessage)}`);
   }
 
-  getPager(): Pager {
-    return new Pager(this.element.find(`.${this.addWidgetPrefix(CLASS.pager)}`));
-  }
-
   getFooterRow(): Selector {
     return this.element.find(`.${CLASS.footerRow}`);
   }

packages/testcafe-models/gridCore/index.ts

@@ -0,0 +1,26 @@
+import { Selector } from 'testcafe';
+import Widget from '../internal/widget';
+import Pager from '../pagination';
+
+export const CLASS = {
+    pager: 'pager',
+    pagination: 'pagination',
+}
+
+export default abstract class GridCore extends Widget {
+  body: Selector;
+
+  constructor(id: string | Selector) {
+    super(id);
+
+    this.body = Selector('body');
+  }
+
+  addWidgetPrefix(className = ''): string {
+    return Widget.addClassPrefix(this.getName(), className);
+  }
+
+  getPager(): Pager {
+    return new Pager(this.element.find(`.${this.addWidgetPrefix(CLASS.pager)}, .dx-${CLASS.pagination}`));
+  }
+}