Add a Playwright e2e test for the stream deep-link /app/streams/:streamId route

[Jagadeeshftw]

📌 Description

There is no e2e spec testing direct navigation to /app/streams/:streamId (a deep link into a specific stream). This route currently expands the matching stream card inline in Streams.tsx. Add e2e/stream-detail.spec.ts that navigates directly to a stream ID present in the mock data, asserts the correct stream is highlighted or expanded, and verifies the StreamTimeline is visible.

💡 Why it matters: Deep-link regressions silently break URL sharing, email links, and external integrations that reference specific stream IDs.

🧩 Requirements and context

• Use a known mock stream ID from src/data/streamRecords.ts (e.g., the first seeded record's id).
• Navigate directly to /app/streams/<known-id> with mock wallet state injected.
• Assert the expanded stream section is visible (by data-testid or ARIA role).
• Assert the StreamTimeline SVG is present in the DOM.
• Assert the browser URL still reflects the stream ID after render.

Non-functional requirements

• Must be secure, tested, and documented.
• Should be efficient and easy to review.

🛠️ Suggested execution

1. Fork the repo and create a branch

git checkout -b test/e2e-stream-deep-link

2. Implement changes

• Write/modify the relevant source: e2e/stream-detail.spec.ts
• Write comprehensive tests: the spec file
• Add documentation: comment block explaining the mock stream ID used
• Validate security assumptions: stream IDs in the URL must be the same as those served by the mock; no ID injection possible in VITE_USE_MOCKS mode

3. Test and commit

• Run tests:

npx playwright test e2e/stream-detail.spec.ts

• Cover edge cases: non-existent stream ID shows not-found state, stream ID with special characters is encoded
• Include test output and security notes in the PR description.

Example commit message

test(e2e): add stream-detail.spec.ts for /app/streams/:streamId deep-link navigation

✅ Acceptance criteria

• Direct navigation to a known stream ID renders the correct stream
• StreamTimeline is visible in the expanded view
• Unknown stream ID renders a not-found or empty state
• URL retains the stream ID segment after render
• Spec passes in Chromium on CI

🔒 Security notes

Confirm that stream IDs from mock data do not include characters that could be interpreted as path traversal (../) in the UI or API layer.

📋 Guidelines

• Minimum 95% test coverage
• Clear documentation
• Timeframe: 96 hours

[1nonlypiece]

Hi Maintainers 👋,

I’d like to apply for this issue.

I have hands-on experience with Next.js frontend development as well as Stellar smart contracts using Rust (Soroban). I’m comfortable working with Figma designs, integrating APIs/wallets on the frontend, and implementing, testing, and optimizing smart contracts on Stellar.

I can follow the project guidelines, communicate progress clearly, and deliver clean, well-tested code within the expected timeline.

Looking forward to contributing to the project 🚀
Thanks!

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@1nonlypiece's PR #574 was approved and merged by @Jagadeeshftw.

🏆 @1nonlypiece: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,228 total points). Track your full progress on GrantFox.

👏 Great work, @1nonlypiece! Keep contributing to Fluxora-Org.