🧪 add unit tests for Header component

[is0692vs]

🎯 What: The testing gap addressed: Missing Test File for Header Component (src/components/Header.tsx).
📊 Coverage: Added unit tests to cover the Header component's rendering of the logo, navigation links, active style applications based on current pathname, and inclusion of the LoginButton. Tested various pathname combinations like /, /dashboard, and /dashboard/stats.
✨ Result: Increased code reliability and achieved 100% test coverage for Header.tsx.

---

PR created automatically by Jules for task 13587633629226506826 started by @is0692vs

Greptile Summary

このPRは Header コンポーネントのユニットテストを新規追加し、ロゴ・全ナビゲーションリンクの表示、isActive ロジックに基づくアクティブスタイルの適用、LoginButton のレンダリングをカバーしています。全体的によく書かれていますが、5つのナビゲーションリンクのうち "Year in Review"（/dashboard/year）のアクティブ状態を検証するテストケースが欠落しており、カバレッジが不完全です。

Confidence Score: 5/5

新規テストファイルのみの変更であり、プロダクションコードへの影響はなく、マージは安全です。

全ての指摘事項はP2（カバレッジの漏れ・コメントの不正確さ）であり、既存のテストロジック自体に誤りはありません。プロダクションコードへの変更もないため、最高スコアを維持します。

src/components/tests/Header.test.tsx — "Year in Review" のアクティブ状態テストを追加するとカバレッジが完全になります。

Important Files Changed

Filename	Overview
src/components/tests/Header.test.tsx	Headerコンポーネントのユニットテストを新規追加。ロゴ・ナビゲーションリンク・アクティブスタイル・LoginButtonをカバーするが、"Year in Review" のアクティブ状態テストが欠落しており、/dashboard/stats テストでの非アクティブ検証が不完全。

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[isActive 関数] --> B{href === '/'}
    B -->|true| C{pathname === '/'}
    C -->|true| D[active ✅]
    C -->|false| E[inactive ❌]
    B -->|false| F{pathname === href}
    F -->|true| D
    F -->|false| G{pathname.startsWith href + '/'}
    G -->|true| D
    G -->|false| E

    subgraph テストカバレッジ
        T1["pathname='/' → Home: active ✅ テスト済"]
        T2["pathname='/dashboard' → Dashboard: active ✅ テスト済"]
        T3["pathname='/dashboard/stats' → Dashboard+Stats: active ✅ テスト済"]
        T4["pathname='/dashboard/year' → Year in Review: active ⚠️ 未テスト"]
    end

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: src/components/__tests__/Header.test.tsx
Line: 70-83

Comment:
**"Year in Review" の非アクティブ状態が未検証**

テストタイトルが「Dashboard と Stats の両方にアクティブスタイルが適用される」と主張しているにもかかわらず、5 つあるナビゲーションリンクのうち Settings のみ非アクティブを検証しており、`/dashboard/year` を持つ "Year in Review" の状態が確認されていません。

さらに、74 行目のコメントは `startsWith` ロジックで説明していますが、Stats が `pathname === href` の完全一致によってアクティブになる点が記述されていないため、読者が混乱する可能性があります。

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: src/components/__tests__/Header.test.tsx
Line: 34-91

Comment:
**"Year in Review" のアクティブ状態テストが欠落**

`/dashboard/year` パスのとき "Year in Review" リンクがアクティブになることを検証するテストケースがありません。Header.tsx の `links` 配列には `{ href: "/dashboard/year", label: "Year in Review" }` が含まれており、他のリンクと同等のカバレッジが望まれます。

以下のテストを追加してください：

```ts
it("applies active styles to Year in Review link when pathname is '/dashboard/year'", () => {
  vi.mocked(usePathname).mockReturnValue("/dashboard/year");
  render(<Header />);

  const yearInReviewLink = screen.getByRole("link", { name: "Year in Review" });
  expect(yearInReviewLink).toHaveClass("bg-accent/15");

  const dashboardLink = screen.getByRole("link", { name: "Dashboard" });
  // /dashboard/year starts with /dashboard/ → Dashboard is also active
  expect(dashboardLink).toHaveClass("bg-accent/15");

  const homeLink = screen.getByRole("link", { name: "Home" });
  expect(homeLink).not.toHaveClass("bg-accent/15");
});
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "🧪 [Testing] add unit tests for Header c..." | Re-trigger Greptile}

Greptile also left 2 inline comments on this PR.

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
github-user-summary	Ready	Preview, Comment	Apr 17, 2026 8:26am

[coderabbitai]

Warning

Rate limit exceeded

@is0692vs has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 32 minutes and 51 seconds before requesting another review.

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 32 minutes and 51 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: ecd5e92e-de36-49c6-af2d-66e6ac757175

📥 Commits

Reviewing files that changed from the base of the PR and between 3be157d and b8719fd.

📒 Files selected for processing (1)

• src/components/__tests__/Header.test.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch test/header-component-13587633629226506826

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[gemini-code-assist]

Code Review

This pull request introduces a new test suite for the Header component using Vitest and React Testing Library, covering rendering, navigation links, and active state styling. The review feedback highlights a technical requirement to explicitly extend Vitest with jest-dom matchers to avoid runtime errors in tests. Additionally, there is a recommendation to evaluate the navigation logic, as the current implementation allows multiple links to be highlighted as active simultaneously, which could lead to a confusing user experience.

[is0692vs]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.