devextreme-ui-template-gallery/.github/workflows/test.yml at master · DevExpress/devextreme-ui-template-gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
name: Test

on:
  push:
    branches-ignore:
      - dev
  pull_request:
    branches-ignore:
      - dev

jobs:
  test-meta:
    name: Test metadata
    runs-on: ubuntu-latest

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

    - name: Install pnpm
      uses: pnpm/action-setup@v4

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

    - name: Install dependencies for metadata
      run: pnpm install --frozen-lockfile
      working-directory: packages/metadata

    - name: Test Metadata
      run: pnpm run test
      working-directory: packages/metadata

  testcafe:
    name: ${{ matrix.ARGS.project }} - ${{ matrix.ARGS.page }} - ${{ matrix.theme.type }}
    strategy:
      fail-fast: false
      matrix:
        theme: [
          { fullName: 'material.blue.light.compact', type: 'material', name: 'material.light' },
        ]
        ARGS: [
          { project: 'angular', page: 'crm-contact-details' },
          { project: 'angular', page: 'crm-contact-list' },
          # { project: 'angular', page: 'planning-task-details' }, No selector for Toolbar item on mobile device(bug)
          { project: 'angular', page: 'planning-task-list' },
          { project: 'angular', page: 'planning-scheduler' },
          { project: 'angular', page: 'analytics-dashboard' },
          { project: 'angular', page: 'analytics-sales-analysis' },
          { project: 'angular', page: 'analytics-geography' },
          { project: 'angular', page: 'user-profile' },
          { project: 'angular', page: 'auth-pages' },
          { project: 'react', page: 'crm-contact-details' },
          { project: 'react', page: 'crm-contact-list' },
          # { project: 'react', page: 'planning-task-details' }, # Title width is different (screen width 400). Menu stays opened
          { project: 'react', page: 'planning-task-list' },
          { project: 'react', page: 'planning-scheduler' },
          { project: 'react', page: 'analytics-dashboard' },
          { project: 'react', page: 'auth-pages' },
          # { project: 'react', page: 'analytics-geography' }, # Menu contents disappear after item click (screen width 400)
          # { project: 'vue', page: 'crm-contact-details' }, No selector for Toolbar item on mobile device(bug)
          { project: 'react', page: 'analytics-sales-analysis' },
          { project: 'react', page: 'user-profile' },
          { project: 'vue', page: 'crm-contact-list' },
          # { project: 'vue', page: 'planning-task-details' }, # Title width is different (screen width 400)
          { project: 'vue', page: 'planning-task-list' },
          { project: 'vue', page: 'planning-scheduler' },
          { project: 'vue', page: 'analytics-dashboard' },
          { project: 'vue', page: 'analytics-sales-analysis' },
          { project: 'vue', page: 'analytics-geography' },
          { project: 'vue', page: 'auth-pages' },
          { project: 'vue', page: 'user-profile' },
        ]
    runs-on: ubuntu-latest
    timeout-minutes: 40

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

    - name: Install pnpm
      uses: pnpm/action-setup@v4

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

    - name: Install dependencies
      run: pnpm install --frozen-lockfile

    - name: Install Internal Packages
      uses: DevExpress/github-actions/install-internal-package@main
      with:
        install-dist: true

    - name: Set theme
      run: pnpm run set-theme ${{ matrix.theme.fullName }}

    - name: Build
      run: pnpm run build
      working-directory: packages/${{ matrix.ARGS.project }}

    - name: Start app
      run: pnpm run start-apps --project ${{ matrix.ARGS.project }} --theme ${{ matrix.theme.name }}
      working-directory: packages/testing

    - name: Run tests
      run: |
        all_args="--project ${{ matrix.ARGS.project }} --page ${{ matrix.ARGS.page }} --quarantineMode true  --theme ${{ matrix.theme.name }}"
        echo "$all_args"
        pnpm run test-testcafe $all_args
      working-directory: packages/testing

    - name: Copy screenshots artifacts
      if: ${{ failure() }}
      uses: actions/upload-artifact@v4
      with:
        name: screenshots-${{ matrix.ARGS.project }}-${{ matrix.ARGS.page }}-${{ matrix.theme.fullName }}
        path: ${{ github.workspace }}/packages/testing/testing/artifacts/compared-screenshots/*
        if-no-files-found: ignore

  merge-artifacts:
    runs-on: ubuntu-latest
    needs: testcafe
    if: ${{ failure() }}
    strategy:
      matrix:
        project: [ 'angular', 'react', 'vue' ]

    steps:
      - name: Merge screenshot artifacts
        uses: actions/upload-artifact/merge@v4
        continue-on-error: true
        with:
          name: screenshots-${{ matrix.project }}
          pattern: screenshots-${{ matrix.project }}-*
          delete-merged: true