From 4c34fe617a87ddf41a1a640e93ebabd9a0238b27 Mon Sep 17 00:00:00 2001
From: Patrik Zander <38403547+pzdr7@users.noreply.github.com>
Date: Thu, 24 Oct 2024 22:40:21 +0200
Subject: [PATCH] Development: Migrate the online code editor to a standalone
 component (#9505)

---
 .../manage/build-plan-editor.component.html   |   2 +-
 .../programming-exercise-management.module.ts |   2 +
 .../shared/code-editor/code-editor.module.ts  |   6 +-
 .../header/code-editor-header.component.html  |   6 +-
 .../header/code-editor-header.component.ts    |  27 +-
 .../monaco/code-editor-monaco.component.html  |  42 +--
 .../monaco/code-editor-monaco.component.ts    | 295 ++++++++++--------
 .../code-editor-header.component.spec.ts      |  20 +-
 .../code-editor-monaco.component.spec.ts      | 223 ++++++-------
 ...tor-assessment-container.component.spec.ts |  13 +-
 .../helpers/mocks/mock-instance.helper.ts     |  21 ++
 .../code-editor-container.integration.spec.ts | 109 ++++---
 ...code-editor-instructor.integration.spec.ts |   4 +
 .../code-editor-student.integration.spec.ts   |   4 +
 14 files changed, 421 insertions(+), 353 deletions(-)
 create mode 100644 src/test/javascript/spec/helpers/mocks/mock-instance.helper.ts

diff --git a/src/main/webapp/app/exercises/programming/manage/build-plan-editor.component.html b/src/main/webapp/app/exercises/programming/manage/build-plan-editor.component.html
index 2ab8b64cf561..5d85ac6360d2 100644
--- a/src/main/webapp/app/exercises/programming/manage/build-plan-editor.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/build-plan-editor.component.html
@@ -40,7 +40,7 @@
     </button>
 </div>
 <div class="card build-plan-editor">
-    <jhi-code-editor-header [filename]="'artemisApp.programmingExercise.buildplan' | artemisTranslate" [isLoading]="isLoading" (tabSizeChanged)="updateTabSize($event)" />
+    <jhi-code-editor-header [fileName]="'artemisApp.programmingExercise.buildplan' | artemisTranslate" [isLoading]="isLoading" (onValidateTabSize)="updateTabSize($event)" />
     <div class="d-flex card-body build-plan-editor__content">
         <div class="build-plan-editor__content__editor">
             <jhi-monaco-editor
diff --git a/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts b/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
index 7340599252c5..cefae879520a 100644
--- a/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
+++ b/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
@@ -28,6 +28,7 @@ import { DetailModule } from 'app/detail-overview-list/detail.module';
 import { IrisModule } from 'app/iris/iris.module';
 import { ArtemisExerciseModule } from 'app/exercises/shared/exercise/exercise.module';
 import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
+import { CodeEditorHeaderComponent } from 'app/exercises/programming/shared/code-editor/header/code-editor-header.component';
 
 @NgModule({
     imports: [
@@ -55,6 +56,7 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         DetailModule,
         IrisModule,
         MonacoEditorComponent,
+        CodeEditorHeaderComponent,
     ],
     declarations: [
         ProgrammingExerciseDetailComponent,
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts b/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts
index 09f497e91ddc..a7d5af4a1cfc 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts
@@ -19,7 +19,6 @@ import { CodeEditorContainerComponent } from 'app/exercises/programming/shared/c
 import { ArtemisProgrammingManualAssessmentModule } from 'app/exercises/programming/assess/programming-manual-assessment.module';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeviewModule } from 'app/exercises/programming/shared/code-editor/treeview/treeview.module';
-import { CodeEditorHeaderComponent } from 'app/exercises/programming/shared/code-editor/header/code-editor-header.component';
 import { CodeEditorFileBrowserBadgeComponent } from 'app/exercises/programming/shared/code-editor/file-browser/code-editor-file-browser-badge.component';
 import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
@@ -37,6 +36,7 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         MonacoEditorComponent,
         ArtemisSharedComponentModule,
         RequestFeedbackButtonComponent,
+        CodeEditorMonacoComponent,
     ],
     declarations: [
         CodeEditorGridComponent,
@@ -54,8 +54,6 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         CodeEditorResolveConflictModalComponent,
         CodeEditorConfirmRefreshModalComponent,
         CodeEditorContainerComponent,
-        CodeEditorHeaderComponent,
-        CodeEditorMonacoComponent,
     ],
     exports: [
         CodeEditorGridComponent,
@@ -65,8 +63,6 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         CodeEditorInstructionsComponent,
         CodeEditorBuildOutputComponent,
         CodeEditorContainerComponent,
-        CodeEditorHeaderComponent,
-        CodeEditorMonacoComponent,
     ],
     providers: [],
 })
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.html b/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.html
index d5d545ab27f1..801b8f004a22 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.html
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.html
@@ -1,12 +1,12 @@
 <div class="d-flex justify-content-between card-header bg-primary text-white">
     <h3 class="mt-1 card-title">
         <fa-icon [icon]="farFileAlt" />
