e2e frameworks tests: get rid of Material, Generic themes testing

.github/workflows/demos_visual_tests_frameworks.yml

@@ -302,41 +302,12 @@ jobs:
     - name: Install tgz
       run: pnpm add -w ./devextreme-installer.tgz ./devextreme-dist-installer.tgz ./devextreme-react-installer.tgz ./devextreme-vue-installer.tgz ./devextreme-angular-installer.tgz
 
-    - name: Run lint on all demos
-      if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'force all tests')
+    - name: Run lint
       working-directory: apps/demos
       env:
         CHANGEDFILEINFOSPATH: changed-files.json
         DEBUG: 'eslint:cli-engine,stylelint:standalone'
-      run: pnpx nx lint
-
-    - name: Run lint on changed demos
-      if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'force all tests')
-      working-directory: apps/demos
-      env:
-        DEBUG: 'eslint:cli-engine,stylelint:standalone'
-      run: |
-        pnpx nx lint-non-demos
-
-        if [ -f "changed-files.json" ]; then
-          echo "Running lint-demos on changed files"
-          CHANGED_DEMOS=$(jq -r '.[].filename' changed-files.json \
-            | grep '^apps/demos/Demos/' \
-            | sed 's|^apps/demos/||' \
-            | while read f; do
-                [ -f "$f" ] && echo "$f"
-              done \
-            | tr '\n' ' ')
-          if [ ! -z "$CHANGED_DEMOS" ]; then
-            echo "Changed demo files: $CHANGED_DEMOS"
-            pnpx eslint $CHANGED_DEMOS
-          else
-            echo "No demo files changed, skipping lint-demos"
-          fi
-        else
-          echo "changed-files.json not found"
-          pnpm run lint-demos
-        fi
+      run: pnpx nx lint-non-demos
 
   check_generated_demos:
     name: ${{ matrix.name }}
@@ -435,7 +406,7 @@ jobs:
       fail-fast: false
       matrix:
         CONSTEL: [react(1/4), react(2/4), react(3/4), react(4/4), vue(1/4), vue(2/4), vue(3/4), vue(4/4), angular(1/4), angular(2/4), angular(3/4), angular(4/4)]
-        THEME: ['generic.light', 'material.blue.light', 'fluent.blue.light']
+        THEME: ['fluent.blue.light']
 
     runs-on: ubuntu-22.04
     name: testcafe-${{ matrix.CONSTEL }}-${{ matrix.THEME }}

apps/demos/Demos/Common/EditorAppearanceVariants/test-code.js

@@ -2,6 +2,5 @@ testUtils.importAnd(() => 'devextreme/animation/fx', () => DevExpress.fx, (fx) =
   fx.off = true;
 
   return testUtils
-    .postponeUntilFound('.dx-texteditor-with-label.dx-invalid', 100, 10000)
-    .then(() => testUtils.postpone(200));
+    .postponeUntilFound('.dx-texteditor-with-label.dx-invalid', 100, 5000);
 });

apps/demos/Demos/DataGrid/CellEditing/Angular/app/app.component.html

@@ -33,6 +33,7 @@
           [disabled]="!selectedItemKeys.length"
           icon="trash"
           text="Delete Selected Records"
+          stylingMode="text"
         >
         </dx-button>
       </dxi-item>

apps/demos/Demos/DataGrid/CellEditing/React/App.tsx

