Improved readability by replacing escaped backslashes with String.raw

[udaykiran243]

Proposed change

Resolves #3214

This PR improves readability and maintainability in frontend unit tests by replacing string literals that contain escaped backslashes (\\) with clearer alternatives (such as String.raw), as suggested in the related issue.

The changes are:

• Limited strictly to frontend test files
• Applied consistently across all similar cases in the codebase
• Purely non-functional (no impact on runtime behavior or test logic)
  This addresses the maintainability concern raised in the issue and follows the maintainer’s request to fix all similar occurrences, not just a single file.

Checklist

• Required: I read and followed the contributing guidelines
• Required: I ran make check-test locally and all tests passed
• I used AI for code, documentation, or tests in this PR

[coderabbitai]

Summary by CodeRabbit

• Tests
  • Improved selector handling in test suites to enhance test reliability and maintainability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Three frontend test files were updated to improve readability by converting string literals containing escaped backslashes into String.raw template literals. The changes affect CSS class selectors in Footer, RecentRelease, and UserDetails tests, replacing escaped sequences with raw template syntax. No functional behavior changes.

Changes

Cohort / File(s)	Summary
Frontend test selector improvements frontend/__tests__/unit/components/Footer.test.tsx, frontend/__tests__/unit/components/RecentRelease.test.tsx, frontend/__tests__/unit/pages/UserDetails.test.tsx	Converted escaped string literals in CSS class selectors to String.raw template literals; affects Tailwind class selectors with colons (e.g., lg:block); improves readability by eliminating double-escaped backslashes while preserving selector behavior.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Fix #1810: Added tests for <Footer> component #1945: Directly modifies the same Footer.test.tsx file with similar selector refactoring patterns.
• Add test : RecentRelease component unit test  #1946: Updates RecentRelease test file that overlaps with changes in this PR's selector conversions.

Suggested labels

frontend, frontend-tests

Suggested reviewers

• arkid15r
• kasya

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: replacing escaped backslashes with String.raw template literals to improve test readability.
Description check	✅ Passed	The description clearly explains the change, references the linked issue #3214, specifies the scope is frontend test files, and notes the changes are non-functional.
Linked Issues check	✅ Passed	The PR successfully addresses all requirements from issue #3214: replaces escaped backslashes with String.raw in frontend test files (Footer.test.tsx, RecentRelease.test.tsx, UserDetails.test.tsx), improves readability, and applies changes consistently across similar cases.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue #3214 and limited to frontend test files with escaped backslash replacements, with no unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom Pre-merge Checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 45521fb and 5e48e3d.

📒 Files selected for processing (3)

• frontend/__tests__/unit/components/Footer.test.tsx
• frontend/__tests__/unit/components/RecentRelease.test.tsx
• frontend/__tests__/unit/pages/UserDetails.test.tsx

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-11-17T16:47:05.578Z

Learnt from: anurag2787
Repo: OWASP/Nest PR: 2671
File: frontend/__tests__/unit/components/MultiSearch.test.tsx:427-427
Timestamp: 2025-11-17T16:47:05.578Z
Learning: In the frontend test files for the OWASP/Nest repository, `expect(true).toBe(true)` no-op assertions may be intentionally added as workarounds when ESLint rule jest/expect-expect doesn't detect expectations inside helper functions or waitFor callbacks. These can be resolved by configuring the ESLint rule's assertFunctionNames option to recognize custom assertion helpers instead of flagging them as redundant.

Applied to files:

• frontend/__tests__/unit/pages/UserDetails.test.tsx

📚 Learning: 2025-11-17T17:30:42.139Z

Learnt from: anurag2787
Repo: OWASP/Nest PR: 2671
File: frontend/__tests__/unit/components/MultiSearch.test.tsx:169-171
Timestamp: 2025-11-17T17:30:42.139Z
Learning: In the OWASP/Nest frontend tests (PR #2671 context), wrapper functions like `expectChaptersCountEqualsThree` that simply call another helper with a fixed parameter (e.g., `expectChaptersCountEquals(3)`) are intentionally used to avoid arrow function callbacks in `waitFor` calls. This pattern prevents adding nesting depth that would trigger rule typescript:S2004. Example: `await waitFor(expectChaptersCountEqualsThree)` avoids the extra nesting from `await waitFor(() => expectChaptersCountEquals(3))`.

Applied to files:

• frontend/__tests__/unit/pages/UserDetails.test.tsx

🔇 Additional comments (3)

frontend/__tests__/unit/components/Footer.test.tsx (1)

359-359: LGTM!

The use of String.raw improves readability by avoiding the double-escaped backslash (\\:) for the Tailwind responsive class selector. The runtime behavior remains identical.

frontend/__tests__/unit/components/RecentRelease.test.tsx (1)

383-385: LGTM!

The String.raw template literal correctly preserves the CSS selector for the dark mode variant class, improving readability by eliminating the double-escaped backslash.

frontend/__tests__/unit/pages/UserDetails.test.tsx (1)

284-284: LGTM!

The String.raw template literal correctly handles the responsive breakpoint class selector (lg:block), making the code more readable while maintaining functional equivalence.

---

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.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[kasya]

@udaykiran243 well done! Thanks for updating all of these 👍🏼

[udaykiran243]

Thanks a lot @kasya for the review and merge! 🙌

Since this PR has been merged, could you please add my name (@udaykiran243) to the GSoC 2026 – Completed Tasks Leaderboard when it’s next updated?

Really appreciate the feedback and guidance 👍