-        <span> &nbsp;{{ filename }}</span>
-        @if (isLoading) {
+        <span> &nbsp;{{ fileName() }}</span>
+        @if (isLoading()) {
             <fa-icon [icon]="faCircleNotch" animation="spin" class="ms-2" title="{{ 'artemisApp.editor.loadingFile' | artemisTranslate }}" />
         }
     </h3>
-    @if (showTabSizeSelector) {
+    @if (showTabSizeSelector()) {
         <div ngbDropdown class="ms-2" placement="bottom-end auto" [autoClose]="'outside'" aria-label="Code Editor Settings">
             <button ngbDropdownToggle class="btn btn-sm btn-primary" type="button" id="dropdownCodeEditorSettings" aria-expanded="false">
                 <fa-icon [icon]="faGear" />
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts b/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts
index e340a1dcb4f2..63ec5588aa4d 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts
@@ -1,26 +1,23 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
 import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
 import { faCircleNotch, faGear } from '@fortawesome/free-solid-svg-icons';
 import { MAX_TAB_SIZE } from 'app/shared/monaco-editor/monaco-editor.component';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
 
 @Component({
     selector: 'jhi-code-editor-header',
     templateUrl: './code-editor-header.component.html',
+    imports: [ArtemisSharedModule],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CodeEditorHeaderComponent {
-    @Input()
-    filename: string;
+    readonly fileName = input<string>();
+    readonly isLoading = input<boolean>(false);
+    readonly showTabSizeSelector = input<boolean>(true);
+    readonly onValidateTabSize = output<number>();
 
-    @Input()
-    isLoading: boolean;
-
-    @Input()
-    showTabSizeSelector = true;
-
-    @Output()
-    tabSizeChanged = new EventEmitter<number>();
-
-    tabSize = 4;
+    readonly tabSize = model<number>(4);
 
     readonly MAX_TAB_SIZE = MAX_TAB_SIZE;
 
@@ -35,7 +32,7 @@ export class CodeEditorHeaderComponent {
      * Valid values are in range [1, {@link MAX_TAB_SIZE}].
      */
     validateTabSize(): void {
-        this.tabSize = Math.max(1, Math.min(this.tabSize, MAX_TAB_SIZE));
-        this.tabSizeChanged.emit(this.tabSize);
+        this.tabSize.set(Math.max(1, Math.min(this.tabSize(), MAX_TAB_SIZE)));
+        this.onValidateTabSize.emit(this.tabSize());
     }
 }
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.html b/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.html
index dc68e75eca8e..2c6a2db017a5 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.html
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.html
@@ -1,43 +1,43 @@
 <div class="card">
-    <jhi-code-editor-header [showTabSizeSelector]="false" [filename]="selectedFile!" [isLoading]="loadingCount > 0" />
+    <jhi-code-editor-header [showTabSizeSelector]="false" [fileName]="selectedFile()" [isLoading]="loadingCount() > 0" />
     <div class="card-body card-body-monaco">
-        @if (selectedFile) {
-            @for (feedback of filterFeedbackForSelectedFile(feedbacks); track feedback.id) {
+        @if (selectedFile()) {
+            @for (feedback of feedbackForSelectedFile(); track feedback.id + feedback.reference) {
                 <!-- actual, stored feedback -->
                 <jhi-code-editor-tutor-assessment-inline-feedback
                     class="monaco-hidden-element"
-                    [selectedFile]="selectedFile"
-                    [codeLine]="Feedback.getReferenceLine(feedback)!"
+                    [selectedFile]="selectedFile()!"
+                    [codeLine]="feedback.line"
                     [feedback]="feedback"
-                    [readOnly]="readOnlyManualFeedback"
-                    [highlightDifferences]="highlightDifferences"
-                    [course]="course"
+                    [readOnly]="readOnlyManualFeedback()"
+                    [highlightDifferences]="highlightDifferences()"
+                    [course]="course()"
                     (onUpdateFeedback)="updateFeedback($event)"
                     (onDeleteFeedback)="deleteFeedback($event)"
                     (onCancelFeedback)="cancelFeedback($event)"
                 />
             }
             <!-- new, unsaved feedback -->
-            @for (line of newFeedbackLines; track line) {
+            @for (line of newFeedbackLines(); track line) {
                 <jhi-code-editor-tutor-assessment-inline-feedback
                     class="monaco-hidden-element"
-                    [selectedFile]="selectedFile"
+                    [selectedFile]="selectedFile()!"
                     [codeLine]="line"
                     [feedback]="undefined"
-                    [highlightDifferences]="highlightDifferences"
-                    [readOnly]="readOnlyManualFeedback"
-                    [course]="course"
+                    [highlightDifferences]="highlightDifferences()"
+                    [readOnly]="readOnlyManualFeedback()"
+                    [course]="course()"
                     (onUpdateFeedback)="updateFeedback($event)"
                     (onDeleteFeedback)="deleteFeedback($event)"
                     (onCancelFeedback)="cancelFeedback($event)"
                 />
             }
             <!-- feedback suggestions -->
-            @for (suggestion of filterFeedbackForSelectedFile(feedbackSuggestions); track suggestion.id) {
+            @for (suggestion of feedbackSuggestionsForSelectedFile(); track suggestion.id + suggestion.reference) {
                 <jhi-code-editor-tutor-assessment-inline-feedback-suggestion
-                    [codeLine]="Feedback.getReferenceLine(suggestion)!"
+                    [codeLine]="suggestion.line"
                     [feedback]="suggestion"
-                    [course]="course"
+                    [course]="course()"
                     (onAcceptSuggestion)="acceptSuggestion($event)"
                     (onDiscardSuggestion)="discardSuggestion($event)"
                 />
@@ -45,16 +45,16 @@
         }
         <jhi-monaco-editor
             (textChanged)="onFileTextChanged($event)"
-            [hidden]="!selectedFile || loadingCount > 0 || binaryFileSelected"
-            [readOnly]="editorLocked"
+            [hidden]="!selectedFile() || loadingCount() > 0 || binaryFileSelected()"
+            [readOnly]="editorLocked()"
             [textChangedEmitDelay]="200"
             #editor
-            [id]="'monaco-editor-' + sessionId"
+            [id]="'monaco-editor-' + sessionId()"
         />
 
-        @if (!selectedFile && !loadingCount) {
+        @if (!selectedFile() && !loadingCount()) {
             <p id="no-file-selected" class="text-center lead text-body-secondary pt-5" jhiTranslate="artemisApp.editor.selectFile"></p>
-        } @else if (binaryFileSelected) {
+        } @else if (binaryFileSelected()) {
             <p id="binary-file-selected" class="text-center lead pt-5" jhiTranslate="artemisApp.editor.binaryFileSelected"></p>
         }
     </div>
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts b/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts
index 3c4a12677e5d..b306438919d2 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts
@@ -1,4 +1,20 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, QueryList, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    OnChanges,
+    SimpleChanges,
+    ViewEncapsulation,
+    computed,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+    untracked,
+    viewChild,
+    viewChildren,
+} from '@angular/core';
 import { RepositoryFileService } from 'app/exercises/shared/result/repository.service';
 import { CodeEditorRepositoryFileService, ConnectionError } from 'app/exercises/programming/shared/code-editor/service/code-editor-repository.service';
 import { CodeEditorFileService } from 'app/exercises/programming/shared/code-editor/service/code-editor-file.service';
@@ -22,121 +38,141 @@ import { CodeEditorTutorAssessmentInlineFeedbackSuggestionComponent } from 'app/
 import { MonacoEditorLineHighlight } from 'app/shared/monaco-editor/model/monaco-editor-line-highlight.model';
 import { FileTypeService } from 'app/exercises/programming/shared/service/file-type.service';
 import { EditorPosition } from 'app/shared/monaco-editor/model/actions/monaco-editor.util';
+import { ArtemisProgrammingManualAssessmentModule } from 'app/exercises/programming/assess/programming-manual-assessment.module';
+import { CodeEditorHeaderComponent } from 'app/exercises/programming/shared/code-editor/header/code-editor-header.component';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
 
 type FileSession = { [fileName: string]: { code: string; cursor: EditorPosition; loadingError: boolean } };
+type FeedbackWithLineAndReference = Feedback & { line: number; reference: string };
 export type Annotation = { fileName: string; row: number; column: number; text: string; type: string; timestamp: number; hash?: string };
 @Component({
     selector: 'jhi-code-editor-monaco',
     templateUrl: './code-editor-monaco.component.html',
     styleUrls: ['./code-editor-monaco.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    imports: [ArtemisSharedModule, ArtemisProgrammingManualAssessmentModule, MonacoEditorComponent, CodeEditorHeaderComponent],
     providers: [RepositoryFileService],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CodeEditorMonacoComponent implements OnChanges {
-    @ViewChild('editor', { static: true })
-    editor: MonacoEditorComponent;
-    @ViewChildren(CodeEditorTutorAssessmentInlineFeedbackComponent)
-    inlineFeedbackComponents: QueryList<CodeEditorTutorAssessmentInlineFeedbackComponent>;
-    @ViewChildren(CodeEditorTutorAssessmentInlineFeedbackSuggestionComponent)
-    inlineFeedbackSuggestionComponents: QueryList<CodeEditorTutorAssessmentInlineFeedbackSuggestionComponent>;
-    @Input()
-    commitState: CommitState;
-    @Input()
-    editorState: EditorState;
-    @Input()
-    course?: Course;
-    @Input()
-    feedbacks: Feedback[] = [];
-    @Input()
-    feedbackSuggestions: Feedback[] = [];
-    @Input()
-    readOnlyManualFeedback: boolean;
-    @Input()
-    highlightDifferences: boolean;
-    @Input()
-    isTutorAssessment = false;
-    @Input()
-    disableActions = false;
-    @Input()
-    selectedFile?: string;
-    @Input()
-    sessionId: number | string;
-    @Input()
-    set buildAnnotations(buildAnnotations: Array<Annotation>) {
-        this.setBuildAnnotations(buildAnnotations);
-    }
+    static readonly CLASS_DIFF_LINE_HIGHLIGHT = 'monaco-diff-line-highlight';
+    static readonly CLASS_FEEDBACK_HOVER_BUTTON = 'monaco-add-feedback-button';
+    static readonly FILE_TIMEOUT = 10000;
 
-    annotationsArray: Array<Annotation> = [];
+    protected readonly Feedback = Feedback;
+    protected readonly CommitState = CommitState;
+
+    private readonly repositoryFileService = inject(CodeEditorRepositoryFileService);
+    private readonly fileService = inject(CodeEditorFileService);
+    private readonly localStorageService = inject(LocalStorageService);
+    private readonly changeDetectorRef = inject(ChangeDetectorRef);
+    private readonly fileTypeService = inject(FileTypeService);
+
+    readonly editor = viewChild.required<MonacoEditorComponent>('editor');
+    readonly inlineFeedbackComponents = viewChildren(CodeEditorTutorAssessmentInlineFeedbackComponent);
+    readonly inlineFeedbackSuggestionComponents = viewChildren(CodeEditorTutorAssessmentInlineFeedbackSuggestionComponent);
+    readonly commitState = input.required<CommitState>();
+    readonly editorState = input.required<EditorState>();
+    readonly course = input<Course>();
+    readonly feedbacks = input<Feedback[]>([]);
+    readonly feedbackSuggestions = input<Feedback[]>([]);
+    readonly readOnlyManualFeedback = input<boolean>(false);
+    readonly highlightDifferences = input<boolean>(false);
+    readonly isTutorAssessment = input<boolean>(false);
+    readonly disableActions = input<boolean>(false);
+    readonly selectedFile = input<string>();
+    readonly sessionId = input.required<number | string>();
+    readonly buildAnnotations = input<Annotation[]>([]);
+
+    readonly onError = output<string>();
+    readonly onFileContentChange = output<{ file: string; fileContent: string }>();
+    readonly onUpdateFeedback = output<Feedback[]>();
+    readonly onFileLoad = output<string>();
+    readonly onAcceptSuggestion = output<Feedback>();
+    readonly onDiscardSuggestion = output<Feedback>();
+    readonly onHighlightLines = output<MonacoEditorLineHighlight[]>();
+
+    readonly loadingCount = signal<number>(0);
+    readonly newFeedbackLines = signal<number[]>([]);
+    readonly binaryFileSelected = signal<boolean>(false);
+    readonly fileSession = signal<FileSession>({});
+    readonly editorLocked = computed<boolean>(
+        () =>
+            this.disableActions() ||
+            this.isTutorAssessment() ||
+            this.commitState() === CommitState.CONFLICT ||
+            !this.selectedFile() ||
+            !!this.fileSession()[this.selectedFile()!]?.loadingError,
+    );
+
+    readonly feedbackInternal = signal<Feedback[]>([]);
+    readonly feedbackSuggestionsInternal = signal<Feedback[]>([]);
+
+    readonly feedbackForSelectedFile = computed<FeedbackWithLineAndReference[]>(() =>
+        this.filterFeedbackForSelectedFile(this.feedbackInternal()).map((f) => this.attachLineAndReferenceToFeedback(f)),
+    );
+    readonly feedbackSuggestionsForSelectedFile = computed<FeedbackWithLineAndReference[]>(() =>
+        this.filterFeedbackForSelectedFile(this.feedbackSuggestionsInternal()).map((f) => this.attachLineAndReferenceToFeedback(f)),
+    );
 
-    @Output()
-    onError: EventEmitter<string> = new EventEmitter();
-    @Output()
-    onFileContentChange: EventEmitter<{ file: string; fileContent: string }> = new EventEmitter<{ file: string; fileContent: string }>();
-    @Output()
-    onUpdateFeedback = new EventEmitter<Feedback[]>();
-    @Output()
-    onFileLoad = new EventEmitter<string>();
-    @Output()
-    onAcceptSuggestion = new EventEmitter<Feedback>();
-    @Output()
-    onDiscardSuggestion = new EventEmitter<Feedback>();
-    @Output()
-    onHighlightLines = new EventEmitter<MonacoEditorLineHighlight[]>();
-
-    editorLocked = false;
     /**
-     * The number of currently loading files. If this number is greater than 0, the editor is in a loading state and hides its content.
+     * Attaches the line number & reference to a feedback item, or -1 if no line is available. This is used to disambiguate feedback items in the template, avoiding warnings.
+     * @param feedback The feedback item to attach the line to.
+     * @private
      */
-    loadingCount = 0;
+    private attachLineAndReferenceToFeedback(feedback: Feedback): FeedbackWithLineAndReference {
+        return { ...feedback, line: Feedback.getReferenceLine(feedback) ?? -1, reference: feedback.reference ?? 'unreferenced' };
+    }
 
-    fileSession: FileSession = {};
-    newFeedbackLines: number[] = [];
-    binaryFileSelected = false;
+    annotationsArray: Array<Annotation> = [];
 
-    static readonly CLASS_DIFF_LINE_HIGHLIGHT = 'monaco-diff-line-highlight';
-    static readonly CLASS_FEEDBACK_HOVER_BUTTON = 'monaco-add-feedback-button';
-    static readonly FILE_TIMEOUT = 10000;
+    constructor() {
+        effect(
+            () => {
+                this.feedbackInternal.set(this.feedbacks());
+            },
+            { allowSignalWrites: true },
+        );
 
-    // Expose to template
-    protected readonly Feedback = Feedback;
-    protected readonly CommitState = CommitState;
+        effect(
+            () => {
+                this.feedbackSuggestionsInternal.set(this.feedbackSuggestions());
+            },
+            { allowSignalWrites: true },
+        );
 
-    constructor(
-        private repositoryFileService: CodeEditorRepositoryFileService,
-        private fileService: CodeEditorFileService,
-        protected localStorageService: LocalStorageService,
-        private changeDetectorRef: ChangeDetectorRef,
-        private fileTypeService: FileTypeService,
-    ) {}
+        effect(() => {
+            const annotations = this.buildAnnotations();
+            untracked(() => this.setBuildAnnotations(annotations));
+        });
+    }
 
     async ngOnChanges(changes: SimpleChanges): Promise<void> {
-        const editorWasRefreshed = changes.editorState && changes.editorState.previousValue === EditorState.REFRESHING && this.editorState === EditorState.CLEAN;
-        const editorWasReset = changes.commitState && changes.commitState.previousValue !== CommitState.UNDEFINED && this.commitState === CommitState.UNDEFINED;
+        const editorWasRefreshed = changes.editorState && changes.editorState.previousValue === EditorState.REFRESHING && this.editorState() === EditorState.CLEAN;
+        const editorWasReset = changes.commitState && changes.commitState.previousValue !== CommitState.UNDEFINED && this.commitState() === CommitState.UNDEFINED;
         // Refreshing the editor resets any local files.
         if (editorWasRefreshed || editorWasReset) {
-            this.fileSession = {};
-            this.editor.reset();
+            this.fileSession.set({});
+            this.editor().reset();
         }
-        if ((changes.selectedFile && this.selectedFile) || editorWasRefreshed) {
-            await this.selectFileInEditor(this.selectedFile);
+        if ((changes.selectedFile && this.selectedFile()) || editorWasRefreshed) {
+            await this.selectFileInEditor(this.selectedFile());
             this.setBuildAnnotations(this.annotationsArray);
-            this.newFeedbackLines = [];
+            this.newFeedbackLines.set([]);
             this.renderFeedbackWidgets();
-            if (this.isTutorAssessment && !this.readOnlyManualFeedback) {
+            if (this.isTutorAssessment() && !this.readOnlyManualFeedback()) {
                 this.setupAddFeedbackButton();
             }
-            this.onFileLoad.emit(this.selectedFile);
+            this.onFileLoad.emit(this.selectedFile()!);
         }
 
         if (changes.feedbacks) {
-            this.newFeedbackLines = [];
+            this.newFeedbackLines.set([]);
             this.renderFeedbackWidgets();
         }
 
-        this.editorLocked =
-            this.disableActions || this.isTutorAssessment || this.commitState === CommitState.CONFLICT || !this.selectedFile || !!this.fileSession[this.selectedFile]?.loadingError;
-
-        this.editor.layout();
+        this.editor().layout();
     }
 
     async selectFileInEditor(fileName: string | undefined): Promise<void> {
@@ -144,8 +180,8 @@ export class CodeEditorMonacoComponent implements OnChanges {
             // There is nothing to be done, as the editor will be hidden when there is no file.
             return;
         }
-        this.loadingCount++;
-        if (!this.fileSession[fileName] || this.fileSession[fileName].loadingError) {
+        this.loadingCount.set(this.loadingCount() + 1);
+        if (!this.fileSession()[fileName] || this.fileSession()[fileName].loadingError) {
             let fileContent = '';
             let loadingError = false;
             try {
@@ -160,45 +196,45 @@ export class CodeEditorMonacoComponent implements OnChanges {
                     this.onError.emit('loadingFailed');
                 }
             }
-            this.fileSession[fileName] = { code: fileContent, loadingError, cursor: { column: 0, lineNumber: 0 } };
+            this.fileSession.set({ ...this.fileSession(), [fileName]: { code: fileContent, loadingError, cursor: { column: 0, lineNumber: 0 } } });
         }
 
-        const code = this.fileSession[fileName].code;
-        this.binaryFileSelected = this.fileTypeService.isBinaryContent(code);
+        const code = this.fileSession()[fileName].code;
+        this.binaryFileSelected.set(this.fileTypeService.isBinaryContent(code));
 
         // Since fetching the file may take some time, we need to check if the file is still selected.
-        if (!this.binaryFileSelected && this.selectedFile === fileName) {
-            this.editor.changeModel(fileName, code);
-            this.editor.setPosition(this.fileSession[fileName].cursor);
+        if (!this.binaryFileSelected() && this.selectedFile() === fileName) {
+            this.editor().changeModel(fileName, code);
+            this.editor().setPosition(this.fileSession()[fileName].cursor);
         }
-        this.loadingCount--;
+        this.loadingCount.set(this.loadingCount() - 1);
     }
 
     onFileTextChanged(text: string): void {
-        if (this.selectedFile && this.fileSession[this.selectedFile]) {
-            const previousText = this.fileSession[this.selectedFile].code;
+        if (this.selectedFile() && this.fileSession()[this.selectedFile()!]) {
+            const previousText = this.fileSession()[this.selectedFile()!].code;
             if (previousText !== text) {
-                this.fileSession[this.selectedFile] = { code: text, loadingError: false, cursor: this.editor.getPosition() };
-                this.onFileContentChange.emit({ file: this.selectedFile, fileContent: text });
+                this.fileSession.set({ ...this.fileSession(), [this.selectedFile()!]: { code: text, loadingError: false, cursor: this.editor().getPosition() } });
+                this.onFileContentChange.emit({ file: this.selectedFile()!, fileContent: text });
             }
         }
     }
 
     getText(): string {
-        return this.editor.getText();
+        return this.editor().getText();
     }
 
     getNumberOfLines(): number {
-        return this.editor.getNumberOfLines();
+        return this.editor().getNumberOfLines();
     }
 
     highlightLines(startLine: number, endLine: number) {
-        this.editor.highlightLines(startLine, endLine, CodeEditorMonacoComponent.CLASS_DIFF_LINE_HIGHLIGHT);
+        this.editor().highlightLines(startLine, endLine, CodeEditorMonacoComponent.CLASS_DIFF_LINE_HIGHLIGHT);
         this.onHighlightLines.emit(this.getLineHighlights());
     }
 
     setupAddFeedbackButton(): void {
-        this.editor.setLineDecorationsHoverButton(CodeEditorMonacoComponent.CLASS_FEEDBACK_HOVER_BUTTON, (lineNumber) => this.addNewFeedback(lineNumber));
+        this.editor().setLineDecorationsHoverButton(CodeEditorMonacoComponent.CLASS_FEEDBACK_HOVER_BUTTON, (lineNumber) => this.addNewFeedback(lineNumber));
     }
 
     /**
@@ -209,7 +245,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
         // TODO for a follow-up: in the future, there might be multiple feedback items on the same line.
         const lineNumberZeroBased = lineNumber - 1;
         if (!this.getInlineFeedbackNode(lineNumberZeroBased)) {
-            this.newFeedbackLines.push(lineNumberZeroBased);
+            this.newFeedbackLines.set([...this.newFeedbackLines(), lineNumberZeroBased]);
             this.renderFeedbackWidgets(lineNumberZeroBased);
         }
     }
@@ -220,17 +256,19 @@ export class CodeEditorMonacoComponent implements OnChanges {
      */
     updateFeedback(feedback: Feedback) {
         const line = Feedback.getReferenceLine(feedback);
-        const existingFeedbackIndex = this.feedbacks.findIndex((f) => f.reference === feedback.reference);
+        const existingFeedbackIndex = this.feedbackInternal().findIndex((f) => f.reference === feedback.reference);
         if (existingFeedbackIndex !== -1) {
             // Existing feedback -> update only
-            this.feedbacks[existingFeedbackIndex] = feedback;
+            const feedbackArray = [...this.feedbackInternal()];
+            feedbackArray[existingFeedbackIndex] = feedback;
+            this.feedbackInternal.set(feedbackArray);
         } else {
             // New feedback -> save as actual feedback.
-            this.feedbacks.push(feedback);
-            this.newFeedbackLines = this.newFeedbackLines.filter((l) => l !== line);
+            this.feedbackInternal.set([...this.feedbackInternal(), feedback]);
+            this.newFeedbackLines.set(this.newFeedbackLines().filter((l) => l !== line));
         }
         this.renderFeedbackWidgets();
-        this.onUpdateFeedback.emit(this.feedbacks);
+        this.onUpdateFeedback.emit(this.feedbackInternal());
     }
 
     /**
@@ -239,8 +277,8 @@ export class CodeEditorMonacoComponent implements OnChanges {
      */
     cancelFeedback(line: number) {
         // We only have to remove new feedback.
-        if (this.newFeedbackLines.includes(line)) {
-            this.newFeedbackLines = this.newFeedbackLines.filter((l) => l !== line);
+        if (this.newFeedbackLines().includes(line)) {
+            this.newFeedbackLines.set(this.newFeedbackLines().filter((l) => l !== line));
             this.renderFeedbackWidgets();
         }
     }
@@ -250,8 +288,8 @@ export class CodeEditorMonacoComponent implements OnChanges {
      * @param feedback The feedback to remove.
      */
     deleteFeedback(feedback: Feedback) {
-        this.feedbacks = this.feedbacks.filter((f) => !Feedback.areIdentical(f, feedback));
-        this.onUpdateFeedback.emit(this.feedbacks);
+        this.feedbackInternal.set(this.feedbackInternal().filter((f) => !Feedback.areIdentical(f, feedback)));
+        this.onUpdateFeedback.emit(this.feedbackInternal());
         this.renderFeedbackWidgets();
     }
 
@@ -260,7 +298,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
      * @param feedback The feedback item of the feedback suggestion.
      */
     acceptSuggestion(feedback: Feedback): void {
-        this.feedbackSuggestions = this.feedbackSuggestions.filter((f) => f !== feedback);
+        this.feedbackSuggestionsInternal.set(this.feedbackSuggestionsInternal().filter((f) => f !== feedback));
         feedback.text = (feedback.text ?? FEEDBACK_SUGGESTION_IDENTIFIER).replace(FEEDBACK_SUGGESTION_IDENTIFIER, FEEDBACK_SUGGESTION_ACCEPTED_IDENTIFIER);
         this.updateFeedback(feedback);
         this.onAcceptSuggestion.emit(feedback);
@@ -271,7 +309,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
      * @param feedback The feedback item of the feedback suggestion.
      */
     discardSuggestion(feedback: Feedback): void {
-        this.feedbackSuggestions = this.feedbackSuggestions.filter((f) => f !== feedback);
+        this.feedbackSuggestionsInternal.set(this.feedbackSuggestionsInternal().filter((f) => f !== feedback));
         this.renderFeedbackWidgets();
         this.onDiscardSuggestion.emit(feedback);
     }
@@ -285,15 +323,15 @@ export class CodeEditorMonacoComponent implements OnChanges {
         // Since the feedback widgets rely on the DOM nodes of each feedback item, Angular needs to re-render each node, hence the timeout.
         this.changeDetectorRef.detectChanges();
         setTimeout(() => {
-            this.editor.disposeWidgets();
-            for (const feedback of this.filterFeedbackForSelectedFile([...this.feedbacks, ...this.feedbackSuggestions])) {
+            this.editor().disposeWidgets();
+            for (const feedback of this.filterFeedbackForSelectedFile([...this.feedbackInternal(), ...this.feedbackSuggestionsInternal()])) {
                 this.addLineWidgetWithFeedback(feedback);
             }
 
             // New, unsaved feedback has no associated object yet.
-            for (const line of this.newFeedbackLines) {
+            for (const line of this.newFeedbackLines()) {
                 const feedbackNode = this.getInlineFeedbackNodeOrElseThrow(line);
-                this.editor.addLineWidget(line + 1, 'feedback-new-' + line, feedbackNode);
+                this.editor().addLineWidget(line + 1, 'feedback-new-' + line, feedbackNode);
             }
 
             // Focus the text area of the widget on the specified line if available.
@@ -320,7 +358,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
      * @param line The line (0-based) for which to retrieve the feedback node.
      */
     getInlineFeedbackNode(line: number): HTMLElement | undefined {
-        return [...this.inlineFeedbackComponents, ...this.inlineFeedbackSuggestionComponents].find((c) => c.codeLine === line)?.elementRef?.nativeElement;
+        return [...this.inlineFeedbackComponents(), ...this.inlineFeedbackSuggestionComponents()].find((c) => c.codeLine === line)?.elementRef?.nativeElement;
     }
 
     private addLineWidgetWithFeedback(feedback: Feedback): void {
@@ -328,10 +366,11 @@ export class CodeEditorMonacoComponent implements OnChanges {
         if (line === undefined) {
             throw new Error('No line found for feedback ' + feedback.id);
         }
-        // In the future, there may be more than one feedback node per line.
+        // TODO: In the future, there may be more than one feedback node per line. The ID should be unique.
         const feedbackNode = this.getInlineFeedbackNodeOrElseThrow(line);
         // Feedback is stored with 0-based lines, but the lines of the Monaco editor used in Artemis are 1-based. We add 1 to correct this
-        this.editor.addLineWidget(line + 1, 'feedback-' + feedback.id, feedbackNode);
+        const oneBasedLine = line + 1;
+        this.editor().addLineWidget(oneBasedLine, 'feedback-' + feedback.id + '-line-' + oneBasedLine, feedbackNode);
     }
 
     /**
@@ -339,10 +378,10 @@ export class CodeEditorMonacoComponent implements OnChanges {
      * @param feedbacks The feedbacks to filter.
      */
     filterFeedbackForSelectedFile(feedbacks: Feedback[]): Feedback[] {
-        if (!this.selectedFile) {
+        if (!this.selectedFile()) {
             return [];
         }
-        return feedbacks.filter((feedback) => feedback.reference && Feedback.getReferenceFilePath(feedback) === this.selectedFile);
+        return feedbacks.filter((feedback) => feedback.reference && Feedback.getReferenceFilePath(feedback) === this.selectedFile());
     }
 
     /**
@@ -355,7 +394,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
      */
     async onFileChange(fileChange: FileChange) {
         if (fileChange instanceof RenameFileChange) {
-            this.fileSession = this.fileService.updateFileReferences(this.fileSession, fileChange);
+            this.fileSession.set(this.fileService.updateFileReferences(this.fileSession(), fileChange));
             for (const annotation of this.annotationsArray) {
                 if (annotation.fileName === fileChange.oldFileName) {
                     annotation.fileName = fileChange.newFileName;
@@ -363,10 +402,10 @@ export class CodeEditorMonacoComponent implements OnChanges {
             }
             this.storeAnnotations([fileChange.newFileName]);
         } else if (fileChange instanceof DeleteFileChange) {
-            this.fileSession = this.fileService.updateFileReferences(this.fileSession, fileChange);
+            this.fileSession.set(this.fileService.updateFileReferences(this.fileSession(), fileChange));
             this.storeAnnotations([fileChange.fileName]);
         } else if (fileChange instanceof CreateFileChange && fileChange.fileType === FileType.FILE) {
-            this.fileSession = { ...this.fileSession, [fileChange.fileName]: { code: '', cursor: { lineNumber: 0, column: 0 }, loadingError: false } };
+            this.fileSession.set({ ...this.fileSession(), [fileChange.fileName]: { code: '', cursor: { lineNumber: 0, column: 0 }, loadingError: false } });
         }
         this.setBuildAnnotations(this.annotationsArray);
     }
@@ -396,7 +435,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
     }
 
     setBuildAnnotations(buildAnnotations: Annotation[]): void {
-        if (buildAnnotations.length > 0 && this.selectedFile) {
+        if (buildAnnotations.length > 0 && this.selectedFile()) {
             const sessionAnnotations = this.loadAnnotations();
             this.annotationsArray = buildAnnotations.map((a) => {
                 const hash = a.fileName + a.row + a.column + a.text;
@@ -409,13 +448,13 @@ export class CodeEditorMonacoComponent implements OnChanges {
         } else {
             this.annotationsArray = buildAnnotations;
         }
-        this.editor.setAnnotations(
-            buildAnnotations.filter((buildAnnotation) => buildAnnotation.fileName === this.selectedFile),
-            this.commitState === CommitState.UNCOMMITTED_CHANGES,
+        this.editor().setAnnotations(
+            buildAnnotations.filter((buildAnnotation) => buildAnnotation.fileName === this.selectedFile()),
+            this.commitState() === CommitState.UNCOMMITTED_CHANGES,
         );
     }
 
     getLineHighlights(): MonacoEditorLineHighlight[] {
-        return this.editor.getLineHighlights();
+        return this.editor().getLineHighlights();
     }
 }
diff --git a/src/test/javascript/spec/component/code-editor/code-editor-header.component.spec.ts b/src/test/javascript/spec/component/code-editor/code-editor-header.component.spec.ts
index d77f3e5fb3cd..5858695beba7 100644
--- a/src/test/javascript/spec/component/code-editor/code-editor-header.component.spec.ts
+++ b/src/test/javascript/spec/component/code-editor/code-editor-header.component.spec.ts
@@ -12,7 +12,7 @@ describe('CodeEditorHeaderComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, NgbDropdownMocksModule],
-            declarations: [CodeEditorHeaderComponent],
+            declarations: [],
             providers: [],
         })
             .compileComponents()
@@ -23,25 +23,25 @@ describe('CodeEditorHeaderComponent', () => {
     });
 
     it('should only allow tab sizes between 1 and the maximum size', () => {
-        comp.tabSize = 4;
+        fixture.componentRef.setInput('tabSize', 4);
         comp.validateTabSize();
-        expect(comp.tabSize).toBe(4);
+        expect(comp.tabSize()).toBe(4);
 
-        comp.tabSize = -1;
+        fixture.componentRef.setInput('tabSize', -1);
         comp.validateTabSize();
-        expect(comp.tabSize).toBe(1);
+        expect(comp.tabSize()).toBe(1);
 
-        comp.tabSize = MAX_TAB_SIZE + 10;
+        fixture.componentRef.setInput('tabSize', MAX_TAB_SIZE + 10);
         comp.validateTabSize();
-        expect(comp.tabSize).toBe(MAX_TAB_SIZE);
+        expect(comp.tabSize()).toBe(MAX_TAB_SIZE);
     });
 
-    it('should notify when the tab size changed', fakeAsync(() => {
-        comp.tabSizeChanged.subscribe((tabSize) => {
+    it('should notify when the tab size was validated', fakeAsync(() => {
+        comp.onValidateTabSize.subscribe((tabSize) => {
             expect(tabSize).toBe(5);
         });
 
-        comp.tabSize = 5;
+        fixture.componentRef.setInput('tabSize', 5);
         comp.validateTabSize();
 
         tick();
diff --git a/src/test/javascript/spec/component/code-editor/code-editor-monaco.component.spec.ts b/src/test/javascript/spec/component/code-editor/code-editor-monaco.component.spec.ts
index df3b885c4a93..9b658fbf5ece 100644
--- a/src/test/javascript/spec/component/code-editor/code-editor-monaco.component.spec.ts
+++ b/src/test/javascript/spec/component/code-editor/code-editor-monaco.component.spec.ts
@@ -45,27 +45,29 @@ describe('CodeEditorMonacoComponent', () => {
         },
     ];
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
             imports: [ArtemisTestModule, MonacoEditorComponent],
-            declarations: [CodeEditorMonacoComponent, MockComponent(CodeEditorTutorAssessmentInlineFeedbackComponent), MockComponent(CodeEditorHeaderComponent)],
+            declarations: [MockComponent(CodeEditorTutorAssessmentInlineFeedbackComponent), MockComponent(CodeEditorHeaderComponent)],
             providers: [
                 CodeEditorFileService,
                 { provide: CodeEditorRepositoryFileService, useClass: MockCodeEditorRepositoryFileService },
                 { provide: LocalStorageService, useClass: MockLocalStorageService },
             ],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(CodeEditorMonacoComponent);
-                comp = fixture.componentInstance;
-                codeEditorRepositoryFileService = fixture.debugElement.injector.get(CodeEditorRepositoryFileService);
-                loadFileFromRepositoryStub = jest.spyOn(codeEditorRepositoryFileService, 'getFile');
-                getInlineFeedbackNodeStub = jest.spyOn(comp, 'getInlineFeedbackNode').mockReturnValue(document.createElement('div'));
-                global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
-                    return new MockResizeObserver(callback);
-                });
-            });
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(CodeEditorMonacoComponent);
+        comp = fixture.componentInstance;
+        codeEditorRepositoryFileService = fixture.debugElement.injector.get(CodeEditorRepositoryFileService);
+        loadFileFromRepositoryStub = jest.spyOn(codeEditorRepositoryFileService, 'getFile');
+        getInlineFeedbackNodeStub = jest.spyOn(comp, 'getInlineFeedbackNode').mockReturnValue(document.createElement('div'));
+        global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
+            return new MockResizeObserver(callback);
+        });
+
+        fixture.componentRef.setInput('sessionId', 'test');
+        fixture.componentRef.setInput('commitState', CommitState.CLEAN);
+        fixture.componentRef.setInput('editorState', EditorState.CLEAN);
     });
 
     afterEach(() => {
@@ -73,7 +75,6 @@ describe('CodeEditorMonacoComponent', () => {
     });
 
     it('should hide the editor if no file is selected', () => {
-        comp.sessionId = 'test';
         fixture.detectChanges();
         const element = document.getElementById('monaco-editor-test');
         expect(element).not.toBeNull();
@@ -81,7 +82,7 @@ describe('CodeEditorMonacoComponent', () => {
     });
 
     it('should not try to load a file if none is selected', async () => {
-        const editorChangeModelSpy = jest.spyOn(comp.editor, 'changeModel');
+        const editorChangeModelSpy = jest.spyOn(comp.editor(), 'changeModel');
         fixture.detectChanges();
         await comp.selectFileInEditor(undefined);
         expect(editorChangeModelSpy).not.toHaveBeenCalled();
@@ -89,10 +90,9 @@ describe('CodeEditorMonacoComponent', () => {
     });
 
     it('should hide the editor if a file is being loaded', () => {
-        comp.sessionId = 'test';
-        comp.selectedFile = 'file';
+        fixture.componentRef.setInput('selectedFile', 'file');
         fixture.detectChanges();
-        comp.loadingCount = 1;
+        comp.loadingCount.set(1);
         fixture.detectChanges();
         const element = document.getElementById('monaco-editor-test');
         expect(element).not.toBeNull();
@@ -100,49 +100,48 @@ describe('CodeEditorMonacoComponent', () => {
     });
 
     it('should display the usable editor when a file is selected', () => {
-        comp.sessionId = 'test';
-        comp.selectedFile = 'file';
-        comp.loadingCount = 0;
-        comp.isTutorAssessment = false;
+        // Prevent loading the file
+        jest.spyOn(comp, 'selectFileInEditor').mockImplementation().mockResolvedValue(undefined);
+        fixture.componentRef.setInput('selectedFile', 'file');
+        fixture.componentRef.setInput('isTutorAssessment', false);
         fixture.detectChanges();
         const element = document.getElementById('monaco-editor-test');
         expect(element).not.toBeNull();
         expect(element!.hidden).toBeFalse();
-        expect(comp.editor.isReadOnly()).toBeFalse();
+        expect(comp.editor().isReadOnly()).toBeFalse();
     });
 
     it.each([
         [() => {}, false],
-        [() => (comp.isTutorAssessment = true), true],
-        [() => (comp.disableActions = true), true],
-        [() => (comp.commitState = CommitState.CONFLICT), true],
-        [() => (comp.selectedFile = undefined), true],
-        [() => (comp.fileSession['file'].loadingError = true), true],
+        [() => fixture.componentRef.setInput('isTutorAssessment', true), true],
+        [() => fixture.componentRef.setInput('disableActions', true), true],
+        [() => fixture.componentRef.setInput('commitState', CommitState.CONFLICT), true],
+        [() => fixture.componentRef.setInput('selectedFile', undefined), true],
+        [() => comp.fileSession.set({ ['file']: { code: '', cursor: { lineNumber: 0, column: 0 }, loadingError: true } }), true], // TODO: convert to signal
     ])('should correctly lock the editor on changes', (setup: () => void, shouldLock: boolean) => {
-        comp.selectedFile = 'file';
-        comp.fileSession = {
-            [comp.selectedFile]: { code: 'some code', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
-        };
+        fixture.componentRef.setInput('selectedFile', 'file');
+        comp.fileSession.set({
+            [comp.selectedFile()!]: { code: 'some code', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
+        });
         fixture.detectChanges();
         setup();
-        comp.ngOnChanges({});
-        expect(comp.editorLocked).toBe(shouldLock);
+        expect(comp.editorLocked()).toBe(shouldLock);
     });
 
     it('should update the file session and notify when the file content changes', () => {
         const selectedFile = 'file';
         const fileSession = {
-            [selectedFile]: { code: 'some unchanged code', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
+            [selectedFile]: { code: 'some unchanged code', cursor: { lineNumber: 1, column: 1 }, loadingError: false },
         };
         const newCode = 'some new code';
         const valueCallbackStub = jest.fn();
         comp.onFileContentChange.subscribe(valueCallbackStub);
         fixture.detectChanges();
-        comp.fileSession = fileSession;
-        comp.selectedFile = selectedFile;
+        comp.fileSession.set(fileSession);
+        fixture.componentRef.setInput('selectedFile', selectedFile);
         comp.onFileTextChanged(newCode);
         expect(valueCallbackStub).toHaveBeenCalledExactlyOnceWith({ file: selectedFile, fileContent: newCode });
-        expect(comp.fileSession).toEqual({
+        expect(comp.fileSession()).toEqual({
             [selectedFile]: { ...fileSession[selectedFile], code: newCode },
         });
     });
@@ -151,20 +150,20 @@ describe('CodeEditorMonacoComponent', () => {
         const fileToLoad = { fileName: 'file-to-load', fileContent: 'some code' };
         const loadedFileSubject = new BehaviorSubject(fileToLoad);
         loadFileFromRepositoryStub.mockReturnValue(loadedFileSubject);
-        const setPositionStub = jest.spyOn(comp.editor, 'setPosition').mockImplementation();
-        const changeModelStub = jest.spyOn(comp.editor, 'changeModel').mockImplementation();
+        const setPositionStub = jest.spyOn(comp.editor(), 'setPosition').mockImplementation();
+        const changeModelStub = jest.spyOn(comp.editor(), 'changeModel').mockImplementation();
         const presentFileName = 'present-file';
         const presentFileSession = {
             [presentFileName]: { code: 'code\ncode', cursor: { lineNumber: 1, column: 2 }, loadingError: false },
         };
         fixture.detectChanges();
-        comp.fileSession = presentFileSession;
-        comp.selectedFile = fileToLoad.fileName;
+        comp.fileSession.set(presentFileSession);
+        fixture.componentRef.setInput('selectedFile', fileToLoad.fileName);
         await comp.selectFileInEditor(fileToLoad.fileName);
-        comp.selectedFile = presentFileName;
+        fixture.componentRef.setInput('selectedFile', presentFileName);
         await comp.selectFileInEditor(presentFileName);
         expect(loadFileFromRepositoryStub).toHaveBeenCalledExactlyOnceWith(fileToLoad.fileName);
-        expect(comp.fileSession).toEqual({
+        expect(comp.fileSession()).toEqual({
             ...presentFileSession,
             [fileToLoad.fileName]: { code: fileToLoad.fileContent, cursor: { column: 0, lineNumber: 0 }, loadingError: false },
         });
@@ -178,25 +177,25 @@ describe('CodeEditorMonacoComponent', () => {
         const fileSession = { [fileToLoad.fileName]: { code: '', loadingError: true, cursor: { lineNumber: 0, column: 0 } } };
         const loadedFileSubject = new BehaviorSubject(fileToLoad);
         loadFileFromRepositoryStub.mockReturnValue(loadedFileSubject);
-        comp.fileSession = fileSession;
-        comp.selectedFile = fileToLoad.fileName;
+        comp.fileSession.set(fileSession);
+        fixture.componentRef.setInput('selectedFile', fileToLoad.fileName);
         fixture.detectChanges();
-        await comp.ngOnChanges({ selectedFile: new SimpleChange(undefined, fileToLoad, false) });
+        await new Promise(process.nextTick);
         expect(loadFileFromRepositoryStub).toHaveBeenCalledOnce();
-        expect(comp.fileSession).toEqual({ [fileToLoad.fileName]: { code: fileToLoad.fileContent, loadingError: false, cursor: { lineNumber: 0, column: 0 } } });
+        expect(comp.fileSession()).toEqual({ [fileToLoad.fileName]: { code: fileToLoad.fileContent, loadingError: false, cursor: { lineNumber: 0, column: 0 } } });
     });
 
     it('should not load binaries into the editor', async () => {
-        const changeModelSpy = jest.spyOn(comp.editor, 'changeModel');
+        const changeModelSpy = jest.spyOn(comp.editor(), 'changeModel');
         const fileName = 'file-to-load';
-        comp.fileSession = {
+        comp.fileSession.set({
             [fileName]: { code: '\0\0\0\0 (binary content)', loadingError: false, cursor: { lineNumber: 0, column: 0 } },
-        };
+        });
         fixture.detectChanges();
-        comp.selectedFile = fileName;
+        fixture.componentRef.setInput('selectedFile', fileName);
         await comp.selectFileInEditor(fileName);
         expect(changeModelSpy).not.toHaveBeenCalled();
-        expect(comp.binaryFileSelected).toBeTrue();
+        expect(comp.binaryFileSelected()).toBeTrue();
     });
 
     it.each([
@@ -208,46 +207,45 @@ describe('CodeEditorMonacoComponent', () => {
         const loadFileSubject = new BehaviorSubject(fileToLoad);
         loadFileFromRepositoryStub.mockReturnValue(loadFileSubject);
         loadFileSubject.error(error);
-        comp.fileSession = {};
-        comp.selectedFile = fileToLoad.fileName;
+        comp.fileSession.set({});
+        fixture.componentRef.setInput('selectedFile', fileToLoad.fileName);
         comp.onError.subscribe(errorCallbackStub);
         fixture.detectChanges();
-        await comp.ngOnChanges({ selectedFile: new SimpleChange(undefined, fileToLoad.fileName, false) });
+        await new Promise(process.nextTick);
         expect(loadFileFromRepositoryStub).toHaveBeenCalledOnce();
         expect(errorCallbackStub).toHaveBeenCalledExactlyOnceWith(errorCode);
-        expect(comp.fileSession).toEqual({ [fileToLoad.fileName]: { code: '', loadingError: true, cursor: { lineNumber: 0, column: 0 } } });
+        expect(comp.fileSession()).toEqual({ [fileToLoad.fileName]: { code: '', loadingError: true, cursor: { lineNumber: 0, column: 0 } } });
     });
 
     it('should discard local changes when the editor is refreshed', async () => {
         const fileToReload = { fileName: 'file-to-reload', fileContent: 'some remote code' };
-        const editorResetStub = jest.spyOn(comp.editor, 'reset').mockImplementation();
+        const editorResetStub = jest.spyOn(comp.editor(), 'reset').mockImplementation();
         const reloadedFileSubject = new BehaviorSubject(fileToReload);
         loadFileFromRepositoryStub.mockReturnValue(reloadedFileSubject);
-        comp.selectedFile = fileToReload.fileName;
-        comp.fileSession = {
+        fixture.componentRef.setInput('selectedFile', fileToReload.fileName);
+        comp.fileSession.set({
             [fileToReload.fileName]: { code: 'some local undiscarded changes', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
-        };
-        comp.editorState = EditorState.CLEAN;
-        fixture.detectChanges();
+        });
+        fixture.componentRef.setInput('editorState', EditorState.CLEAN);
         // Simulate a refresh of the editor.
         await comp.ngOnChanges({ editorState: new SimpleChange(EditorState.REFRESHING, EditorState.CLEAN, false) });
-        expect(comp.fileSession).toEqual({
+        expect(comp.fileSession()).toEqual({
             [fileToReload.fileName]: { code: fileToReload.fileContent, cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         });
         expect(editorResetStub).toHaveBeenCalledOnce();
     });
 
     it('should only load the currently selected file', async () => {
-        const changeModelSpy = jest.spyOn(comp.editor, 'changeModel');
+        const changeModelSpy = jest.spyOn(comp.editor(), 'changeModel');
         // Occurs when the first file load takes a while, but the user has already selected another file.
-        comp.fileSession = { ['file2']: { code: 'code2', cursor: { lineNumber: 0, column: 0 }, loadingError: false } };
+        comp.fileSession.set({ ['file2']: { code: 'code2', cursor: { lineNumber: 0, column: 0 }, loadingError: false } });
         fixture.detectChanges();
-        comp.selectedFile = 'file1';
+        fixture.componentRef.setInput('selectedFile', 'file1');
         const longLoadingFileSubject = new Subject();
         loadFileFromRepositoryStub.mockReturnValue(longLoadingFileSubject);
         // We do not await the promise here, as we want to simulate the user selecting another file while the first one is still loading.
         const firstFileChange = comp.selectFileInEditor('file1');
-        comp.selectedFile = 'file2';
+        fixture.componentRef.setInput('selectedFile', 'file2');
         await comp.selectFileInEditor('file2');
         longLoadingFileSubject.next({ fileName: 'file1', fileContent: 'some code that took a while to retrieve' });
         await firstFileChange;
@@ -255,22 +253,22 @@ describe('CodeEditorMonacoComponent', () => {
     });
 
     it('should use the code and cursor position of the selected file', async () => {
-        const setPositionStub = jest.spyOn(comp.editor, 'setPosition').mockImplementation();
-        const changeModelStub = jest.spyOn(comp.editor, 'changeModel').mockImplementation();
+        const setPositionStub = jest.spyOn(comp.editor(), 'setPosition').mockImplementation();
+        const changeModelStub = jest.spyOn(comp.editor(), 'changeModel').mockImplementation();
         fixture.detectChanges();
         const selectedFile = 'file1';
         const fileSession = {
             [selectedFile]: { code: 'code\ncode', cursor: { lineNumber: 1, column: 2 }, loadingError: false },
         };
-        comp.fileSession = fileSession;
-        comp.selectedFile = selectedFile;
+        comp.fileSession.set(fileSession);
+        fixture.componentRef.setInput('selectedFile', selectedFile);
         await comp.selectFileInEditor(selectedFile);
         expect(setPositionStub).toHaveBeenCalledExactlyOnceWith(fileSession[selectedFile].cursor);
         expect(changeModelStub).toHaveBeenCalledExactlyOnceWith(selectedFile, fileSession[selectedFile].code);
     });
 
     it('should display build annotations for the current file', async () => {
-        const setAnnotationsStub = jest.spyOn(comp.editor, 'setAnnotations').mockImplementation();
+        const setAnnotationsStub = jest.spyOn(comp.editor(), 'setAnnotations').mockImplementation();
         const selectFileInEditorStub = jest.spyOn(comp, 'selectFileInEditor').mockImplementation();
         const buildAnnotations: Annotation[] = [
             {
@@ -292,25 +290,28 @@ describe('CodeEditorMonacoComponent', () => {
                 column: 1,
             },
         ];
-        comp.annotationsArray = buildAnnotations;
-        comp.selectedFile = 'file1';
+        fixture.componentRef.setInput('buildAnnotations', buildAnnotations);
+        fixture.componentRef.setInput('selectedFile', 'file1');
         fixture.detectChanges();
-        await comp.ngOnChanges({ selectedFile: new SimpleChange(undefined, 'file1', false) });
-        comp.selectedFile = 'file2';
+        await new Promise(process.nextTick);
+        fixture.componentRef.setInput('selectedFile', 'file2');
         fixture.detectChanges();
-        await comp.ngOnChanges({ selectedFile: new SimpleChange('file1', 'file2', false) });
-        expect(setAnnotationsStub).toHaveBeenCalledTimes(2);
+        await new Promise(process.nextTick); // TODO: make this reusable
+        // 3 calls: construction (effect), file1, file2
+        expect(setAnnotationsStub).toHaveBeenCalledTimes(3);
         expect(selectFileInEditorStub).toHaveBeenCalledTimes(2);
         expect(setAnnotationsStub).toHaveBeenNthCalledWith(1, [buildAnnotations[0]], false);
-        expect(setAnnotationsStub).toHaveBeenNthCalledWith(2, [buildAnnotations[1]], false);
+        expect(setAnnotationsStub).toHaveBeenNthCalledWith(2, [buildAnnotations[0]], false);
+        expect(setAnnotationsStub).toHaveBeenNthCalledWith(3, [buildAnnotations[1]], false);
     });
 
     it('should display feedback when viewing a tutor assessment', fakeAsync(() => {
-        const addLineWidgetStub = jest.spyOn(comp.editor, 'addLineWidget').mockImplementation();
+        const addLineWidgetStub = jest.spyOn(comp.editor(), 'addLineWidget').mockImplementation();
         const selectFileInEditorStub = jest.spyOn(comp, 'selectFileInEditor').mockImplementation();
-        comp.isTutorAssessment = true;
-        comp.selectedFile = 'file1.java';
-        comp.feedbacks = exampleFeedbacks;
+        fixture.componentRef.setInput('isTutorAssessment', true);
+        fixture.componentRef.setInput('selectedFile', 'file1.java');
+        fixture.componentRef.setInput('feedbacks', exampleFeedbacks);
+        TestBed.flushEffects();
         fixture.detectChanges();
         // Use .then() here instead of await so fakeAsync does not break.
         comp.ngOnChanges({ selectedFile: new SimpleChange(undefined, 'file1', false) }).then(() => {
@@ -328,14 +329,14 @@ describe('CodeEditorMonacoComponent', () => {
         // Feedback is stored as 0-based line numbers, but the editor requires 1-based line numbers.
         const feedbackLineOneBased = 3;
         const feedbackLineZeroBased = feedbackLineOneBased - 1;
-        const addLineWidgetStub = jest.spyOn(comp.editor, 'addLineWidget').mockImplementation();
+        const addLineWidgetStub = jest.spyOn(comp.editor(), 'addLineWidget').mockImplementation();
         const element = document.createElement('div');
         getInlineFeedbackNodeStub.mockReturnValue(undefined);
         fixture.detectChanges();
         // Simulate adding the element
         comp.addNewFeedback(feedbackLineOneBased);
         getInlineFeedbackNodeStub.mockReturnValue(element);
-        expect(comp.newFeedbackLines).toEqual([feedbackLineZeroBased]);
+        expect(comp.newFeedbackLines()).toEqual([feedbackLineZeroBased]);
         tick(1);
         expect(addLineWidgetStub).toHaveBeenCalledExactlyOnceWith(feedbackLineOneBased, `feedback-new-${feedbackLineZeroBased}`, element);
     }));
@@ -345,19 +346,19 @@ describe('CodeEditorMonacoComponent', () => {
         const remainingFeedbacks = exampleFeedbacks.slice(1);
         const updateFeedbackCallbackStub = jest.fn();
         comp.onUpdateFeedback.subscribe(updateFeedbackCallbackStub);
-        comp.feedbacks = [...exampleFeedbacks];
+        fixture.componentRef.setInput('feedbacks', [...exampleFeedbacks]);
         fixture.detectChanges();
         comp.deleteFeedback(feedbackToDelete);
-        expect(comp.feedbacks).toEqual(remainingFeedbacks);
+        expect(comp.feedbackInternal()).toEqual(remainingFeedbacks);
         expect(updateFeedbackCallbackStub).toHaveBeenCalledExactlyOnceWith(remainingFeedbacks);
     });
 
     it('should delete unsaved feedback', () => {
         const feedbackLine = 1;
-        comp.newFeedbackLines = [feedbackLine, 2, 3];
+        comp.newFeedbackLines.set([feedbackLine, 2, 3]);
         fixture.detectChanges();
         comp.cancelFeedback(feedbackLine);
-        expect(comp.newFeedbackLines).toEqual([2, 3]);
+        expect(comp.newFeedbackLines()).toEqual([2, 3]);
     });
 
     it('should update existing feedback and notify', () => {
@@ -366,12 +367,13 @@ describe('CodeEditorMonacoComponent', () => {
         const updateFeedbackCallbackStub = jest.fn();
         comp.onUpdateFeedback.subscribe(updateFeedbackCallbackStub);
         // Copy the original example feedback in to ensure changes here do not affect the component.
-        comp.feedbacks = [...exampleFeedbacks];
+        fixture.componentRef.setInput('feedbacks', [...exampleFeedbacks]);
+        TestBed.flushEffects();
         fixture.detectChanges();
         feedbackToUpdate.text = 'some other text';
         comp.updateFeedback(feedbackToUpdate);
         const expectedFeedbacks = [feedbackToUpdate, ...remainingFeedbacks];
-        expect(comp.feedbacks).toEqual(expectedFeedbacks);
+        expect(comp.feedbackInternal()).toEqual(expectedFeedbacks);
         expect(updateFeedbackCallbackStub).toHaveBeenCalledExactlyOnceWith(expectedFeedbacks);
     });
 
@@ -381,14 +383,15 @@ describe('CodeEditorMonacoComponent', () => {
         const newFeedbackLine = 1;
         const updateFeedbackCallbackStub = jest.fn();
         comp.onUpdateFeedback.subscribe(updateFeedbackCallbackStub);
-        comp.newFeedbackLines = [newFeedbackLine];
-        comp.feedbacks = [...remainingFeedbacks];
+        comp.newFeedbackLines.set([newFeedbackLine]);
+        fixture.componentRef.setInput('feedbacks', [...remainingFeedbacks]);
+        TestBed.flushEffects();
         fixture.detectChanges();
         comp.updateFeedback(feedbackToSave);
         const expectedFeedbacks = [...remainingFeedbacks, feedbackToSave];
-        expect(comp.feedbacks).toEqual(expectedFeedbacks);
+        expect(comp.feedbackInternal()).toEqual(expectedFeedbacks);
         // The feedback has been saved -> no longer new
-        expect(comp.newFeedbackLines).toHaveLength(0);
+        expect(comp.newFeedbackLines()).toHaveLength(0);
         expect(updateFeedbackCallbackStub).toHaveBeenCalledExactlyOnceWith(expectedFeedbacks);
     });
 
@@ -396,11 +399,12 @@ describe('CodeEditorMonacoComponent', () => {
         const updateFeedbackStub = jest.spyOn(comp, 'updateFeedback').mockImplementation();
         const acceptSuggestionCallbackStub = jest.fn();
         const suggestionToAccept: Feedback = exampleFeedbacks[0];
-        comp.feedbackSuggestions = [suggestionToAccept];
+        fixture.componentRef.setInput('feedbackSuggestions', [suggestionToAccept]);
+        TestBed.flushEffects();
         comp.onAcceptSuggestion.subscribe(acceptSuggestionCallbackStub);
         fixture.detectChanges();
         comp.acceptSuggestion(suggestionToAccept);
-        expect(comp.feedbackSuggestions).toHaveLength(0);
+        expect(comp.feedbackSuggestionsInternal()).toHaveLength(0);
         expect(updateFeedbackStub).toHaveBeenCalledExactlyOnceWith(suggestionToAccept);
         expect(acceptSuggestionCallbackStub).toHaveBeenCalledExactlyOnceWith(suggestionToAccept);
     });
@@ -408,11 +412,12 @@ describe('CodeEditorMonacoComponent', () => {
     it('should correctly discard a suggestion and notify', () => {
         const discardSuggestionCallbackStub = jest.fn();
         const suggestionToDiscard = exampleFeedbacks[0];
-        comp.feedbackSuggestions = [suggestionToDiscard];
+        fixture.componentRef.setInput('feedbackSuggestions', [suggestionToDiscard]);
+        TestBed.flushEffects();
         comp.onDiscardSuggestion.subscribe(discardSuggestionCallbackStub);
         fixture.detectChanges();
         comp.discardSuggestion(suggestionToDiscard);
-        expect(comp.feedbackSuggestions).toHaveLength(0);
+        expect(comp.feedbackSuggestionsInternal()).toHaveLength(0);
         expect(discardSuggestionCallbackStub).toHaveBeenCalledExactlyOnceWith(suggestionToDiscard);
     });
 
@@ -425,10 +430,10 @@ describe('CodeEditorMonacoComponent', () => {
             [otherFileName]: { code: 'unrelated', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         fixture.detectChanges();
-        comp.fileSession = { ...fileSession };
+        comp.fileSession.set({ ...fileSession });
         const renameFileChange = new RenameFileChange(FileType.FILE, oldFileName, newFileName);
         await comp.onFileChange(renameFileChange);
-        expect(comp.fileSession).toEqual({
+        expect(comp.fileSession()).toEqual({
             [newFileName]: fileSession[oldFileName],
             [otherFileName]: fileSession[otherFileName],
         });
@@ -442,10 +447,10 @@ describe('CodeEditorMonacoComponent', () => {
             [otherFileName]: { code: 'unrelated', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         fixture.detectChanges();
-        comp.fileSession = { ...fileSession };
+        comp.fileSession.set({ ...fileSession });
         const deleteFileChange = new DeleteFileChange(FileType.FILE, fileToDeleteName);
         await comp.onFileChange(deleteFileChange);
-        expect(comp.fileSession).toEqual({
+        expect(comp.fileSession()).toEqual({
             [otherFileName]: fileSession[otherFileName],
         });
     });
@@ -457,17 +462,17 @@ describe('CodeEditorMonacoComponent', () => {
             [otherFileName]: { code: 'unrelated', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         fixture.detectChanges();
-        comp.fileSession = { ...fileSession };
+        comp.fileSession.set({ ...fileSession });
         const createFileChange = new CreateFileChange(FileType.FILE, fileToCreateName);
         await comp.onFileChange(createFileChange);
-        expect(comp.fileSession).toEqual({
+        expect(comp.fileSession()).toEqual({
             [otherFileName]: fileSession[otherFileName],
             [fileToCreateName]: { code: '', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         });
     });
 
     it('should use the correct class to highlight lines', () => {
-        const highlightStub = jest.spyOn(comp.editor, 'highlightLines').mockImplementation();
+        const highlightStub = jest.spyOn(comp.editor(), 'highlightLines').mockImplementation();
         fixture.detectChanges();
         comp.highlightLines(1, 2);
         expect(highlightStub).toHaveBeenCalledExactlyOnceWith(1, 2, CodeEditorMonacoComponent.CLASS_DIFF_LINE_HIGHLIGHT);
diff --git a/src/test/javascript/spec/component/programming-assessment/code-editor-tutor-assessment-container.component.spec.ts b/src/test/javascript/spec/component/programming-assessment/code-editor-tutor-assessment-container.component.spec.ts
index 4177be93e1d9..77af7a04d881 100644
--- a/src/test/javascript/spec/component/programming-assessment/code-editor-tutor-assessment-container.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-assessment/code-editor-tutor-assessment-container.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { DebugElement } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, of, throwError } from 'rxjs';
+import { outputToObservable } from '@angular/core/rxjs-interop';
 import { ArtemisTestModule } from '../../test.module';
 import { ParticipationWebsocketService } from 'app/overview/participation-websocket.service';
 import { MockSyncStorage } from '../../helpers/mocks/service/mock-sync-storage.service';
@@ -69,9 +70,10 @@ import { AthenaService } from 'app/assessment/athena.service';
 import { MockResizeObserver } from '../../helpers/mocks/service/mock-resize-observer';
 import { EntityResponseType } from 'app/exercises/shared/result/result.service';
 import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
-import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 import dayjs from 'dayjs/esm';
 import { MonacoEditorLineHighlight } from 'app/shared/monaco-editor/model/monaco-editor-line-highlight.model';
+import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
+import { CodeEditorHeaderComponent } from 'app/exercises/programming/shared/code-editor/header/code-editor-header.component';
 
 function addFeedbackAndValidateScore(comp: CodeEditorTutorAssessmentContainerComponent, pointsAwarded: number, scoreExpected: number) {
     comp.unreferencedFeedback.push({
@@ -172,7 +174,7 @@ describe('CodeEditorTutorAssessmentContainerComponent', () => {
 
     beforeEach(() => {
         return TestBed.configureTestingModule({
-            imports: [ArtemisTestModule],
+            imports: [ArtemisTestModule, CodeEditorMonacoComponent],
             declarations: [
                 CodeEditorTutorAssessmentContainerComponent,
                 MockComponent(ProgrammingAssessmentRepoExportButtonComponent),
@@ -192,8 +194,6 @@ describe('CodeEditorTutorAssessmentContainerComponent', () => {
                 MockComponent(CodeEditorGridComponent),
                 MockComponent(CodeEditorActionsComponent),
                 MockComponent(CodeEditorTutorAssessmentInlineFeedbackComponent),
-                CodeEditorMonacoComponent,
-                MonacoEditorComponent,
                 MockComponent(CodeEditorInstructionsComponent),
                 MockComponent(ResultComponent),
                 MockComponent(IncludedInScoreBadgeComponent),
@@ -215,6 +215,7 @@ describe('CodeEditorTutorAssessmentContainerComponent', () => {
                 MockProvider(ProfileService, { getProfileInfo: () => of({ activeProfiles: [] }) }, 'useValue'),
             ],
         })
+            .overrideComponent(CodeEditorMonacoComponent, { set: { imports: [MonacoEditorComponent, MockComponent(CodeEditorHeaderComponent)] } })
             .compileComponents()
             .then(() => {
                 // Ignore console errors
@@ -303,8 +304,8 @@ describe('CodeEditorTutorAssessmentContainerComponent', () => {
         expect(browserComponent.filesTreeViewItem).toHaveLength(1);
 
         const codeEditorMonacoComp: CodeEditorMonacoComponent = fixture.debugElement.query(By.directive(CodeEditorMonacoComponent)).componentInstance;
-        codeEditorMonacoComp.loadingCount = 0;
-        const highlightedLines: MonacoEditorLineHighlight[] = await firstValueFrom(codeEditorMonacoComp.onHighlightLines);
+        codeEditorMonacoComp.loadingCount.set(0);
+        const highlightedLines: MonacoEditorLineHighlight[] = await firstValueFrom(outputToObservable(codeEditorMonacoComp.onHighlightLines));
         expect(highlightedLines).toHaveLength(1);
 
         getFilesWithContentStub.mockRestore();
diff --git a/src/test/javascript/spec/helpers/mocks/mock-instance.helper.ts b/src/test/javascript/spec/helpers/mocks/mock-instance.helper.ts
new file mode 100644
index 000000000000..8f7c213e5f6b
--- /dev/null
+++ b/src/test/javascript/spec/helpers/mocks/mock-instance.helper.ts
@@ -0,0 +1,21 @@
+import { MockInstance } from 'ng-mocks';
+import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
+import { signal } from '@angular/core';
+
+/*
+ * This file contains mock instances for the tests where they would otherwise fail due to the use of a signal-based viewChild or contentChild with MockComponent(SomeComponent).
+ * This is a workaround for https://github.com/help-me-mom/ng-mocks/issues/8634. Once the issue is resolved, this file and the functions it defines can be removed.
+ */
+
+/**
+ * Overwrites the signal-based viewChild queries of the CodeEditorMonacoComponent so it can be mocked using MockComponent.
+ * Workaround for https://github.com/help-me-mom/ng-mocks/issues/8634.
+ */
+export function mockCodeEditorMonacoViewChildren() {
+    MockInstance.scope('case');
+    MockInstance(CodeEditorMonacoComponent, () => ({
+        editor: signal<any>({}),
+        inlineFeedbackComponents: signal<any[]>([]),
+        inlineFeedbackSuggestionComponents: signal<any[]>([]),
+    }));
+}
diff --git a/src/test/javascript/spec/integration/code-editor/code-editor-container.integration.spec.ts b/src/test/javascript/spec/integration/code-editor/code-editor-container.integration.spec.ts
index d55cc49a6983..5d02812f588b 100644
--- a/src/test/javascript/spec/integration/code-editor/code-editor-container.integration.spec.ts
+++ b/src/test/javascript/spec/integration/code-editor/code-editor-container.integration.spec.ts
@@ -5,7 +5,7 @@ import { DebugElement } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { NgModel } from '@angular/forms';
 import { NgbDropdown, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { BehaviorSubject, Subject, of } from 'rxjs';
+import { BehaviorSubject, Subject, firstValueFrom, of } from 'rxjs';
 import { ArtemisTestModule } from '../../test.module';
 import { ParticipationWebsocketService } from 'app/overview/participation-websocket.service';
 import { ProgrammingExerciseParticipationService } from 'app/exercises/programming/manage/services/programming-exercise-participation.service';
@@ -99,14 +99,13 @@ describe('CodeEditorContainerIntegration', () => {
 
     const result = { id: 3, successful: false, completionDate: dayjs().subtract(2, 'days') };
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, MonacoEditorComponent, MockDirective(NgbDropdown), MockModule(NgbTooltipModule)],
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ArtemisTestModule, CodeEditorMonacoComponent, MockDirective(NgbDropdown), MockModule(NgbTooltipModule)],
             declarations: [
                 CodeEditorContainerComponent,
                 MockComponent(CodeEditorGridComponent),
                 MockComponent(CodeEditorInstructionsComponent),
-                MockComponent(CodeEditorHeaderComponent),
                 KeysPipe,
                 MockDirective(FeatureToggleDirective),
                 MockDirective(FeatureToggleLinkDirective),
@@ -115,7 +114,6 @@ describe('CodeEditorContainerIntegration', () => {
                 CodeEditorActionsComponent,
                 CodeEditorFileBrowserComponent,
                 CodeEditorBuildOutputComponent,
-                CodeEditorMonacoComponent,
                 MockComponent(CodeEditorFileBrowserCreateNodeComponent),
                 MockComponent(CodeEditorFileBrowserFolderComponent),
                 MockComponent(CodeEditorFileBrowserFileComponent),
@@ -143,44 +141,44 @@ describe('CodeEditorContainerIntegration', () => {
                 { provide: ProgrammingSubmissionService, useClass: MockProgrammingSubmissionService },
             ],
         })
-            .compileComponents()
-            .then(() => {
-                containerFixture = TestBed.createComponent(CodeEditorContainerComponent);
-                container = containerFixture.componentInstance;
-                containerDebugElement = containerFixture.debugElement;
-                guidedTourService = TestBed.inject(GuidedTourService);
-
-                const codeEditorRepositoryService = containerDebugElement.injector.get(CodeEditorRepositoryService);
-                const codeEditorRepositoryFileService = containerDebugElement.injector.get(CodeEditorRepositoryFileService);
-                const participationWebsocketService = containerDebugElement.injector.get(ParticipationWebsocketService);
-                const resultService = containerDebugElement.injector.get(ResultService);
-                const buildLogService = containerDebugElement.injector.get(CodeEditorBuildLogService);
-                const programmingExerciseParticipationService = containerDebugElement.injector.get(ProgrammingExerciseParticipationService);
-                conflictService = containerDebugElement.injector.get(CodeEditorConflictStateService);
-                domainService = containerDebugElement.injector.get(DomainService);
-                const submissionService = containerDebugElement.injector.get(ProgrammingSubmissionService);
-
-                subscribeForLatestResultOfParticipationSubject = new BehaviorSubject<Result | undefined>(undefined);
-
-                getLatestPendingSubmissionSubject = new Subject<ProgrammingSubmissionStateObj>();
-
-                checkIfRepositoryIsCleanStub = jest.spyOn(codeEditorRepositoryService, 'getStatus');
-                getRepositoryContentStub = jest.spyOn(codeEditorRepositoryFileService, 'getRepositoryContent');
-                subscribeForLatestResultOfParticipationStub = jest
-                    .spyOn(participationWebsocketService, 'subscribeForLatestResultOfParticipation')
-                    .mockReturnValue(subscribeForLatestResultOfParticipationSubject);
-                getFeedbackDetailsForResultStub = jest.spyOn(resultService, 'getFeedbackDetailsForResult');
-                getBuildLogsStub = jest.spyOn(buildLogService, 'getBuildLogs');
-                getFileStub = jest.spyOn(codeEditorRepositoryFileService, 'getFile');
-                saveFilesStub = jest.spyOn(codeEditorRepositoryFileService, 'updateFiles');
-                commitStub = jest.spyOn(codeEditorRepositoryService, 'commit');
-                getStudentParticipationWithLatestResultStub = jest.spyOn(programmingExerciseParticipationService, 'getStudentParticipationWithLatestResult');
-                getLatestPendingSubmissionStub = jest.spyOn(submissionService, 'getLatestPendingSubmissionByParticipationId').mockReturnValue(getLatestPendingSubmissionSubject);
-                // Mock the ResizeObserver, which is not available in the test environment
-                global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
-                    return new MockResizeObserver(callback);
-                });
-            });
+            .overrideComponent(CodeEditorMonacoComponent, { set: { imports: [MonacoEditorComponent, MockComponent(CodeEditorHeaderComponent)] } })
+            .compileComponents();
+
+        containerFixture = TestBed.createComponent(CodeEditorContainerComponent);
+        container = containerFixture.componentInstance;
+        containerDebugElement = containerFixture.debugElement;
+        guidedTourService = TestBed.inject(GuidedTourService);
+
+        const codeEditorRepositoryService = containerDebugElement.injector.get(CodeEditorRepositoryService);
+        const codeEditorRepositoryFileService = containerDebugElement.injector.get(CodeEditorRepositoryFileService);
+        const participationWebsocketService = containerDebugElement.injector.get(ParticipationWebsocketService);
+        const resultService = containerDebugElement.injector.get(ResultService);
+        const buildLogService = containerDebugElement.injector.get(CodeEditorBuildLogService);
+        const programmingExerciseParticipationService = containerDebugElement.injector.get(ProgrammingExerciseParticipationService);
+        conflictService = containerDebugElement.injector.get(CodeEditorConflictStateService);
+        domainService = containerDebugElement.injector.get(DomainService);
+        const submissionService = containerDebugElement.injector.get(ProgrammingSubmissionService);
+
+        subscribeForLatestResultOfParticipationSubject = new BehaviorSubject<Result | undefined>(undefined);
+
+        getLatestPendingSubmissionSubject = new Subject<ProgrammingSubmissionStateObj>();
+
+        checkIfRepositoryIsCleanStub = jest.spyOn(codeEditorRepositoryService, 'getStatus');
+        getRepositoryContentStub = jest.spyOn(codeEditorRepositoryFileService, 'getRepositoryContent');
+        subscribeForLatestResultOfParticipationStub = jest
+            .spyOn(participationWebsocketService, 'subscribeForLatestResultOfParticipation')
+            .mockReturnValue(subscribeForLatestResultOfParticipationSubject);
+        getFeedbackDetailsForResultStub = jest.spyOn(resultService, 'getFeedbackDetailsForResult');
+        getBuildLogsStub = jest.spyOn(buildLogService, 'getBuildLogs');
+        getFileStub = jest.spyOn(codeEditorRepositoryFileService, 'getFile');
+        saveFilesStub = jest.spyOn(codeEditorRepositoryFileService, 'updateFiles');
+        commitStub = jest.spyOn(codeEditorRepositoryService, 'commit');
+        getStudentParticipationWithLatestResultStub = jest.spyOn(programmingExerciseParticipationService, 'getStudentParticipationWithLatestResult');
+        getLatestPendingSubmissionStub = jest.spyOn(submissionService, 'getLatestPendingSubmissionByParticipationId').mockReturnValue(getLatestPendingSubmissionSubject);
+        // Mock the ResizeObserver, which is not available in the test environment
+        global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
+            return new MockResizeObserver(callback);
+        });
     });
 
     afterEach(() => {
@@ -232,8 +230,8 @@ describe('CodeEditorContainerIntegration', () => {
         expect(container.fileBrowser.unsavedFiles).toHaveLength(0);
 
         // monaco editor
-        expect(container.monacoEditor.loadingCount).toBe(0);
-        expect(container.monacoEditor.commitState).toBe(CommitState.CLEAN);
+        expect(container.monacoEditor.loadingCount()).toBe(0);
+        expect(container.monacoEditor.commitState()).toBe(CommitState.CLEAN);
 
         // actions
         expect(container.actions.commitState).toBe(CommitState.CLEAN);
@@ -307,9 +305,9 @@ describe('CodeEditorContainerIntegration', () => {
         expect(container.fileBrowser.unsavedFiles).toHaveLength(0);
 
         // monaco editor
-        expect(container.monacoEditor.loadingCount).toBe(0);
+        expect(container.monacoEditor.loadingCount()).toBe(0);
         expect(container.monacoEditor.annotationsArray?.map((a) => omit(a, 'hash'))).toEqual(extractedBuildLogErrors);
-        expect(container.monacoEditor.commitState).toBe(CommitState.COULD_NOT_BE_RETRIEVED);
+        expect(container.monacoEditor.commitState()).toBe(CommitState.COULD_NOT_BE_RETRIEVED);
 
         // actions
         expect(container.actions.commitState).toBe(CommitState.COULD_NOT_BE_RETRIEVED);
@@ -345,9 +343,9 @@ describe('CodeEditorContainerIntegration', () => {
 
         containerFixture.detectChanges();
         expect(container.selectedFile).toBe(selectedFile);
-        expect(container.monacoEditor.selectedFile).toBe(selectedFile);
-        expect(container.monacoEditor.loadingCount).toBe(0);
-        expect(container.monacoEditor.fileSession).toContainKey(selectedFile);
+        expect(container.monacoEditor.selectedFile()).toBe(selectedFile);
+        expect(container.monacoEditor.loadingCount()).toBe(0);
+        expect(container.monacoEditor.fileSession()).toContainKey(selectedFile);
         expect(getFileStub).toHaveBeenCalledOnce();
         expect(getFileStub).toHaveBeenCalledWith(selectedFile);
 
@@ -462,7 +460,7 @@ describe('CodeEditorContainerIntegration', () => {
         expect(container.fileBrowser.errorFiles).toHaveLength(0);
     });
 
-    it('should first save unsaved files before triggering commit', fakeAsync(() => {
+    it('should first save unsaved files before triggering commit', async () => {
         cleanInitialize();
         const successfulSubmission = { id: 1, buildFailed: false } as ProgrammingSubmission;
         const successfulResult = { id: 4, successful: true, feedbacks: [] as Feedback[], participation: { id: 3 } } as Result;
@@ -498,8 +496,10 @@ describe('CodeEditorContainerIntegration', () => {
             submission: {} as ProgrammingSubmission,
             participationId: successfulResult!.participation!.id!,
         });
+
+        // Commit state should change asynchronously
         containerFixture.detectChanges();
-        tick();
+        await firstValueFrom(container.actions.commitStateChange);
 
         // waiting for build result
         expect(container.commitState).toBe(CommitState.CLEAN);
@@ -517,8 +517,7 @@ describe('CodeEditorContainerIntegration', () => {
         expect(container.fileBrowser.errorFiles).toHaveLength(0);
 
         containerFixture.destroy();
-        flush();
-    }));
+    });
 
     it('should enter conflict mode if a git conflict between local and remote arises', fakeAsync(() => {
         const guidedTourMapping = {} as GuidedTourMapping;
diff --git a/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts b/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
index 294c3d3a9a4e..c3cb01c72352 100644
--- a/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
+++ b/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
@@ -65,6 +65,7 @@ import { CourseExerciseService } from 'app/exercises/shared/course-exercises/cou
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { mockCodeEditorMonacoViewChildren } from '../../helpers/mocks/mock-instance.helper';
 
 describe('CodeEditorInstructorIntegration', () => {
     let container: CodeEditorInstructorAndEditorContainerComponent;
@@ -87,6 +88,9 @@ describe('CodeEditorInstructorIntegration', () => {
     let findWithParticipationsSubject: Subject<{ body: ProgrammingExercise }>;
     let routeSubject: Subject<Params>;
 
+    // Workaround for an error with MockComponent(). You can remove this once https://github.com/help-me-mom/ng-mocks/issues/8634 is resolved.
+    mockCodeEditorMonacoViewChildren();
+
     beforeEach(() => {
         return TestBed.configureTestingModule({
             imports: [TranslateModule.forRoot(), ArtemisTestModule, MockModule(NgbTooltipModule)],
diff --git a/src/test/javascript/spec/integration/code-editor/code-editor-student.integration.spec.ts b/src/test/javascript/spec/integration/code-editor/code-editor-student.integration.spec.ts
index dabf4a7e1d34..5df8e8e32ce3 100644
--- a/src/test/javascript/spec/integration/code-editor/code-editor-student.integration.spec.ts
+++ b/src/test/javascript/spec/integration/code-editor/code-editor-student.integration.spec.ts
@@ -58,6 +58,7 @@ import { CodeEditorStatusComponent } from 'app/exercises/programming/shared/code
 import { TreeviewComponent } from 'app/exercises/programming/shared/code-editor/treeview/components/treeview/treeview.component';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
+import { mockCodeEditorMonacoViewChildren } from '../../helpers/mocks/mock-instance.helper';
 
 describe('CodeEditorStudentIntegration', () => {
     let container: CodeEditorStudentContainerComponent;
@@ -79,6 +80,9 @@ describe('CodeEditorStudentIntegration', () => {
 
     const result: Result = { id: 3, successful: false, completionDate: dayjs().subtract(2, 'days') };
 
+    // Workaround for an error with MockComponent(). You can remove this once https://github.com/help-me-mom/ng-mocks/issues/8634 is resolved.
+    mockCodeEditorMonacoViewChildren();
+
     beforeEach(() => {
         return TestBed.configureTestingModule({
             imports: [ArtemisTestModule, MockModule(NgbTooltipModule)],