@@ -59,7 +59,8 @@ const App = () => {
               onClick={deleteRecords}
               icon="trash"
               disabled={!selectedItemKeys.length}
-              text="Delete Selected Records" />
+              text="Delete Selected Records"
+              stylingMode="text" />
           </Item>
         </Toolbar>
       </DataGrid>

apps/demos/Demos/DataGrid/CellEditing/ReactJs/App.js

@@ -85,6 +85,7 @@ const App = () => {
               icon="trash"
               disabled={!selectedItemKeys.length}
               text="Delete Selected Records"
+              stylingMode="text"
             />
           </Item>
         </Toolbar>

apps/demos/Demos/DataGrid/CellEditing/Vue/App.vue

@@ -57,6 +57,7 @@
               :disabled="!selectedItemKeys.length"
               icon="trash"
               text="Delete Selected Records"
+              stylingMode="text"
             />
           </template>
         </DxItem>

apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Angular/app/app.component.html

@@ -31,6 +31,7 @@
       <dx-button
         text="Clear Selection"
         [disabled]="!selectedRows?.length"
+        stylingMode="text"
         (onClick)="grid.instance.clearSelection()"
       >
       </dx-button>

apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/React/App.tsx

@@ -80,6 +80,7 @@ const App = () => {
               disabled={!selectedRowKeys.length}
               onClick={onClearButtonClicked}
               text="Clear Selection"
+              stylingMode="text"
             />
           </Item>
         </Toolbar>

apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/ReactJs/App.js

@@ -89,6 +89,7 @@ const App = () => {
               disabled={!selectedRowKeys.length}
               onClick={onClearButtonClicked}
               text="Clear Selection"
+              stylingMode="text"
             />
           </Item>
         </Toolbar>

apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Vue/App.vue

@@ -50,6 +50,7 @@
           <DxButton
             :disabled="!selectedRowKeys.length"
             text="Clear Selection"
+            stylingMode="text"
             @click="clearSelection"
           />
         </DxItem>

apps/demos/testing/skipped-tests.js

@@ -3,236 +3,47 @@ import { THEME } from '../utils/visual-tests/helpers/theme-utils';
 export const skippedTests = {
   jQuery: {
     Charts: [
+      { demo: 'AjaxRequest', themes: [THEME.material] },
       { demo: 'ServerSideDataProcessing', themes: [THEME.material] },
-      { demo: 'SpiderWeb', themes: [THEME.material] }, // NOTE: Requires preload font, which not work in testcafe
-    ],
-    Gantt: [
-      { demo: 'TaskTemplate', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Validation', themes: [THEME.generic, THEME.material, THEME.fluent] },
-    ],
-    Map: [
-      { demo: 'ProvidersAndTypes', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Markers', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Routes', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      // NOTE: Requires preload font, which not work in testcafe
+      { demo: 'SpiderWeb', themes: [THEME.material] },
     ],
+    // Gantt: ['TaskTemplate', 'Validation'],
+    Map: ['ProvidersAndTypes', 'Markers', 'Routes'],
   },
   Angular: {
+    Common: ['PopupAndNotificationsOverview'],
+    Gantt: ['TaskTemplate', 'Validation'],
     DataGrid: [
-      { demo: 'EditStateManagement', themes: [THEME.generic] },
+      // jQuery demo uses a different show-checkboxes mode
       { demo: 'MultipleRecordSelectionModes', themes: [THEME.fluent] },
-      { demo: 'Toolbar', themes: [THEME.fluent, THEME.material] },
-      { demo: 'SignalRService', themes: [THEME.fluent, THEME.material] },
-      { demo: 'CellEditing', themes: [THEME.material] },
-      { demo: 'MultipleRecordSelectionAPI', themes: [THEME.material] },
-      { demo: 'RemoteGrouping', themes: [THEME.generic] },
-    ],
-    Charts: [
-      { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'Strips', themes: [THEME.material] },
-      { demo: 'Bubble', themes: [THEME.material] },
-      { demo: 'PointImage', themes: [THEME.material] },
-      { demo: 'BiDirectionalBarChart', themes: [THEME.material] },
-      { demo: 'CustomizePointsAndLabels', themes: [THEME.material] },
-      { demo: 'ClientSideDataProcessing', themes: [THEME.material] },
-      { demo: 'ServerSideDataProcessing', themes: [THEME.material] },
-      { demo: 'MultiplePointSelection', themes: [THEME.material] },
-      { demo: 'EqualSizePies', themes: [THEME.material] },
-      { demo: 'Selection', themes: [THEME.material] },
-      { demo: 'CustomMapData', themes: [THEME.material] },
-      { demo: 'MultipleSeriesSelection', themes: [THEME.material] },
-      { demo: 'DiscreteAxisZoomingAndScrolling', themes: [THEME.material] },
-      { demo: 'PointSelectionAPI', themes: [THEME.material] },
-      { demo: 'SpiderWeb', themes: [THEME.material] }, // NOTE: Requires preload font, which not work in testcafe
-    ],
-    Map: [
-      { demo: 'ProvidersAndTypes', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Markers', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Routes', themes: [THEME.generic, THEME.material, THEME.fluent] },
-    ],
-    PivotGrid: [
-      { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'ChartIntegration', themes: [THEME.material] },
-    ],
-    TreeList: [
-      { demo: 'BatchEditing', themes: [THEME.material] },
-      { demo: 'RowEditing', themes: [THEME.material] },
-      { demo: 'PopupEditing', themes: [THEME.material] },
-      { demo: 'FormEditing', themes: [THEME.material] },
-      { demo: 'CellEditing', themes: [THEME.material] },
-      { demo: 'Resizing', themes: [THEME.material] },
-    ],
-    Gauges: [
-      { demo: 'ScaleLabelFormatting', themes: [THEME.material] },
-      { demo: 'RangeBarBaseValue', themes: [THEME.material] },
-      { demo: 'DifferentValueIndicatorTypesLinearGauge', themes: [THEME.material] },
-      { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] },
-      { demo: 'DifferentValueIndicatorTypes', themes: [THEME.material] },
-    ],
-    RangeSelector: [
-      { demo: 'DiscreteScale', themes: [THEME.material] },
-    ],
-    Gantt: [
-      { demo: 'ContextMenu', themes: [THEME.material] },
-      { demo: 'TaskTemplate', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Validation', themes: [THEME.generic, THEME.material, THEME.fluent] },
-    ],
-    VectorMap: [
-      { demo: 'Palette', themes: [THEME.material] },
-      { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'PieMarkers', themes: [THEME.material] },
-      { demo: 'Legend', themes: [THEME.material] },
-      { demo: 'CustomAnnotations', themes: [THEME.material] },
-      { demo: 'CustomProjection', themes: [THEME.material] },
-      { demo: 'MultipleLayers', themes: [THEME.material] },
-      { demo: 'TooltipsCustomization', themes: [THEME.material] },
-      { demo: 'CustomMapData', themes: [THEME.material] },
+      { demo: 'SignalRService', themes: [THEME.fluent] },
     ],
+    Map: ['ProvidersAndTypes', 'Markers', 'Routes'],
   },
   React: {
-    Charts: [
-      { demo: 'EqualSizePies', themes: [THEME.material] },
-      { demo: 'CustomAnnotations', themes: [THEME.material] },
-      { demo: 'ClientSideDataProcessing', themes: [THEME.material] },
-      { demo: 'ServerSideDataProcessing', themes: [THEME.material] },
-      { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] },
-      { demo: 'SpiderWeb', themes: [THEME.material] }, // NOTE: Requires preload font, which not work in testcafe
-    ],
     DataGrid: [
-      { demo: 'SignalRService', themes: [THEME.material, THEME.fluent] },
-      { demo: 'EditStateManagement', themes: [THEME.material] },
+      // jQuery demo uses a different show-checkboxes mode
       { demo: 'MultipleRecordSelectionModes', themes: [THEME.fluent] },
-      { demo: 'Toolbar', themes: [THEME.fluent, THEME.material] },
-      { demo: 'MultipleRecordSelectionAPI', themes: [THEME.material] },
-      { demo: 'CellEditing', themes: [THEME.material] },
-    ],
-    TreeList: [
-      { demo: 'Resizing', themes: [THEME.material] },
-      { demo: 'Overview', themes: [THEME.material] },
-    ],
-    Gantt: [
-      { demo: 'Validation', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'ContextMenu', themes: [THEME.material] },
+      { demo: 'Toolbar', themes: [THEME.fluent] },
+      { demo: 'SignalRService', themes: [THEME.fluent] },
     ],
     Scheduler: [
       // NOTE: 'GroupByDate' demo has problems with rendering
-      { demo: 'GroupByDate', themes: [THEME.fluent, THEME.material] },
-    ],
-    List: [
-      { demo: 'Search', themes: [THEME.material] },
-      { demo: 'DragAndDrop', themes: [THEME.fluent, THEME.material] },
-    ],
-    Map: [
-      { demo: 'ProvidersAndTypes', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Markers', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Routes', themes: [THEME.generic, THEME.material, THEME.fluent] },
-    ],
-    VectorMap: [
-      { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'PieMarkers', themes: [THEME.material] },
-      { demo: 'CustomAnnotations', themes: [THEME.material] },
-      { demo: 'CustomMapData', themes: [THEME.material] },
-      { demo: 'CustomProjection', themes: [THEME.material] },
-      { demo: 'Legend', themes: [THEME.material] },
-      { demo: 'MultipleLayers', themes: [THEME.material] },
-      { demo: 'Palette', themes: [THEME.material] },
-      { demo: 'TooltipsCustomization', themes: [THEME.material] },
-    ],
-    RangeSelector: [
-      { demo: 'DiscreteScale', themes: [THEME.material] },
-      { demo: 'Calculation', themes: [THEME.material] },
-    ],
-    PivotGrid: [
-      { demo: 'ExcelJSCellCustomization', themes: [THEME.material] },
-      { demo: 'Customization', themes: [THEME.material] },
-    ],
-    Gauges: [
-      { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] },
-      { demo: 'SubvalueIndicatorsRuntimeCustomization', themes: [THEME.material] },
-      { demo: 'DifferentValueIndicatorTypesLinearGauge', themes: [THEME.material] },
-      { demo: 'ScaleLabelFormatting', themes: [THEME.material] },
+      { demo: 'GroupByDate', themes: [THEME.fluent] },
     ],
+    Map: ['ProvidersAndTypes', 'Markers', 'Routes'],
+    Gantt: ['Validation'],
   },
   Vue: {
-    Charts: [
-      { demo: 'TilingAlgorithms', themes: [THEME.material] },
-      { demo: 'ExportAndPrintingAPI', themes: [THEME.material] },
-      { demo: 'DiscreteAxisZoomingAndScrolling', themes: [THEME.material] },
-      { demo: 'Line', themes: [THEME.material] },
-      { demo: 'Spline', themes: [THEME.material] },
-      { demo: 'Colorization', themes: [THEME.material] },
-      { demo: 'SignalRService', themes: [THEME.material] },
-      { demo: 'PointsAggregation', themes: [THEME.material] },
-      { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] },
-      { demo: 'ResolveLabelOverlap', themes: [THEME.material] },
-      { demo: 'ClientSideDataProcessing', themes: [THEME.material] },
-      { demo: 'ServerSideDataProcessing', themes: [THEME.material] },
-      { demo: 'EqualSizePies', themes: [THEME.material] },
-      { demo: 'Palette', themes: [THEME.material] },
-      { demo: 'SpiderWeb', themes: [THEME.material] }, // NOTE: Requires preload font, which not work in testcafe
-    ],
+    Common: ['PopupAndNotificationsOverview'],
+    Charts: ['PointsAggregation'],
     DataGrid: [
-      { demo: 'SignalRService', themes: [THEME.fluent, THEME.material] },
-      { demo: 'EditStateManagement', themes: [THEME.material] },
-      { demo: 'Toolbar', themes: [THEME.fluent, THEME.material] },
+      // jQuery demo uses a different show-checkboxes mode
       { demo: 'MultipleRecordSelectionModes', themes: [THEME.fluent] },
-      { demo: 'FilteringAPI', themes: [THEME.material] },
-      { demo: 'Filtering', themes: [THEME.fluent] },
-      { demo: 'MultipleRecordSelectionAPI', themes: [THEME.material] },
-      { demo: 'DeferredSelection', themes: [THEME.material] },
-      { demo: 'CellEditing', themes: [THEME.material] },
-      { demo: 'PopupEditing', themes: [THEME.generic] },
-      { demo: 'RecordPaging', themes: [THEME.generic] },
-    ],
-    FileManager: [
-      { demo: 'BindingToFileSystem', themes: [THEME.material] },
-      { demo: 'CustomThumbnails', themes: [THEME.generic] },
-    ],
-    FilterBuilder: [
-      { demo: 'Customization', themes: [THEME.material] },
-    ],
-    TreeList: [
-      { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'MultipleRowSelection', themes: [THEME.material] },
-      { demo: 'Resizing', themes: [THEME.material] },
-    ],
-    Map: [
-      { demo: 'ProvidersAndTypes', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Markers', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'Routes', themes: [THEME.generic, THEME.material, THEME.fluent] },
-    ],
-    Gauges: [
-      { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'SubvalueIndicatorsRuntimeCustomization', themes: [THEME.material] },
-      { demo: 'ScaleLabelFormatting', themes: [THEME.material] },
-      { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] },
-      { demo: 'DifferentValueIndicatorTypes', themes: [THEME.material] },
-      { demo: 'DifferentValueIndicatorTypesLinearGauge', themes: [THEME.material] },
-    ],
-    RangeSelector: [
-      { demo: 'Calculation', themes: [THEME.material] },
-      { demo: 'DiscreteScale', themes: [THEME.material] },
-    ],
-    PivotGrid: [
-      { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'Customization', themes: [THEME.material] },
-    ],
-    VectorMap: [
-      { demo: 'CustomProjection', themes: [THEME.material] },
-      { demo: 'Spline', themes: [THEME.material] },
-      { demo: 'CustomAnnotations', themes: [THEME.material] },
-      { demo: 'Palette', themes: [THEME.material] },
-      { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'PieMarkers', themes: [THEME.material] },
-      { demo: 'TooltipsCustomization', themes: [THEME.material] },
-      { demo: 'MultipleLayers', themes: [THEME.material] },
-      { demo: 'CustomMapData', themes: [THEME.material] },
-      { demo: 'Legend', themes: [THEME.material] },
-    ],
-    Gantt: [
-      { demo: 'ContextMenu', themes: [THEME.material] },
-      { demo: 'Validation', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'TaskTemplate', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'SignalRService', themes: [THEME.fluent] },
     ],
-    Pagination: ['Overview'],
+    Map: ['ProvidersAndTypes', 'Markers', 'Routes'],
+    Gantt: ['Validation'],
   },
 };

apps/demos/utils/axe-reporter/reporter.ts

@@ -33,7 +33,7 @@ function simplifyResults(r) {
 
 export function createMdReport({ testName, results }) {
   // eslint-disable-next-line max-len
-  const mdString = mustache.render(template, { testName, results: simplifyResults(results) });
+  const mdString = mustache?.render(template, { testName, results: simplifyResults(results) }) || '';
 
   if (!existsSync(reportDir)) {
     mkdirSync(reportDir, { recursive: true });