fix: Tests for article list and skeleton partials #97
Conversation
|
Warning Rate limit exceeded@gocanto has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 26 seconds before requesting another review. ⌛ 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. 📒 Files selected for processing (4)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds two new test suites under tests/partials: one for ArticleItemSkeletonPartial.vue verifying default and prop-driven animation classes, and one for ArticlesListPartial.vue covering data fetching, rendering, loading with debounced search, cancellation behavior, and empty states using mocked stores and deferred promises. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant C as ArticlesListPartial
participant D as Debounce fn
participant S as API Store
participant R as Renderer
rect rgb(245,248,255)
note over C: Mount
C->>S: getCategories()
C->>S: getPosts(filters from categories)
S-->>C: posts (async)
C->>R: Render categories + items
end
U->>C: Type search term
C->>D: debounce(handleSearch)
D-->>C: schedule call
U->>C: Type again (before delay)
C->>D: cancel previous, debounce new
D-->>C: invoke handleSearch()
C->>R: Show skeletons (loading)
C->>S: getPosts(search filters)
S-->>C: posts (async)
alt results
C->>R: Render article items
else no results
C->>R: Render "No articles found."
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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 |
Summary of ChangesHello @gocanto, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the test coverage for the Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds test coverage for ArticleItemSkeletonPartial and ArticlesListPartial. The tests for ArticleItemSkeletonPartial are well-written and cover the component's props. The tests for ArticlesListPartial are comprehensive, covering initial data fetching, loading states, and search updates. However, I've identified a significant performance issue in the search functionality that is being tested. The current implementation fetches data on every keystroke, which should be debounced. I've left a detailed comment on how to address this.
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
tests/partials/ArticleItemSkeletonPartial.test.ts(1 hunks)tests/partials/ArticlesListPartial.test.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
tests/partials/ArticlesListPartial.test.ts (1)
src/stores/api/store.ts (2)
getCategories(105-113)getPosts(114-122)
🪛 GitHub Actions: Unit Tests
tests/partials/ArticleItemSkeletonPartial.test.ts
[error] 9-9: Assertion failed: expected [ 'py-5', 'border-b', …(2) ] to include 'animate-pulse'
tests/partials/ArticlesListPartial.test.ts
[error] 64-64: Error during mocking: Cannot access 'debounceMock' before initialization
🪛 GitHub Check: vitest
tests/partials/ArticleItemSkeletonPartial.test.ts
[failure] 9-9: tests/partials/ArticleItemSkeletonPartial.test.ts > ArticleItemSkeletonPartial > renders with animation enabled by default
AssertionError: expected [ 'py-5', 'border-b', …(2) ] to include 'animate-pulse'
❯ tests/partials/ArticleItemSkeletonPartial.test.ts:9:29
🔇 Additional comments (5)
tests/partials/ArticleItemSkeletonPartial.test.ts (1)
12-18: Verify this test after fixing the component implementation.This test might currently pass for the wrong reason. If the component never includes
animate-pulse(as indicated by the first test failure), then this assertion would pass even though the component isn't correctly implementing the animation toggle behavior.After fixing the component to include
animate-pulseby default, re-run this test to ensure it properly validates that theisAnimated: falseprop removes the animation class.tests/partials/ArticlesListPartial.test.ts (4)
1-6: LGTM!The imports are appropriate for a comprehensive test suite with type safety and data mocking capabilities.
8-37: LGTM!The factory functions are well-structured and use faker appropriately to generate comprehensive test data. The nested author structure in
createPostproperly mirrors the API response shape.
39-53: LGTM!The
DeferredPromiseutility is well-implemented and provides excellent control over async test scenarios. This pattern enables precise testing of loading states and race conditions.
88-198: LGTM after fixing the TDZ error.The test cases are comprehensive and well-structured:
- Lines 115-145: Properly verifies initial data fetching, category filtering, and article rendering.
- Lines 147-181: Excellent integration test using deferred promises to verify loading states, debounce cancellation, and skeleton rendering.
- Lines 183-198: Validates the empty state scenario.
The tests follow good practices with proper lifecycle management, clear assertions, and controlled async behavior.
Note: These tests will only pass after fixing the TDZ error in the mock setup (lines 55-86).
gocanto
changed the title
gocanto
deleted the
gocanto/add-tests-for-articleslistpartial-and-articleitemskeletonpar-2025-10-06
branch
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68e32d0ccc148333a2722ea5d12e2d1a
Summary by CodeRabbit