devextreme-ui-template-gallery/.github/workflows/test.yml at 956712c349c7aaedf6afb1bf7fa6b4cf5a18ddd8 · 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
143
144
145
146
147
148
149
150
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: Use Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '24'

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

    - name: Run npm ci for metadata
      run: npm ci
      working-directory: packages/metadata

    - name: Test Metadata
      run: npm 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: Use Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '24'

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

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

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

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

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

    - name: Start app
      run: npm 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"
        npm 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