Raphaël Bosi
c4453923f0
## What Adds Argos visual regression for `twenty-front`, reusing the storybook CI already builds and the existing sharded test matrix. Stories in the `modules` and `pages` scopes are captured as PNGs during `front-sb-test`, merged into one artifact, and pixel-diffed against `main` on the self-hosted Argos with results posted as a PR comment — same pipeline as `twenty-ui` (#21210 / #21262). ## How - **Capture**: `@argos-ci/storybook` vitest plugin, same setup as `twenty-ui`. Skipped for `performance` stories (nondeterministic profiling reports). Freezes framer-motion to avoid flaky diffs (#21412). - **Sharding**: each modules/pages shard uploads a partial artifact; a new `front-sb-screenshots` job merges them into `argos-screenshots-twenty-front` (`overwrite: true` so re-runs work). - **Baselines**: `CI Front` now runs on `push: main` — Argos resolves base builds by exact merge-base commit, so every main commit needs a build (#21217/#21222 pattern). Main pushes get a per-SHA concurrency group so back-to-back merges can't cancel queued runs and leave baseline gaps; the `performance` scope is dropped on push. - **Dispatch**: `visual-regression-dispatch.yaml` watches `CI Front` → `project=twenty-front`. ## Rollout - ✅ Prod Argos project `twenty-front` created (id 68) + `ARGOS_TOKEN_FRONT` secret set - ⬜ Merge the twentyhq/ci-privileged companion PR **before** this one - First PR builds show as *orphan* until the first main push creates a baseline (expected, same as the twenty-ui rollout)
66 lines
2.0 KiB
TypeScript
66 lines
2.0 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 shouldCaptureArgosScreenshots = ['modules', 'pages'].includes(
|
|
process.env.STORYBOOK_SCOPE ?? '',
|
|
);
|
|
|
|
const dirname =
|
|
typeof __dirname !== 'undefined'
|
|
? __dirname
|
|
: path.dirname(fileURLToPath(import.meta.url));
|
|
|
|
export default defineConfig({
|
|
test: {
|
|
coverage: {
|
|
provider: 'istanbul',
|
|
reporter: ['json', 'text'],
|
|
reportsDirectory: './coverage/storybook',
|
|
},
|
|
projects: [
|
|
{
|
|
extends: './vite.config.ts',
|
|
plugins: [
|
|
storybookTest({
|
|
configDir: path.join(dirname, '.storybook'),
|
|
...(process.env.STORYBOOK_URL
|
|
? { storybookUrl: process.env.STORYBOOK_URL }
|
|
: { storybookScript: 'yarn storybook --no-open' }),
|
|
}),
|
|
...(shouldCaptureArgosScreenshots
|
|
? [
|
|
argosVitestPlugin({
|
|
uploadToArgos: !!process.env.ARGOS_TOKEN,
|
|
token: process.env.ARGOS_TOKEN,
|
|
apiBaseUrl: process.env.ARGOS_API_BASE_URL,
|
|
buildName: process.env.ARGOS_BUILD_NAME || undefined,
|
|
branch: process.env.ARGOS_BRANCH || undefined,
|
|
commit: process.env.ARGOS_COMMIT || undefined,
|
|
referenceCommit:
|
|
process.env.ARGOS_REFERENCE_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,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|