Uh oh!
There was an error while loading. Please reload this page.
test(topnav): add unit tests for grouped-dropdown TopNav - #83
Merged
Conversation
…ow-up) Closes the "no tests for the new component" follow-up from PR #81's review. Pure additive: 10 new tests in TopNav.test.tsx. Coverage: - Desktop: renders the 4 group labels (Learn, Organize, Community, Tools). - Active-state: bold/full-strength on the group containing the current route. Verified for /dashboard -> Learn, /library -> Organize, /gradebook -> Tools. - Dropdown opens on click; aria-expanded flips true; correct items render under each group. - Escape key closes an open dropdown. - Different groups don't leak items into each other's panels. - Mobile: hamburger renders instead of group labels; opening the hamburger reveals the grouped panel with sub-items. Notes: - Used fireEvent.click rather than userEvent.click. The component has both an onFocus that opens and an onClick that toggles, so userEvent's pointer chain (focus then click) net-cancels (open then close). fireEvent.click dispatches just the click, which cleanly tests the click-toggle path. - Used getByText for items rather than getByRole("link", {name}). Accessible-name resolution in jsdom didn't pick up the inner label span when an icon stub sits next to it; getByText is the more reliable assertion for this DOM shape. Frontend suite: 28 passed (was 18 + 10 new). No regressions. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughA comprehensive Vitest + React Testing Library test suite was added for the ChangesTopNav Component Test Suite
Estimated Code Review Effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
Deploying with |
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs | frontend | a385a46 | Commit Preview URL Branch Preview URL | May 05 2026, 05:45 AM |
| import React from "react"; | ||
| import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; | ||
| import { render, screen, cleanup, fireEvent, within } from "@testing-library/react"; |
| // is identical regardless of trigger. | ||
| it("opens a panel with the group's items on click", async () => { | ||
| const user = userEvent.setup(); |
| }); | ||
| it("opens different panels for different groups (no leak)", async () => { | ||
| const user = userEvent.setup(); |
| }); | ||
| it("renders the right items inside each group", async () => { | ||
| const user = userEvent.setup(); |
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 freeto 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
Closes the "no tests for the new component" follow-up flagged in PR #81's self-review. Pure additive — adds
frontend/src/components/TopNav.test.tsxwith 10 new tests; no production code changes.Coverage
/dashboard→ Learn,/library→ Organize,/gradebook→ Tools)aria-expandedflips totrue; correct items renderImplementation notes
fireEvent.clickoveruserEvent.click. The component has both anonFocusthat opens the dropdown and anonClickthat toggles.userEvent.clicksimulates a real pointer chain (focus → click) which net-cancels (open → close).fireEvent.clickdispatches just the click, cleanly testing the click-toggle path. Real users hovering with a mouse never hit this because their cursor focuses-then-clicks on a button that's already open from hover; the test's "tap from cold" sequence is what creates the synthetic loop.getByTextovergetByRole("link", { name }). Accessible-name resolution in jsdom didn't pick up the inner label span when an icon stub sits next to it.getByTextis the more reliable assertion for the rendered DOM shape.next/navigation(usePathname),useUser,useIsMobile,next/link, plus minimal stubs forAvatarandIcon. Same pattern as the existingDocumentUploadModal.test.tsx.Test plan
npx vitest run src/components/TopNav.test.tsx→ 10 passednpx vitest run→ 28 passed (was 18 + 10 new). No regressions.Out of scope
🤖 Generated with Claude Code
Summary by CodeRabbit