Merge branch '25_2' into 25_2_odata_deserialize_dates

Author: GoodDayForSurf

.github/workflows/demos_visual_tests_frameworks.yml

@@ -35,7 +35,7 @@ jobs:
     needs: check-should-run
     if: needs.check-should-run.outputs.should-run == 'true'
     env:
-      NODE_OPTIONS: "--max-old-space-size=8192"
+      NODE_OPTIONS: --max-old-space-size=8192
     timeout-minutes: 40
 
     steps:
@@ -152,7 +152,7 @@ jobs:
       if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'force all tests')
       working-directory: apps/demos
       env:
-        NODE_OPTIONS: "--max-old-space-size=8192"
+        NODE_OPTIONS: --max-old-space-size=8192
       run: pnpx nx prepare-bundles
 
     - name: Demos - Run tsc

.github/workflows/qunit_tests.yml

@@ -148,19 +148,15 @@ jobs:
       matrix:
         constel: [
           'ui',
-          'ui.widgets(1/3)',
-          'ui.widgets(2/3)',
-          'ui.widgets(3/3)',
+          'ui.widgets(1/2)',
+          'ui.widgets(2/2)',
           'ui.editors(1/2)',
           'ui.editors(2/2)',
           'ui.htmlEditor',
-          'ui.grid(1/4)',
-          'ui.grid(2/4)',
-          'ui.grid(3/4)',
-          'ui.grid(4/4)',
-          'ui.scheduler(1/3)',
-          'ui.scheduler(2/3)',
-          'ui.scheduler(3/3)',
+          'ui.grid(1/2)',
+          'ui.grid(2/2)',
+          'ui.scheduler(1/2)',
+          'ui.scheduler(2/2)',
           'viz'
         ]
 

.github/workflows/testcafe_tests.yml

@@ -70,7 +70,9 @@ jobs:
 
     - name: Build
       shell: bash
