visual_tests_frameworks.yml

name: Visual Tests (Frameworks)

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

on:
  push:
  pull_request:
  workflow_dispatch:
  schedule:
    - cron: '0 */2 * * 6,0'

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

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

    - 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}} https://github.com/${{github.event.pull_request.user.login}}/devextreme ./devextreme-repo

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

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

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

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

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

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

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

    #Build devextreme-react
    - name: DevExtreme React - Clone devextreme-react repo
      run: git clone -b 21.2 https://github.com/devexpress/devextreme-react ./devextreme-react-repo

    - name: DevExtreme React - Update react metadata
      working-directory: ./devextreme-repo
      run: npm run internal-tool -- update-integration-meta --output-path ../devextreme-react-repo/packages/devextreme-react/metadata/integration-data.json --version 21_2 --js-scripts ./js --exclude js/renovation/

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

    - name: DevExtreme React - Get devextreme-react ref
      working-directory: ./devextreme-react-repo
      id: devextreme-react-ref
      run: echo "::set-output name=head::$(git rev-parse HEAD)"
   
    - name: DevExtreme React - Restore package cache
      id: devextreme-react-cache
      uses: actions/cache@v2
      with:
        path: ./devextreme-react-*.tgz
        key: devextreme-react-package-${{ steps.devextreme-react-ref.outputs.head }}-${{ hashFiles('devextreme-react-repo/packages/devextreme-react/metadata/integration-data.json') }}

    - name: DevExtreme React - Install devextreme package
      if: steps.devextreme-react-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-react-repo/packages/devextreme-react
      run: npm install --save-dev $(ls *.tgz)

    - name: DevExtreme React - Install packages for devextreme-react
      if: steps.devextreme-react-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-react-repo
      run: npm install --no-audit --no-fund
      
    - name: DevExtreme React - Build and Pack
      if: steps.devextreme-react-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-react-repo
      run: npm run pack

    - name: DevExtreme React - Copy devextreme-react package
      if: steps.devextreme-react-cache.outputs.cache-hit != 'true'
      run: cp ./devextreme-react-repo/packages/devextreme-react/npm/*.tgz .

    #Build devextreme-vue
    - name: DevExtreme Vue - Clone devextreme-vue repo
      run: git clone -b 21.2 https://github.com/devexpress/devextreme-vue ./devextreme-vue-repo

    - name: DevExtreme Vue - Update vue metadata
      working-directory: ./devextreme-repo
      run: npm run internal-tool -- update-integration-meta --output-path ../devextreme-react-repo/packages/devextreme-vue/metadata/integration-data.json --version 21_2 --js-scripts ./js --exclude js/renovation/

    - name: DevExtreme Vue - Copy devextreme package
      run: cp ./devextreme-repo/artifacts/npm/devextreme/*.tgz ./devextreme-vue-repo/packages/devextreme-vue
   
    - name: DevExtreme Vue - Get devextreme-vue ref
      working-directory: ./devextreme-vue-repo
      id: devextreme-vue-ref
      run: echo "::set-output name=head::$(git rev-parse HEAD)"
   
    - name: DevExtreme Vue - Restore package cache
      id: devextreme-vue-cache
      uses: actions/cache@v2
      with:
        path: ./devextreme-vue-*.tgz
        key: devextreme-vue-package-${{ steps.devextreme-vue-ref.outputs.head }}-${{ hashFiles('devextreme-vue-repo/packages/devextreme-vue/metadata/integration-data.json') }}

    - name: DevExtreme Vue - Install devextreme package
      if: steps.devextreme-vue-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-vue-repo/packages/devextreme-vue
      run: npm install --save-dev $(ls *.tgz)

    - name: DevExtreme Vue - Install packages for devextreme-vue
      if: steps.devextreme-vue-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-vue-repo
      run: npm install --no-audit --no-fund
      
    - name: DevExtreme Vue - Build and Pack
      if: steps.devextreme-vue-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-vue-repo
      run: npm run pack

    - name: DevExtreme Vue - Copy devextreme-vue package
      if: steps.devextreme-vue-cache.outputs.cache-hit != 'true'
      run: cp ./devextreme-vue-repo/packages/devextreme-vue/npm/*.tgz .

    #Build devextreme-angular
    - name: DevExtreme Angular - Clone devextreme-angular repo
      run: git clone -b 21.2 https://github.com/devexpress/devextreme-angular ./devextreme-angular-repo

    - name: DevExtreme Angular - Update angular metadata
      working-directory: ./devextreme-repo
      run: npm run internal-tool -- update-meta --output-path ../devextreme-angular-repo/packages/devextreme-angular/metadata/NGMetaData.json --version 21_2 --js-scripts ./js --exclude js/renovation/

    - name: DevExtreme Angular - Copy devextreme package
      run: cp ./devextreme-repo/artifacts/npm/devextreme/*.tgz ./devextreme-angular-repo/packages/devextreme-angular
   
    - name: DevExtreme Angular - Get devextreme-angular ref
      working-directory: ./devextreme-angular-repo
      id: devextreme-angular-ref
      run: echo "::set-output name=head::$(git rev-parse HEAD)"
   
    - name: DevExtreme Angular - Restore package cache
      id: devextreme-angular-cache
      uses: actions/cache@v2
      with:
        path: ./devextreme-angular-*.tgz
        key: devextreme-angular-package-${{ steps.devextreme-angular-ref.outputs.head }}-${{ hashFiles('devextreme-angular-repo/packages/devextreme-angular/metadata/NGMetaData.json') }}

    - name: DevExtreme Angular - Install devextreme package
      if: steps.devextreme-angular-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-angular-repo/packages/devextreme-angular
      run: npm install --save-dev $(ls *.tgz)

    - name: DevExtreme Angular - Install packages for devextreme-angular
      if: steps.devextreme-angular-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-angular-repo
      run: npm install --no-audit --no-fund
      
    - name: DevExtreme Angular - Build and Pack
      if: steps.devextreme-angular-cache.outputs.cache-hit != 'true'
      working-directory: ./devextreme-angular-repo
      run: npm run pack

    - name: DevExtreme Angular - Copy devextreme-angular package
      if: steps.devextreme-angular-cache.outputs.cache-hit != 'true'
      run: cp ./devextreme-angular-repo/packages/devextreme-angular/npm/dist/*.tgz .

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

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

    - name: Demos - Install devextreme package
      run: npm install $(find ./devextreme-repo/artifacts/npm/devextreme/ -maxdepth 1 -name "devextreme-*.tgz")

    - name: Demos - Install devextreme-react package
      run: npm install $(ls devextreme-react-*.tgz)

    - name: Demos - Install devextreme-vue package
      run: npm install $(ls devextreme-vue-*.tgz)

    - name: Demos - Install devextreme-angular package
      run: npm install $(ls devextreme-angular-*.tgz)

    - name: Demos - 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@v2
      with:
        name: devextreme-sources        
        path: |
          node_modules.7z
          bundles/
        retention-days: 1
  testcafe:
    needs: build
    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: Get sources
      uses: actions/checkout@v2

    - name: Download devextreme sources
      uses: actions/download-artifact@v2
      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
      if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'force all tests')
      run: |
        curl --header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
          --url https://api.github.com/repos/${{github.repository}}/pulls/${{github.event.pull_request.number}}/files > 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@v2
      with:
        name: screenshots-${{ steps.screenshotname.outputs.value }}
        path: ${{ github.workspace }}/testing/artifacts/compared-screenshots/*
        if-no-files-found: ignore