QUnit tests: remove 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/common/core/animation/frame.ts

@@ -17,11 +17,13 @@ const window: ExtendedWindow = (hasWindow() ? getWindow() : {}) as ExtendedWindo
 
 const FRAME_ANIMATION_STEP_TIME = 1000 / 60;
 
+// eslint-disable-next-line func-names -- description seam for tests
 let request = function (callback: FrameRequestCallback): number {
   /* eslint-disable no-restricted-globals */
   return setTimeout(callback, FRAME_ANIMATION_STEP_TIME);
 };
 
+// eslint-disable-next-line func-names -- description seam for tests
 let cancel = function (requestID: number): void {
   clearTimeout(requestID);
 };
@@ -45,15 +47,37 @@ const setAnimationFrameMethods = callOnce(() => {
   }
 });
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function requestAnimationFrame(...args): number {
+/* eslint-disable-next-line
+  @typescript-eslint/explicit-module-boundary-types, import/no-mutable-exports
+  -- description seam for tests */
+export let requestAnimationFrame = function (...args): number {
   setAnimationFrameMethods();
 
   // @ts-ignore
   return request.apply(window, args);
-}
+};
 
-export function cancelAnimationFrame(requestID: number): void {
+/* eslint-disable-next-line
+  import/no-mutable-exports
+  -- description seam for tests */
+export let cancelAnimationFrame = function (requestID: number): void {
   setAnimationFrameMethods();
   cancel.apply(window, [requestID]);
+};
+
+/// #DEBUG
+/* eslint-disable-next-line @typescript-eslint/naming-convention
+  -- description seam setter for tests stubs */
+export function DEBUG_set_requestAnimationFrame(
+  value: typeof requestAnimationFrame,
+): void {
+  requestAnimationFrame = value;
+}
+/* eslint-disable-next-line @typescript-eslint/naming-convention
+  -- description seam setter for tests stubs */
+export function DEBUG_set_cancelAnimationFrame(
+  value: typeof cancelAnimationFrame,
+): void {
+  cancelAnimationFrame = value;
 }
+/// #ENDDEBUG

packages/devextreme/js/__internal/common/core/animation/translator.ts

@@ -124,7 +124,8 @@ export const move = function (
   }
 };
 
-export const resetPosition = function (
+/* eslint-disable import/no-mutable-exports -- description seam for tests */
+export let resetPosition = function (
   $element: dxElementWrapper | Element | undefined,
   finishTransition?: boolean,
 ): void {
@@ -170,3 +171,11 @@ export const parseTranslate = function (translateString: string): TranslateVecto
     z: parseFloat(result[2]),
   };
 };
+
+/// #DEBUG
+/* eslint-disable @typescript-eslint/naming-convention
+  -- description seam setter for tests stubs */
+export function DEBUG_set_resetPosition(value: typeof resetPosition): void {
+  resetPosition = value;
+}
+/// #ENDDEBUG

packages/devextreme/js/__internal/core/localization/ldml/date.parser.ts

@@ -235,7 +235,8 @@ export const isPossibleForParsingFormat = (patterns: string[]): boolean => {
   });
 };
 
-export const getRegExpInfo = (
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let getRegExpInfo = (
   format: string,
   dateParts: LdlmDateLocalization,
 ): {
@@ -381,3 +382,11 @@ export const getParser = (format: string, dateParts: LdlmDateLocalization) => {
     return null;
   };
 };
+
+/// #DEBUG
+/* eslint-disable-next-line @typescript-eslint/naming-convention
+  -- description seam setter for tests stubs */
+export function DEBUG_set_getRegExpInfo(value: typeof getRegExpInfo): void {
+  getRegExpInfo = value;
+}
+/// #ENDDEBUG

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';
@@ -828,7 +829,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

@@ -534,7 +534,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);
     }
