Charles Bochet
e6614299c6
## Summary
- Adds `@argos-ci/storybook` vitest plugin to `twenty-ui` for automatic
screenshot capture during vitest storybook tests
- Uploads captured screenshots (PNG, ~5MB) as a CI artifact instead of
passing the full storybook build
- Updates the visual regression dispatch workflow to pass
`mode=argos-screenshots` to ci-privileged, which then uploads
screenshots to Argos via CLI
This replaces the 10-minute Storybook screenshot capture with a ~30s
vitest browser-mode approach. The heavy screenshot work happens on free
public runners, while ci-privileged only handles the Argos API upload
(keeping secrets private).
## Architecture
```
twenty (public, free runners) ci-privileged (private)
───────────────────────────── ────────────────────────
1. Build storybook-static 4. Download screenshots artifact
2. Vitest captures screenshots 5. `argos upload` → Argos API
3. Upload screenshots artifact 6. Poll for results
7. Post PR comment
```
## Test plan
- [x] Verified locally: vitest captures 225 screenshots in ~28s
- [x] Verified `@argos-ci/cli upload` successfully creates Argos build
from captured screenshots
- [x] Argos diffs computed and results visible via API
- [ ] CI runs end-to-end on a PR
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { argosVitestPlugin } from '@argos-ci/storybook/vitest-plugin';
|
|
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
|
|
import { playwright } from '@vitest/browser-playwright';
|
|
import path from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
import { defineConfig } from 'vitest/config';
|
|
|
|
const MINUTES_IN_MS = 60 * 1000;
|
|
|
|
const dirname =
|
|
typeof __dirname !== 'undefined'
|
|
? __dirname
|
|
: path.dirname(fileURLToPath(import.meta.url));
|
|
|
|
export default defineConfig({
|
|
test: {
|
|
projects: [
|
|
{
|
|
extends: './vite.config.ts',
|
|
plugins: [
|
|
storybookTest({
|
|
configDir: path.join(dirname, '.storybook'),
|
|
storybookScript: 'yarn storybook --no-open --port 6007',
|
|
}),
|
|
argosVitestPlugin({
|
|
uploadToArgos: !!process.env.ARGOS_TOKEN,
|
|
token: process.env.ARGOS_TOKEN,
|
|
apiBaseUrl: process.env.ARGOS_API_BASE_URL,
|
|
branch: process.env.ARGOS_BRANCH || undefined,
|
|
commit: process.env.ARGOS_COMMIT || undefined,
|
|
}),
|
|
],
|
|
test: {
|
|
name: 'storybook',
|
|
browser: {
|
|
enabled: true,
|
|
headless: true,
|
|
provider: playwright({}),
|
|
instances: [{ browser: 'chromium' }],
|
|
},
|
|
setupFiles: ['./.storybook/vitest.setup.ts'],
|
|
testTimeout: 5 * MINUTES_IN_MS,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|