CI optimization: optimize TestCafe accessibility tests (Navigation) (#31272)

Author: pharret31

…treme/tests/accessibility/common/form.ts …ests/accessibility/common/form/common.tse2e/testcafe-devextreme/tests/accessibility/common/form.ts renamed to e2e/testcafe-devextreme/tests/accessibility/common/form/common.ts e2e/testcafe-devextreme/tests/accessibility/common/form.ts renamed to e2e/testcafe-devextreme/tests/accessibility/common/form/common.ts

@@ -1,28 +1,25 @@
-import { Properties } from 'devextreme/ui/form.d';
-import url from '../../../helpers/getPageUrl';
-import { testAccessibility, Configuration } from '../../../helpers/accessibility/test';
-import { Options } from '../../../helpers/generateOptionMatrix';
+import { Properties } from 'devextreme/ui/form';
+import url from '../../../../helpers/getPageUrl';
+import { testAccessibility, Configuration } from '../../../../helpers/accessibility/test';
+import { Options } from '../../../../helpers/generateOptionMatrix';
 
 fixture.disablePageReloads`Accessibility`
-  .page(url(__dirname, '../../container.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 const formData = {
   ID: 1,
   FirstName: 'John',
   LastName: 'Heart',
   Position: 'CEO',
+  Active: true,
 };
 
 const options: Options<Properties> = {
   height: [200],
   hint: [undefined, 'hint'],
-  requiredMark: [undefined, '#'],
   alignItemLabels: [true, false],
-  showRequiredMark: [true, false],
   showOptionalMark: [true, false],
-  showValidationSummary: [true, false],
-  showColonAfterLabel: [true, false],
-  formData: [undefined, formData],
+  formData: [formData],
 };
 
 const a11yCheckConfig = {

e2e/testcafe-devextreme/tests/accessibility/common/form/requiredFields.ts

@@ -0,0 +1,36 @@
+import { Properties } from 'devextreme/ui/form';
+import url from '../../../../helpers/getPageUrl';
+import { testAccessibility, Configuration } from '../../../../helpers/accessibility/test';
+import { Options } from '../../../../helpers/generateOptionMatrix';
+
+fixture.disablePageReloads`Accessibility`
+  .page(url(__dirname, '../../../container.html'));
+
+const items: Properties['items'] = [{
+  itemType: 'simple',
+  dataField: 'Email',
+  validationRules: [{
+    type: 'required',
+    message: 'Email is required',
+  }],
+}];
+
+const options: Options<Properties> = {
+  height: [200],
+  showRequiredMark: [true, false],
+  showValidationSummary: [true, false],
+  items: [items],
+};
+
+const a11yCheckConfig = {
+  // NOTE: color-contrast issues
+  rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+  component: 'dxForm',
+  a11yCheckConfig,
+  options,
+};
+
+testAccessibility(configuration);

e2e/testcafe-devextreme/tests/accessibility/common/gallery.ts

@@ -1,4 +1,4 @@
-import { Properties } from 'devextreme/ui/gallery.d';
+import { Properties } from 'devextreme/ui/gallery';
 import url from '../../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../../helpers/accessibility/test';
 import { Options } from '../../../helpers/generateOptionMatrix';
@@ -25,7 +25,6 @@ const options: Options<Properties> = {
   height: [300],
   width: [300],
   dataSource: [gallery],
-  loop: [true, false],
   swipeEnabled: [true, false],
   showIndicator: [true, false],
   showNavButtons: [true, false],

e2e/testcafe-devextreme/tests/accessibility/common/list/simpleItems.ts

@@ -7,9 +7,10 @@ fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../../../container.html'));
 
 const simpleItems = ['Item_1', 'Item_2', 'Item_3'];
+const simpleItemsPaged = { store: simpleItems, pageSize: 2 };
 
 const optionsWithSimpleItems: Options<Properties> = {
-  dataSource: [[], simpleItems],
+  dataSource: [[], simpleItems, simpleItemsPaged],
   height: [400],
   grouped: [false],
   searchEnabled: [true, false],

e2e/testcafe-devextreme/tests/navigation/gallery/accessibility.ts

@@ -1,100 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import url from '../../../helpers/getPageUrl';
-import { createWidget } from '../../../helpers/createWidget';
-import { a11yCheck } from '../../../helpers/accessibility/utils';
-
-fixture`Gallery`
-  .page(url(__dirname, '../../container.html'));
-
-interface GalleryItem {
-  ID: string;
-  Name: string;
-}
-
-interface GallerySettings {
-  items?: GalleryItem[];
-  itemTemplate?: (item: GalleryItem) => HTMLDivElement;
-  width?: string;
-  loop?: boolean;
-  showIndicator?: boolean;
-}
-
-const defaultItems: GalleryItem[] = [{
-  ID: '1',
-  Name: 'First',
-},
-{
-  ID: '2',
-  Name: 'Second',
-}];
-
-function defaultItemTemplate(item: GalleryItem) {
-  const result = document.createElement('div');
-  const span = document.createElement('span');
-
-  span.innerText = item.Name;
-  result.appendChild(span);
-
-  return result;
-}
-
-const allGallerySettings: GallerySettings = {
-  items: defaultItems,
-  itemTemplate: defaultItemTemplate,
-  width: '100%',
-  loop: true,
-  showIndicator: false,
-};
-
-function getTestName(gallerySettings: GallerySettings) {
-  const fields = Object.keys(gallerySettings);
-
-  const messageParts = fields.map((field) => {
-    const fieldSkipped = gallerySettings[field] === undefined;
-
-    return `${field} was ${fieldSkipped ? 'not' : ''} set`;
-  });
-
-  return `Checking Gallery via aXe. Settings: ${messageParts.join(', ')}`;
-}
-
-function generateCombinations(allSettings: GallerySettings): GallerySettings[] {
-  const keys = Object.keys(allSettings);
-  const combinations: GallerySettings[] = [];
-
-  const generate = (index: number, currentCombination: GallerySettings) => {
-    if (index === keys.length) {
-      combinations.push(currentCombination);
-      return;
-    }
-
-    const key = keys[index];
-    const value = allSettings[key];
-
-    generate(index + 1, currentCombination);
-
-    const newCombination = { ...currentCombination, [key]: value };
-    generate(index + 1, newCombination);
-  };
-
-  generate(0, {});
-  return combinations;
-}
-
-const settingsCombinations = generateCombinations(allGallerySettings);
-
-settingsCombinations.forEach((settings) => {
-  const testName = getTestName(settings);
-  test(testName, async (t) => {
-    const a11yCheckConfig = {
-      rules: {
-        'image-alt': { enabled: false },
-      },
-    };
-
-    await a11yCheck(t, a11yCheckConfig);
-  }).before(async () => createWidget(
-    'dxGallery',
-    settings,
-  ));
-});

…-devextreme/tests/editors/list/common.ts …vextreme/tests/navigation/list/common.tse2e/testcafe-devextreme/tests/editors/list/common.ts renamed to e2e/testcafe-devextreme/tests/navigation/list/common.ts e2e/testcafe-devextreme/tests/editors/list/common.ts renamed to e2e/testcafe-devextreme/tests/navigation/list/common.ts

@@ -4,7 +4,6 @@ import List from 'devextreme-testcafe-models/list';
 import { isMaterialBased, isFluent, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { a11yCheck } from '../../../helpers/accessibility/utils';
 
 fixture`List`
   .page(url(__dirname, '../../container.html'));
@@ -366,27 +365,3 @@ test('The button icon in custom template should be displayed correctly after the
     element.append(button);
   },
 }));
-
-test('Checking simple list with selectAll and "more" button via aXe', async (t) => {
-  await a11yCheck(t);
-}).before(async () => createWidget('dxList', {
-  dataSource: {
-    store: ['item 1', 'item 2', 'item 3'],
-    pageSize: 2,
-  },
-  selectionMode: 'all',
-  showSelectionControls: true,
-}));
-
-test('Checking group list via aXe', async (t) => {
-  await a11yCheck(t);
-}).before(async () => createWidget('dxList', {
-  dataSource: [{
-    key: 'Group 1',
-    items: ['item 1', 'item 2', 'item 3'],
-  }, {
-    key: 'Group 2',
-    items: ['item 1', 'item 2', 'item 3'],
-  }],
-  grouped: true,
-}));