File size: 4,265 Bytes
21cac8a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
# GitHub Actions - UX Analysis in CI/CD
name: UX Analysis

on:
  pull_request:
    branches: [ main ]
  push:
    branches: [ main ]
  schedule:
    # Run weekly UX analysis
    - cron: '0 0 * * 0'

jobs:
  ux-analysis:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'

    - name: Install dependencies
      run: npm ci

    - name: Build application
      run: npm run build

    - name: Start application
      run: |
        npm start &
        sleep 30  # Wait for app to start

    - name: Run UX Analysis
      env:
        GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
      run: |
        npx ux-analyst-cli http://localhost:3000 \
          --format json \
          --output ./ux-reports \
          --code \
          --accessibility \
          --viewports desktop,mobile

    - name: Generate UX Report Summary
      run: |
        echo "## UX Analysis Results" >> $GITHUB_STEP_SUMMARY
        node -e "
          const fs = require('fs');
          const report = JSON.parse(fs.readFileSync('./ux-reports/ux-analysis-*.json', 'utf8'));
          console.log(\`**UX Score:** \${report.report?.summary?.uxScore || 'N/A'}/100\`);
          console.log(\`**Grade:** \${report.report?.summary?.overallGrade || 'N/A'}\`);
          console.log(\`**Issues Found:** \${report.report?.summary?.totalIssues || 0}\`);
          if (report.accessibility) {
            console.log(\`**Accessibility Score:** \${report.accessibility.score}/100\`);
          }
        " >> $GITHUB_STEP_SUMMARY

    - name: Upload UX Reports
      uses: actions/upload-artifact@v3
      if: always()
      with:
        name: ux-analysis-reports
        path: ./ux-reports/
        retention-days: 30

    - name: Comment PR with UX Results
      if: github.event_name == 'pull_request'
      uses: actions/github-script@v6
      with:
        script: |
          const fs = require('fs');
          const path = require('path');

          // Find the latest report file
          const reportFiles = fs.readdirSync('./ux-reports')
            .filter(f => f.endsWith('.json'));

          if (reportFiles.length === 0) {
            console.log('No UX report found');
            return;
          }

          const reportPath = path.join('./ux-reports', reportFiles[0]);
          const report = JSON.parse(fs.readFileSync(reportPath, 'utf8'));

          const summary = report.report?.summary || {};
          const accessibility = report.accessibility || {};

          const comment = \`## 🎨 UX Analysis Results

**Overall Grade:** \${summary.overallGrade || 'N/A'}
**UX Score:** \${summary.uxScore || 'N/A'}/100
**Issues Found:** \${summary.totalIssues || 0}
**Accessibility Score:** \${accessibility.score || 'N/A'}/100

\${summary.overallGrade === 'Poor' ? '⚠️ **Action Required:** UX issues detected that may impact user experience.' : ''}
\${accessibility.score < 80 ? '♿ **Accessibility Alert:** Consider improving accessibility compliance.' : ''}

📊 [Download Full Report](\${process.env.GITHUB_SERVER_URL}/\${process.env.GITHUB_REPOSITORY}/actions/runs/\${process.env.GITHUB_RUN_ID})
          \`;

          github.rest.issues.createComment({
            issue_number: context.issue.number,
            owner: context.repo.owner,
            repo: context.repo.repo,
            body: comment
          });

  # Fail the build if UX score is below threshold
  quality-gate:
    needs: ux-analysis
    runs-on: ubuntu-latest
    if: always()

    steps:
    - name: Download UX Reports
      uses: actions/download-artifact@v3
      with:
        name: ux-analysis-reports

    - name: Check UX Quality Gate
      run: |
        report_file=$(ls ux-analysis-*.json | head -n1)
        ux_score=$(node -e "
          const report = JSON.parse(require('fs').readFileSync('$report_file', 'utf8'));
          console.log(report.report?.summary?.uxScore || 0);
        ")

        echo "UX Score: $ux_score"

        if [ "$ux_score" -lt 60 ]; then
          echo "❌ UX Quality Gate Failed: Score $ux_score is below threshold (60)"
          exit 1
        else
          echo "✅ UX Quality Gate Passed: Score $ux_score"
        fi