-      run: pnpx nx build devextreme
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
+      run: pnpx nx build devextreme --uglify
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme
@@ -92,18 +94,13 @@ jobs:
       fail-fast: false
       matrix:
         ARGS: [
-          { componentFolder: "accessibility", name: "accessibility (1/2)", indices: "1/2" },
-          { componentFolder: "accessibility", name: "accessibility (2/2)", indices: "2/2" },
+          { componentFolder: "accessibility", name: "accessibility" },
           { componentFolder: "common", name: "common" },
 
           # Grids tests need to be reworked to work in fluent theme
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (1/5)", indices: "1/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (2/5)", indices: "2/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (3/5)", indices: "3/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (4/5)", indices: "4/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (5/5)", indices: "5/5" },
-          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky (1/2)", indices: "1/2" },
-          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky (2/2)", indices: "2/2" },
+          { componentFolder: "dataGrid", name: "dataGrid (1/3)", indices: "1/3" },
+          { componentFolder: "dataGrid", name: "dataGrid (2/3)", indices: "2/3" },
+          { componentFolder: "dataGrid", name: "dataGrid (3/3)", indices: "3/3" },
           { componentFolder: "cardView", name: "cardView" },
 
           # Scheduler tests need to be reworked to work in fluent theme
@@ -162,8 +159,8 @@ jobs:
       run: |
         echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-    - uses: actions/cache@v4
-      name: Setup pnpm cache
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
       with:
         path: |
           ${{ env.STORE_PATH }}
@@ -177,6 +174,8 @@ jobs:
 
     - name: Run TestCafe tests
       working-directory: ./e2e/testcafe-devextreme
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
       run: |
         if [ "${{ matrix.ARGS.theme }}" != "" ]; then
           THEME="--theme ${{ matrix.ARGS.theme }}"

apps/demos/README.md

@@ -1,65 +1,68 @@
 # DevExtreme Demos
 
-This repository contains technical DevExtreme demos for Angular, React, Vue, jQuery, ASP.NET MVC, and ASP.NET Core.
+This repository contains technical DevExtreme demos for Angular, React, Vue, and jQuery.
 
 To run the demos on your machine, clone this repository, run `pnpm install`, and follow the instructions below.
 
 ## Prepare Demos for Development
-Before running you need execute in `monorepo/root`:
 
-```
-pnpm run all:build-dev
-```
+### Run demos locally
 
-To prepare demos for development:
+In `monorepo/root`
 
+Build all dependencies and prepare systemJS configs by executing:
 ```
-pnpm run prepare-js
+pnpm run demos:prepare
 ```
 
-Angular, Vue, and React demos can use bundles instead of separate files from `node_modules`. With bundles, demos launch faster but become harder to debug. Run the following command to create the bundles and replace the SystemJS configuration:
-
+Start webserver:
 ```
-pnpm run prepare-bundles
+pnpm run demos:start
 ```
+Navigate to http://localhost:8080/.
+
+You can pass additional parameter to specify port. It can be useful when you need to fast switching between one demo on different frameworks.
+
 
-To return to using separate files from `node_modules`, run `pnpm run prepare-js`.
+### Bundled mode
 
+Angular, Vue, and React demos can use bundles instead of separate files from `node_modules`. With bundles, demos launch faster but become harder to debug. 
 
-### Launch
+In `apps/demos`
+
+Run the following command to create the bundles and replace the SystemJS configuration:
 
-#### Option 1
 ```
-pnpm run launch-demo
+pnpm run prepare-bundles
 ```
 
-#### Option 2
-1. Run ```pnpm run webserver ``` from `monorepo/root`
-2. Navigate to http://localhost:8080/apps/demos.
+To return to using separate files from `node_modules`, run:
 
-You can pass additional parameter to specify port. It can be useful when you need to fast switching between one demo on different frameworks:
+```
+pnpm run prepare-js
+```
 
-### Before Commiting Сhanges
+### Before Commiting Changes
 
-For fix autofixed errors:
+Auto-fix lint errors:
 
 ```
 pnpm run fix-lint
 ```
 
-### Development
+### Adding new demo
 
 1. Run the following script to add a new demo:
 
     ```
     pnpm run add-demo
     ```
 
-1. Use the built-in CLI to choose or enter the category, the demo name, and the technology for the new demo.
+2. Use the built-in CLI to choose or enter the category, the demo name, and the technology for the new demo.
 
 ### TS React Infrastructure
 
-1. After you make any changes in React TypeScript sources, run the following command:
+After you make any changes in React TypeScript sources, run the following command:
 
 ```
 pnpm run convert-to-js split
@@ -71,9 +74,7 @@ If you want to run this script on specific folder you can pass it to the argumen
 pnpm run convert-to-js "JSDemos/Demos/Diagram/**/React"
 ```
 
-1. To ensure that React JavaScript and TypeScript sources are always in sync, the following GitHub action is used: "Check generated JS demos".
-
-
+The "Check generated JS demos" GitHub Action ensures that the React JavaScript and TypeScript sources remain in sync.
 ## See Also
 
 - [Technical demos online](https://js.devexpress.com/Demos/)

apps/demos/project.json

@@ -102,6 +102,25 @@
         "{projectRoot}/**/*"
       ],
       "cache": true
+    },
+    "prepare-js": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "prepare-js"
+      },
+      "dependsOn": [
+        { "projects": ["devextreme"], "target": "build" },
+        { "projects": ["devextreme-angular", "devextreme-react", "devextreme-vue"], "target": "pack" }
+      ],
+      "inputs": [
+        "default",
+        "{projectRoot}/gulpfile.js/**/*",
+        "{projectRoot}/rollup.devextreme-angular.umd.config.mjs"
+      ],
+      "outputs": [
+        "{projectRoot}/Demos/**/config.js"
+      ],
+      "cache": true
     }
   },
   "namedInputs": {

e2e/testcafe-devextreme/.testcaferc.json

@@ -2,6 +2,7 @@
   "screenshots": {
     "path": "./",
     "takeOnFails": true,
+    "thumbnails": false,
     "pathPattern": "/artifacts/failedtests/${TEST}"
   },
   "screenshots-comparer": {

e2e/testcafe-devextreme/helpers/domUtils.ts

@@ -116,3 +116,23 @@ export const addCaptionTo = ClientFunction((
 
   element?.insertAdjacentText(where, caption);
 });
+
+export const addFocusableElementBefore = ClientFunction((
+  targetSelector: string,
+  elementId = 'focusable-start',
+) => {
+  const existing = document.getElementById(elementId);
+  existing?.remove();
+
+  const target = document.querySelector(targetSelector);
+  const button = document.createElement('button');
+  button.id = elementId;
+  button.textContent = 'Start';
+  button.style.position = 'fixed';
+  button.style.top = '0';
+  button.style.left = '0';
+  button.style.zIndex = '-1';
+  button.style.opacity = '0';
+  target?.parentElement?.insertBefore(button, target);
+  return button.id;
+});

e2e/testcafe-devextreme/helpers/getPageUrl.ts

@@ -2,13 +2,7 @@ import { pathToFileURL } from 'url';
 import { join } from 'path';
 
 export default (currentDir: string, pagePath: string): string => {
-  let path = pagePath;
-
-  if (process.env.shadowDom === 'true') {
-    const lastIndexOfSlash = path.lastIndexOf('/');
-
-    path = `${path.substring(0, lastIndexOfSlash + 1)}shadowDom/${path.substring(lastIndexOfSlash + 1)}`;
-  }
+  const path = pagePath;
 
   const fullPath = join(currentDir, path);
 

e2e/testcafe-devextreme/helpers/testPageUtils.ts

@@ -4,10 +4,8 @@ import {
   removeStylesheetRulesFromPage,
 } from './domUtils';
 
-export async function clearTestPage(testController: TestController): Promise<void> {
-  const shadowDom = process.env.shadowDom === 'true';
-
-  const clearTestPageFn = ClientFunction(() => {
+export async function clearTestPage(t: TestController): Promise<void> {
+  await ClientFunction(() => {
     const widgetSelector = '.dx-widget';
     const $elements = $(widgetSelector)
       .filter((_, element) => $(element).parents(widgetSelector).length === 0);
@@ -23,6 +21,9 @@ export async function clearTestPage(testController: TestController): Promise<voi
       $widgetElement.empty();
     });
 
+    const element = document.getElementById('focusable-start');
+    element?.remove();
+
     const body = document.querySelector('body');
     if (body) {
       body.innerHTML = '';
@@ -40,29 +41,58 @@ export async function clearTestPage(testController: TestController): Promise<voi
     `;
 
     body?.prepend(temp.firstElementChild!);
-  }, {
-    dependencies: {
-      shadowDom,
-    },
-  });
+  }).with({ boundTestRun: t })();
 
-  await clearTestPageFn.with({ boundTestRun: testController })();
-  await removeStylesheetRulesFromPage.with({ boundTestRun: testController })();
+  await removeStylesheetRulesFromPage.with({ boundTestRun: t })();
 }
 
 export async function loadAxeCore(t: TestController): Promise<void> {
-  await t.eval(() => new Promise<void>((resolve, reject) => {
+  await ClientFunction(() => new Promise<void>((resolve, reject) => {
     // @ts-expect-error ts-error
     if (window.axe) {
       resolve();
       return;
     }
 
     const script = document.createElement('script');
+    script.id = 'axe-core-script';
     script.src = '../../../node_modules/axe-core/axe.min.js';
     // @ts-expect-error ts-error
     script.onload = resolve;
     script.onerror = reject;
     document.head.appendChild(script);
-  }));
+  })).with({ boundTestRun: t })();
+}
+
+export async function loadShadowDomExtension(t: TestController): Promise<void> {
+  await ClientFunction(() => new Promise<void>((resolve, reject) => {
+    if (document.getElementById('shadow-dom-extension-script')) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.id = 'shadow-dom-extension-script';
+    script.src = '../../helpers/shadowDom/shadowDomExtension.js';
+    // @ts-expect-error ts-error
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  })).with({ boundTestRun: t })();
 }
+
+export const addShadowRootTree = async (t: TestController): Promise<void> => {
+  await ClientFunction(() => {
+    const root = document.querySelector('#parentContainer') as HTMLElement;
+    const { childNodes } = root;
+
+    if (!root.shadowRoot) {
+      root.attachShadow({ mode: 'open' });
+    }
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.append(...Array.from(childNodes));
+
+    root.shadowRoot!.appendChild(shadowContainer);
+  }).with({ boundTestRun: t })();
+};

e2e/testcafe-devextreme/helpers/themeUtils.ts

@@ -1,4 +1,5 @@
 import { isString } from 'devextreme/core/utils/type';
+import { ClientFunction } from 'testcafe';
 import { changeTheme } from './changeTheme';
 
 const defaultThemeName = 'fluent.blue.light';
@@ -8,6 +9,13 @@ export const getThemePostfix = (theme?: string): string => {
   return ` (${themeName})`;
 };
 
+export const getCurrentTheme = async (t: TestController): Promise<string> => {
+  // eslint-disable-next-line @stylistic/max-len
+  const currentTheme = await ClientFunction(() => (window as any).DevExpress?.ui.themes.current()).with({ boundTestRun: t })();
+
+  return currentTheme;
+};
+
 export const isMaterial = (): boolean => process.env.theme === 'material.blue.light';
 
 export const isFluent = (): boolean => process.env.theme === 'fluent.blue.light';