chore(tests): Code Viewer E2E Tests

[vivjd]

Overview

This PR significantly expands end-to-end (E2E) test coverage for the Code Viewer using Playwright. It improves reliability, validates key user flows (file navigation, history, deep linking), and ensures the Monaco editor integration behaves as expected.

Proposed Changes

Updated Existing Test

• Adjusted test data to reflect current structure (interface_adapters and UserSignOutController.java).
• Improved assertions around placeholder replacement and Monaco editor rendering.

New Test Coverage

Navigation

• Verify "Back to Diagram" button redirects correctly.

Deep Linking

• Ensure file can be loaded directly via URL query (?file=...) and renders immediately.

URL Synchronization

• Confirm URL updates when selecting files.
• Validate "Back to Previous" correctly updates URL state.

History Behavior

• Ensure "Back to Previous" is disabled at history boundaries.
• Validate multi-step navigation across file history.

Error Handling

• Verify error state is displayed for invalid file paths.

Sequential Navigation

• Test navigating across multiple files and stepping backward through history.

Skipped Firefox

• There's a known instability (NS_ERROR_NET_RESET) with it and some of the E2E tests for code viewer currently don't pass. Links:
• stack overflow

How to Test & Review

cd clean-architecture-visualizer/frontend
npm run test:e2e

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)	x
📚 Documentation update (change that only updates documentation)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

• I have performed a self-review of my changes.

  • Check that all changed files included in this pull request are intentional changes.
  • Check that all changes are relevant to the purpose of this pull request, as described above.

• I have added tests for my changes, if applicable.

  • This is required for all bug fixes and new features.

• I have updated the project documentation, if applicable.

  • This is required for new features.

• (Frontend) I have added/updated text in i18n JSON files for any new user-facing strings to support multilingual features.
  After opening your pull request:

• I have verified that the CI tests have passed.

• I have requested a review from a project maintainer, and a fellow student.

• Technical Debt: If temporary workarounds or "TODOs" were used, I have opened a tracking issue to address them properly.

  • Linked Issues:

Questions and Comments

(Include any questions or comments you have regarding your changes.)

[missionStrawberry]

One of the tests isn't passing when I ran it locally.

[vivjd]

All the tests pass on my end, including this one.

@missionStrawberry I made a slight change so maybe it will work on your end now? If you could please try again and let me know that would be great!

[missionStrawberry]

Unfortunately it didn't fix it. Copilot suggested this:

The test passed with this, but I'll let you make the change if it seems appropriate.

try {
// Wait until either the loading text disappears or an error appears.
await Promise.race([
loadingElement.waitFor({ state: 'hidden', timeout: 30000 }),
errorElement.waitFor({ state: 'visible', timeout: 30000 }),
]);
} catch (e) {
throw new Error('Timeout waiting for code viewer to settle');
}

if (await errorElement.isVisible().catch(() => false)) {
  throw new Error('File loading failed with error');
}