@@ -1033,7 +1033,7 @@ export class RowsView extends ColumnsView {
 
             if (showFreeSpaceRow) {
               deferRender(() => {
-                freeSpaceRowElements.css('height', resultHeight);
+                setHeight(freeSpaceRowElements, resultHeight);
                 isFreeSpaceRowVisible = true;
                 freeSpaceRowElements.show();
               });
@@ -1042,7 +1042,7 @@ export class RowsView extends ColumnsView {
           });
         }
       } else {
-        freeSpaceRowElements.css('height', 0);
+        setHeight(freeSpaceRowElements, 0);
         freeSpaceRowElements.show();
         this._updateLastRowBorder(true);
       }

packages/devextreme/js/__internal/viz/axes/base_axis.ts

@@ -313,7 +313,8 @@ function getConstantLineSharpDirection(coord, axisCanvas) {
   return Math.max(axisCanvas.start, axisCanvas.end) !== coord ? 1 : -1;
 }
 
-export const Axis = function (renderSettings) {
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let Axis = function (renderSettings) {
   const that = this;
 
   that._renderer = renderSettings.renderer;
@@ -2839,3 +2840,9 @@ Axis.prototype = {
   shift: _noop,
   /// #ENDDEBUG
 };
+
+/// #DEBUG
+export function DEBUG_set_Axis(value: typeof Axis): void {
+  Axis = value;
+}
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/axes/tick_generator.ts

@@ -806,7 +806,8 @@ function dateGenerator(options) {
   );
 }
 
-export const tickGenerator = function (options) {
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let tickGenerator = function (options) {
   let result;
 
   if (options.rangeIsEmpty) {
@@ -823,3 +824,11 @@ export const tickGenerator = function (options) {
 
   return result;
 };
+
+/// #DEBUG
+/* eslint-disable-next-line @typescript-eslint/naming-convention
+  -- description seam setter for tests stubs */
+export function DEBUG_set_tickGenerator(value: typeof tickGenerator): void {
+  tickGenerator = value;
+}
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/chart_components/crosshair.ts

@@ -69,13 +69,14 @@ function getLabelCheckerPosition(x, y, isHorizontal, canvas) {
   };
 }
 
-export function Crosshair(renderer, options, params, group) {
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let Crosshair = function (renderer, options, params, group) {
   const that = this;
   that._renderer = renderer;
   that._crosshairGroup = group;
   that._options = {};
   that.update(options, params);
-}
+};
 
 Crosshair.prototype = {
   constructor: Crosshair,
@@ -323,3 +324,11 @@ Crosshair.prototype = {
     }
   },
 };
+
+/// #DEBUG
+/* eslint-disable-next-line @typescript-eslint/naming-convention
+  -- description seam setter for tests stubs */
+export function DEBUG_set_Crosshair(value: typeof Crosshair): void {
+  Crosshair = value;
+}
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/chart_components/layout_manager.ts

@@ -122,8 +122,9 @@ function getInnerRadius({ type, innerRadius }) {
   return type === 'pie' ? 0 : _isNumber(innerRadius) ? Number(innerRadius) : DEFAULT_INNER_RADIUS;
 }
 
-function LayoutManager() {
-}
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+let LayoutManager = function () {
+};
 
 function getAverageLabelWidth(centerX, radius, canvas, sizeLabels) {
   return (centerX - radius - RADIAL_LABEL_INDENT - canvas.left) / sizeLabels.outerLabelsCount;
@@ -278,3 +279,9 @@ LayoutManager.prototype = {
 };
 
 export { LayoutManager };
+
+/// #DEBUG
+export function DEBUG_set_LayoutManager(value: typeof LayoutManager): void {
+  LayoutManager = value;
+}
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/chart_components/scroll_bar.ts

@@ -23,7 +23,8 @@ const _min = Math.min;
 const _max = Math.max;
 const MIN_SCROLL_BAR_SIZE = 10;
 
-export const ScrollBar = function (renderer, group) {
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let ScrollBar = function (renderer, group) {
   this._translator = new Translator2D({}, {}, {});
   this._scroll = renderer.rect().append(group);
   this._addEvents();
@@ -283,3 +284,9 @@ ScrollBar.prototype = {
     });
   },
 };
+
+/// #DEBUG
+export function DEBUG_set_ScrollBar(value: typeof ScrollBar): void {
+  ScrollBar = value;
+}
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/components/chart_theme_manager.ts

@@ -26,7 +26,8 @@ import {
 import { BaseThemeManager } from '@ts/viz/core/base_theme_manager';
 import { extractColor, normalizeEnum as _normalizeEnum } from '@ts/viz/core/utils';
 
-export const ThemeManager = BaseThemeManager.inherit((function () {
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let ThemeManager = BaseThemeManager.inherit((function () {
   const ctor = function (params) {
     const that = this;
 
@@ -245,3 +246,11 @@ export const ThemeManager = BaseThemeManager.inherit((function () {
     },
   };
 })());
+
+/// #DEBUG
+/* eslint-disable-next-line @typescript-eslint/naming-convention
+  -- description seam setter for tests stubs */
+export function DEBUG_set_ThemeManager(value: typeof ThemeManager): void {
+  ThemeManager = value;
+}
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/components/data_validator.ts

@@ -505,7 +505,8 @@ function verifyData(source, incidentOccurred) {
   return data;
 }
 
-export function validateData(data, groupsData, incidentOccurred, options) {
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let validateData = function (data, groupsData, incidentOccurred, options) {
   data = verifyData(data, incidentOccurred);
 
   groupsData.argumentType = groupsData.argumentAxisType = null;
@@ -524,4 +525,10 @@ export function validateData(data, groupsData, incidentOccurred, options) {
   const dataByArgumentFields = sortData(data, groupsData, options, getUniqueArgumentFields(groupsData));
 
   return dataByArgumentFields;
+};
+
+/// #DEBUG
+export function DEBUG_set_validateData(value: typeof validateData): void {
+  validateData = value;
 }
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/core/base_theme_manager.ts

@@ -32,7 +32,8 @@ function getThemePart(theme, path) {
   return _theme;
 }
 
-export const BaseThemeManager = Class.inherit({ // TODO: test hack
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let BaseThemeManager = Class.inherit({ // TODO: test hack
   ctor(options) {
     this._themeSection = options.themeSection;
     this._fontFields = options.fontFields || [];
@@ -115,3 +116,9 @@ export const BaseThemeManager = Class.inherit({ // TODO: test hack
     _extend(font, this._font, _extend({}, font));
   },
 });
+
+/// #DEBUG
+export function DEBUG_set_BaseThemeManager(value: typeof BaseThemeManager): void {
+  BaseThemeManager = value;
+}
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/core/plaque.ts

@@ -223,7 +223,8 @@ function getCloudPoints({ width, height }, x, y, anchorX, anchorY, { arrowWidth,
   return buildPath('M', points, 'Z');
 }
 
-export class Plaque {
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let Plaque = class {
   widget;
 
   options;
@@ -480,4 +481,10 @@ export class Plaque {
     const { width, height } = this._size || {};
     return Math.abs(x - this.x) <= width / 2 && Math.abs(y - this.y) <= height / 2;
   }
+};
+
+/// #DEBUG
+export function DEBUG_set_Plaque(value: typeof Plaque): void {
+  Plaque = value;
 }
+/// #ENDDEBUG

packages/devextreme/js/__internal/viz/core/renderers/animation.ts

@@ -144,13 +144,14 @@ Animation.prototype = {
   },
 };
 
-export function AnimationController(element) {
+// eslint-disable-next-line import/no-mutable-exports -- description seam for tests
+export let AnimationController = function (element) {
   const that = this;
   that._animationCount = 0;
   that._timerId = null;
   that._animations = {};
   that.element = element;
-}
+};
 
 AnimationController.prototype = {
   _loop() {
@@ -239,3 +240,11 @@ AnimationController.prototype = {
     !hasUnstoppableInAnimations && this.stop();
   },
 };
+
+/// #DEBUG
+/* eslint-disable-next-line @typescript-eslint/naming-convention
+  -- description seam setter for tests stubs */
+export function DEBUG_set_AnimationController(value: typeof AnimationController): void {
+  AnimationController = value;
+}
+/// #ENDDEBUG