General/fix tests

[YuliaDemir]

Summary

Adds theme switching support to the application header and improves the header behavior during page scrolling.

The changes keep the UI consistent with the existing MUI theme, provide accessible light/dark mode controls, and add automated tests for both the header and theme switcher behavior.

Changes Made

• Added a reusable ThemeSwitcher component to the application header.

• Added manual switching between light and dark color schemes.

• Preserved support for the user's system color scheme.

• Configured MUI to use a class-based colorSchemeSelector required for manual theme switching.

• Updated InitColorSchemeScript to use the matching class attribute.

• Added accessible theme switcher attributes:

  • role="switch"
  • aria-checked
  • translated aria-label

• Added English and Russian translations for theme switcher labels.

• Added light and dark mode icons with an animated switch indicator.

• Used the existing MUI palette, transitions, spacing, and border radius values.

• Added compact and expanded header states based on the page scroll position.

• Added smooth transitions for the header height and vertical padding.

• Added unit tests for ThemeSwitcher, covering:

  • uninitialized color scheme
  • light mode
  • dark mode
  • system light mode
  • system dark mode
  • accessible label and checked state
  • switching between light and dark modes

• Added unit tests for Header, covering:

  • brand navigation link
  • About navigation link
  • authentication navigation
  • language switcher
  • theme switcher
  • translation namespace
  • scroll trigger configuration
  • expanded header state
  • compact header state

Related issue

Closes #

Feature

Feature 1: App Header

This PR contributes to the application header by adding a theme switcher and animated sticky header behavior.

It also partially contributes to:

Feature 7: General Requirements

Add the matching Feature 1: App Header and Feature 7: General Requirements labels.

Acceptance criteria

Feature 1: App Header

• Non-auth users see Sign In / Sign Up in header (upper right) — 15
• Auth users see History / Sign Out in header — 10
• About link in header and footer — 10
• Expired/invalid token → redirect from private routes to Main — 10
• Sign In / Sign Up buttons redirect to respective form route — 15

Feature 2: Sign In / Sign Up

• Sign In / Sign Up / Sign Out buttons present everywhere they should be — 10
• Client-side validation (email, password: 8+ chars, letter+digit+special, Unicode) — 20
• Successful login → redirect to Main — 10
• Logged-in user on Sign In / Sign Up routes → redirect to Main — 10

Feature 3: Swagger Editor

• Load/paste schema in JSON and YAML — 25
• Auto-detect input format (JSON vs YAML) — 20
• Format switch with JSON ↔ YAML conversion, no data loss — 20
• Schema validation with error indication — 15
• Auth users save schema; restored on next login — 10
• Viewer auto-populates with endpoints on valid schema — 10
• Responsive split view (horizontal/vertical by orientation) — 20

Feature 4: Swagger Viewer

• Endpoint list organized by path/method — 20
• Details: method, path, all param types (path/query/header/cookie) — 25
• Request schema and example payloads displayed — 20
• Response schema, examples, all status codes displayed — 25
• Try-It-Out: fill params/headers/body, execute, show response — 20
• Generate cURL + copy-to-clipboard — 10

Feature 5: History and Analytics

• SSR-generated; empty state with links to editor/viewer — 15
• Requests sorted by timestamp (most recent first) — 10
• Server-side analytics: duration, status, timestamp, method, request size, response size, error details, endpoint/URL — 45

Feature 6: About Page

• Public route, accessible to all — 5
• Info about RS School course — 5
• Team info (names, roles, GitHub links) — 10
• Design consistent with the app — 5

Feature 7: General Requirements

• i18n: 2+ languages with toggler in header — 30
• Sticky header with animation on stick — 10
• User-friendly error display — 10
• Private routes protected (401 if not authenticated) — 5

Feature 8: YouTube Video

• 5–7 min YouTube walkthrough linked, covers all criteria — 50

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would break existing functionality)
• Documentation update

Checklist

• Self-review done
• No console errors / warnings / logs
• No any / @ts-ignore
• Tests added / updated and passing

Summary by CodeRabbit

• Tests
  • Updated header validation to assert toolbar sizing/styling via component properties rather than DOM test IDs.
  • Simplified navigation component mocks while keeping checks for brand/about links, navigation role, and scroll-trigger behavior.
  • Removed Swagger Viewer tests covering cURL command generation, clipboard copy/success messaging, and command updates when inputs change.
• Chores
  • Increased Vitest hook and test timeouts to 50s to reduce timeout-related failures.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
swagger-editor-app	Ready	Preview, Comment	Jul 13, 2026 8:24pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b9700ac7-ba8a-4d15-8623-92d0e3688078

📥 Commits

Reviewing files that changed from the base of the PR and between 4013c6d and 4e0c3ba.

📒 Files selected for processing (1)

• vitest.config.ts

---

📝 Walkthrough

Walkthrough

Header tests now validate Toolbar props and simplified navigation mocks. SwaggerViewer tests remove obsolete cURL and clipboard coverage, while Vitest hook and test timeouts are set to 50 seconds.

Changes

Test suite updates

Layer / File(s)	Summary
Header mock and assertion updates src/components/header/header.test.tsx	Toolbar props are captured and used to assert expanded and compact states; navigation mocks and assertions use simplified rendered elements.
Remove obsolete cURL coverage src/components/swagger-viewer/swagger-viewer.test.tsx	The cURL generation, clipboard copy, success message, and query-parameter update test is removed.
Configure Vitest timeouts vitest.config.ts	Hook and test timeouts are configured to 50 seconds alongside the existing setup file.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• AlyaEngineer/swagger-editor-app#70 — Related SwaggerViewer cURL test removal.
• AlyaEngineer/swagger-editor-app#89 — Related Header toolbar and navigation test updates.
• AlyaEngineer/swagger-editor-app#91 — Related Header mock updates for the theme switcher.

Suggested labels: feature-1-header, feature-7-general

Suggested reviewers: ivan-khodorov, alyaengineer

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is too generic and doesn't clearly describe the main change in this pull request.	Rename it to summarize the actual change, such as updating header tests and Vitest timeouts.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch general/fix-tests

---

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