demos_visual_tests.yml

name: Demos Visual Tests

concurrency:
  group: wf-${{github.event.pull_request.number || github.sha}}-${{github.workflow}}
  cancel-in-progress: true

on:
  pull_request:
    paths-ignore:
      - 'apps/**/*.md'
  push:
    branches: [24_2]
  workflow_dispatch:

env:
  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
  NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }}
  BUILD_TEST_INTERNAL_PACKAGE: true
  RUN_TESTS: ${{ (github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'force all tests')) && 'true' || 'false' }}

jobs:
  check-should-run:
    name: Check if tests should run
    runs-on: devextreme-shr2
    outputs:
      should-run: ${{ steps.check.outputs.should-run }}
    steps:
      - name: Check RUN_TESTS flag
        id: check
        run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT

  build:
    runs-on: ubuntu-22.04
    name: Build devextreme
    needs: check-should-run
    if: needs.check-should-run.outputs.should-run == 'true'
    timeout-minutes: 20

    steps:
      - name: Get sources
        uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - uses: pnpm/action-setup@v3
        with:
          version: 9
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - uses: actions/cache@v4
        name: Setup pnpm cache
        with:
          path: |
            ${{ env.STORE_PATH }}
            .nx/cache
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store

      - name: Install dependencies
        run: pnpm install

      - name: DevExtreme - Build
        shell: bash
        run: |
          node ./tools/scripts/performance_log.js &
          pnpm exec nx build devextreme

  testcafe:
    needs: [check-should-run, build]
    if: needs.check-should-run.outputs.should-run == 'true'
    strategy:
      fail-fast: false
      matrix:
        STRATEGY: [screenshots, accessibility]
        THEME: ['generic.light', 'material.blue.light', 'fluent.blue.light']
        CONSTEL: [jquery(1/4), jquery(2/4), jquery(3/4), jquery(4/4)]
    env:
      ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"

    runs-on: ubuntu-22.04
    name: ${{ matrix.CONSTEL }}-${{ matrix.STRATEGY }}-${{ matrix.THEME }}
    timeout-minutes: 180

    steps:
    - name: Get sources
      uses: actions/checkout@v4

    - name: Setup Chrome
      uses: ./.github/actions/setup-chrome
      with:
        chrome-version: '145.0.7632.67'

    - name: Use Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20'

    - uses: pnpm/action-setup@v3
      with:
        version: 9
        run_install: false

    - name: Get pnpm store directory
      shell: bash
      run: |
        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

    - uses: actions/cache@v4
      name: Setup pnpm cache
      with:
        path: |
          ${{ env.STORE_PATH }}
          .nx/cache
        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
        restore-keys: |
          ${{ runner.os }}-pnpm-store

    - name: Install dependencies
      run: pnpm install

    - name: DevExtreme - Build
      run: pnpm exec nx build devextreme

    - 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: Run TestCafe tests
      shell: bash
      working-directory: apps/demos
      env:
        STRATEGY: ${{ matrix.STRATEGY }}
        CHANGEDFILEINFOSPATH: changed-files.json
        BROWSERS: chrome:headless --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
        TCQUARANTINE: true
        CONSTEL: ${{ matrix.CONSTEL }}
        THEME: ${{ matrix.THEME }}
        # DISABLE_DEMO_TEST_SETTINGS: all # Uncomment to ignore all the visualtestrc.json settings
        # DISABLE_DEMO_TEST_SETTINGS: ignore # Uncomment to ignore the `ignore` field
        # DISABLE_DEMO_TEST_SETTINGS: comparison-options # Uncomment to ignore the `comparison-options` field
        CI_ENV: true # The `ignore` field in the visualtestrc.json should be disabled when running test locally
      run: |
        node ../../tools/scripts/performance_log.js &
        pnpm exec nx test-testcafe

    - name: Show accessibility warnings
      if: matrix.STRATEGY == 'accessibility'
      working-directory: apps/demos
      run: |
        message=$(cat $ACCESSIBILITY_TESTCAFE_REPORT_PATH)
        echo "::warning ::$message"

    - name: Sanitize job name
      if: ${{ failure() }}
      run: echo "JOB_NAME=$(echo "${{ matrix.CONSTEL }}-${{ matrix.THEME }}" | tr '/' '-')" >> $GITHUB_ENV

    - name: Copy screenshots artifacts
      if: failure() && matrix.STRATEGY == 'screenshots'
      uses: actions/upload-artifact@v4
      with:
        name: screenshots-${{ env.JOB_NAME }}
        path: ${{ github.workspace }}/apps/demos/testing/artifacts/compared-screenshots/**/*
        if-no-files-found: ignore

    - name: Copy accessibility report
      if: matrix.STRATEGY == 'accessibility'
      uses: actions/upload-artifact@v4
      with:
        name: accessibility-reports-${{ env.JOB_NAME }}
        path: apps/demos/testing/artifacts/axe-reports/*
        if-no-files-found: ignore

  merge-artifacts:
    runs-on: devextreme-shr2
    needs: testcafe
    if: ${{ failure() }}

    steps:
      - name: Merge screenshot artifacts
        uses: actions/upload-artifact/merge@v4
        continue-on-error: true
        with:
          name: screenshots
          pattern: screenshots-*
          delete-merged: true

      - name: Merge accessibility reports
        uses: actions/upload-artifact/merge@v4
        continue-on-error: true
        with:
          name: accessibility-reports
          pattern: accessibility-reports-*
          delete-merged: true