🧪 Add unit tests for SettingsTab component#350
Conversation
🎯 What: The `SettingsTab` component lacked test coverage to verify rendering and interaction. 📊 Coverage: Added tests to ensure all `MAIN_BLOCKS` and `DETAIL_OPTIONS` are correctly rendered, and that their checked states align with `isBlockVisible` and `displayOptions` props. Also added coverage to verify that toggling these checkboxes correctly invokes `toggleMainBlockVisibility` and `toggleDisplayOption` with the appropriate keys. ✨ Result: `src/components/SettingsTab.tsx` is now fully tested, improving the application's overall test coverage and catching potential future regressions in the modal settings configuration. Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
Warning Review limit reached
More reviews will be available in 53 minutes and 10 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ 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 |
![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 a new test suite for the SettingsTab component, covering rendering, checkbox interactions, and state assertions. The review feedback suggests importing @testing-library/jest-dom to ensure custom matchers like toBeInTheDocument and toBeChecked are properly typed and available in Vitest.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| @@ -0,0 +1,128 @@ | |||
| import { render, screen, fireEvent } from "@testing-library/react"; | |||
There was a problem hiding this comment.
To ensure that custom matchers like toBeInTheDocument and toBeChecked are correctly typed and available in Vitest, please import @testing-library/jest-dom at the top of the test file.
| import { render, screen, fireEvent } from "@testing-library/react"; | |
| import "@testing-library/jest-dom"; | |
| import { render, screen, fireEvent } from "@testing-library/react"; |
References
- In this repository, importing
@testing-library/jest-domin a Vitest test file is sufficient to extendexpectwith its matchers;expect.extendis not required.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| toggleDisplayOption={mockToggleDisplayOption} | ||
| /> | ||
| ); | ||
|
|
||
| const profileCheckbox = screen.getByLabelText("Profile"); | ||
| fireEvent.click(profileCheckbox); | ||
| expect(mockToggleMainBlockVisibility).toHaveBeenCalledWith("profile"); | ||
|
|
||
| const contributionsCheckbox = screen.getByLabelText("Contributions"); | ||
| fireEvent.click(contributionsCheckbox); | ||
| expect(mockToggleMainBlockVisibility).toHaveBeenCalledWith("contributions"); | ||
| }); | ||
|
|
||
| it("calls toggleDisplayOption when a detail option checkbox is clicked", () => { | ||
| render( | ||
| <SettingsTab | ||
| isBlockVisible={mockIsBlockVisible} | ||
| toggleMainBlockVisibility={mockToggleMainBlockVisibility} | ||
| displayOptions={mockDisplayOptions} | ||
| toggleDisplayOption={mockToggleDisplayOption} | ||
| /> | ||
| ); | ||
|
|
||
| const avatarCheckbox = screen.getByLabelText("Avatar"); |
There was a problem hiding this comment.
「renders all MAIN_BLOCKS」「renders all DETAIL_OPTIONS」テストは MAIN_BLOCKS / DETAIL_OPTIONS 定数をループして検証しているため、定数が変更されると自動で追従します。一方、インタラクションテストおよびチェック状態テストでは "Profile", "Contributions", "Avatar", "Bio" などのラベルと "profile", "contributions", "showAvatar", "showBio" などのキーが直書きされています。定数側でラベルやキーが変更された場合、renders all テストは失敗してくれますが、こちらのテストは古い文字列を参照したまま通過し続ける可能性があります。MAIN_BLOCKS[0].label / MAIN_BLOCKS[0].id のように定数から導出すると、テスト間で一貫性が保てます。
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/__tests__/SettingsTab.test.tsx
Line: 62-85
Comment:
**インタラクションテストのラベル文字列がハードコードされている**
「renders all MAIN_BLOCKS」「renders all DETAIL_OPTIONS」テストは `MAIN_BLOCKS` / `DETAIL_OPTIONS` 定数をループして検証しているため、定数が変更されると自動で追従します。一方、インタラクションテストおよびチェック状態テストでは `"Profile"`, `"Contributions"`, `"Avatar"`, `"Bio"` などのラベルと `"profile"`, `"contributions"`, `"showAvatar"`, `"showBio"` などのキーが直書きされています。定数側でラベルやキーが変更された場合、`renders all` テストは失敗してくれますが、こちらのテストは古い文字列を参照したまま通過し続ける可能性があります。`MAIN_BLOCKS[0].label` / `MAIN_BLOCKS[0].id` のように定数から導出すると、テスト間で一貫性が保てます。
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| toggleDisplayOption={mockToggleDisplayOption} | ||
| /> | ||
| ); | ||
|
|
||
| const profileCheckbox = screen.getByLabelText("Profile"); | ||
| fireEvent.click(profileCheckbox); | ||
| expect(mockToggleMainBlockVisibility).toHaveBeenCalledWith("profile"); | ||
|
|
||
| const contributionsCheckbox = screen.getByLabelText("Contributions"); | ||
| fireEvent.click(contributionsCheckbox); | ||
| expect(mockToggleMainBlockVisibility).toHaveBeenCalledWith("contributions"); | ||
| }); | ||
|
|
||
| it("calls toggleDisplayOption when a detail option checkbox is clicked", () => { | ||
| render( | ||
| <SettingsTab | ||
| isBlockVisible={mockIsBlockVisible} |
There was a problem hiding this comment.
toHaveBeenCalledWith はモックがその引数で「いつか呼ばれたか」を検証するだけで、「何回呼ばれたか」は検証しません。もしコンポーネントが toggleMainBlockVisibility を同一 ID で複数回呼び出す実装になった場合でも、このテストは通過してしまいます。expect(mockToggleMainBlockVisibility).toHaveBeenCalledTimes(1) を各クリックの直後に追加するか、toHaveBeenNthCalledWith を使うとより厳密になります。
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/__tests__/SettingsTab.test.tsx
Line: 62-78
Comment:
**呼び出し回数のアサーションがない**
`toHaveBeenCalledWith` はモックがその引数で「いつか呼ばれたか」を検証するだけで、「何回呼ばれたか」は検証しません。もしコンポーネントが `toggleMainBlockVisibility` を同一 ID で複数回呼び出す実装になった場合でも、このテストは通過してしまいます。`expect(mockToggleMainBlockVisibility).toHaveBeenCalledTimes(1)` を各クリックの直後に追加するか、`toHaveBeenNthCalledWith` を使うとより厳密になります。
How can I resolve this? If you propose a fix, please make it concise.|
|
||
| const bioCheckbox = screen.getByLabelText("Bio"); | ||
| fireEvent.click(bioCheckbox); | ||
| expect(mockToggleDisplayOption).toHaveBeenCalledWith("showBio"); | ||
| }); | ||
|
|
||
| it("sets checked state correctly for main blocks based on isBlockVisible", () => { | ||
| render( | ||
| <SettingsTab | ||
| isBlockVisible={mockIsBlockVisible} | ||
| toggleMainBlockVisibility={mockToggleMainBlockVisibility} | ||
| displayOptions={mockDisplayOptions} | ||
| toggleDisplayOption={mockToggleDisplayOption} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
MAIN_BLOCKS には profile, contributions, heatmap, interests, topRepos, skills の 6 件が定義されていますが、このテストは "Profile"・"Activity Heatmap"・"Contributions" の 3 件しか検証していません。isBlockVisible が false を返す残り 3 件（Interests, Popular Repos, Skills）については未チェック状態であることが確認されていません。DETAIL_OPTIONS 側のテスト（全 7 件すべて検証）と比べてカバレッジが不均一です。
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/__tests__/SettingsTab.test.tsx
Line: 88-102
Comment:
**主要ブロックのチェック状態テストが 6 件中 3 件しかカバーしていない**
`MAIN_BLOCKS` には `profile`, `contributions`, `heatmap`, `interests`, `topRepos`, `skills` の 6 件が定義されていますが、このテストは "Profile"・"Activity Heatmap"・"Contributions" の 3 件しか検証していません。`isBlockVisible` が `false` を返す残り 3 件（Interests, Popular Repos, Skills）については未チェック状態であることが確認されていません。`DETAIL_OPTIONS` 側のテスト（全 7 件すべて検証）と比べてカバレッジが不均一です。
How can I resolve this? If you propose a fix, please make it concise.1 participant
🎯 What: The
SettingsTabcomponent lacked test coverage to verify rendering and interaction.📊 Coverage: Added tests to ensure all
MAIN_BLOCKSandDETAIL_OPTIONSare correctly rendered, and that their checked states align withisBlockVisibleanddisplayOptionsprops. Also added coverage to verify that toggling these checkboxes correctly invokestoggleMainBlockVisibilityandtoggleDisplayOptionwith the appropriate keys.✨ Result:
src/components/SettingsTab.tsxis now fully tested, improving the application's overall test coverage and catching potential future regressions in the modal settings configuration.PR created automatically by Jules for task 17520330889310160062 started by @is0692vs
Greptile Summary
この PR は
SettingsTabコンポーネントのユニットテストを新規追加するもので、レンダリング検証・インタラクション・チェック状態の確認を 6 つのテストケースでカバーしています。MAIN_BLOCKS/DETAIL_OPTIONS定数をループして検証しており、定数追加時の自動追従が効く設計になっている。Confidence Score: 4/5
テストのロジックは正しく、マージ自体に問題はない。スタイルと網羅性に関する改善余地がある。
追加されたテストはコンポーネントの主要な動作を正しく検証しており、既存コードへの影響もない。インタラクションテストでのハードコード文字列・呼び出し回数未検証・主要ブロック 3/6 のみカバーという点は将来的なメンテナンスコストを上げる可能性があるが、現時点での動作を壊すものではない。
src/components/tests/SettingsTab.test.tsx — インタラクションテストのハードコード文字列と主要ブロックのカバレッジ不均一を確認してほしい。
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[SettingsTab.test.tsx] --> B[renders all MAIN_BLOCKS] A --> C[renders all DETAIL_OPTIONS] A --> D[calls toggleMainBlockVisibility on click] A --> E[calls toggleDisplayOption on click] A --> F[checks state via isBlockVisible] A --> G[checks state via displayOptions] B --> B1[getByLabelText per MAIN_BLOCKS loop OK] C --> C1[getByLabelText per DETAIL_OPTIONS loop OK] D --> D1[fireEvent.click toHaveBeenCalledWith hardcoded strings WARN] E --> E1[fireEvent.click toHaveBeenCalledWith hardcoded strings WARN] F --> F1[3 of 6 blocks verified WARN] G --> G1[all 7 displayOptions verified OK]Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "🧪 Add unit tests for SettingsTab compon..." | Re-trigger Greptile