Skip to content

Visual Tests (Frameworks) #2568

Visual Tests (Frameworks)

Visual Tests (Frameworks) #2568

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