visual_tests_frameworks.yml

name: Frameworks

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

on:
  pull_request:
  push:
    branches:
      - "[0-9][0-9]_[0-9]"
  workflow_dispatch:
  schedule:
    - cron: '0 */2 * * 6,0'

env:
  NODE_VERSION: '18.16.1'

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

    steps:

    #Git
    - name: Get sources
      uses: actions/checkout@v3

    - name: Clone devextreme repo from PR author fork
      continue-on-error: true
      if: github.event_name == 'pull_request'
      run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme ./devextreme

    - name: Clone devextreme repo
      run: |
        BASE_BRANCH=$(node -p -e "require('./package.json').version.slice(0, 4).replace('.', '_')")
        test -d ./devextreme || git clone -b $BASE_BRANCH --depth 1 https://github.com/devexpress/devextreme ./devextreme

    #Build Devextreme
    - name: Restore npm cache
      uses: actions/cache@v3
      with:
        path: ./devextreme/node_modules
        key: ${{ runner.os }}-devextreme-node-modules-${{ hashFiles('devextreme/package-lock.json') }}
        restore-keys: ${{ runner.os }}-devextreme-node-modules

    - name: Use Node.js 18
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}

    - name: Install packages
      working-directory: ./devextreme
      run: npm install --no-audit --no-fund

    - name: Build
      working-directory: ./devextreme
      run: npm run build-npm-devextreme

    - name: Pack devextreme
      working-directory: ./devextreme/artifacts/npm/devextreme
      run: npm pack

    - name: Pack devextreme-dist
      working-directory: ./devextreme/artifacts/npm/devextreme-dist
      run: npm pack

    - name: Copy packages
      run: |
        cp ./devextreme/artifacts/npm/devextreme/*.tgz ./devextreme-installer.tgz
        cp ./devextreme/artifacts/npm/devextreme-dist/*.tgz ./devextreme-dist-installer.tgz
        cp ./devextreme/artifacts/internal-tools/Declarations.json ./Declarations.json

    - name: Copy build artifacts
      uses: actions/upload-artifact@v3
      with:
        name: devextreme-sources
        path: |
          devextreme-installer.tgz
          devextreme-dist-installer.tgz
          Declarations.json
        retention-days: 1

  build-react:
    runs-on: ubuntu-latest
    name: Build React
    timeout-minutes: 20
    needs: build-devextreme

    steps:
    - uses: actions/setup-dotnet@v3
      with:
        dotnet-version: |
          3.1
          6.0

    #Git
    - name: Get sources
      uses: actions/checkout@v3

    - name: Clone devextreme repo from PR author fork
      continue-on-error: true
      if: github.event_name == 'pull_request'
      run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme ./devextreme

    - name: Clone devextreme repo
      run: |
        BASE_BRANCH=$(node -p -e "require('./package.json').version.slice(0, 4).replace('.', '_')")
        test -d ./devextreme || git clone -b $BASE_BRANCH --depth 1 https://github.com/devexpress/devextreme ./devextreme

    - name: Restore npm cache
      uses: actions/cache@v3
      with:
        path: ./devextreme/node_modules
        key: ${{ runner.os }}-devextreme-node-modules-${{ hashFiles('devextreme/package-lock.json') }}
        restore-keys: ${{ runner.os }}-devextreme-node-modules

    - name: Discover declarations
      working-directory: ./devextreme
      run: npm run discover-declarations

    #Build devextreme-react

    - name: Use Node.js 18
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}

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

    - name: Clone devextreme-react repo from PR author fork
      continue-on-error: true
      if: github.event_name == 'pull_request'
      run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme-react ./devextreme-react-repo

    - name: Clone devextreme-react repo
      run: test -d ./devextreme-react-repo || git clone -b 23.1 https://github.com/devexpress/devextreme-react ./devextreme-react-repo

    - name: Copy devextreme packages
      run: |
        mkdir ./devextreme-react-repo/devextreme-setup
        cp ./devextreme-installer.tgz ./devextreme-react-repo/devextreme-setup

    - name: Install devextreme package
      working-directory: ./devextreme-react-repo
      run: |
        pushd devextreme-setup
        installerName=$(realpath .)/$(ls devextreme-installer.tgz)
        popd
        npm install --save-dev --legacy-peer-deps $installerName --workspace=devextreme-react --workspace=devextreme-react-sandbox --include-workspace-root

    - name: Build and Pack
      working-directory: ./devextreme-react-repo
      run: npm run pack

    - name: Copy devextreme-react package
      run: cp ./devextreme-react-repo/packages/devextreme-react/npm/*.tgz ./devextreme-react-installer.tgz

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

  build-vue:
    runs-on: ubuntu-latest
    name: Build Vue
    timeout-minutes: 20
    needs: build-devextreme

    steps:
    - uses: actions/setup-dotnet@v3
      with:
        dotnet-version: |
          3.1
          6.0

    #Git
    - name: Get sources
      uses: actions/checkout@v3

    - name: Clone devextreme repo from PR author fork
      continue-on-error: true
      if: github.event_name == 'pull_request'
      run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme ./devextreme

    - name: Clone devextreme repo
      run: |
        BASE_BRANCH=$(node -p -e "require('./package.json').version.slice(0, 4).replace('.', '_')")
        test -d ./devextreme || git clone -b $BASE_BRANCH --depth 1 https://github.com/devexpress/devextreme ./devextreme

    - name: Restore npm cache
      uses: actions/cache@v3
      with:
        path: ./devextreme/node_modules
        key: ${{ runner.os }}-devextreme-node-modules-${{ hashFiles('devextreme/package-lock.json') }}
        restore-keys: ${{ runner.os }}-devextreme-node-modules

    - name: Discover declarations
      working-directory: ./devextreme
      run: npm run discover-declarations

    #Build devextreme-vue

    - name: Use Node.js 18
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}

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

    - name: Clone devextreme-vue repo from PR author fork
      continue-on-error: true
      if: github.event_name == 'pull_request'
      run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme-vue ./devextreme-vue-repo

    - name: Clone devextreme-vue repo
      run: test -d ./devextreme-vue-repo || git clone -b 23.1 https://github.com/devexpress/devextreme-vue ./devextreme-vue-repo

    - name: Install packages for devextreme-vue
      working-directory: ./devextreme-vue-repo
      run: npm install --no-audit --no-fund

    - name: Copy devextreme package
      run: |
        mkdir ./devextreme-vue-repo/devextreme-setup
        cp ./devextreme-installer.tgz ./devextreme-vue-repo/devextreme-setup

    - name: Install packages for devextreme-vue
      working-directory: ./devextreme-vue-repo
      run: |
        pushd devextreme-setup
        installerName=$(realpath .)/$(ls devextreme-installer.tgz)
        popd
        npm install --save-dev --legacy-peer-deps $installerName $installerDistName

    - name: Build and Pack
      working-directory: ./devextreme-vue-repo
      run: npm run pack

    - name: Copy devextreme-vue package
      run: cp ./devextreme-vue-repo/packages/devextreme-vue/npm/*.tgz ./devextreme-vue-installer.tgz

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

  build-angular:
    runs-on: ubuntu-latest
    name: Build Angular
    timeout-minutes: 20
    needs: build-devextreme

    steps:

    #Git
    - name: Get sources
      uses: actions/checkout@v3

    - name: Clone devextreme repo from PR author fork
      continue-on-error: true
      if: github.event_name == 'pull_request'
      run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme ./devextreme

    - name: Clone devextreme repo
      run: |
        BASE_BRANCH=$(node -p -e "require('./package.json').version.slice(0, 4).replace('.', '_')")
        test -d ./devextreme || git clone -b $BASE_BRANCH --depth 1 https://github.com/devexpress/devextreme ./devextreme

    - name: Restore npm cache
      uses: actions/cache@v3
      with:
        path: ./devextreme/node_modules
        key: ${{ runner.os }}-devextreme-node-modules-${{ hashFiles('devextreme/package-lock.json') }}
        restore-keys: ${{ runner.os }}-devextreme-node-modules

    - name: Discover declarations
      working-directory: ./devextreme
      run: npm run discover-declarations

    #Build devextreme-angular

    - name: Use Node.js 18
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}

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

    - name: Clone devextreme-angular repo from PR author fork
      continue-on-error: true
      if: github.event_name == 'pull_request'
      run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme-angular ./devextreme-angular-repo

    - name: Clone devextreme-angular repo
      run: test -d ./devextreme-angular-repo || git clone -b 23.1 https://github.com/devexpress/devextreme-angular ./devextreme-angular-repo

    - name: Install packages for devextreme-angular
      working-directory: ./devextreme-angular-repo
      run: npm install --no-audit --no-fund

    - name: Copy devextreme package
      run: |
        mkdir ./devextreme-angular-repo/devextreme-setup
        cp ./devextreme-installer.tgz ./devextreme-angular-repo/devextreme-setup

    - name: Install devextreme package
      working-directory: ./devextreme-angular-repo
      run: |
        pushd devextreme-setup
        installerName=$(realpath .)/$(ls devextreme-installer.tgz)
        popd
        npm install --save-dev --legacy-peer-deps $installerName --workspace=devextreme-angular

    - name: Build and Pack
      working-directory: ./devextreme-angular-repo
      run: npm run pack

    - name: Copy devextreme-angular package
      run: cp ./devextreme-angular-repo/packages/devextreme-angular/npm/dist/*.tgz ./devextreme-angular-installer.tgz

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

  build-demos:
    runs-on: ubuntu-latest
    name: Build Demos
    timeout-minutes: 20
    needs: [build-angular, build-react, build-vue]

    steps:

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

    - name: Use Node.js 18
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}

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

    - name: Restore npm cache
      uses: actions/cache@v3
      with:
        path: ./node_modules
        key: ${{ runner.os }}-node-modules-${{ hashFiles('package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-modules

    - name: Delete DX packages
      run:  sed -i '/23.1-next/d' ./package.json

    - name: Install packages
      run: npm install --no-audit --no-fund

    - name: Install package
      run: |
        npm install devextreme-installer.tgz
        npm install devextreme-dist-installer.tgz
        npm install devextreme-react-installer.tgz
        npm install devextreme-vue-installer.tgz
        npm install devextreme-angular-installer.tgz

    - name: Prepare bundles
      run: npm run prepare-bundles

    - name: Demos - Run tsc
      run: tsc --noEmit

    #Publish artifacts
    - name: Zip node_modules
      run: 7z a -t7z -mx3 -mmt2 node_modules.7z node_modules

    - name: Copy build artifacts
      uses: actions/upload-artifact@v3
      with:
        name: devextreme-sources
        path: |
          node_modules.7z
          bundles/
        retention-days: 1

  build-documentation-meta:
    runs-on: ubuntu-latest
    name: Build Documentation Metadata
    timeout-minutes: 20
    needs: build-devextreme

    steps:
      #Git
      - name: Get sources
        uses: actions/checkout@v3

      - name: Clone devextreme repo from PR author fork
        continue-on-error: true
        if: github.event_name == 'pull_request'
        run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme ./devextreme

      - name: Clone devextreme repo
        run: |
          BASE_BRANCH=$(node -p -e "require('./package.json').version.slice(0, 4).replace('.', '_')")
          test -d ./devextreme || git clone -b $BASE_BRANCH --depth 1 https://github.com/devexpress/devextreme ./devextreme
      - name: Restore npm cache
        uses: actions/cache@v3
        with:
          path: ./devextreme/node_modules
          key: ${{ runner.os }}-devextreme-node-modules-${{ hashFiles('devextreme/package-lock.json') }}
          restore-keys: ${{ runner.os }}-devextreme-node-modules

      - name: Use Node.js 18
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Install packages
        working-directory: ./devextreme
        run: npm install --no-audit --no-fund

      #Build devextreme-with-documentation

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

      - name: Clone devextreme-documentation repo from PR author fork
        continue-on-error: true
        if: github.event_name == 'pull_request'
        run: git clone -b ${{github.event.pull_request.head.ref}} --depth 1 https://github.com/${{github.event.pull_request.user.login}}/devextreme-documentation ./devextreme-documentation-repo

      - name: Clone devextreme-documentation repo
        run: |
          BASE_BRANCH=$(node -p -e "require('./package.json').version.slice(0, 4).replace('.', '_')")
          test -d ./devextreme-documentation-repo || git clone -b $BASE_BRANCH https://github.com/devexpress/devextreme-documentation ./devextreme-documentation-repo
      - name: Install internal tools
        run: |
          npm i devextreme-internal-tools
      - name: Update topics
        working-directory: ./devextreme-documentation-repo
        run: |
          mkdir -p ./artifacts/internal-tools
          cp ../Declarations.json ./artifacts/internal-tools/
          npm i
          npm run update-topics
      - name: Inject descriptions
        working-directory: ./devextreme
        run: |
          npm run internal-tool -- inject-descriptions --descriptions-path ../../../devextreme-documentation-repo/artifacts/internal-tools/Descriptions.json --js-scripts ./js
      - name: Build
        continue-on-error: true
        working-directory: ./devextreme
        run: npm run build-npm-devextreme

      - name: Pack
        working-directory: ./devextreme/artifacts/npm/devextreme
        run: npm pack

      - name: Copy package
        run: cp ./devextreme/artifacts/npm/devextreme/*.tgz ./devextreme-installer-docs.tgz

      - name: Copy build artifacts
        uses: actions/upload-artifact@v3
        with:
          name: devextreme-sources
          path: |
            devextreme-installer-docs.tgz
          retention-days: 1

  lint:
    name: ${{ matrix.name }}
    needs:
      - build-demos
      - build-documentation-meta

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

    strategy:
      fail-fast: false
      matrix:
        include:
          - name: Lint code base (excluding demos)
            command: npm run lint-non-demos
          - 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@v3

    - name: Delete DX packages
      run:  sed -i '/23.1-next/d' ./package.json

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

    - name: Unpack artifacts
      run: 7z x node_modules.7z

    - name: Install packages
      run: |
        npm install devextreme-installer-docs.tgz
        npm install devextreme-dist-installer.tgz
        npm install devextreme-react-installer.tgz
        npm install devextreme-vue-installer.tgz
        npm install devextreme-angular-installer.tgz

    - name: Run npm install
      run: npm install --no-audit --no-fund

    - 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
      run: ${{ matrix.command }}

  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)]

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

    steps:
#    - name: Pin Chrome version
#      run: |
#        CHROME_VERSION=103.0.5060.134-1
#        wget "https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_${CHROME_VERSION}_amd64.deb"
#        sudo dpkg -i "google-chrome-stable_${CHROME_VERSION}_amd64.deb"

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

    - name: Delete DX packages
      run:  sed -i '/23.1-next/d' ./package.json

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

    - name: Unpack artifacts
      run: 7z x node_modules.7z

    - name: Prepare JS
      run: npm run prepare-js

    - name: Prepare Bundles
      run: npx gulp 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: Get changed files
      uses: ./.github/actions/get-changed-files
      if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'force all tests')
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        path: changed-files.json

    - name: Run TestCafe tests
      env:
        CHANGEDFILEINFOSPATH: ${{ github.workspace }}/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 }}
        # 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: npm run test-testcafe

    - name: Get screenshots artifacts name
      if: ${{ failure() }}
      id: screenshotname
      run: echo ::set-output name=value::$(echo "${{ matrix.CONSTEL }}" | grep -oP "^\w+")

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