diff --git a/.serena/project.yml b/.serena/project.yml
index 9551299c..79692ddc 100644
--- a/.serena/project.yml
+++ b/.serena/project.yml
@@ -1,31 +1,40 @@
# list of languages for which language servers are started; choose from:
-# al bash clojure cpp csharp csharp_omnisharp
-# dart elixir elm erlang fortran go
-# haskell java julia kotlin lua markdown
-# nix perl php python python_jedi r
-# rego ruby ruby_solargraph rust scala swift
-# terraform typescript typescript_vts yaml zig
+# al bash clojure cpp csharp
+# csharp_omnisharp dart elixir elm erlang
+# fortran fsharp go groovy haskell
+# java julia kotlin lua markdown
+# matlab nix pascal perl php
+# php_phpactor powershell python python_jedi r
+# rego ruby ruby_solargraph rust scala
+# swift terraform toml typescript typescript_vts
+# vue yaml zig
+# (This list may be outdated. For the current list, see values of Language enum here:
+# https://github.com/oraios/serena/blob/main/src/solidlsp/ls_config.py
+# For some languages, there are alternative language servers, e.g. csharp_omnisharp, ruby_solargraph.)
# Note:
# - For C, use cpp
# - For JavaScript, use typescript
+# - For Free Pascal/Lazarus, use pascal
# Special requirements:
-# - csharp: Requires the presence of a .sln file in the project folder.
+# Some languages require additional setup/installations.
+# See here for details: https://oraios.github.io/serena/01-about/020_programming-languages.html#language-servers
# When using multiple languages, the first language server that supports a given file will be used for that file.
# The first language is the default language and the respective language server will be used as a fallback.
# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
languages:
- typescript
- bash
+
+# the encoding used by text files in the project
+# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
encoding: 'utf-8'
-# whether to use the project's gitignore file to ignore files
-# Added on 2025-04-07
+# whether to use project's .gitignore files to ignore files
ignore_all_files_in_gitignore: true
-# list of additional paths to ignore
-# same syntax as gitignore, so you can use * and **
-# Was previously called `ignored_dirs`, please update your config if you are using that.
-# Added (renamed) on 2025-04-07
+# list of additional paths to ignore in this project.
+# Same syntax as gitignore, so you can use * and **.
+# Note: global ignored_paths from serena_config.yml are also applied additively.
ignored_paths: []
# whether the project is in read-only mode
@@ -33,7 +42,9 @@ ignored_paths: []
# Added on 2025-04-18
read_only: false
-# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
+# list of tool names to exclude.
+# This extends the existing exclusions (e.g. from the global configuration)
+#
# Below is the complete list of tools for convenience.
# To make sure you have the latest list of tools, and to view their descriptions,
# execute `uv run scripts/print_tool_overview.py`.
@@ -77,6 +88,64 @@ excluded_tools: []
# initial prompt for the project. It will always be given to the LLM upon activating the project
# (contrary to the memories, which are loaded on demand).
initial_prompt: ''
-
+# the name by which the project can be referenced within Serena
project_name: 'gitray'
+
+# list of tools to include that would otherwise be disabled (particularly optional tools that are disabled by default).
+# This extends the existing inclusions (e.g. from the global configuration).
included_optional_tools: []
+
+# fixed set of tools to use as the base tool set (if non-empty), replacing Serena's default set of tools.
+# This cannot be combined with non-empty excluded_tools or included_optional_tools.
+fixed_tools: []
+
+# list of mode names to that are always to be included in the set of active modes
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the base_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this setting overrides the global configuration.
+# Set this to [] to disable base modes for this project.
+# Set this to a list of mode names to always include the respective modes for this project.
+base_modes:
+
+# list of mode names that are to be activated by default.
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the default_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this overrides the setting from the global configuration (serena_config.yml).
+# This setting can, in turn, be overridden by CLI parameters (--mode).
+default_modes:
+
+# time budget (seconds) per tool call for the retrieval of additional symbol information
+# such as docstrings or parameter information.
+# This overrides the corresponding setting in the global configuration; see the documentation there.
+# If null or missing, use the setting from the global configuration.
+symbol_info_budget:
+
+# The language backend to use for this project.
+# If not set, the global setting from serena_config.yml is used.
+# Valid values: LSP, JetBrains
+# Note: the backend is fixed at startup. If a project with a different backend
+# is activated post-init, an error will be returned.
+language_backend:
+
+# line ending convention to use when writing source files.
+# Possible values: unset (use global setting), "lf", "crlf", or "native" (platform default)
+# This does not affect Serena's own files (e.g. memories and configuration files), which always use native line endings.
+line_ending:
+
+# list of regex patterns which, when matched, mark a memory entry as read‑only.
+# Extends the list from the global configuration, merging the two lists.
+read_only_memory_patterns: []
+
+# list of regex patterns for memories to completely ignore.
+# Matching memories will not appear in list_memories or activate_project output
+# and cannot be accessed via read_memory or write_memory.
+# To access ignored memory files, use the read_file tool on the raw file path.
+# Extends the list from the global configuration, merging the two lists.
+# Example: ["_archive/.*", "_episodes/.*"]
+ignored_memory_patterns: []
+
+# advanced configuration option allowing to configure language server-specific options.
+# Maps the language key to the options.
+# Have a look at the docstring of the constructors of the LS implementations within solidlsp (e.g., for C# or PHP) to see which options are available.
+# No documentation on options means no options are available.
+ls_specific_settings: {}
diff --git a/apps/frontend/__tests__/components/ActivityChart.test.tsx b/apps/frontend/__tests__/components/ActivityChart.test.tsx
new file mode 100644
index 00000000..1c0c915b
--- /dev/null
+++ b/apps/frontend/__tests__/components/ActivityChart.test.tsx
@@ -0,0 +1,147 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect, vi } from 'vitest';
+import {
+ ActivityChart,
+ ActivityChartTooltip,
+} from '../../src/components/ActivityChart';
+import { Commit } from '@gitray/shared-types';
+
+describe('ActivityChart Component', () => {
+ test('should render with no commits', () => {
+ // Arrange
+ const commits: Commit[] = [];
+
+ // Act
+ render();
+
+ // Assert
+ expect(
+ document.querySelector('.recharts-responsive-container')
+ ).toBeInTheDocument();
+ });
+
+ test('should render with commits in the last 30 days', () => {
+ // Arrange
+ const today = new Date();
+ const yesterday = new Date(today);
+ yesterday.setDate(today.getDate() - 1);
+
+ const commits: Commit[] = [
+ {
+ sha: 'abc123',
+ message: 'feat: add feature',
+ authorName: 'Jonas',
+ authorEmail: 'jonas@example.com',
+ date: yesterday.toISOString(),
+ },
+ {
+ sha: 'def456',
+ message: 'fix: fix bug',
+ authorName: 'Jonas',
+ authorEmail: 'jonas@example.com',
+ date: today.toISOString(),
+ },
+ ];
+
+ // Act
+ render();
+
+ // Assert
+ expect(
+ document.querySelector('.recharts-responsive-container')
+ ).toBeInTheDocument();
+ });
+
+ test('should bucket commits using local date, not UTC date', () => {
+ // Arrange — commits spread across multiple local days
+ // Dates are constructed via the Date constructor (local time), ensuring
+ // getFullYear/getMonth/getDate are used for bucketing, not toISOString (UTC).
+ const day1 = new Date(2026, 2, 10, 23, 45, 0); // Mar 10 23:45 local — would be Mar 11 UTC in UTC+1+
+ const day2 = new Date(2026, 2, 11, 0, 15, 0); // Mar 11 00:15 local
+ const fixedNow = new Date(2026, 3, 7, 12, 0, 0); // Apr 7 — "today" for the 30-day window
+
+ const RealDate = globalThis.Date;
+ const dateSpy = vi
+ .spyOn(globalThis, 'Date')
+ .mockImplementation((...args: unknown[]) => {
+ if (args.length === 0) return fixedNow;
+ // @ts-expect-error forward args to real Date constructor
+ return new RealDate(...args);
+ });
+
+ const commits: Commit[] = [
+ {
+ sha: 'a1',
+ message: 'feat: a',
+ authorName: 'Jonas',
+ authorEmail: 'j@example.com',
+ date: day1.toISOString(),
+ },
+ {
+ sha: 'a2',
+ message: 'feat: b',
+ authorName: 'Jonas',
+ authorEmail: 'j@example.com',
+ date: day2.toISOString(),
+ },
+ ];
+
+ // Act
+ render();
+
+ // Assert — chart renders without error; bucketing logic ran without throwing
+ expect(
+ document.querySelector('.recharts-responsive-container')
+ ).toBeInTheDocument();
+
+ dateSpy.mockRestore();
+ });
+
+ test('should ignore commits older than 30 days', () => {
+ // Arrange
+ const thirtyFiveDaysAgo = new Date();
+ thirtyFiveDaysAgo.setDate(thirtyFiveDaysAgo.getDate() - 35);
+
+ const commits: Commit[] = [
+ {
+ sha: 'old123',
+ message: 'old commit',
+ authorName: 'Jonas',
+ authorEmail: 'jonas@example.com',
+ date: thirtyFiveDaysAgo.toISOString(),
+ },
+ ];
+
+ // Act
+ render();
+
+ // Assert
+ expect(
+ document.querySelector('.recharts-responsive-container')
+ ).toBeInTheDocument();
+ });
+
+ test('ActivityChartTooltip should render date and commit count when active', () => {
+ // Arrange
+ const payload = [{ value: 3, payload: { date: 'Apr 7' } }] as Parameters<
+ typeof ActivityChartTooltip
+ >[0]['payload'];
+
+ // Act
+ render();
+
+ // Assert
+ expect(screen.getByText('Apr 7')).toBeInTheDocument();
+ expect(screen.getByText('3 commits')).toBeInTheDocument();
+ });
+
+ test('ActivityChartTooltip should render nothing when inactive', () => {
+ // Arrange / Act
+ const { container } = render(
+
+ );
+
+ // Assert
+ expect(container.firstChild).toBeNull();
+ });
+});
diff --git a/apps/frontend/__tests__/components/CodeChurnChart.test.tsx b/apps/frontend/__tests__/components/CodeChurnChart.test.tsx
new file mode 100644
index 00000000..2b25cc03
--- /dev/null
+++ b/apps/frontend/__tests__/components/CodeChurnChart.test.tsx
@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
+import { CodeChurnChart } from '../../src/components/CodeChurnChart';
+import type { CodeChurnAnalysis } from '@gitray/shared-types';
+
+const mockChurnData: CodeChurnAnalysis = {
+ files: [
+ { path: 'src/services/api.ts', changes: 45, risk: 'high' },
+ { path: 'src/components/Dashboard.tsx', changes: 22, risk: 'medium' },
+ { path: 'src/utils/dateUtils.ts', changes: 8, risk: 'low' },
+ ],
+ metadata: {
+ totalFiles: 10,
+ totalChanges: 75,
+ highRiskCount: 1,
+ mediumRiskCount: 2,
+ lowRiskCount: 7,
+ riskThresholds: { high: 30, medium: 15, low: 14 },
+ dateRange: { from: '2025-01-01', to: '2026-01-01' },
+ analyzedAt: '2026-01-01T00:00:00Z',
+ },
+};
+
+describe('CodeChurnChart Component', () => {
+ test('should render "No churn data available" when churnData is undefined', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('No churn data available')).toBeInTheDocument();
+ });
+
+ test('should render risk stats from churnData metadata', () => {
+ // Arrange & Act
+ render();
+
+ // Assert — stat cards display counts from metadata
+ expect(screen.getByText('High Risk Files')).toBeInTheDocument();
+ expect(screen.getByText('Medium Risk Files')).toBeInTheDocument();
+ expect(screen.getByText('Total Analyzed')).toBeInTheDocument();
+ // highRiskCount=1, mediumRiskCount=2, totalFiles=10
+ expect(screen.getByText('1')).toBeInTheDocument();
+ expect(screen.getByText('2')).toBeInTheDocument();
+ expect(screen.getByText('10')).toBeInTheDocument();
+ });
+
+ test('should render top file in the Bug Hotspot Analysis section', () => {
+ // Arrange & Act
+ render();
+
+ // Assert — the top file (api.ts extracted from path) appears in hotspot list
+ // The filename is truncated from the path
+ expect(screen.getByText('Bug Hotspot Analysis')).toBeInTheDocument();
+ // api.ts is 6 chars, under 25 char limit, so renders as-is
+ expect(screen.getAllByText('api.ts').length).toBeGreaterThan(0);
+ });
+});
diff --git a/apps/frontend/__tests__/components/FileDistributionChart.test.tsx b/apps/frontend/__tests__/components/FileDistributionChart.test.tsx
new file mode 100644
index 00000000..6e0cb330
--- /dev/null
+++ b/apps/frontend/__tests__/components/FileDistributionChart.test.tsx
@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
+import { FileDistributionChart } from '../../src/components/FileDistributionChart';
+import type { FileTypeDistribution } from '@gitray/shared-types';
+
+const mockFileDistribution: FileTypeDistribution = {
+ extensions: {
+ '.ts': { count: 50, percentage: 60, size: 500000, averageSize: 10000 },
+ '.tsx': { count: 20, percentage: 25, size: 200000, averageSize: 10000 },
+ '.css': { count: 10, percentage: 12, size: 50000, averageSize: 5000 },
+ '.md': { count: 2, percentage: 2, size: 5000, averageSize: 2500 },
+ },
+ categories: {
+ code: { count: 70, percentage: 85, size: 700000, averageSize: 10000 },
+ documentation: { count: 2, percentage: 2, size: 5000, averageSize: 2500 },
+ configuration: {
+ count: 10,
+ percentage: 12,
+ size: 50000,
+ averageSize: 5000,
+ },
+ assets: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+ other: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+ },
+ directories: [],
+ metadata: {
+ totalFiles: 82,
+ totalSize: 755000,
+ analyzedAt: '2026-01-01T00:00:00Z',
+ repositorySize: 'medium',
+ },
+};
+
+describe('FileDistributionChart Component', () => {
+ test('should render "No file data available" when fileDistribution is undefined', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('No file data available')).toBeInTheDocument();
+ expect(
+ screen.getByText('File distribution could not be loaded')
+ ).toBeInTheDocument();
+ });
+
+ test('should render the recharts container when fileDistribution data is provided', () => {
+ // Arrange & Act
+ render();
+
+ // Assert — Recharts renders its container div
+ expect(
+ document.querySelector('.recharts-responsive-container')
+ ).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/__tests__/components/Footer.test.tsx b/apps/frontend/__tests__/components/Footer.test.tsx
new file mode 100644
index 00000000..ef013257
--- /dev/null
+++ b/apps/frontend/__tests__/components/Footer.test.tsx
@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
+import { Footer } from '../../src/components/Footer';
+
+describe('Footer Component', () => {
+ test('should render the GitHub repository link', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ const repoLink = screen.getByRole('link', { name: /GitRay Repository/i });
+ expect(repoLink).toBeInTheDocument();
+ expect(repoLink).toHaveAttribute(
+ 'href',
+ 'https://github.com/jonasyr/gitray'
+ );
+ });
+
+ test('should render the copyright text', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('© GitRay 2025')).toBeInTheDocument();
+ });
+
+ test('should render Privacy Policy and Contact links', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(
+ screen.getByRole('link', { name: /Privacy Policy/i })
+ ).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: /Contact/i })).toBeInTheDocument();
+ expect(
+ screen.getByRole('link', { name: /Impressum/i })
+ ).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/__tests__/components/GraphViewTimeline.test.tsx b/apps/frontend/__tests__/components/GraphViewTimeline.test.tsx
new file mode 100644
index 00000000..ef5cf641
--- /dev/null
+++ b/apps/frontend/__tests__/components/GraphViewTimeline.test.tsx
@@ -0,0 +1,126 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { GraphViewTimeline } from '../../src/components/GraphViewTimeline';
+import { Commit } from '@gitray/shared-types';
+
+function makeCommit(sha: string, daysAgo: number): Commit {
+ const date = new Date();
+ date.setDate(date.getDate() - daysAgo);
+ return {
+ sha,
+ message: `commit ${sha}`,
+ authorName: 'Jonas',
+ authorEmail: 'jonas@example.com',
+ date: date.toISOString(),
+ };
+}
+
+describe('GraphViewTimeline Component', () => {
+ test('should render timeline with real commits', () => {
+ // Arrange
+ const commits: Commit[] = [
+ makeCommit('abc1', 1),
+ makeCommit('abc2', 2),
+ makeCommit('abc3', 3),
+ ];
+
+ // Act
+ render();
+
+ // Assert
+ expect(screen.getByText('Network Graph Timeline')).toBeInTheDocument();
+ expect(screen.getByText('commit abc1')).toBeInTheDocument();
+ });
+
+ test('should not mutate the original commits array when sorting', () => {
+ // Arrange
+ const commits: Commit[] = [
+ makeCommit('old1', 5),
+ makeCommit('new1', 1),
+ makeCommit('mid1', 3),
+ ];
+ const originalFirst = commits[0].sha;
+ const originalLength = commits.length;
+
+ // Act
+ render();
+
+ // Assert — original array order and length are unchanged
+ expect(commits.length).toBe(originalLength);
+ expect(commits[0].sha).toBe(originalFirst);
+ });
+
+ test('should show at most 5 commits by default', () => {
+ // Arrange — 10 commits
+ const commits: Commit[] = Array.from({ length: 10 }, (_, i) =>
+ makeCommit(`sha${i}`, i + 1)
+ );
+
+ // Act
+ render();
+
+ // Assert — only 5 commit messages rendered
+ const renderedCommits = commits.slice(0, 5);
+ for (const commit of renderedCommits) {
+ expect(screen.getByText(`commit ${commit.sha}`)).toBeInTheDocument();
+ }
+ expect(screen.queryByText('commit sha5')).not.toBeInTheDocument();
+ });
+
+ test('should render fallback timeline events when no commits are provided', () => {
+ // Arrange — no commits passed
+
+ // Act
+ render();
+
+ // Assert — component renders with hardcoded fallback events
+ expect(screen.getByText('Network Graph Timeline')).toBeInTheDocument();
+ expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+ });
+
+ test('should display singular time unit for exactly 1 day ago', () => {
+ // Arrange — commit exactly 25 hours ago (> 1 day but < 2 days)
+ const oneDayAgo = new Date();
+ oneDayAgo.setHours(oneDayAgo.getHours() - 25);
+ const commits: Commit[] = [makeCommit('day1', 0)];
+ commits[0] = { ...commits[0], date: oneDayAgo.toISOString() };
+
+ // Act
+ render();
+
+ // Assert — renders "1 day ago" not "1 days ago"
+ expect(screen.getByText('1 day ago')).toBeInTheDocument();
+ });
+
+ test('should display locale date string for commits older than 12 months', () => {
+ // Arrange — commit 400 days ago (> 12 months)
+ const veryOld = new Date();
+ veryOld.setDate(veryOld.getDate() - 400);
+ const commits: Commit[] = [
+ { ...makeCommit('old', 0), date: veryOld.toISOString() },
+ ];
+ const expectedDate = veryOld.toLocaleDateString();
+
+ // Act
+ render();
+
+ // Assert — date displayed as locale string, not relative
+ expect(screen.getByText(expectedDate)).toBeInTheDocument();
+ });
+
+ test('should show more than 5 commits after clicking Show More', async () => {
+ // Arrange
+ const user = userEvent.setup();
+ const commits: Commit[] = Array.from({ length: 10 }, (_, i) =>
+ makeCommit(`sha${i}`, i + 1)
+ );
+
+ // Act
+ render();
+ await user.click(screen.getByRole('button', { name: /show more/i }));
+
+ // Assert — 6th commit (sha5) is now visible
+ expect(screen.getByText('commit sha5')).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/__tests__/components/Header.test.tsx b/apps/frontend/__tests__/components/Header.test.tsx
new file mode 100644
index 00000000..caacb9ad
--- /dev/null
+++ b/apps/frontend/__tests__/components/Header.test.tsx
@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect, vi } from 'vitest';
+import { Header } from '../../src/components/Header';
+
+// Mock RiveLogo to avoid pulling in @rive-app/react-canvas
+vi.mock('../../src/components/RiveLogo', () => ({
+ RiveLogo: () =>
,
+}));
+
+describe('Header Component', () => {
+ const defaultProps = {
+ isSignedIn: false,
+ onMenuClick: vi.fn(),
+ onNewsClick: vi.fn(),
+ onNavigateHome: vi.fn(),
+ };
+
+ test('should render "Sign in / Log in" button when not signed in', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText(/Sign in \/ Log in/i)).toBeInTheDocument();
+ });
+
+ test('should render avatar fallback "JD" when signed in', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('JD')).toBeInTheDocument();
+ });
+
+ test('should call onMenuClick when the menu button is clicked', async () => {
+ // Arrange
+ const onMenuClick = vi.fn();
+ const user = userEvent.setup();
+ render();
+
+ // Act — the menu button is the first button in the header (icon-only, no text)
+ const buttons = screen.getAllByRole('button');
+ await user.click(buttons[0]);
+
+ // Assert
+ expect(onMenuClick).toHaveBeenCalledTimes(1);
+ });
+
+ test('should show unread news badge when hasUnreadNews=true and showNews=true', () => {
+ // Arrange & Act
+ render();
+
+ // Assert — badge element rendered (small dot badge)
+ // The Badge component renders with bg-secondary class when unread
+ const badge = document.querySelector('.bg-secondary');
+ expect(badge).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/__tests__/components/InfoModal.test.tsx b/apps/frontend/__tests__/components/InfoModal.test.tsx
new file mode 100644
index 00000000..033c6db9
--- /dev/null
+++ b/apps/frontend/__tests__/components/InfoModal.test.tsx
@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect, vi } from 'vitest';
+import { InfoModal } from '../../src/components/InfoModal';
+
+describe('InfoModal Component', () => {
+ test('should render nothing when type is null', () => {
+ // Arrange & Act
+ const { container } = render(
+
+ );
+
+ // Assert — null renders an empty container
+ expect(container).toBeEmptyDOMElement();
+ });
+
+ test('should render "What is GitRay?" content for type="what"', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('What is GitRay?')).toBeInTheDocument();
+ expect(
+ screen.getByText(/powerful Git repository analytics tool/i)
+ ).toBeInTheDocument();
+ });
+
+ test('should render private repository content for type="private"', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(
+ screen.getByText('Analyze a Private Repository')
+ ).toBeInTheDocument();
+ expect(screen.getByText(/Personal Access Token/i)).toBeInTheDocument();
+ });
+
+ test('should render local server content for type="local"', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('Analyze on a Local Server')).toBeInTheDocument();
+ expect(
+ screen.getByText(/self-hosted on your local server/i)
+ ).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/__tests__/components/LandingPage.test.tsx b/apps/frontend/__tests__/components/LandingPage.test.tsx
new file mode 100644
index 00000000..e4f2b38d
--- /dev/null
+++ b/apps/frontend/__tests__/components/LandingPage.test.tsx
@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect, vi } from 'vitest';
+import { LandingPage } from '../../src/components/LandingPage';
+
+describe('LandingPage Component', () => {
+ test('should render the "GitRay" hero title', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByRole('heading', { name: 'GitRay' })).toBeInTheDocument();
+ });
+
+ test('should disable the Analyze button when URL input is empty', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ const button = screen.getByRole('button', { name: /Analyze Repository/i });
+ expect(button).toBeDisabled();
+ });
+
+ test('should call onAnalyze with URL and default mode when button clicked', async () => {
+ // Arrange
+ const onAnalyze = vi.fn();
+ const user = userEvent.setup();
+ render();
+ const input = screen.getByRole('textbox');
+ const button = screen.getByRole('button', { name: /Analyze Repository/i });
+
+ // Act
+ await user.type(input, 'https://github.com/org/repo');
+ await user.click(button);
+
+ // Assert
+ expect(onAnalyze).toHaveBeenCalledWith(
+ 'https://github.com/org/repo',
+ 'main'
+ );
+ });
+
+ test('should call onInfoClick with "what" when "What is GitRay?" is clicked', async () => {
+ // Arrange
+ const onInfoClick = vi.fn();
+ const user = userEvent.setup();
+ render();
+
+ // Act
+ await user.click(screen.getByRole('button', { name: /What is GitRay\?/i }));
+
+ // Assert
+ expect(onInfoClick).toHaveBeenCalledWith('what');
+ });
+
+ test('should call onInfoClick with "private" and "local" from helper buttons', async () => {
+ // Arrange
+ const onInfoClick = vi.fn();
+ const user = userEvent.setup();
+ render();
+
+ // Act
+ await user.click(
+ screen.getByRole('button', { name: /Analyze a private Repo\?/i })
+ );
+ await user.click(
+ screen.getByRole('button', { name: /Analyze on a local Server\?/i })
+ );
+
+ // Assert
+ expect(onInfoClick).toHaveBeenCalledWith('private');
+ expect(onInfoClick).toHaveBeenCalledWith('local');
+ });
+});
diff --git a/apps/frontend/__tests__/components/LoadingSpinner.test.tsx b/apps/frontend/__tests__/components/LoadingSpinner.test.tsx
new file mode 100644
index 00000000..bb8b1138
--- /dev/null
+++ b/apps/frontend/__tests__/components/LoadingSpinner.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
+import { LoadingSpinner } from '../../src/components/LoadingSpinner';
+
+describe('LoadingSpinner Component', () => {
+ test('should render with the default "Loading..." message', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('Loading...')).toBeInTheDocument();
+ });
+
+ test('should render with a custom message prop', () => {
+ // Arrange
+ const customMessage = 'Analyzing repository...';
+
+ // Act
+ render();
+
+ // Assert
+ expect(screen.getByText(customMessage)).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/__tests__/components/NewsDrawer.test.tsx b/apps/frontend/__tests__/components/NewsDrawer.test.tsx
new file mode 100644
index 00000000..cfd0cfb1
--- /dev/null
+++ b/apps/frontend/__tests__/components/NewsDrawer.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect, vi } from 'vitest';
+import { NewsDrawer } from '../../src/components/NewsDrawer';
+
+describe('NewsDrawer Component', () => {
+ test('should render the "What\'s New" title when open', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText("What's New")).toBeInTheDocument();
+ });
+
+ test('should render all news item titles when open', () => {
+ // Arrange & Act
+ render();
+
+ // Assert — check a sampling of news titles from the static newsItems array
+ expect(
+ screen.getByText('Major Update: AI Insights & Premium Features')
+ ).toBeInTheDocument();
+ expect(screen.getByText('New: Advanced Analytics Tab')).toBeInTheDocument();
+ expect(
+ screen.getByText('Enhanced: Contribution Ranking')
+ ).toBeInTheDocument();
+ expect(screen.getByText('Private repo tokens')).toBeInTheDocument();
+ expect(
+ screen.getByText('New: File Distribution chart')
+ ).toBeInTheDocument();
+ });
+
+ test('should render version badges including v2.0 and v1.9', () => {
+ // Arrange & Act
+ render();
+
+ // Assert — multiple v2.0 badges exist; find them all and check at least one
+ const v2Badges = screen.getAllByText('v2.0');
+ expect(v2Badges.length).toBeGreaterThan(0);
+ expect(screen.getByText('v1.9')).toBeInTheDocument();
+ expect(screen.getByText('v1.8')).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/__tests__/components/RiveLoader.test.tsx b/apps/frontend/__tests__/components/RiveLoader.test.tsx
new file mode 100644
index 00000000..ba45709c
--- /dev/null
+++ b/apps/frontend/__tests__/components/RiveLoader.test.tsx
@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect, vi } from 'vitest';
+import { RiveLoader } from '../../src/components/RiveLoader';
+
+// Mock @rive-app/react-canvas to avoid loading actual Rive runtime in jsdom
+vi.mock('@rive-app/react-canvas', () => ({
+ useRive: vi.fn(() => ({
+ RiveComponent: () => null,
+ })),
+}));
+
+describe('RiveLoader Component', () => {
+ test('should render with the default "Loading..." message', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('Loading...')).toBeInTheDocument();
+ });
+
+ test('should render with a custom message prop', () => {
+ // Arrange
+ const customMessage = 'Fetching repository data...';
+
+ // Act
+ render();
+
+ // Assert
+ expect(screen.getByText(customMessage)).toBeInTheDocument();
+ });
+
+ test('should render without errors using dark theme (default)', () => {
+ // Arrange & Act
+ const { container } = render();
+
+ // Assert — component mounts without throwing
+ expect(container).toBeInTheDocument();
+ expect(screen.getByText('Loading...')).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/__tests__/components/RiveLogo.test.tsx b/apps/frontend/__tests__/components/RiveLogo.test.tsx
new file mode 100644
index 00000000..ffcc9437
--- /dev/null
+++ b/apps/frontend/__tests__/components/RiveLogo.test.tsx
@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react';
+import { describe, test, expect, vi } from 'vitest';
+import { RiveLogo } from '../../src/components/RiveLogo';
+
+// Mock @rive-app/react-canvas to avoid loading actual Rive runtime in jsdom
+vi.mock('@rive-app/react-canvas', () => ({
+ useRive: vi.fn(() => ({
+ RiveComponent: () => null,
+ })),
+}));
+
+describe('RiveLogo Component', () => {
+ test('should render a container with the default 60×60 size', () => {
+ // Arrange & Act
+ const { container } = render();
+
+ // Assert — outer div has the correct inline size
+ const wrapper = container.firstChild as HTMLElement;
+ expect(wrapper).toBeInTheDocument();
+ expect(wrapper.style.width).toBe('60px');
+ expect(wrapper.style.height).toBe('60px');
+ });
+
+ test('should render a container with a custom size', () => {
+ // Arrange & Act
+ const { container } = render();
+
+ // Assert
+ const wrapper = container.firstChild as HTMLElement;
+ expect(wrapper.style.width).toBe('40px');
+ expect(wrapper.style.height).toBe('40px');
+ });
+
+ test('should apply cursor-pointer class when interactive is true', () => {
+ // Arrange & Act
+ const { container } = render();
+
+ // Assert
+ const wrapper = container.firstChild as HTMLElement;
+ expect(wrapper.className).toContain('cursor-pointer');
+ });
+});
diff --git a/apps/frontend/__tests__/components/SettingsDrawer.test.tsx b/apps/frontend/__tests__/components/SettingsDrawer.test.tsx
new file mode 100644
index 00000000..d01adbdd
--- /dev/null
+++ b/apps/frontend/__tests__/components/SettingsDrawer.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect, vi } from 'vitest';
+import { SettingsDrawer } from '../../src/components/SettingsDrawer';
+
+describe('SettingsDrawer Component', () => {
+ const defaultProps = {
+ open: true,
+ onClose: vi.fn(),
+ theme: 'dark' as const,
+ onThemeChange: vi.fn(),
+ };
+
+ test('should render the "Settings" sheet title when open', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByText('Settings')).toBeInTheDocument();
+ });
+
+ test('should render all four tab triggers', () => {
+ // Arrange & Act
+ render();
+
+ // Assert
+ expect(screen.getByRole('tab', { name: /General/i })).toBeInTheDocument();
+ expect(
+ screen.getByRole('tab', { name: /Appearance/i })
+ ).toBeInTheDocument();
+ expect(screen.getByRole('tab', { name: /Account/i })).toBeInTheDocument();
+ expect(
+ screen.getByRole('tab', { name: /Connections/i })
+ ).toBeInTheDocument();
+ });
+
+ test('should call onThemeChange with "light" when Light radio is selected', async () => {
+ // Arrange
+ const onThemeChange = vi.fn();
+ const user = userEvent.setup();
+ render();
+
+ // Act — navigate to Appearance tab then click Light radio
+ await user.click(screen.getByRole('tab', { name: /Appearance/i }));
+ await user.click(screen.getByRole('radio', { name: /Light/i }));
+
+ // Assert
+ expect(onThemeChange).toHaveBeenCalledWith('light');
+ });
+
+ test('should render Language select with English (Default) option in General tab', () => {
+ // Arrange & Act
+ render();
+
+ // Assert — General tab is default; Language label and option visible
+ expect(screen.getByText('Language')).toBeInTheDocument();
+ expect(screen.getByText('English (Default)')).toBeInTheDocument();
+ });
+});
diff --git a/apps/frontend/src/components/ActivityChart.tsx b/apps/frontend/src/components/ActivityChart.tsx
index 3d3c00c1..f1a2a6c3 100644
--- a/apps/frontend/src/components/ActivityChart.tsx
+++ b/apps/frontend/src/components/ActivityChart.tsx
@@ -6,7 +6,12 @@ import {
Tooltip,
XAxis,
YAxis,
+ type TooltipProps,
} from 'recharts';
+import type {
+ ValueType,
+ NameType,
+} from 'recharts/types/component/DefaultTooltipContent';
import { Commit } from '@gitray/shared-types';
interface ActivityChartProps {
@@ -23,11 +28,18 @@ function generateActivityData(commits: Commit[]) {
// Create a map of date -> commit count
const commitsByDate = new Map();
+ const toLocalDateKey = (date: Date) => {
+ const y = date.getFullYear();
+ const m = String(date.getMonth() + 1).padStart(2, '0');
+ const d = String(date.getDate()).padStart(2, '0');
+ return `${y}-${m}-${d}`;
+ };
+
// Filter commits from last 30 days and count by date
commits.forEach((commit) => {
const commitDate = new Date(commit.date);
if (commitDate >= thirtyDaysAgo && commitDate <= today) {
- const dateKey = commitDate.toISOString().split('T')[0];
+ const dateKey = toLocalDateKey(commitDate);
commitsByDate.set(dateKey, (commitsByDate.get(dateKey) || 0) + 1);
}
});
@@ -36,7 +48,7 @@ function generateActivityData(commits: Commit[]) {
for (let i = 29; i >= 0; i--) {
const date = new Date(today);
date.setDate(date.getDate() - i);
- const dateKey = date.toISOString().split('T')[0];
+ const dateKey = toLocalDateKey(date);
data.push({
date: date.toLocaleDateString('en-US', {
@@ -50,7 +62,24 @@ function generateActivityData(commits: Commit[]) {
return data;
}
-export function ActivityChart({ commits = [] }: ActivityChartProps) {
+export function ActivityChartTooltip({
+ active,
+ payload,
+}: TooltipProps) {
+ if (active && payload?.length) {
+ return (
+
+
{payload[0].payload.date}
+
+ {payload[0].value} commits
+
+
+ );
+ }
+ return null;
+}
+
+export function ActivityChart({ commits = [] }: Readonly) {
const data = generateActivityData(commits);
return (
@@ -83,21 +112,7 @@ export function ActivityChart({ commits = [] }: ActivityChartProps) {
className="text-muted-foreground"
width={30}
/>
-
{
- if (active && payload && payload.length) {
- return (
-
-
{payload[0].payload.date}
-
- {payload[0].value} commits
-
-
- );
- }
- return null;
- }}
- />
+
new Date(b.date).getTime() - new Date(a.date).getTime())
.slice(0, limit)
.map((commit) => {
@@ -127,7 +127,7 @@ function processCommits(
export function GraphViewTimeline({
commits = [],
currentBranch = 'unknown',
-}: GraphViewTimelineProps) {
+}: Readonly) {
const [playing, setPlaying] = useState(false);
const [timelinePosition, setTimelinePosition] = useState([50]);
const [showMore, setShowMore] = useState(false);
@@ -157,12 +157,18 @@ export function GraphViewTimeline({
}
};
+ const commitLimit = showMore ? 20 : 5;
+ const eventsToShow =
+ commits.length > 0
+ ? processCommits(commits, currentBranch, commitLimit)
+ : timelineEvents;
+
return (
- {branches.map((branch, index) => (
+ {branches.map((branch) => (
@@ -348,11 +354,8 @@ export function GraphViewTimeline({
)}
- {(commits.length > 0
- ? processCommits(commits, currentBranch, showMore ? 20 : 5)
- : timelineEvents
- ).map((event, index) => (
-
+ {eventsToShow.map((event) => (
+
({
+ observe: vi.fn(),
+ unobserve: vi.fn(),
+ disconnect: vi.fn(),
+}));
+
// Mock PointerEvent for Radix UI Tabs
if (typeof window.PointerEvent === 'undefined') {
window.PointerEvent = window.MouseEvent as any;
diff --git a/package.json b/package.json
index d6078f27..d682e3d1 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,11 @@
"typescript-eslint": "^8.32.1",
"vitest": "^3.2.3"
},
+ "pnpm": {
+ "overrides": {
+ "lodash": "^4.17.21"
+ }
+ },
"dependencies": {
"@rive-app/react-canvas": "^4.21.3",
"@types/react": "^18.3.24",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5da0be0c..f59451db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,9 @@ settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
+overrides:
+ lodash: ^4.17.21
+
importers:
.:
dependencies:
@@ -1976,6 +1979,7 @@ packages:
}
cpu: [arm]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.53.3':
resolution:
@@ -1984,6 +1988,7 @@ packages:
}
cpu: [arm]
os: [linux]
+ libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.53.3':
resolution:
@@ -1992,6 +1997,7 @@ packages:
}
cpu: [arm64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.53.3':
resolution:
@@ -2000,6 +2006,7 @@ packages:
}
cpu: [arm64]
os: [linux]
+ libc: [musl]
'@rollup/rollup-linux-loong64-gnu@4.53.3':
resolution:
@@ -2008,6 +2015,7 @@ packages:
}
cpu: [loong64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-ppc64-gnu@4.53.3':
resolution:
@@ -2016,6 +2024,7 @@ packages:
}
cpu: [ppc64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-riscv64-gnu@4.53.3':
resolution:
@@ -2024,6 +2033,7 @@ packages:
}
cpu: [riscv64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-riscv64-musl@4.53.3':
resolution:
@@ -2032,6 +2042,7 @@ packages:
}
cpu: [riscv64]
os: [linux]
+ libc: [musl]
'@rollup/rollup-linux-s390x-gnu@4.53.3':
resolution:
@@ -2040,6 +2051,7 @@ packages:
}
cpu: [s390x]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.53.3':
resolution:
@@ -2048,6 +2060,7 @@ packages:
}
cpu: [x64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.53.3':
resolution:
@@ -2056,6 +2069,7 @@ packages:
}
cpu: [x64]
os: [linux]
+ libc: [musl]
'@rollup/rollup-openharmony-arm64@4.53.3':
resolution:
@@ -2145,6 +2159,7 @@ packages:
engines: { node: '>=10' }
cpu: [arm64]
os: [linux]
+ libc: [glibc]
'@swc/core-linux-arm64-musl@1.15.3':
resolution:
@@ -2154,6 +2169,7 @@ packages:
engines: { node: '>=10' }
cpu: [arm64]
os: [linux]
+ libc: [musl]
'@swc/core-linux-x64-gnu@1.15.3':
resolution:
@@ -2163,6 +2179,7 @@ packages:
engines: { node: '>=10' }
cpu: [x64]
os: [linux]
+ libc: [glibc]
'@swc/core-linux-x64-musl@1.15.3':
resolution:
@@ -2172,6 +2189,7 @@ packages:
engines: { node: '>=10' }
cpu: [x64]
os: [linux]
+ libc: [musl]
'@swc/core-win32-arm64-msvc@1.15.3':
resolution:
@@ -2283,6 +2301,7 @@ packages:
engines: { node: '>= 10' }
cpu: [arm64]
os: [linux]
+ libc: [glibc]
'@tailwindcss/oxide-linux-arm64-musl@4.1.18':
resolution:
@@ -2292,6 +2311,7 @@ packages:
engines: { node: '>= 10' }
cpu: [arm64]
os: [linux]
+ libc: [musl]
'@tailwindcss/oxide-linux-x64-gnu@4.1.18':
resolution:
@@ -2301,6 +2321,7 @@ packages:
engines: { node: '>= 10' }
cpu: [x64]
os: [linux]
+ libc: [glibc]
'@tailwindcss/oxide-linux-x64-musl@4.1.18':
resolution:
@@ -2310,6 +2331,7 @@ packages:
engines: { node: '>= 10' }
cpu: [x64]
os: [linux]
+ libc: [musl]
'@tailwindcss/oxide-wasm32-wasi@4.1.18':
resolution:
@@ -5414,6 +5436,7 @@ packages:
engines: { node: '>= 12.0.0' }
cpu: [arm64]
os: [linux]
+ libc: [glibc]
lightningcss-linux-arm64-musl@1.30.2:
resolution:
@@ -5423,6 +5446,7 @@ packages:
engines: { node: '>= 12.0.0' }
cpu: [arm64]
os: [linux]
+ libc: [musl]
lightningcss-linux-x64-gnu@1.30.2:
resolution:
@@ -5432,6 +5456,7 @@ packages:
engines: { node: '>= 12.0.0' }
cpu: [x64]
os: [linux]
+ libc: [glibc]
lightningcss-linux-x64-musl@1.30.2:
resolution:
@@ -5441,6 +5466,7 @@ packages:
engines: { node: '>= 12.0.0' }
cpu: [x64]
os: [linux]
+ libc: [musl]
lightningcss-win32-arm64-msvc@1.30.2:
resolution:
diff --git a/sonar-project.properties b/sonar-project.properties
index c23ca554..ce5f3297 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -20,7 +20,7 @@ sonar.sources=.
// - Test files (__tests__/**)
// - Compiled JavaScript files (from TypeScript) - ADDED
// - Build output directories - ADDED
-sonar.exclusions=**/*.config.js,**/*.config.ts,**/*.config.cjs,**/tsconfig.json,**/vite.config.ts,**/package.json,**/.eslintrc,**/.eslintrc.*,**/test-setup.ts,**/*.md,**/docs/**,**/public/**,**/assets/**,**/static/**,**/__mocks__/**,**/__tests__/**,**/*.js,**/dist/**,**/*.js.map,**/main.tsx,apps/backend/perf/load-test.ts
+sonar.exclusions=**/*.config.js,**/*.config.ts,**/*.config.cjs,**/tsconfig.json,**/vite.config.ts,**/package.json,**/.eslintrc,**/.eslintrc.*,**/test-setup.ts,**/*.md,**/docs/**,**/public/**,**/assets/**,**/static/**,**/__mocks__/**,**/__tests__/**,**/*.js,**/dist/**,**/*.js.map,**/main.tsx,apps/backend/perf/load-test.ts,**/node_modules/**
// --- Specifically Include Source TypeScript Files ---
// This ensures SonarQube focuses on analyzing your actual source code