demos_visual_tests_frameworks.yml

name: Demos Frameworks

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:
      - "[0-9][0-9]_[0-9]"
  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

jobs:
  build-devextreme:
    runs-on: ubuntu-latest
    name: Build DevExtreme
    timeout-minutes: 40

    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: |
          corepack enable
          pnpm install

      - name: DevExtreme - Build-all
        env:
          BUILD_TEST_INTERNAL_PACKAGE: true
        run: pnpm run all:build-dev

      - name: Move packages
        run: |
          mv ./packages/devextreme/artifacts/npm/devextreme/*.tgz ./devextreme-installer.tgz
          mv ./packages/devextreme/artifacts/npm/devextreme-dist/*.tgz ./devextreme-dist-installer.tgz
          mv ./packages/devextreme-angular/npm/dist/*.tgz ./devextreme-angular-installer.tgz
          mv ./packages/devextreme-react/npm/*.tgz ./devextreme-react-installer.tgz
          mv ./packages/devextreme-vue/npm/*.tgz ./devextreme-vue-installer.tgz

      - name: Copy build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: devextreme-sources
          path: |
            devextreme-installer.tgz
            devextreme-dist-installer.tgz
            devextreme-angular-installer.tgz
            devextreme-react-installer.tgz
            devextreme-vue-installer.tgz
          retention-days: 1

  build-demos:
    runs-on: ubuntu-latest
    name: Build Demos
    timeout-minutes: 20
    needs: build-devextreme

    steps:

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

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

    - name: Download devextreme sources
      uses: actions/download-artifact@v4
      with:
        name: devextreme-sources

    - 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: |
        corepack enable
        pnpm install

    - name: Install tgz
      working-directory: apps/demos
      run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz

#    - name: Build wrappers
#      run: pnpm exec nx run-many -t pack -p devextreme-angular devextreme-react devetreme-vue

#    - name: Link wrappers packages
#      run: pnpm install

    - name: Prepare bundles
      working-directory: apps/demos
      run: pnpx nx prepare-bundles

    - name: Demos - Run tsc
      working-directory: apps/demos
      run: tsc --noEmit

    - name: Copy build artifacts
      uses: actions/upload-artifact@v4
      with:
        name: devextreme-bundles
        path: |
          apps/demos/bundles/
        retention-days: 1

  get-changes:
    runs-on: ubuntu-latest
    name: Get changed demos
    timeout-minutes: 5

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

      - name: Get changed files
        uses: DevExpress/github-actions/get-changed-files@v1
        if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'force all tests')
        with:
          gh-token: ${{ secrets.GITHUB_TOKEN }}
          paths: 'apps/demos/Demos/**/*'
          output: apps/demos/changed-files.json

      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
          name: changed-demos
          path: apps/demos/changed-files.json
          retention-days: 1

  lint:
    name: ${{ matrix.name }}
    needs:
      - build-devextreme
      - get-changes

    runs-on: ubuntu-latest
    timeout-minutes: 60

    strategy:
      fail-fast: false
      matrix:
        include:
          - name: Lint code base (excluding demos)
            command: pnpx nx lint-non-demos
          # NOTE: skipped due to enormous number of errors
          # - name: Lint demos (1/4)
          #   command: CONSTEL=1/4 npm run lint-demos
          # - name: Lint demos (2/4)
          #   command: CONSTEL=2/4 npm run lint-demos
          # - name: Lint demos (3/4)
          #   command: CONSTEL=3/4 npm run lint-demos
          # - name: Lint demos (4/4)
          #   command: CONSTEL=4/4 npm run lint-demos

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

    - name: Download artifacts
      if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'force all tests')
      uses: actions/download-artifact@v4
      with:
        name: changed-demos
        path: apps/demos

    - name: Download devextreme sources
      uses: actions/download-artifact@v4
      with:
        name: devextreme-sources

    - 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: |
        corepack enable
        pnpm install

    - name: Install tgz
      run: pnpm add -w ./devextreme-installer.tgz ./devextreme-dist-installer.tgz ./devextreme-react-installer.tgz ./devextreme-vue-installer.tgz ./devextreme-angular-installer.tgz

    - uses: actions/setup-dotnet@v3
      with:
        dotnet-version: 5.0.408

    - name: Prepare dotnet
      run: |
        dotnet new globaljson --sdk-version 5.0.408
        dotnet tool install -g dotnet-format --version 5.1.225507

    - name: Run lint
      working-directory: apps/demos
      env:
        CHANGEDFILEINFOSPATH: changed-files.json
        DEBUG: 'eslint:cli-engine,stylelint:standalone'
      run: ${{ matrix.command }}

  check_generated_demos:
    name: ${{ matrix.name }}
    runs-on: ubuntu-latest
    timeout-minutes: 10
    needs: build-demos

    strategy:
      fail-fast: false
      matrix:
        include:
          - name: Check generated demos (1/5)
            command: CONSTEL=1/5 pnpm run convert-to-js
          - name: Check generated demos (2/5)
            command: CONSTEL=2/5 pnpm run convert-to-js
          - name: Check generated demos (3/5)
            command: CONSTEL=3/5 pnpm run convert-to-js
          - name: Check generated demos (4/5)
            command: CONSTEL=4/5 pnpm run convert-to-js
          - name: Check generated demos (5/5)
            command: CONSTEL=5/5 pnpm run convert-to-js

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

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

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

