|
| 1 | +# Comparadise — Agent Guidelines |
| 2 | + |
| 3 | +Comparadise is a visual regression testing tool consisting of three main packages plus a shared library: |
| 4 | + |
| 5 | +- **`app/`** — Bun + React web app (tRPC backend, React Query frontend, Tailwind CSS) |
| 6 | +- **`action/`** — GitHub Action that runs visual tests and uploads screenshots to S3 |
| 7 | +- **`comparadise-utils/`** — Cypress utilities for writing visual tests for web |
| 8 | +- **`shared/`** — Constants shared across packages |
| 9 | + |
| 10 | +## Package Manager & Monorepo |
| 11 | + |
| 12 | +Use **`bun`** exclusively. Never use `npm` or `yarn`. |
| 13 | + |
| 14 | +This is an **Nx monorepo**. Run cross-package tasks with `nx` or `bunx nx`. |
| 15 | + |
| 16 | +## Testing |
| 17 | + |
| 18 | +- **Unit tests (action):** `bunx nx test action` |
| 19 | +- **Unit tests (backend):** `bunx nx test backend` |
| 20 | +- **Unit tests (comparadise-utils):** `bunx nx test comparadise-utils` |
| 21 | +- **Cypress component tests (frontend):** `bunx nx test frontend` |
| 22 | + |
| 23 | +Run only the tests relevant to your changes. Do not run E2E tests or start the app. |
| 24 | + |
| 25 | +## Linting |
| 26 | + |
| 27 | +Fix lint and format issues before committing. |
| 28 | + |
| 29 | +```bash |
| 30 | +bun lint # ESLint (TypeScript + React rules) |
| 31 | +bun format-check # Prettier |
| 32 | +bun tsc # TypeScript type check |
| 33 | +``` |
| 34 | + |
| 35 | +## Code Conventions |
| 36 | + |
| 37 | +- TypeScript everywhere; strict mode is on via `typescript-eslint` |
| 38 | +- React components live in `app/frontend/` |
| 39 | +- Backend tRPC routes live in `app/backend/src/` |
| 40 | +- Shared constants (S3 directory names, image names, etc.) go in `shared/index.ts` |
| 41 | +- Tailwind for all styling — class ordering is enforced by `prettier-plugin-tailwindcss` |
| 42 | + |
| 43 | +## Action Build |
| 44 | + |
| 45 | +The GitHub Action runs from compiled output. After changing files in `action/src/`, rebuild: |
| 46 | + |
| 47 | +```bash |
| 48 | +bunx nx build action |
| 49 | +``` |
| 50 | + |
| 51 | +Commit the updated `action/dist/` files — CI will fail if they are out of sync with source. |
| 52 | + |
| 53 | +## Key Architectural Notes |
| 54 | + |
| 55 | +- S3 stores images under `base-images/`, `new-images/`, and `original-new-images/` directories |
| 56 | + - `base-images/` stores the reference images used by visual tests to compare new images against |
| 57 | + - `new-images/{commit-hash}` stores the paths to `base.png`, `diff.png`, and `new.png` that represent regression for a visual test suite. The `diff.png` and `new.png` files are the diff and new images (respectively) generated by visual tests. |
| 58 | + - `original-images/{commit-hash}` stores the `new.png` files corresponding to the test in `new-images/` that would become the new base images if visual changes are accepted. This is used only for usage of the resize-width and/or resize-height action inputs. |
0 commit comments