Migrate QUnit tests from SystemJs

.github/workflows/qunit_tests.yml

@@ -111,7 +111,7 @@ jobs:
       shell: bash
       env:
         DEVEXTREME_TEST_CI: "true"
-      run: pnpm exec nx build:systemjs
+      run: pnpm exec nx build:dev
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme

packages/devextreme/docker-ci.sh

@@ -40,7 +40,8 @@ function run_test {
 
 function run_test_impl {
     local port=`node -e "console.log(require('./ports.json').qunit)"`
-    local url="http://0.0.0.0:$port/run?notimers=true"
+    # Use 127.0.0.1, not 0.0.0.0 — Chrome cannot fetch modules from 0.0.0.0.
+    local url="http://127.0.0.1:$port/run?notimers=true"
     local runner_pid
     local runner_result=0
 

packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts

@@ -11,6 +11,7 @@ import { Deferred, when } from '@js/core/utils/deferred';
 import { each } from '@js/core/utils/iterator';
 import { getBoundingRect } from '@js/core/utils/position';
 import { getHeight, getWidth } from '@js/core/utils/size';
+import { setHeight } from '@js/core/utils/style';
 import { isDefined, isNumeric, isString } from '@js/core/utils/type';
 import { getWindow, hasWindow } from '@js/core/utils/window';
 import * as accessibility from '@js/ui/shared/accessibility';
@@ -826,7 +827,7 @@ export class ResizingController extends modules.ViewController {
 
       // IE11
       if (maxHeightHappened && !isMaxHeightApplied) {
-        $(groupElement).css('height', maxHeight);
+        setHeight($(groupElement), maxHeight);
       }
 
       if (!dataController.isLoaded()) {

packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts

@@ -536,7 +536,7 @@ export class RowsView extends ColumnsView {
       $cell = that._createCell({
         column: columns[i], rowType: 'freeSpace', columnIndex: i, columns,
       });
-      isNumeric(height) && $cell.css('height', height);
+      isNumeric(height) && setHeight($cell, height);
 
       $row.append($cell);
     }
@@ -1035,7 +1035,7 @@ export class RowsView extends ColumnsView {
 
             if (showFreeSpaceRow) {
               deferRender(() => {
-                freeSpaceRowElements.css('height', resultHeight);
+                setHeight(freeSpaceRowElements, resultHeight);
                 isFreeSpaceRowVisible = true;
                 freeSpaceRowElements.show();
               });
@@ -1044,7 +1044,7 @@ export class RowsView extends ColumnsView {
           });
         }
       } else {
-        freeSpaceRowElements.css('height', 0);
+        setHeight(freeSpaceRowElements, 0);
         freeSpaceRowElements.show();
         this._updateLastRowBorder(true);
       }

packages/devextreme/package.json

@@ -130,11 +130,6 @@
     "minimist": "1.2.8",
     "qunit": "2.25.0",
     "sinon": "18.0.1",
-    "systemjs": "0.19.41",
-    "systemjs-plugin-babel": "0.0.25",
-    "systemjs-plugin-css": "0.1.37",
-    "systemjs-plugin-json": "0.3.0",
-    "systemjs-plugin-text": "0.0.11",
     "terser-webpack-plugin": "5.3.17",
     "ts-jest": "29.1.2",
     "tsc-alias": "1.8.16",

packages/devextreme/project.json

@@ -152,6 +152,20 @@
         "{projectRoot}/artifacts/npm/devextreme-internal/bundles/dx.custom.config.js"
       ]
     },
+    "copy:qunit:dx-custom": {
+      "executor": "devextreme-nx-infra-plugin:copy-files",
+      "options": {
+        "files": [
+          {
+            "from": "./build/bundle-templates/dx.custom.js",
+            "to": "./artifacts/transpiled-esm-npm/bundles/dx.custom.js"
+          }
+        ]
+      },
+      "dependsOn": ["build:devextreme-bundler-config"],
+      "inputs": ["{projectRoot}/build/bundle-templates/dx.custom.js"],
+      "outputs": ["{projectRoot}/artifacts/transpiled-esm-npm/bundles/dx.custom.js"]
+    },
     "build:devextreme-bundler-config:watch": {
       "executor": "devextreme-nx-infra-plugin:concatenate-files",
       "cache": false,
@@ -322,6 +336,11 @@
           { "from": "./js/viz/vector_map.utils/_settings.json", "to": "./viz/vector_map.utils/_settings.json" }
         ]
       },
+      "configurations": {
+        "qunit": {
+          "removeDebug": false
+        }
+      },
       "inputs": [
         "jsSourcesProduction",
         "jsAssetsProduction"
@@ -410,13 +429,84 @@
           ".jsx": ".js"
         }
       },
