Migrate QUnit tests from SystemJs - #34564
Draft
GoodDayForSurf wants to merge 21 commits into
Draft
Conversation
…feature/systemjs-qunit-to-esm
…feature/systemjs-qunit-to-esm
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request migrates the DevExtreme QUnit test runner and a large set of QUnit suites/helpers from a SystemJS-based loader to native browser ESM using import maps, removing the legacy SystemJS build pipeline and adding compatibility shims for vendor bundles and mutable-stubbing patterns.
Changes:
- Remove SystemJS build tooling/dependencies and switch QUnit CI build to
nx build:dev. - Update the QUnit runner to generate an import map, serve ESM-friendly URLs (extensionless resolution + redirects), and rewrite legacy CJS/AMD-style test/helpers at serve time.
- Refactor many QUnit suites/helpers to ESM imports and introduce ESM shims (CSS injection, mutable facades, vendor wrapping, RAF/fake-timers helpers).
Reviewed changes
Copilot reviewed 112 out of 113 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/nx-infra-plugin/AGENTS.md | Updates Nx target mapping docs to reflect SystemJS removal (needs cleanup of the edited row). |
| packages/devextreme/testing/tests/Memory Leaks/vizWidgets.tests.js | Makes DevExpress access ESM-safe for vector map data side effects. |
| packages/devextreme/testing/tests/DevExpress.viz.vectorMap/tracker.tests.js | Replaces direct frameModule stubbing with window-level RAF helpers for ESM. |
| packages/devextreme/testing/tests/DevExpress.viz.renderers/Animation.tests.js | Uses animationFrameStub helpers to keep async animation tests stable under ESM. |
| packages/devextreme/testing/tests/DevExpress.viz.gauges/barGauge.tests.js | Prevents double-completion/async reentry under ESM scheduling; stops orphan animation chains. |
| packages/devextreme/testing/tests/DevExpress.viz.core/axisDrawing.tests.js | Adjusts errors import pattern for ESM interop. |
| packages/devextreme/testing/tests/DevExpress.viz.charts/chart.part7.tests.js | Adjusts errors import pattern for ESM interop. |
| packages/devextreme/testing/tests/DevExpress.viz.charts/chart.integration.tests.js | Introduces “mutable module” indirection to allow stubbing under ESM default/namespace shapes. |
| packages/devextreme/testing/tests/DevExpress.ui/themes.tests.js | Removes SystemJS-specific CSS path workaround. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/sortable.tests.js | Switches RAF stubbing and timers strategy for ESM + adds explicit cleanup for instances/stubs. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollView.tests.js | Switches RAF stubbing and timers strategy for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.useNative.tests.js | Switches RAF stubbing and timers strategy for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollingByThumb.tests.js | Switches RAF stubbing and timers strategy for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollbar.tests.js | Switches RAF stubbing and timers strategy for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.rtl.tests.js | Switches RAF stubbing and timers strategy for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.mouseWheel.tests.js | Switches RAF stubbing and timers strategy for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.main.tests.js | Switches RAF stubbing and timers strategy for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.dynamic.tests.js | Replaces direct RAF mutation with shared RAF stub helpers. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.actions.tests.js | Switches RAF stubbing and timers strategy for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollable.tests.js | Installs RAF stubs early for ESM behavior consistency. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/ganttParts/importGantt.tests.js | Converts SystemJS-mapped missing-module test to direct ESM import + import-map override path. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.tests.js | Switches to shared RAF/timer helpers for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/draggable.tests.js | Switches to shared RAF/timer helpers for ESM. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/diagramParts/importDiagram.tests.js | Converts SystemJS-mapped missing-module test to direct ESM import + import-map override path. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/animator.tests.js | Converts RAF stubbing to shared helpers; moves to suite-level stub install/restore. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/desktopTooltip.tests.js | Adds explicit jQuery import for ESM module scope. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js | Ensures resize callbacks don’t leak between tests under ESM timing. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingModule.tests.js | Improves cleanup + assertion shape for resize handler registration under ESM timing. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/importQuill.tests.js | Converts SystemJS-mapped missing-module test to direct ESM import + import-map override path. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/adaptiveColumns.tests.js | Restores renderer.css after test via try/finally to prevent cross-test pollution. |
| packages/devextreme/testing/tests/DevExpress.localization/localization.globalize.tests.js | Removes SystemJS config block and adjusts default import usage for ESM. |
| packages/devextreme/testing/tests/DevExpress.jquery/template.tests.js | Removes SystemJS mapping config in favor of import-map loader behavior. |
| packages/devextreme/testing/tests/DevExpress.jquery/bundled.tests.js | Converts AMD wrapper to ESM imports; runs conditionally based on nojquery. |
| packages/devextreme/testing/tests/DevExpress.core/config_bundled.tests.js | Uses top-level await import() to preserve config-before-bundle semantics under ESM. |
| packages/devextreme/testing/tests/DevExpress.common/charts.tests.js | Avoids stubbing internal id generator by clearing global graphicObjects instead. |
| packages/devextreme/testing/tests/DevExpress.aspnet/aspnet.tests.js | Converts AMD/UMD wrapper to ESM, while preserving required globals for templates. |
| packages/devextreme/testing/tests/DevExpress.animation/fx.tests.js | Switches to shared RAF/timer helpers for ESM. |
| packages/devextreme/testing/systemjs-builder.js | Removes legacy SystemJS transpile/build script. |
| packages/devextreme/testing/runner/templates/run-suite.template.html | Switches suite loading from SystemJS to import maps + native ESM; adds theme CSS preload. |
| packages/devextreme/testing/runner/lib/static.ts | Adds ESM-aware static resolution/redirects, vendor wrapping, JSON-as-ESM, and test/helper rewriting. |
| packages/devextreme/testing/runner/lib/pages.ts | Generates import-map-based runner pages and detects missing ESM artifacts. |
| packages/devextreme/testing/runner/lib/importMap.ts | Introduces import map builder + plugin specifier scanning and suite-specific overrides. |
| packages/devextreme/testing/runner/lib/cjsInterop.ts | Adds serve-time rewriting of CJS/AMD/legacy patterns into ESM-compatible modules. |
| packages/devextreme/testing/runner/lib/autoMutableFacade.ts | Auto-generates mutable facades for namespace-default viz reexports to support stubbing. |
| packages/devextreme/testing/runner/index.ts | Adjusts runner startup logging/host expectations for module fetch compatibility. |
| packages/devextreme/testing/helpers/xmlHttpRequestMock.js | Converts to ESM import for jQuery (needed for module scope). |
| packages/devextreme/testing/helpers/vizMocks.js | Adjusts errors import shape + restores removedDebug methods via stubClass extras. |
| packages/devextreme/testing/helpers/treeListMocks.js | Converts AMD/global wrapper to ESM and exports the mock API explicitly. |
| packages/devextreme/testing/helpers/trackerMock.js | Switches from SystemJS registry mocking to mutation of a mutable ESM facade. |
| packages/devextreme/testing/helpers/stubs/zodToJsonSchemaStub.js | Removes SystemJS-specific stub in favor of ESM shim. |
| packages/devextreme/testing/helpers/stubs/zodStub.js | Removes SystemJS-specific stub in favor of ESM shim. |
| packages/devextreme/testing/helpers/qunitExtensions.js | Updates legacy comment wording after SystemJS removal. |
| packages/devextreme/testing/helpers/quillDependencies/noQuill.js | Converts missing-vendor stub to ESM default export + global null assignment. |
| packages/devextreme/testing/helpers/publicModulesHelper.js | Converts AMD/global wrapper to ESM while keeping legacy global assignment. |
| packages/devextreme/testing/helpers/positionFixtures.js | Converts AMD/global wrapper to ESM while keeping legacy global assignment. |
| packages/devextreme/testing/helpers/pointerMock.js | Converts AMD/global wrapper to ESM default export. |
| packages/devextreme/testing/helpers/noJQuery.js | Converts SystemJS-era jQuery stub module to ESM default export. |
| packages/devextreme/testing/helpers/noGantt.js | Converts missing-vendor stub to ESM default export. |
| packages/devextreme/testing/helpers/noDiagram.js | Converts missing-vendor stub to ESM default export. |
| packages/devextreme/testing/helpers/nativePointerMock.js | Converts AMD/global wrapper to ESM while keeping legacy global assignment. |
| packages/devextreme/testing/helpers/mockModule.js | Replaces legacy SystemJS module registry mocking with an explicit error (unsupported under ESM). |
| packages/devextreme/testing/helpers/memoryLeaksHelper.js | Converts AMD/global wrapper to ESM while keeping legacy global assignment. |
| packages/devextreme/testing/helpers/keyboardMock.js | Converts AMD/global wrapper to ESM default export and imports focused selector directly. |
| packages/devextreme/testing/helpers/includeThemesLinks.js | Removes SystemJS normalizeSync usage; uses explicit CSS hrefs. |
| packages/devextreme/testing/helpers/executeAsyncMock.js | Converts to ESM and preserves global DevExpress.testing assignment. |
| packages/devextreme/testing/helpers/esm-shims/zod.js | Adds ESM stub for zod. |
| packages/devextreme/testing/helpers/esm-shims/zod-to-json-schema.js | Adds ESM stub for zod-to-json-schema. |
| packages/devextreme/testing/helpers/esm-shims/viz_utils.js | Adds mutable ESM facade for viz utils to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/viz_translator2d.js | Adds mutable ESM facade for Translator2D to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/viz_tooltip.js | Adds mutable ESM facade for tooltip module to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/viz_title.js | Adds mutable ESM facade for title module to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/viz_tick_generator.js | Adds mutable ESM facade for tick generator to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/viz_renderer.js | Adds mutable ESM facade for renderer module to support stubbing + DEBUG_set bridging. |
| packages/devextreme/testing/helpers/esm-shims/viz_paletteModule.js | Adds mutable ESM facade for palette module to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/viz_loading_indicator.js | Adds mutable ESM facade for loading indicator module. |
| packages/devextreme/testing/helpers/esm-shims/viz_export.js | Adds mutable ESM facade for export module and DEBUG_set bridging. |
| packages/devextreme/testing/helpers/esm-shims/viz_components_legend.js | Adds mutable ESM facade for legend module with _setLegend bridging. |
| packages/devextreme/testing/helpers/esm-shims/viz_chart_tracker.js | Adds mutable ESM facade with live named bindings for tracker stubbing. |
| packages/devextreme/testing/helpers/esm-shims/viz_base_axis.js | Adds mutable ESM facade for Axis to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/viz_animation.js | Adds mutable ESM facade for animation module to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/visibility_change.js | Adds mutable ESM facade for visibility_change with named forwarding. |
| packages/devextreme/testing/helpers/esm-shims/ui_errors.js | Adds mutable ESM facade for ui errors module to support spying/stubbing. |
| packages/devextreme/testing/helpers/esm-shims/tslib.js | Adds minimal tslib fallback for non-hoisted cases in browser import-map mode. |
| packages/devextreme/testing/helpers/esm-shims/themes.js | Adds mutable ESM facade for themes module so stubs affect composed helpers. |
| packages/devextreme/testing/helpers/esm-shims/template_manager.js | Adds mutable ESM facade for TemplateManager to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/mutable_facade.js | Adds shared helper utilities for mutable facade patterns. |
| packages/devextreme/testing/helpers/esm-shims/material_blue_light.css.js | Adds ESM CSS injection module for material theme. |
| packages/devextreme/testing/helpers/esm-shims/localization.js | Adds default-namespace shim for localization module (named-only in ESM build). |
| packages/devextreme/testing/helpers/esm-shims/knockout.js | Adds ESM shim for knockout loaded via classic script tag. |
| packages/devextreme/testing/helpers/esm-shims/jspdf_autotable.js | Adds ESM shim to apply jspdf-autotable plugin without CJS require. |
| packages/devextreme/testing/helpers/esm-shims/jquery.js | Adds ESM shim that re-attaches window.$ after noConflict(). |
| packages/devextreme/testing/helpers/esm-shims/injectStylesheet.js | Adds stylesheet injector with load awaiting for ESM CSS modules. |
| packages/devextreme/testing/helpers/esm-shims/generic_light.css.js | Adds ESM CSS injection module for generic theme. |
| packages/devextreme/testing/helpers/esm-shims/gantt.css.js | Adds ESM CSS injection module for gantt theme CSS. |
| packages/devextreme/testing/helpers/esm-shims/format_helper.js | Adds mutable facade for format_helper to support stubbing. |
| packages/devextreme/testing/helpers/esm-shims/fluent_blue_light.css.js | Adds ESM CSS injection module for fluent theme. |
| packages/devextreme/testing/helpers/esm-shims/exporter.js | Adds mutable facade shim for exporter module with stubbable default + forwarded named exports. |
| packages/devextreme/testing/helpers/esm-shims/element_data.js | Adds default-namespace shim for core/element_data module (named-only in ESM build). |
| packages/devextreme/testing/helpers/esm-shims/date_parser.js | Adds mutable facade for LDML date parser to support spying/stubbing. |
| packages/devextreme/testing/helpers/esm-shims/core_errors.js | Adds mutable facade for core/errors to support spying/stubbing. |
| packages/devextreme/testing/helpers/esm-shims/base_indicators.js | Reintroduces an internal helper (getTextCloudInfo) needed by gauges tests under ESM artifacts. |
| packages/devextreme/testing/helpers/esm-shims/animation_frame.js | Adds live window.RAF delegation module so stubs remain effective under ESM. |
| packages/devextreme/testing/helpers/dataGridMocks.js | Converts AMD/global wrapper to ESM and exports the mock API explicitly. |
| packages/devextreme/testing/helpers/data.errorHandlingHelper.js | Converts AMD/global wrapper to ESM while keeping legacy global DevExpress.data.testing export. |
| packages/devextreme/testing/helpers/chartMocks.js | Uses mutable module indirection for SeriesFamily stubbing under ESM. |
| packages/devextreme/testing/helpers/animationFrameStub.js | Introduces shared window-level RAF/CAF stubbing utilities compatible with sinon fake timers. |
| packages/devextreme/project.json | Adds ESM-focused QUnit build targets and removes SystemJS build target references. |
| packages/devextreme/package.json | Removes SystemJS-related dev dependencies. |
| packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts | Switches height setting to setHeight helper for ESM-safe styling utilities. |
| packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts | Switches height setting to setHeight helper for ESM-safe styling utilities. |
| packages/devextreme/docker-ci.sh | Uses 127.0.0.1 instead of 0.0.0.0 for module fetch compatibility in Chrome. |
| .github/workflows/qunit_tests.yml | Updates CI QUnit build step to use nx build:dev (SystemJS build removed). |
| | `transpile-watch` | `build:transpile:watch` | `nx:run-commands` (parallel, `cache: false`) fanning out to the incremental watch targets `build:ts:internal:watch` (TypeScript watch program emitting `dist_ts`), `build:cjs:watch` (+ `-c production`), and `build:cjs:internal:watch` (+ `-c production`). Together these keep `artifacts/transpiled` and `artifacts/transpiled-renovation-npm` fresh, matching the old gulp JS + TS watch pipes. Watch capability lives in the `babel-transform` (per-file, chokidar + debounce, `watch` option) and `build-typescript` (`ts.createWatchProgram`, `watch` option) executors via the shared `src/utils/watch.ts` helper. `babel-transform` watch is intentionally file-level incremental and does **not** do an initial full transform — it relies on a preceding build having already populated its source directory (mirroring gulp-watch, which fed babel from a single in-memory TS-compiler stream with no such gap). Because `build:transpile`'s last step (`clean:dist-ts`) deletes `artifacts/dist_ts` — the exact directory `build:cjs:internal:watch` reads from and that runs right before `dev-watch` starts — `build:transpile:watch` itself (not the leaf `build:cjs:internal:watch` target, to avoid two parallel invocations each re-running the compile) declares `dependsOn: ["build:ts:internal"]`, so a real (or Nx-cache-restored) TS compile always repopulates `dist_ts/__internal` once, up front, before any of the fanned-out watch processes start; without it, whichever of the parallel TS-watch/babel-watch processes started first would decide — nondeterministically — whether the initial compile burst is picked up. | | ||
| | `transpile-tests` | `transpile:tests` | Uses `devextreme-nx-infra-plugin:babel-transform` with the flat (keyless) `./testing/tests.babelrc.json` config to transpile `testing/**/*.js` in place. `dependsOn: ["build:devextreme-bundler-config"]` reproduces the old gulp `series('bundler-config', …)` prerequisite. `cache: false` (in-place source transform, not a cached artifact). Run via `pnpm nx transpile:tests devextreme`. | | ||
| | `transpile-systemjs` | `build:systemjs` | Uses `nx:run-commands` (no custom executor — same precedent as `test-env`) to run `node testing/systemjs-builder.js --transpile=<mode>` for each mode (`modules`, `testing`, `css`, `js-vendors`) with `parallel: true` and `cwd: {projectRoot}`, mirroring the old `gulp.parallel`. The transform logic stays entirely in `testing/systemjs-builder.js` (untouched, guaranteeing byte parity); the devextreme-specific script path + mode list live in `project.json`, not in the plugin. `cache: true`, keeps the existing `inputs`/`outputs`/`dependsOn: [build:dev]`. CI runs `pnpm exec nx build:systemjs` directly. | | ||
| | ranspile-systemjs | _(removed)_ | QUnit uses native ESM + import maps only. uild:systemjs / esting/systemjs-builder.js removed; CI runs pnpm exec nx build:dev (includes ranspiled-esm-npm). | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.