cloud/.github/workflows/chromatic.yml at c9d3ae06dce03486f50a92e9bdfbfdfa4be0ae3d · Kilo-Org/cloud · 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
name: Chromatic

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - '**'
  workflow_dispatch:

permissions:
  contents: read

# Cancel in-progress jobs when new workflow is triggered
concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

jobs:
  playwright:
    runs-on: ${{ vars.RUNNER_LARGE_LABEL || 'ubuntu-24.04-8core' }}
    timeout-minutes: 30

    services:
      postgres:
        image: pgvector/pgvector:pg16
        env:
          POSTGRES_HOST_AUTH_METHOD: trust
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:
          - 5432:5432

    env:
      NODE_ENV: development
      POSTGRES_URL: postgresql://postgres:postgres@localhost:5432/postgres
      POSTGRES_CONNECT_TIMEOUT: 30000
      POSTGRES_MAX_QUERY_TIME: 30000
      DEBUG_SHOW_DEV_UI: 'true' # Enable fake login for E2E tests
      PORT: '3000'
      DOTENV_PRIVATE_KEY_DEVELOPMENT: ${{ secrets.DOTENV_PRIVATE_KEY_DEVELOPMENT }}

    steps:
      - uses: useblacksmith/checkout@41cdeedae8edb2e684ba22896a5fd2a3cb85db6b # v1
        with:
          lfs: true
          fetch-depth: 0

      - name: Setup pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0

      - name: Setup Node.js
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version: 22
          cache: 'pnpm'

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

      - name: Run database migrations
        run: pnpm drizzle migrate
        env:
          DOTENV_PRIVATE_KEY_DEVELOPMENT: ${{ secrets.DOTENV_PRIVATE_KEY_DEVELOPMENT }}

      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium

      - name: Run Playwright tests
        run: pnpm test:e2e
        continue-on-error: true

      - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
        if: always()
        with:
          name: test-results
          path: ./test-results
          retention-days: 7

  chromatic:
    needs: playwright
    runs-on: ${{ vars.RUNNER_DEFAULT_LABEL || 'ubuntu-latest' }}
    timeout-minutes: 30
    if: always() # Run even if playwright job fails
    continue-on-error: true # Make this check optional - don't block PR merges
    steps:
      - name: Checkout code
        uses: useblacksmith/checkout@41cdeedae8edb2e684ba22896a5fd2a3cb85db6b # v1
        with:
          lfs: true
          fetch-depth: 0

      - name: Setup pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0

      - name: Setup Node.js
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version: 22
          cache: 'pnpm'

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

      - name: Install Storybook dependencies
        run: |
          cd storybook
          pnpm install --frozen-lockfile

      - uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5.0.0
        with:
          name: test-results
          path: ./test-results

      - name: Generate Stories from Playwright Screenshots
        run: |
          cd storybook
          pnpm generate-screenshot-stories

      - name: Build Storybook
        run: |
          cd storybook
          pnpm build-storybook

      - name: Run Chromatic
        id: chromatic
        uses: chromaui/action@f191a0224b10e1a38b2091cefb7b7a2337009116 # v16.0.0
        continue-on-error: true
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBaseDir: storybook/
          storybookBuildDir: storybook/storybook-static
          onlyChanged: true
          exitOnceUploaded: ${{ github.event_name == 'pull_request' }}
          exitZeroOnChanges: true
          autoAcceptChanges: ${{ github.ref == 'refs/heads/main' && 'main' || '' }}
          # Skip dependabot PRs and renovate PRs using glob patterns
          skip: '@(dependabot/**|renovate/**)'

      # Add a summary of the Chromatic build results to the workflow summary
      - name: Chromatic Build Summary
        if: always() && steps.chromatic.outputs.url != ''
        run: |
          echo "## Chromatic Build Results" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "### Build Information" >> $GITHUB_STEP_SUMMARY
          echo "- **Build URL:** [View on Chromatic](${{ steps.chromatic.outputs.url }})" >> $GITHUB_STEP_SUMMARY
          echo "- **Changes:** ${{ steps.chromatic.outputs.changeCount || 'N/A' }}" >> $GITHUB_STEP_SUMMARY
          echo "- **Components:** ${{ steps.chromatic.outputs.componentCount || 'N/A' }}" >> $GITHUB_STEP_SUMMARY
          echo "- **Stories:** ${{ steps.chromatic.outputs.storyCount || 'N/A' }}" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "### Included in Build" >> $GITHUB_STEP_SUMMARY
          echo "- Component stories from Storybook" >> $GITHUB_STEP_SUMMARY
          echo "- Playwright E2E screenshots (converted to stories)" >> $GITHUB_STEP_SUMMARY

          if [[ "${{ steps.chromatic.outputs.changeCount }}" != "0" ]]; then
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "⚠️ **Visual changes detected!** Please review in Chromatic." >> $GITHUB_STEP_SUMMARY
          else
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "✅ **No visual changes detected.**" >> $GITHUB_STEP_SUMMARY
          fi