+      "configurations": {
+        "qunit": {
+          "removeDebug": false
+        }
+      },
       "inputs": [
         "internalTsArtifacts"
       ],
       "outputs": [
         "{projectRoot}/artifacts/transpiled-esm-npm/esm/__internal"
       ]
     },
+    "build:npm:esm:watch": {
+      "executor": "devextreme-nx-infra-plugin:babel-transform",
+      "cache": false,
+      "options": {
+        "babelConfigPath": "./build/transpile-config.js",
+        "configKey": "esm",
+        "sourcePattern": "./js/**/*.{js,jsx}",
+        "excludePatterns": [
+          "./js/**/*.d.ts",
+          "./js/__internal/**/*"
+        ],
+        "outDir": "./artifacts/transpiled-esm-npm/esm",
+        "removeDebug": true,
+        "watch": true,
+        "copyAssets": [
+          { "from": "./js/localization/messages", "to": "./localization/messages" },
+          { "from": "./js/viz/vector_map.utils/_settings.json", "to": "./viz/vector_map.utils/_settings.json" }
+        ]
+      },
+      "configurations": {
+        "qunit": {
+          "removeDebug": false
+        }
+      }
+    },
+    "build:npm:esm:internal:watch": {
+      "executor": "devextreme-nx-infra-plugin:babel-transform",
+      "cache": false,
+      "options": {
+        "babelConfigPath": "./build/transpile-config.js",
+        "configKey": "esm",
+        "sourcePattern": "./artifacts/dist_ts/__internal/**/*.{js,jsx}",
+        "outDir": "./artifacts/transpiled-esm-npm/esm/__internal",
+        "removeDebug": true,
+        "watch": true,
+        "renameExtensions": {
+          ".jsx": ".js"
+        }
+      },
+      "configurations": {
+        "qunit": {
+          "removeDebug": false
+        }
+      }
+    },
+    "build:qunit-esm": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "parallel": true,
+        "commands": [
+          "pnpm nx run devextreme:build:npm:esm -c qunit",
+          "pnpm nx run devextreme:build:npm:esm:internal -c qunit"
+        ]
+      },
+      "dependsOn": [
+        "build:ts:internal"
+      ],
+      "outputs": [
+        "{projectRoot}/artifacts/transpiled-esm-npm/esm"
+      ],
+      "cache": true,
+      "metadata": {
+        "description": "ESM artifacts for QUnit native import-map loader (?loader=esm)."
+      }
+    },
     "build:npm:cjs:internal": {
       "executor": "devextreme-nx-infra-plugin:babel-transform",
       "options": {
@@ -530,14 +620,12 @@
             "pnpm nx build:devextreme-bundler-config devextreme",
             "pnpm nx build:devextreme-bundler-config devextreme -c prod",
             "pnpm nx build:ts:internal devextreme",
-            "pnpm nx run-many --targets=build:cjs,build:cjs:internal,build:cjs:bundles --projects=devextreme --parallel",
-            "pnpm nx run-many --targets=build:cjs,build:cjs:internal,build:cjs:bundles --projects=devextreme --parallel -c production",
-            "pnpm nx run-many --targets=build:npm:cjs,build:npm:cjs:internal --projects=devextreme --parallel",
+            "pnpm nx run-many --targets=build:npm:esm,build:npm:esm:internal --projects=devextreme --parallel -c qunit",
+            "pnpm nx copy:qunit:dx-custom devextreme",
             "pnpm nx clean:dist-ts devextreme"
           ],
           "outputs": [
-            "{projectRoot}/artifacts/transpiled",
-            "{projectRoot}/artifacts/transpiled-renovation-npm",
+            "{projectRoot}/artifacts/transpiled-esm-npm",
             "{projectRoot}/build/bundle-templates/dx.custom.js",
             "{projectRoot}/artifacts/npm/devextreme/bundles/dx.custom.config.js"
           ]
@@ -570,10 +658,8 @@
       "options": {
         "commands": [
           "pnpm nx build:ts:internal:watch devextreme",
-          "pnpm nx build:cjs:watch devextreme",
-          "pnpm nx build:cjs:watch devextreme -c production",
-          "pnpm nx build:cjs:internal:watch devextreme",
-          "pnpm nx build:cjs:internal:watch devextreme -c production"
+          "pnpm nx build:npm:esm:watch devextreme -c qunit",
+          "pnpm nx build:npm:esm:internal:watch devextreme -c qunit"
         ],
         "cwd": "{projectRoot}",
         "parallel": true
@@ -1729,7 +1815,7 @@
           "pnpm nx clean:artifacts devextreme",
           "pnpm nx build:localization devextreme",
           "pnpm nx build:transpile devextreme -c ci",
-          "pnpm nx run-many --targets=bundle:debug,build:vectormap,copy:vendor --projects=devextreme --parallel"
+          "pnpm nx run-many --targets=build:vectormap,copy:vendor --projects=devextreme --parallel"
         ],
         "parallel": false
       },
