Add Basic Frontend Unit Tests [frontend]

[salazarsebas]

🧪 Add Basic Frontend Unit Tests ✅

📝 Description

Implement unit tests for the Angular frontend to ensure the reliability of EditorComponent and OutputComponent. Tests will validate component creation, data binding, and basic functionality, aligning with the project’s emphasis on high code quality and maintainability.

🎯 Objective

Create unit tests in apps/frontend/src/app/components/ using Angular’s testing framework to cover EditorComponent and OutputComponent.

🗂 Structure

• Directory: apps/frontend/src/app/components/
• Files:
  • apps/frontend/src/app/components/editor/editor.component.spec.ts
  • apps/frontend/src/app/components/output/output.component.spec.ts
• Expected structure:

  apps/frontend/
  ├── src/
  │   ├── app/
  │   │   ├── components/
  │   │   │   ├── editor/
  │   │   │   │   └── editor.component.spec.ts
  │   │   │   └── output/
  │   │   │       └── output.component.spec.ts
  

✅ Requirements

• Ensure EditorComponent tests verify:
  • Component creation.
  • Monaco Editor initialization.
  • Button presence and disabled state during loading.
• Ensure OutputComponent tests verify:
  • Component creation.
  • Rendering of input string in the <pre> element.
• Use Jasmine/Karma for testing (default with Angular).
• Mock CompilerService for EditorComponent tests using TestBed.
• Run tests with bun x ng test --no-watch.
• Commit changes with a message like test: add frontend unit tests.
• Push changes to the GitHub repository.

🏆 Expected Outcomes

• Unit tests pass for EditorComponent and OutputComponent.
• Tests cover component creation, data binding, and basic functionality.
• Tests run successfully with ng test.
• Changes are committed and pushed to GitHub.

🔗 References

• Angular Testing Guide
• Jasmine Testing Framework
• Karma Test Runner

📋 Notes

• Focus on basic tests for now; expand coverage in later milestones.
• Ensure mocks are used to isolate dependencies.

[Sandijigs]

@salazarsebas assign me this Issue.

[pushkarm029]

Hey, I can complete this quickly. Thanks @salazarsebas

[pushkarm029]

Hey @salazarsebas, can i work on this now?