e2e demos tests: reanimate run in Material theme (#31729)

Author: EugeniyKiyashko

.github/workflows/demos_visual_tests.yml

@@ -126,9 +126,7 @@ jobs:
       - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
-          path: |
-            ${{ env.STORE_PATH }}
-            .nx/cache
+          path: ${{ env.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store
@@ -139,14 +137,28 @@ jobs:
       - name: DevExtreme - Build
         if: needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'none'
         shell: bash
-        run: pnpx nx build devextreme
+        run: |
+          pnpx nx build devextreme-scss
+          pnpx nx build devextreme
 
       - name: DevExtreme - Build-all
         if: needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none'
         env:
           BUILD_TEST_INTERNAL_PACKAGE: true
         run: pnpm run all:build-dev
 
+      - name: Zip artifacts (for jQuery tests)
+        working-directory: ./packages/devextreme
+        run: |
+          7z a -tzip -mx3 -mmt2 artifacts.zip artifacts ../devextreme-scss/scss/bundles
+
+      - name: Upload build artifacts (for jQuery tests)
+        uses: actions/upload-artifact@v4
+        with:
+          name: devextreme-artifacts-jquery
+          path: ./packages/devextreme/artifacts.zip
+          retention-days: 1
+
       - name: Move packages
         if: needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none'
         run: |
@@ -201,12 +213,10 @@ 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 }}
-            .nx/cache
+          path: ${{ env.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store
@@ -270,12 +280,10 @@ 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 }}
-            .nx/cache
+          path: ${{ env.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store
@@ -337,12 +345,10 @@ 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 }}
-          .nx/cache
+        path: ${{ env.STORE_PATH }}
         key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
           ${{ runner.os }}-pnpm-store
@@ -426,12 +432,10 @@ 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 }}
-          .nx/cache
+        path: ${{ env.STORE_PATH }}
         key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
           ${{ runner.os }}-pnpm-store
@@ -490,18 +494,15 @@ jobs:
       fail-fast: false
       matrix:
         STRATEGY: [screenshots, accessibility]
-        # THEME: ['material.blue.light', 'fluent.blue.light']
-        THEME: ['fluent.blue.light']
-        CONSTEL: [jquery(1/4), jquery(2/4), jquery(3/4), jquery(4/4), jquery]
+        THEME: ['material.blue.light', 'fluent.blue.light']
+        CONSTEL: [jquery(1/3), jquery(2/3), jquery(3/3), jquery]
         exclude:
           - STRATEGY: accessibility
-            CONSTEL: jquery(1/4)
-          - STRATEGY: accessibility
-            CONSTEL: jquery(2/4)
+            CONSTEL: jquery(1/3)
           - STRATEGY: accessibility
-            CONSTEL: jquery(3/4)
+            CONSTEL: jquery(2/3)
           - STRATEGY: accessibility
-            CONSTEL: jquery(4/4)
+            CONSTEL: jquery(3/3)
           - STRATEGY: screenshots
             CONSTEL: jquery
     env:
@@ -515,6 +516,16 @@ jobs:
     - name: Get sources
       uses: actions/checkout@v4
 
+    - name: Download artifacts
+      uses: actions/download-artifact@v4
+      with:
+        name: devextreme-artifacts-jquery
+        path: ./packages/devextreme
+
+    - name: Unpack artifacts
+      working-directory: ./packages/devextreme
+      run: 7z x artifacts.zip -aoa
+
     - name: Setup Chrome
       uses: ./.github/actions/setup-chrome
       with:
@@ -535,36 +546,57 @@ 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 }}
-          .nx/cache
+        path: ${{ env.STORE_PATH }}
         key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
           ${{ runner.os }}-pnpm-store
 
     - name: Install dependencies
       run: pnpm install --frozen-lockfile
 
-    - name: DevExtreme - Build
-      run: pnpx nx build devextreme
+    - name: Cache Roboto font
+      if: contains(matrix.THEME, 'material')
+      id: cache-roboto
+      uses: actions/cache@v4
+      with:
+        path: /usr/share/fonts/truetype/roboto
+        key: roboto-font-${{ runner.os }}
+
+    - name: Install Roboto font for Material theme
+      if: contains(matrix.THEME, 'material') && steps.cache-roboto.outputs.cache-hit != 'true'
+      run: |
+        echo "Installing Roboto font..."
+        sudo apt-get update -qq
+        sudo apt-get install -y -qq fonts-roboto fonts-roboto-unhinted
+        sudo fc-cache -f -v > /dev/null 2>&1 || true
+        echo "Roboto font installed"
 
     - name: Run Web Server
+      run: python -m http.server 8080 &
+
+    - name: Set Chrome flags
+      id: chrome-flags
       run: |
-        python -m http.server 8080 &
-        python -m http.server 8081 &
-        python -m http.server 8082 &
-        python -m http.server 8083 &
+        BASE_FLAGS="chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl=swiftshader --disable-features=PaintHolding --js-flags=--random-seed=2147483647"
+        
+        # For Material theme, enable better font rendering to avoid instability
+        if [[ "${{ matrix.THEME }}" != *"material"* ]]; then
+          BASE_FLAGS="$BASE_FLAGS --font-render-hinting=none --disable-font-subpixel-positioning"
+        fi
+        
+        echo "flags=$BASE_FLAGS" >> $GITHUB_OUTPUT
 