@@ -1755,58 +1841,9 @@
       ],
       "cache": true,
       "metadata": {
-        "description": "Dev/CI test build. Skips prod bundles, aspnet, declarations, npm, and license checks."
+        "description": "Dev/CI QUnit build (native ESM import-map). Skips all CJS transpile/bundle steps, npm CJS dual-mode, prod bundles, aspnet, declarations, npm packing, and license checks."
       }
     },
-    "build:systemjs": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "{projectRoot}",
-        "parallel": true,
-        "commands": [
-          "node testing/systemjs-builder.js --transpile=modules",
-          "node testing/systemjs-builder.js --transpile=testing",
-          "node testing/systemjs-builder.js --transpile=css",
-          "node testing/systemjs-builder.js --transpile=js-vendors"
-        ]
-      },
-      "dependsOn": [
-        "build:dev"
-      ],
-      "inputs": [
-        "internalPackageEnv",
-        {
-          "env": "DEVEXTREME_TEST_CI"
-        },
-        {
-          "dependentTasksOutputFiles": "{projectRoot}/artifacts/transpiled/**/*"
-        },
-        {
-          "dependentTasksOutputFiles": "{projectRoot}/artifacts/css/dx.light.css"
-        },
-        {
-          "dependentTasksOutputFiles": "{projectRoot}/artifacts/css/dx.material.blue.light.css"
-        },
-        {
-          "dependentTasksOutputFiles": "{projectRoot}/artifacts/css/dx.fluent.blue.light.css"
-        },
-        {
-          "dependentTasksOutputFiles": "{projectRoot}/artifacts/css/dx-gantt.css"
-        },
-        "{projectRoot}/testing/content/**/*",
-        "{projectRoot}/testing/helpers/**/*",
-        "{projectRoot}/testing/tests/**/*",
-        "{projectRoot}/testing/systemjs-builder.js",
-        "{workspaceRoot}/pnpm-lock.yaml"
-      ],
-      "outputs": [
-        "{projectRoot}/artifacts/transpiled-systemjs",
-        "{projectRoot}/artifacts/transpiled-testing",
-        "{projectRoot}/artifacts/css-systemjs",
-        "{projectRoot}/artifacts/js-systemjs"
-      ],
-      "cache": true
-    },
     "dev": {
       "executor": "nx:run-commands",
       "cache": false,
@@ -1827,7 +1864,6 @@
         "commands": [
           "pnpm nx build:transpile:watch devextreme",
           "pnpm nx build:devextreme-bundler-config:watch devextreme",
-          "pnpm nx bundle:watch devextreme",
           "pnpm nx test-env devextreme"
         ]
       }

packages/devextreme/testing/helpers/chartMocks.js

@@ -16,6 +16,8 @@ import {
 } from './vizMocks.js';
 import { Range } from 'viz/translators/range';
 
+const mutableSeriesFamilyModule = seriesFamilyModule.default ?? seriesFamilyModule;
+
 const LoadingIndicatorOrig = loadingIndicatorModule.LoadingIndicator;
 
 const firstCategory = 'First';
@@ -394,7 +396,7 @@ export const resetMockFactory = function resetMockFactory() {
 };
 
 export const setupSeriesFamily = function() {
-    seriesFamilyModule.SeriesFamily = function(options) {
+    mutableSeriesFamilyModule.SeriesFamily = function(options) {
         return new MockSeriesFamily(options);
     };
 };

packages/devextreme/testing/helpers/data.errorHandlingHelper.js

@@ -1,16 +1,8 @@
-(function(root, factory) {
-    root.DevExpress = root.DevExpress || {};
-    root.DevExpress.data = root.DevExpress.data || {};
-    root.DevExpress.data.testing = root.DevExpress.data.testing || {};
-
-    if(typeof define === 'function' && define.amd) {
-        define(function(require, exports, module) {
-            root.DevExpress.data.testing.ErrorHandlingHelper = module.exports = factory(require('jquery'), require('core/class'), require('common/data/errors'));
-        });
-    } else {
-        root.DevExpress.data.testing.ErrorHandlingHelper = factory(window.jQuery, DevExpress.Class, DevExpress.data);
-    }
-}(window, function($, Class, errorsModule) {
+import $ from 'jquery';
+import Class from 'core/class';
+import * as errorsModule from 'common/data/errors';
+
+const __moduleExports = (function($, Class, errorsModule) {
     return Class.inherit({
 
         ctor: function() {
@@ -76,4 +68,11 @@
             });
         }
     });
-}));
+})($, Class, errorsModule);
+
+window.DevExpress = window.DevExpress || {};
+window.DevExpress.data = window.DevExpress.data || {};
+window.DevExpress.data.testing = window.DevExpress.data.testing || {};
+window.DevExpress.data.testing.ErrorHandlingHelper = __moduleExports;
+
+export default __moduleExports;