#    - 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: Download devextreme sources
      uses: actions/download-artifact@v4
      with:
        name: devextreme-sources

    - name: Install dependencies
      run: |
        corepack enable
        pnpm install --frozen-lockfile

    - name: Install tgz
      working-directory: apps/demos
      run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz

    - name: Prepare JS
      working-directory: apps/demos
      run: pnpm run prepare-js

    - name: Check generated JS demos
      working-directory: apps/demos
      run: |
        ${{ matrix.command }}

        git add ./Demos -N

        if git diff --exit-code . ':!package.json' ; then
          echo "Generated JS demos are up-to-date"
        else
            echo "Generated JS demos are outdated. Execute 'pnpm run convert-to-js split' and commit changes."
            echo "If you see another diff, ensure that extra listed files have LF endings."
            exit 1
        fi

  testcafe:
    needs: build-demos
    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)]
        THEME: ['generic.light', 'material.blue.light', 'fluent.blue.light']

    runs-on: ubuntu-latest
    name: testcafe-${{ matrix.CONSTEL }}-${{ matrix.THEME }}
    timeout-minutes: 60

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

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

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

    - name: Download devextreme sources
      uses: actions/download-artifact@v4
      with:
        name: devextreme-sources

    - name: Download artifacts
      if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'force all tests')
      uses: actions/download-artifact@v4
      with:
        name: changed-demos
        path: apps/demos

    - 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: |
        corepack enable
        pnpm install

    - name: Install tgz
      working-directory: apps/demos
      run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz

#    - name: Build wrappers
#      run: pnpm exec nx run-many -t pack -p devextreme-angular devextreme-react devetreme-vue

    - name: Prepare JS
      working-directory: apps/demos
      run: pnpm run prepare-js

    - name: Update bundles config
      working-directory: apps/demos
      run: pnpx gulp update-config

    - name: Create bundles dir
      run: mkdir -p apps/demos/bundles

    - name: Download bundles artifacts
      uses: actions/download-artifact@v4
      with:
        name: devextreme-bundles
        path: apps/demos/bundles

    - 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
      working-directory: apps/demos
      env:
        CHANGEDFILEINFOSPATH: changed-files.json
        BROWSERS: chrome:headless --window-size=1200,800 --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: pnpx nx test-testcafe

    - name: Copy screenshots artifacts
      if: ${{ failure() }}
      uses: actions/upload-artifact@v3
      with:
        name: screenshots
        path: ${{ github.workspace }}/apps/demos/testing/artifacts/compared-screenshots/**/*
        if-no-files-found: ignore