Conversation
Add a dedicated frontend GitHub Actions workflow with lint/typecheck/test/e2e/a11y/build/bundle-budget gates, plus supporting scripts and test split so CI enforces WCAG and performance budgets on relevant PRs. Made-with: Cursor
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 0 minutes and 53 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughAdds a path-scoped Frontend CI GitHub Actions workflow plus supporting frontend tooling: new CI jobs (lint, typecheck, tests, build, bundle-budget, E2E, a11y), package scripts, Playwright config update, a bundle-budget checker script, and new/updated Playwright tests. Changes
Sequence Diagram(s)sequenceDiagram
participant GH as "GitHub (Push/PR)"
participant CI as "GitHub Actions\nFrontend CI"
participant Repo as "Checkout + pnpm install"
participant Lint as "Lint + Format Job"
participant TC as "Typecheck Job"
participant Test as "Unit Test Job"
participant Build as "Build Job (Next.js)"
participant Bundle as "Bundle-budget Checker"
participant E2E as "Playwright E2E Job"
participant A11Y as "Playwright A11Y Job"
GH->>CI: Trigger on frontend/** or backend/openapi/** changes
CI->>Repo: Checkout repo & install pnpm deps
par Parallel lint/typecheck/test
CI->>Lint: Run pnpm lint + pnpm format
CI->>TC: Run pnpm typecheck
CI->>Test: Run pnpm test
end
CI->>Build: Run pnpm build (Next.js)
Build->>CI: Build artifacts
par After build: bundle / e2e / a11y
CI->>Bundle: Run pnpm test:bundle-budget
CI->>E2E: Install Playwright Chromium -> Run pnpm e2e:ci
CI->>A11Y: Install Playwright Chromium -> Run pnpm a11y
end
CI->>GH: Report status (pass/fail)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/tests/a11y/hello-world.a11y.spec.ts (1)
10-16: Add a keyboard walk-through to the a11y gate.This job only scans after the theme switch, so keyboard reachability and focus behavior on the interactive control still go untested. A small
Tab+ focus assertion for thePreview {theme}button in each theme would close that gap.As per coding guidelines: Ensure keyboard reachability and visible focus on every interactive element (WCAG 2.1 AA).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/tests/a11y/hello-world.a11y.spec.ts` around lines 10 - 16, The accessibility scan loop currently only runs Axe after switching themes; add a keyboard walk-through that tabs to and asserts focus/visible focus on the "Preview {theme}" interactive control for each theme. After setting the data-theme in the loop (inside the same block that runs Axe), simulate a Tab key press via Playwright (e.g., page.keyboard.press or page.press) and then locate the button by its accessible name text "Preview {theme}" (use the same theme variable) and assert it is document.activeElement and/or has visible focus styling (use page.evaluate to check document.activeElement === button or page.waitForSelector with :focus). Ensure these checks run for each theme before or after the AxeBuilder call so keyboard reachability and focus behavior are validated for the "Preview {theme}" button.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.github/workflows/frontend.yml:
- Around line 27-34: The workflow steps currently call actions/setup-node@v4
before pnpm/action-setup@v4 which breaks pnpm caching; update each job so the
step using "uses: pnpm/action-setup@v4" runs before the step using "uses:
actions/setup-node@v4" (i.e., swap the order of those two steps in every job
instance), keeping existing inputs (node-version-file, cache: pnpm,
cache-dependency-path and pnpm version) unchanged.
In `@frontend/scripts/check-bundle-budget.mjs`:
- Around line 13-16: The current bundle check uses appEntries =
["[project]/src/app/dashboard/page", "[project]/src/app/jobs/page",
"[project]/src/app/page"] which lets the marketing home page fallback mask a
missing console entry and incorrectly pass the "console" 250 KB gate; update the
logic that builds or validates appEntries (the symbol appEntries and the
"console" config) so that the console measurement only includes explicit console
entry paths (e.g., dashboard/jobs console entries) and does not silently fall
back to "[project]/src/app/page"; if an expected console entry is missing, have
the check either fail with a clear error or explicitly skip the console gate (do
not reuse src/app/page), and apply the same change to the other similar blocks
(lines handling entries in the 56-79 region) to avoid false positives.
---
Nitpick comments:
In `@frontend/tests/a11y/hello-world.a11y.spec.ts`:
- Around line 10-16: The accessibility scan loop currently only runs Axe after
switching themes; add a keyboard walk-through that tabs to and asserts
focus/visible focus on the "Preview {theme}" interactive control for each theme.
After setting the data-theme in the loop (inside the same block that runs Axe),
simulate a Tab key press via Playwright (e.g., page.keyboard.press or
page.press) and then locate the button by its accessible name text "Preview
{theme}" (use the same theme variable) and assert it is document.activeElement
and/or has visible focus styling (use page.evaluate to check
document.activeElement === button or page.waitForSelector with :focus). Ensure
these checks run for each theme before or after the AxeBuilder call so keyboard
reachability and focus behavior are validated for the "Preview {theme}" button.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: cfa7b4f5-63d8-4df2-a5d9-b2c2d6793644
📒 Files selected for processing (6)
.github/workflows/frontend.ymlfrontend/package.jsonfrontend/playwright.config.tsfrontend/scripts/check-bundle-budget.mjsfrontend/tests/a11y/hello-world.a11y.spec.tsfrontend/tests/e2e/hello-world.spec.ts
Install pnpm before setup-node in frontend workflow jobs for stable pnpm cache resolution, and tighten bundle-budget logic so console checks never reuse the marketing entry. Made-with: Cursor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
.github/workflows/frontend.yml (1)
23-146: Consider consolidating repeated setup/install steps.All jobs duplicate the same checkout + pnpm + node + install block. A reusable workflow or matrix strategy would reduce drift and maintenance cost.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/workflows/frontend.yml around lines 23 - 146, Multiple jobs (lint, typecheck, test, build, bundle-budget, e2e, a11y) duplicate the same checkout + pnpm/action-setup + actions/setup-node + Install dependencies steps; extract these shared steps into a single reusable unit and reference it from each job to DRY the workflow: either create a reusable workflow (workflow_call) that runs the common steps and call it from each job, or define a separate job like setup_common that performs checkout, pnpm/action-setup, actions/setup-node and pnpm install and then use needs and job-level uses (or a matrix) so other jobs (lint, typecheck, test, build, bundle-budget, e2e, a11y) depend on it and omit the duplicated steps.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/scripts/check-bundle-budget.mjs`:
- Around line 6-16: The BUDGETS configuration (e.g., the "marketing" entry in
BUDGETS) must support a required flag and the budget-resolution logic that
currently "skips when no entry matches" must instead fail for required budgets;
add a required: true property to budgets that must be enforced and update the
resolution/check routine (the code that iterates BUDGETS and matches appEntries
against the manifest) to exit non-zero or throw an error when a required budget
cannot be resolved, while keeping non-required budgets backward-compatible
(still warn/skip).
- Around line 56-69: The current loop uses budget.appEntries.find(...) to stop
at the first matching entry; instead, compute all matching entries by using
budget.appEntries.filter(...) and then for each matched entry call
entryFiles(manifest, entry) and gzipBytesForFiles(files) to measure gzipped
size, then enforce the budget across all matches (e.g., fail if any entry's
gzipped size > budget.maxBytes or compare against the max of those sizes).
Update the logic around the matchingEntry variable to iterate over the matched
entries, aggregate results (or check any over budget), and log/skipping behavior
accordingly using BUDGETS, entryFiles, and gzipBytesForFiles.
---
Nitpick comments:
In @.github/workflows/frontend.yml:
- Around line 23-146: Multiple jobs (lint, typecheck, test, build,
bundle-budget, e2e, a11y) duplicate the same checkout + pnpm/action-setup +
actions/setup-node + Install dependencies steps; extract these shared steps into
a single reusable unit and reference it from each job to DRY the workflow:
either create a reusable workflow (workflow_call) that runs the common steps and
call it from each job, or define a separate job like setup_common that performs
checkout, pnpm/action-setup, actions/setup-node and pnpm install and then use
needs and job-level uses (or a matrix) so other jobs (lint, typecheck, test,
build, bundle-budget, e2e, a11y) depend on it and omit the duplicated steps.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d3c076da-04d3-42cc-9284-de94ba10f98c
📒 Files selected for processing (2)
.github/workflows/frontend.ymlfrontend/scripts/check-bundle-budget.mjs
Make bundle-budget fail when required entries are unresolved and evaluate all matched entries per budget so no route can bypass size enforcement. Made-with: Cursor
Add required/multi-entry budget enforcement and align CI format check to stable scoped files with formatted scripts/tests so frontend gates pass consistently. Made-with: Cursor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.github/workflows/frontend.ymlforpull_request+pushtomainwhenfrontend/**orbackend/openapi/**changes, with PR concurrency cancellation to stop superseded runslint(ESLint + Prettier),typecheck,test(Vitest),e2e(Playwright route smoke on built app),a11y(Playwright + axe wcag21aa),build, andbundle-budgettest:bundle-budgetscript enforcing the Design Principles §8 JS gzip budgets against built app entry chunksTest plan
cd frontend && pnpm lintcd frontend && pnpm typecheckcd frontend && pnpm testcd frontend && pnpm buildcd frontend && pnpm test:bundle-budgetcd frontend && pnpm e2e:cicd frontend && pnpm a11yRequired checks (repo owner action)
Please add/confirm these required checks in branch protection for
main:linttypecheckteste2ea11ybuildbundle-budgetRollback plan
Linked issue
Made with Cursor
Summary by CodeRabbit
New Features
Tests