-    - name: Run TestCafe tests
+    - name: Run TestCafe tests (jQuery)
       shell: bash
       working-directory: apps/demos
       env:
+        NODE_OPTIONS: --max-old-space-size=8192
         STRATEGY: ${{ matrix.STRATEGY }}
         CHANGEDFILEINFOSPATH: changed-files.json
-        BROWSERS: chrome:headless --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
+        BROWSERS: ${{ steps.chrome-flags.outputs.flags }}
         #DEBUG: hammerhead:*,testcafe:*
         CONCURRENCY: 4
         TCQUARANTINE: true
@@ -609,7 +641,26 @@ jobs:
     strategy:
       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)]
+        CONSTEL: [
+          react(1/3),
+          react(2/3),
+          react(3/3),
+          vue(1/5),
+          vue(2/5),
+          vue(3/5),
+          vue(4/5),
+          vue(5/5),
+          angular(1/10),
+          angular(2/10),
+          angular(3/10),
+          angular(4/10),
+          angular(5/10),
+          angular(6/10),
+          angular(7/10),
+          angular(8/10),
+          angular(9/10),
+          angular(10/10),
+        ]
         THEME: ['fluent.blue.light']
 
     runs-on: devextreme-shr2
@@ -645,12 +696,10 @@ 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 }}
-          .nx/cache
+        path: ${{ env.STORE_PATH }}
         key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
           ${{ runner.os }}-pnpm-store
@@ -682,17 +731,26 @@ jobs:
     - name: Run Web Server
       run: |
         python -m http.server 8080 &
-        python -m http.server 8081 &
-        python -m http.server 8082 &
-        python -m http.server 8083 &
+
+    - name: Set concurrency based on framework
+      id: set-concurrency
+      run: |
+        if [[ "${{ matrix.CONSTEL }}" == react* ]]; then
+          echo "concurrency=3" >> $GITHUB_OUTPUT
+        elif [[ "${{ matrix.CONSTEL }}" == angular* ]]; then
+          echo "concurrency=2" >> $GITHUB_OUTPUT
+        else
+          echo "concurrency=2" >> $GITHUB_OUTPUT
+        fi
 
     - name: Run TestCafe tests
       shell: bash
       working-directory: apps/demos
       env:
-        BROWSERS: chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
+        NODE_OPTIONS: --max-old-space-size=8192
+        BROWSERS: chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl=swiftshader --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
         # DEBUG: hammerhead:*,testcafe:*
-        CONCURRENCY: 4
+        CONCURRENCY: ${{ steps.set-concurrency.outputs.concurrency }}
         TCQUARANTINE: true
         CONSTEL: ${{ matrix.CONSTEL }}
         THEME: ${{ matrix.THEME }}
@@ -763,12 +821,10 @@ 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 }}
-            .nx/cache
+          path: ${{ env.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store
@@ -815,7 +871,7 @@ jobs:
         working-directory: apps/demos
         env:
           CHANGEDFILEINFOSPATH: changed-files.json
-          BROWSERS: chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
+          BROWSERS: chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl=swiftshader --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
           # DEBUG: hammerhead:*,testcafe:*
           CONCURRENCY: 1
           TCQUARANTINE: true

.github/workflows/testcafe_tests.yml

@@ -30,7 +30,7 @@ jobs:
         run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT
 
   build:
-    name: build
+    name: Build DevExtreme
     needs: check-should-run
     if: needs.check-should-run.outputs.should-run == 'true'
 
@@ -58,9 +58,7 @@ jobs:
     - uses: actions/cache@v4
       name: Setup pnpm cache
       with:
-        path: |
-          ${{ env.STORE_PATH }}
-          .nx/cache
+        path: ${{ env.STORE_PATH }}
         key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
           ${{ runner.os }}-pnpm-store
@@ -72,7 +70,9 @@ jobs:
       shell: bash
       env:
         NODE_OPTIONS: --max-old-space-size=8192
-      run: pnpx nx build devextreme
+      run: |
+        pnpx nx build devextreme-scss
+        pnpx nx build devextreme
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme
@@ -161,9 +161,7 @@ jobs:
     - uses: actions/cache/restore@v4
       name: Restore pnpm cache
       with:
-        path: |
-          ${{ env.STORE_PATH }}
-          .nx/cache
+        path: ${{ env.STORE_PATH }}
         key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
           ${{ runner.os }}-pnpm-store

apps/demos/package.json

@@ -149,6 +149,7 @@
         "stylelint-config-standard": "35.0.0",
         "systemjs-builder": "0.16.15",
         "testcafe": "3.7.2",
+        "testcafe-reporter-spec-time": "4.0.0",
         "ts-node": "10.9.2",
         "vue-tsc": "^3.0.6"
     },