🎹 Pager: Testcafe tests (#28110)

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

@@ -3,65 +3,59 @@ import Pager from 'devextreme-testcafe-models/pager';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
+import { testScreenshot } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Pager`
   .page(url(__dirname, '../container.html'));
 
 const options: Options<any> = {
-  // disabled: [true, false], //not supported
+  totalCount: [50],
+
   displayMode: ['full', 'compact'],
   infoText: [undefined, 'Total {2} items. Page {0} of {1}'],
-  pageCount: [10, 100],
-  pageSizes: [[1, 2, 3], [3, 6, 9]],
   showInfo: [true, false],
   showNavigationButtons: [true, false],
   showPageSizeSelector: [true, false],
-  visible: [true],
 };
 
-const defaultCreated = async (): Promise<void> => {};
 const created = async (t: TestController, optionConfiguration): Promise<void> => {
   const {
-    visible,
     displayMode,
     infoText,
-    pageCount,
-    pageSizes,
     showInfo,
     showNavigationButtons,
     showPageSizeSelector,
   } = optionConfiguration;
 
-  if (!visible) {
-    return;
-  }
-
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const pager = new Pager('#container');
-  await t
-    .expect(await takeScreenshot(`pager-dm_${displayMode}-`
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    `pager-dm_${displayMode}-`
             + `${infoText ? 'has' : 'has_no'}_it-`
-            + `pc_${pageCount}-`
-            + `ps_${pageSizes[0]}_${pageSizes[1]}_${pageSizes[2]}-`
             + `si_${showInfo.toString()}-`
             + `snb_${showNavigationButtons.toString()}-`
             + `spss_${showPageSizeSelector.toString()}`
-            + '.png', pager.element))
-    .ok()
+            + '.png',
+    { element: pager.element },
+  );
+  await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 };
 
 const a11yCheckConfig = {
-  // NOTE: color-contrast issues
+  // NOTE:  color-contrast issues
   rules: { 'color-contrast': { enabled: false } },
 };
 
 const configuration: Configuration = {
   component: 'dxPager',
   a11yCheckConfig,
   options,
-  created: defaultCreated || created, // Waiting pager specification
+  created,
 };
 
 testAccessibility(configuration);

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

@@ -0,0 +1,60 @@
+import Pager from 'devextreme-testcafe-models/pager';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+
+fixture`Pager Base Properties`
+  .page(url(__dirname, '../container.html'));
+
+test('Pager visibile property', async (t) => {
+  const pager = new Pager('#container');
+  await t
+    .expect(pager.element.hasClass('dx-state-invisible'))
+    .ok();
+}).before(async () => createWidget('dxPager', {
+  totalCount: 50,
+  visible: false,
+}));
+
+test('PageSize selector test', async (t) => {
+  const pager = new Pager('#container');
+
+  await t
+    .click(pager.getPageSize(1).element)
+    .expect(pager.option('pageCount'))
+    .eql(13);
+}).before(async () => createWidget('dxPager', {
+  totalCount: 50,
+  pageIndex: 2,
+  pageSize: 8, // pageCount: 7
+  allowedPageSizes: [2, 4, 8],
+}));
+
+test('PageIndex test', async (t) => {
+  const pager = new Pager('#container');
+
+  await t
+    .expect(pager.option('pageIndex'))
+    .eql(1)
+    .click(pager.getNavPage('5').element)
+    .expect(pager.option('pageIndex'))
+    .eql(5);
+}).before(async () => createWidget('dxPager', {
+  totalCount: 50,
+  pageIndex: 1,
+  pageSize: 5, // pageCount: 10
+}));
+
+test('PageIndex correction test', async (t) => {
+  const pager = new Pager('#container');
+
+  await t
+    .expect(pager.option('pageIndex'))
+    .eql(10)
+    .click(pager.getPageSize(1).element)
+    .expect(pager.option('pageIndex'))
+    .eql(5);
+}).before(async () => createWidget('dxPager', {
+  totalCount: 50,
+  pageIndex: 10,
+  pageSize: 5, // pageCount: 10
+}));

packages/devextreme/js/__internal/grids/grid_core/pager/m_pager.ts

@@ -88,7 +88,7 @@ export class PagerView extends modules.View {
       pageIndex: getPageIndex(dataController),
       pageCount: dataController.pageCount(),
       pageSize: dataController.pageSize(),
-      showPageSizes: pagerOptions.showPageSizeSelector,
+      showPageSizeSelector: pagerOptions.showPageSizeSelector,
       showInfo: pagerOptions.showInfo,
       displayMode: pagerOptions.displayMode,
       pagesNavigatorVisible: pagerOptions.visible,

packages/devextreme/js/__internal/pager/common/base_pager_props.ts

@@ -17,7 +17,7 @@ export interface BasePagerProps extends BaseWidgetProps {
   visible?: boolean;
   hasKnownLastPage?: boolean;
   pagesNavigatorVisible?: boolean | 'auto';
-  showPageSizes?: boolean;
+  showPageSizeSelector?: boolean;
   allowedPageSizes: (number | 'all')[];
   rtlEnabled?: boolean;
   showNavigationButtons?: boolean;
@@ -36,7 +36,7 @@ export const BasePagerDefaultProps: BasePagerProps = {
   visible: true,
   hasKnownLastPage: true,
   pagesNavigatorVisible: 'auto',
-  showPageSizes: true,
+  showPageSizeSelector: true,
   allowedPageSizes: [5, 10],
   showNavigationButtons: false,
   totalCount: 1,

packages/devextreme/js/__internal/pager/content.tsx

@@ -178,7 +178,7 @@ export class PagerContent extends InfernoComponent<PagerContentProps> {
     const {
       rtlEnabled,
       visible,
-      showPageSizes,
+      showPageSizeSelector,
       allowedPageSizesRef,
       pageSize,
       pageSizeChangedInternal,
@@ -230,7 +230,7 @@ export class PagerContent extends InfernoComponent<PagerContentProps> {
 
         { ...elementAttr as object }
       >
-        {showPageSizes && (
+        {showPageSizeSelector && (
           <PageSizeSelector
             rootElementRef={allowedPageSizesRef}
             isLargeDisplayMode={this.getIsLargeDisplayMode()}

packages/devextreme/js/__internal/pager/resizable_container.tsx

@@ -155,7 +155,7 @@ export class ResizableContainer extends InfernoComponent<ResizableContainerProps
       rtlEnabled,
       showInfo,
       showNavigationButtons,
-      showPageSizes,
+      showPageSizeSelector,
       totalCount,
       visible,
       style,
@@ -190,7 +190,7 @@ export class ResizableContainer extends InfernoComponent<ResizableContainerProps
       visible,
       hasKnownLastPage,
       pagesNavigatorVisible,
-      showPageSizes,
+      showPageSizeSelector,
       allowedPageSizes,
       rtlEnabled,
       showNavigationButtons,

packages/devextreme/js/__internal/pager/wrappers/pager.ts

@@ -37,7 +37,7 @@ export default class Pager extends GridPagerWrapper {
         'visible',
         'hasKnownLastPage',
         'pagesNavigatorVisible',
-        'showPageSizes',
+        'showPageSizeSelector',
         'allowedPageSizes',
         'rtlEnabled',
         'showNavigationButtons',

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/pagerView.tests.js

@@ -95,7 +95,7 @@ QUnit.module('Pager', {
         assert.equal(pager.option('pageIndex'), 2, 'pageIndex');
         assert.equal(pager.option('pageCount'), 21, 'pageCount');
         assert.equal(pager.option('pageSize'), 7, 'pageSize');
-        assert.ok(pager.option('showPageSizes'), 'showPageSizes');
+        assert.ok(pager.option('showPageSizeSelector'), 'showPageSizeSelector');
         assert.deepEqual(pager.option('allowedPageSizes'), [2, 7, 9], 'allowedPageSizes');
         assert.ok(!pager.option('hasKnownLastPage'), 'hasKnownLastPage');
         assert.ok(pager.option('visible'), 'visible');

packages/devextreme/testing/tests/DevExpress.ui.widgets/pager.tests.js

@@ -431,8 +431,8 @@ function() {
 
         assert.equal(pageSizesElements.length, 0, 'page size elements count');
     });
-    QUnit.test('Page sizes render when showPageSizes is false', function(assert) {
-        $('#container').dxPager({ maxPagesCount: 8, pageCount: 10, pageIndex: 1, showPageSizes: false, allowedPageSizes: [5, 10, 20] });
+    QUnit.test('Page sizes render when showPageSizeSelector is false', function(assert) {
+        $('#container').dxPager({ maxPagesCount: 8, pageCount: 10, pageIndex: 1, showPageSizeSelector: false, allowedPageSizes: [5, 10, 20] });
 
         const pageSizesElements = $('.dx-page-size');
         const pageSizesContainer = $('.dx-page-sizes');
@@ -904,7 +904,7 @@ function() {
             pageCount: 10,
             allowedPageSizes: [5, 10, 20],
             showInfo: false,
-            showPageSizes: false,
+            showPageSizeSelector: false,
             totalCount: 46,
             pagesCountText: 'of'
         });
@@ -928,7 +928,7 @@ function() {
             pageCount: 110,
             totalCount: 550,
             allowedPageSizes: [5, 10, 20],
-            showPageSizes: false,
+            showPageSizeSelector: false,
             pagesCountText: 'of'
         });
         const editor = $('.dx-page-index').dxNumberBox('instance');