testcafe_tests.yml

name: TestCafe 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: [25_1]

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:
    name: build
    strategy:
      fail-fast: false

    runs-on: devextreme-shr2
    timeout-minutes: 15

    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: Build
      run: pnpx nx build devextreme

    - name: Zip artifacts
      working-directory: ./packages/devextreme
      run: |
        7z a -tzip -mx3 -mmt2 artifacts.zip artifacts ../devextreme-scss/scss/bundles

    - name: Upload build artifacts
      uses: actions/upload-artifact@v3
      with:
        name: devextreme-artifacts
        path: ./packages/devextreme/artifacts.zip
        retention-days: 1

  testcafe:
    name: ${{ matrix.ARGS.name }}
    needs: [build]
    strategy:
      fail-fast: false
      matrix:
        ARGS: [
          { componentFolder: "accessibility", name: "accessibility (1/5)", indices: "1/5" },
          { componentFolder: "accessibility", name: "accessibility (2/5)", indices: "2/5" },
          { componentFolder: "accessibility", name: "accessibility (3/5)", indices: "3/5" },
          { componentFolder: "accessibility", name: "accessibility (4/5)", indices: "4/5" },
          { componentFolder: "accessibility", name: "accessibility (5/5)", indices: "5/5" },
          { componentFolder: "accessibility", name: "accessibility - material (1/7)", theme: "material.blue.light", indices: "1/7" },
          { componentFolder: "accessibility", name: "accessibility - material (2/7)", theme: "material.blue.light", indices: "2/7" },
          { componentFolder: "accessibility", name: "accessibility - material (3/7)", theme: "material.blue.light", indices: "3/7" },
          { componentFolder: "accessibility", name: "accessibility - material (4/7)", theme: "material.blue.light", indices: "4/7" },
          { componentFolder: "accessibility", name: "accessibility - material (5/7)", theme: "material.blue.light", indices: "5/7" },
          { componentFolder: "accessibility", name: "accessibility - material (6/7)", theme: "material.blue.light", indices: "6/7" },
          { componentFolder: "accessibility", name: "accessibility - material (7/7)", theme: "material.blue.light", indices: "7/7" },
          { componentFolder: "accessibility", name: "accessibility - fluent (1/7)", theme: "fluent.blue.light", indices: "1/7" },
          { componentFolder: "accessibility", name: "accessibility - fluent (2/7)", theme: "fluent.blue.light", indices: "2/7" },
          { componentFolder: "accessibility", name: "accessibility - fluent (3/7)", theme: "fluent.blue.light", indices: "3/7" },
          { componentFolder: "accessibility", name: "accessibility - fluent (4/7)", theme: "fluent.blue.light", indices: "4/7" },
          { componentFolder: "accessibility", name: "accessibility - fluent (5/7)", theme: "fluent.blue.light", indices: "5/7" },
          { componentFolder: "accessibility", name: "accessibility - fluent (6/7)", theme: "fluent.blue.light", indices: "6/7" },
          { componentFolder: "accessibility", name: "accessibility - fluent (7/7)", theme: "fluent.blue.light", indices: "7/7" },
          { componentFolder: "common", name: "common" },
          { componentFolder: "common", name: "common - material", theme: 'material.blue.light' },
          { componentFolder: "common", name: "common - fluent", theme: 'fluent.blue.light' },
          { componentFolder: "chat", name: "chat" },
          { componentFolder: "chat", name: "chat - material", theme: 'material.blue.light' },
          { componentFolder: "chat", name: "chat - fluent", theme: 'fluent.blue.light' },
          { componentFolder: "treeList", name: "treeList", concurrency: 1 },
          { componentFolder: "dataGrid", name: "dataGrid (1/5)", indices: "1/5" },
          { componentFolder: "dataGrid", name: "dataGrid (2/5)", indices: "2/5" },
          { componentFolder: "dataGrid", name: "dataGrid (3/5)", indices: "3/5" },
          { componentFolder: "dataGrid", name: "dataGrid (4/5)", indices: "4/5" },
          { componentFolder: "dataGrid", name: "dataGrid (5/5)", indices: "5/5" },
          { componentFolder: "pivotGrid", name: "pivotGrid", concurrency: 1 },
          { componentFolder: "pivotGrid", name: "pivotGrid - material", theme: 'material.blue.light', concurrency: 1 },
          { componentFolder: "pivotGrid", name: "pivotGrid - fluent", theme: 'fluent.blue.light', concurrency: 1 },
          { componentFolder: "scheduler", name: "scheduler (1/5)", indices: "1/5" },
          { componentFolder: "scheduler", name: "scheduler (2/5)", indices: "2/5" },
          { componentFolder: "scheduler", name: "scheduler (3/5)", indices: "3/5" },
          { componentFolder: "scheduler", name: "scheduler (4/5)", indices: "4/5" },
          { componentFolder: "scheduler", name: "scheduler (5/5)", indices: "5/5" },
          { componentFolder: "scheduler/timezones", name: "scheduler (Europe/Berlin)", timezone: "Europe/Berlin" },
          { componentFolder: "scheduler/timezones", name: "scheduler (America/Los_Angeles)", timezone: "America/Los_Angeles" },
          { componentFolder: "form", name: "form (1/2)", indices: "1/2" },
          { componentFolder: "form", name: "form (2/2)", indices: "2/2" },
          { componentFolder: "form", name: "form - material (1/4)", theme: 'material.blue.light', indices: "1/4" },
          { componentFolder: "form", name: "form - material (2/4)", theme: 'material.blue.light', indices: "2/4" },
          { componentFolder: "form", name: "form - material (3/4)", theme: 'material.blue.light', indices: "3/4" },
          { componentFolder: "form", name: "form - material (4/4)", theme: 'material.blue.light', indices: "4/4" },
          { componentFolder: "form", name: "form - fluent (1/2)", theme: 'fluent.blue.light', indices: "1/2" },
          { componentFolder: "form", name: "form - fluent (2/2)", theme: 'fluent.blue.light', indices: "2/2" },
          { componentFolder: "editors", name: "editors (1/2)", indices: "1/2" },
          { componentFolder: "editors", name: "editors (2/2)", indices: "2/2" },
          { componentFolder: "editors", name: "editors - material (1/2)", theme: 'material.blue.light', indices: "1/2" },
          { componentFolder: "editors", name: "editors - material (2/2)", theme: 'material.blue.light', indices: "2/2" },
          { componentFolder: "editors", name: "editors - fluent (1/2)", theme: 'fluent.blue.light', indices: "1/2" },
          { componentFolder: "editors", name: "editors - fluent (2/2)", theme: 'fluent.blue.light', indices: "2/2" },
          { componentFolder: "htmlEditor", name: "htmlEditor", concurrency: 1 },
          { componentFolder: "htmlEditor", name: "htmlEditor - material", theme: 'material.blue.light', concurrency: 1 },
          { componentFolder: "htmlEditor", name: "htmlEditor - fluent", theme: 'fluent.blue.light', concurrency: 1 },
          { componentFolder: "navigation", name: "navigation" },
          { componentFolder: "navigation", name: "navigation - material", theme: 'material.blue.light' },
          { componentFolder: "navigation", name: "navigation - fluent", theme: 'fluent.blue.light' },
          { componentFolder: "fileManager", name: "fileManager" },
          { componentFolder: "fileManager", name: "fileManager - material", theme: 'material.blue.light' },
          { componentFolder: "fileManager", name: "fileManager - fluent", theme: 'fluent.blue.light' },
          { componentFolder: "filterBuilder", name: "filterBuilder" },
          { componentFolder: "filterBuilder", name: "filterBuilder - material", theme: 'material.blue.light' },
          { componentFolder: "filterBuilder", name: "filterBuilder - fluent", theme: 'fluent.blue.light' },
          { componentFolder: "pagination", name: "pagination" },
          { componentFolder: "pagination", name: "pagination - material", theme: 'material.blue.light' },
          { componentFolder: "pagination", name: "pagination - fluent", theme: 'fluent.blue.light' },
        ]
    runs-on: devextreme-shr2
    timeout-minutes: 90

    steps:
    - name: Set machine timezone
      run: |
        sudo ln -sf "/usr/share/zoneinfo/$([ "${{ matrix.ARGS.timezone }}" != "" ] && echo "${{ matrix.ARGS.timezone }}" || echo "GMT")" /etc/localtime
        date

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

    - name: Download artifacts
      uses: actions/download-artifact@v3
      with:
        name: devextreme-artifacts
        path: ./packages/devextreme

    - name: Unpack artifacts
      working-directory: ./packages/devextreme
      run: 7z x artifacts.zip -aoa

    - 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'

    - 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: Run TestCafe tests
      working-directory: ./e2e/testcafe-devextreme
      run: |
        [ "${{ matrix.ARGS.theme }}" != "" ] && THEME="--theme ${{ matrix.ARGS.theme }}"
        [ "${{ matrix.ARGS.indices }}" != "" ] && INDICES="--indices ${{ matrix.ARGS.indices }}"
        [ "${{ matrix.ARGS.concurrency }}" != "" ] && CONCURRENCY="--concurrency ${{ matrix.ARGS.concurrency }}"
        [ "${{ matrix.ARGS.platform }}" != "" ] && PLATFORM="--platform ${{ matrix.ARGS.platform }}"
        all_args="--browsers=chrome:devextreme-shr2 --componentFolder ${{ matrix.ARGS.componentFolder }} $CONCURRENCY $INDICES $PLATFORM $THEME"
        echo "$all_args"
        pnpm run test $all_args

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

    - name: Copy failed test artifacts
      if: ${{ failure() }}
      uses: actions/upload-artifact@v3
      with:
        name: failed-tests
        path: ${{ github.workspace }}/e2e/testcafe-devextreme/artifacts/failedtests/**/*
        if-no-files-found: ignore

  notify:
    runs-on: devextreme-shr2
    name: Send notifications
    needs: [build, testcafe]
    if: github.event_name != 'pull_request' && contains(needs.*.result, 'failure')

    steps:
      - uses: actions/checkout@v4
      - uses: DevExpress/github-actions/send-teams-notification@v1
        with:
          hook_url: ${{secrets.TEAMS_ALERT}}
          bearer_token: ${{secrets.GITHUB_TOKEN}}
          specific_repo: DevExpress/DevExtreme