fix: 0 packages in user profile og image#3085
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe user profile OG image accepts a username, resolves its package count through Algolia or the npm registry, handles lookup failures, and renders the result. The username profile route now uses this template, with tests covering lookup and rendering behaviour. ChangesUser profile OG image
Sequence Diagram(s)sequenceDiagram
participant OGRequest
participant UserProfileTakumi
participant Algolia
participant NPMRegistry
OGRequest->>UserProfileTakumi: provide username
UserProfileTakumi->>Algolia: query packages filtered by owner
Algolia-->>UserProfileTakumi: return package count
UserProfileTakumi->>NPMRegistry: query maintainer packages when Algolia is empty or fails
NPMRegistry-->>UserProfileTakumi: return fallback package count
UserProfileTakumi-->>OGRequest: render username and description
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
8a38f8c to
c0108d1
Compare
![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)
test/nuxt/components/OgImageUserProfile.spec.ts (1)
21-26: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winKeep the fallback mock type-safe.
Replace the
anycast with typedmockResolvedValue/mockRejectedValuecalls on the$fetchspy. As per coding guidelines, “Ensure you write strictly type-safe code”.Proposed fix
function mockNpmFallback(total: number | null) { - // eslint-disable-next-line `@typescript-eslint/no-explicit-any` - vi.spyOn(globalThis, '$fetch').mockImplementation((() => - total === null ? Promise.reject(new Error('network')) : Promise.resolve({ total })) as any) + const fetchSpy = vi.spyOn(globalThis, '$fetch') + if (total === null) + fetchSpy.mockRejectedValue(new Error('network')) + else + fetchSpy.mockResolvedValue({ total }) }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@test/nuxt/components/OgImageUserProfile.spec.ts` around lines 21 - 26, Update mockNpmFallback to remove the explicit any cast and configure the global $fetch spy using typed mockResolvedValue and mockRejectedValue calls. Preserve the existing total-based behavior, resolving with the count object for non-null totals and rejecting with the network error for null.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/components/OgImage/UserProfile.takumi.vue`:
- Around line 21-22: Update the Algolia error handling in
app/components/OgImage/UserProfile.takumi.vue around the outer catch so it
attempts the npm-registry lookup after an Algolia failure, using zero only when
that fallback also fails. Update test/nuxt/components/OgImageUserProfile.spec.ts
around the affected test to mock the registry response alongside the rejected
Algolia request and assert the fallback count.
- Around line 10-16: Validate and normalize the username before the Algolia and
npm registry lookups in the profile-loading flow. Require a canonical npm
username format and reject or safely handle invalid values before interpolating
it into owners.name and maintainer query parameters; preserve the existing
package-count lookup for valid usernames.
---
Nitpick comments:
In `@test/nuxt/components/OgImageUserProfile.spec.ts`:
- Around line 21-26: Update mockNpmFallback to remove the explicit any cast and
configure the global $fetch spy using typed mockResolvedValue and
mockRejectedValue calls. Preserve the existing total-based behavior, resolving
with the count object for non-null totals and rejecting with the network error
for null.
🪄 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 Plus
Run ID: a206a11f-8362-4b10-8147-38ce49196f31
📒 Files selected for processing (3)
app/components/OgImage/UserProfile.takumi.vueapp/pages/~[username]/index.vuetest/nuxt/components/OgImageUserProfile.spec.ts
c0108d1 to
0e3a76d
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
test/nuxt/components/OgImageUserProfile.spec.ts (1)
142-156: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winSkip-path tests don't guard against an accidental real
$fetchcall.Since
beforeEachrunsvi.restoreAllMocks(),$fetchis back to its real implementation in these two tests. Per the retrieved learning, these tests run under Vitest browser mode with Playwright, so if a future regression inisValidNpmName/usernamegating accidentally triggers the npm fallback, this would fire a live network request instead of failing loudly and predictably.Consider mocking
$fetch(e.g., a rejecting/no-op mock) and assertingexpect($fetch).not.toHaveBeenCalled()in both tests, mirroring themockSearchassertion already present.Based on learnings, tests under test/nuxt/ run in Vitest browser mode with Playwright (Chromium), so real fetch calls are possible if the fallback path is unexpectedly triggered.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@test/nuxt/components/OgImageUserProfile.spec.ts` around lines 142 - 156, Protect both skip-path tests in the “skips the lookups for an invalid username” and “renders a generic description and skips fetching when no username is given” cases by mocking $fetch with a rejecting or no-op mock after beforeEach restores mocks, then assert $fetch was not called alongside the existing mockSearch assertions. Keep the tests’ current rendering expectations unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@test/nuxt/components/OgImageUserProfile.spec.ts`:
- Around line 142-156: Protect both skip-path tests in the “skips the lookups
for an invalid username” and “renders a generic description and skips fetching
when no username is given” cases by mocking $fetch with a rejecting or no-op
mock after beforeEach restores mocks, then assert $fetch was not called
alongside the existing mockSearch assertions. Keep the tests’ current rendering
expectations unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 43018076-d937-49cf-a237-ff94976b8d2c
📒 Files selected for processing (4)
app/components/OgImage/UserProfile.takumi.vueapp/pages/~[username]/index.vuetest/nuxt/components/OgImageUserProfile.spec.tstest/unit/a11y-component-coverage.spec.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- test/unit/a11y-component-coverage.spec.ts
- app/pages/~[username]/index.vue
- app/components/OgImage/UserProfile.takumi.vue
0e3a76d to
55caa4b
Compare
55caa4b to
7265334
Compare
1 participant
🔗 Linked issue
Resolves #2920
🧭 Context
The OG image for
/~usernamewas always showing package count as zero due to a data loading issue📚 Description
Added a separate
UserProfile.takumi.vuecomponent to match the other OG images, instead of relying on a generic one. The cause of the bug was that data loading was happening non-blockingly, and the OG image returned a fallback number. I thought it was better to keep the~[username]/index.vuecomponent as is and define blocking data loading in this new component instead.Before:
After:
