Exam mode: Migrate manage and shared modules to signals
#10436
Conversation
github-actions
bot
added
tests
client
coolchock
changed the title
Exam mode: Migrate manage module to signalsExam mode: Migrate manage and shared modules to signals
helios-aet
bot
temporarily deployed
to
artemis-test2.artemis.cit.tum.de
…ration # Conflicts: # src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-button.component.ts # src/main/webapp/app/exam/shared/events/exam-live-event.component.html
|
""" WalkthroughThis PR refactors multiple Angular components, templates, and tests to replace direct property access with function calls. HTML templates now invoke functions (e.g., Changes
Sequence Diagram(s)Possibly related PRs
Suggested labels
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (2)
src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time-dialog.component.ts (2)
37-39:⚠️ Potential issueMissing function call syntax for exam property
The
oldWorkingTimegetter usesthis.examdirectly instead ofthis.exam(), which would cause errors when using signals.Apply this change to fix the property access:
get oldWorkingTime() { - return examWorkingTime(this.exam); + return examWorkingTime(this.exam()); }
52-57:⚠️ Potential issueMissing function call syntax for exam property in API call
The exam properties are accessed directly instead of using function call syntax required by signals.
Apply this change:
- this.examManagementService.updateWorkingTime(this.exam.course!.id!, this.exam.id!, this.workingTimeSeconds).subscribe({ + this.examManagementService.updateWorkingTime(this.exam().course!.id!, this.exam().id!, this.workingTimeSeconds).subscribe({ next: (res: HttpResponse<Exam>) => { this.isLoading = false; if (res.body) { this.examChange.emit(res.body); } this.clear(); },
🧹 Nitpick comments (5)
src/main/webapp/app/exam/manage/exams/exam-detail.component.ts (1)
76-76: Method binding ensures correct contextThe addition of binding
getExamRoutesByIdentifiertothisensures that the method maintains the correct context when invoked in other components or templates, which is essential for the Angular 19 signals migration. This helps prevent potentialthiscontext loss when the method is passed as a reference.While binding in
ngOnInitworks perfectly, consider refactoring the method declaration to use an arrow function which automatically preserves thethiscontext:- getExamRoutesByIdentifier(identifier: string) { + getExamRoutesByIdentifier = (identifier: string) => { return ['/course-management', this.exam.course?.id, 'exams', this.exam.id, identifier]; - } + }This approach would eliminate the need for explicit binding and align with modern TypeScript practices.
src/main/webapp/app/exam/manage/exam-status.component.ts (2)
257-264: Consider using optional chaining for nested conditionalThe conditional check on line 261 could benefit from using optional chaining to make the code more readable.
- ((!exam.examStudentReviewStart && exam.examStudentReviewEnd && exam.examStudentReviewEnd.isAfter(dayjs())) || - (exam.examStudentReviewStart && exam.examStudentReviewStart.isBefore(dayjs()) && exam.examStudentReviewEnd!.isAfter(dayjs()))) ?? + ((!exam.examStudentReviewStart && exam.examStudentReviewEnd?.isAfter(dayjs())) || + (exam.examStudentReviewStart?.isBefore(dayjs()) && exam.examStudentReviewEnd?.isAfter(dayjs()))) ??🧰 Tools
🪛 Biome (1.9.4)
[error] 261-261: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
269-272: Consider using optional chaining for date checkThe property check on line 271 could benefit from using optional chaining to make the code more readable.
- return (exam.examStudentReviewStart && exam.examStudentReviewStart.isAfter(dayjs())) ?? false; + return exam.examStudentReviewStart?.isAfter(dayjs()) ?? false;🧰 Tools
🪛 Biome (1.9.4)
[error] 271-271: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/main/webapp/app/exam/manage/student-exams/student-exam-detail-table-row/student-exam-detail-table-row.component.ts (1)
55-57: Use optional chaining to improve code safetyThe static analysis tool correctly identified that this could be improved with optional chaining.
- if (this.course() && this.course().id) { + if (this.course()?.id) { this.courseId = this.course().id!; }🧰 Tools
🪛 Biome (1.9.4)
[error] 55-55: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist-exercisegroup-table/exam-checklist-exercisegroup-table.component.ts (1)
33-33: Function call with null assertion operator.The code correctly uses
this.exerciseGroups()!to access the array, but consider removing the non-null assertion operator (!) since you've already checked thatthis.exerciseGroups()is truthy on line 31.- this.exerciseGroups()!.forEach((exerciseGroup) => { + this.exerciseGroups().forEach((exerciseGroup) => {
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (47)
src/main/webapp/app/exam/manage/exam-status.component.html(6 hunks)src/main/webapp/app/exam/manage/exam-status.component.ts(11 hunks)src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-button.component.ts(4 hunks)src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist-exercisegroup-table/exam-checklist-exercisegroup-table.component.html(2 hunks)src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist-exercisegroup-table/exam-checklist-exercisegroup-table.component.ts(3 hunks)src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.html(21 hunks)src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.ts(7 hunks)src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time-dialog.component.ts(2 hunks)src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time.component.ts(4 hunks)src/main/webapp/app/exam/manage/exams/exam-detail.component.ts(1 hunks)src/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.html(1 hunks)src/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.ts(2 hunks)src/main/webapp/app/exam/manage/exams/exam-update.component.ts(5 hunks)src/main/webapp/app/exam/manage/student-exams/student-exam-detail-table-row/student-exam-detail-table-row.component.html(2 hunks)src/main/webapp/app/exam/manage/student-exams/student-exam-detail-table-row/student-exam-detail-table-row.component.ts(5 hunks)src/main/webapp/app/exam/manage/student-exams/student-exam-status/student-exam-status.component.html(1 hunks)src/main/webapp/app/exam/manage/student-exams/student-exam-status/student-exam-status.component.ts(2 hunks)src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.html(1 hunks)src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts(6 hunks)src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/student-exam-timeline.component.ts(8 hunks)src/main/webapp/app/exam/manage/students/exam-students.component.ts(3 hunks)src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-button.component.ts(4 hunks)src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-dialog.component.ts(3 hunks)src/main/webapp/app/exam/shared/events/exam-live-event.component.html(3 hunks)src/main/webapp/app/exam/shared/events/exam-live-event.component.ts(3 hunks)src/main/webapp/app/exam/shared/student-exam-working-time/student-exam-working-time.component.html(1 hunks)src/main/webapp/app/exam/shared/student-exam-working-time/student-exam-working-time.component.ts(2 hunks)src/main/webapp/app/exam/shared/testExam-workingTime/test-exam-working-time.component.ts(3 hunks)src/main/webapp/app/exam/shared/working-time-change/working-time-change.component.html(1 hunks)src/main/webapp/app/exam/shared/working-time-change/working-time-change.component.ts(2 hunks)src/main/webapp/app/exam/shared/working-time-control/working-time-control.component.html(2 hunks)src/main/webapp/app/exam/shared/working-time-control/working-time-control.component.ts(5 hunks)src/test/javascript/spec/component/exam/exam-update.component.spec.ts(3 hunks)src/test/javascript/spec/component/exam/manage/exam-mode-picker.component.spec.ts(2 hunks)src/test/javascript/spec/component/exam/manage/exams/exam-announcement-dialog/exam-live-announcement-create-button.component.spec.ts(2 hunks)src/test/javascript/spec/component/exam/manage/exams/exam-checklist-exercisegroup-table.component.spec.ts(4 hunks)src/test/javascript/spec/component/exam/manage/exams/exam-checklist.component.spec.ts(3 hunks)src/test/javascript/spec/component/exam/manage/programming-exam-diff.component.spec.ts(5 hunks)src/test/javascript/spec/component/exam/manage/student-exams/exam-status.component.spec.ts(7 hunks)src/test/javascript/spec/component/exam/manage/student-exams/student-exam-detail-table-row.component.spec.ts(2 hunks)src/test/javascript/spec/component/exam/manage/student-exams/student-exam-timeline.component.spec.ts(5 hunks)src/test/javascript/spec/component/exam/manage/student-exams/students-upload-images-button.component.spec.ts(2 hunks)src/test/javascript/spec/component/exam/manage/student-exams/students-upload-images-dialog.component.spec.ts(2 hunks)src/test/javascript/spec/component/exam/shared/events/exam-live-event.component.spec.ts(6 hunks)src/test/javascript/spec/component/exam/shared/student-exam-working-time.component.spec.ts(3 hunks)src/test/javascript/spec/component/exam/shared/testexam-working-time.component.spec.ts(2 hunks)src/test/javascript/spec/component/exam/shared/working-time-control.component.spec.ts(7 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
`src/main/webapp/**/*.html`: @if and @for are new and valid ...
src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.
src/main/webapp/app/exam/manage/student-exams/student-exam-status/student-exam-status.component.htmlsrc/main/webapp/app/exam/shared/working-time-change/working-time-change.component.htmlsrc/main/webapp/app/exam/manage/student-exams/student-exam-detail-table-row/student-exam-detail-table-row.component.htmlsrc/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist-exercisegroup-table/exam-checklist-exercisegroup-table.component.htmlsrc/main/webapp/app/exam/shared/events/exam-live-event.component.htmlsrc/main/webapp/app/exam/manage/exam-status.component.htmlsrc/main/webapp/app/exam/shared/working-time-control/working-time-control.component.htmlsrc/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.htmlsrc/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.htmlsrc/main/webapp/app/exam/shared/student-exam-working-time/student-exam-working-time.component.htmlsrc/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.html
`src/test/javascript/spec/**/*.ts`: jest: true; mock: NgMock...
src/test/javascript/spec/**/*.ts: jest: true; mock: NgMocks; bad_practices: avoid_full_module_import; perf_improvements: mock_irrelevant_deps; service_testing: mock_http_for_logic; no_schema: avoid_NO_ERRORS_SCHEMA; expectation_specificity: true; solutions: {boolean: toBeTrue/False, reference: toBe, existence: toBeNull/NotNull, undefined: toBeUndefined, class_obj: toContainEntries/toEqual, spy_calls: {not_called: not.toHaveBeenCalled, once: toHaveBeenCalledOnce, with_value: toHaveBeenCalledWith|toHaveBeenCalledExactlyOnceWith}}
src/test/javascript/spec/component/exam/manage/student-exams/students-upload-images-dialog.component.spec.tssrc/test/javascript/spec/component/exam/manage/exam-mode-picker.component.spec.tssrc/test/javascript/spec/component/exam/shared/student-exam-working-time.component.spec.tssrc/test/javascript/spec/component/exam/manage/exams/exam-announcement-dialog/exam-live-announcement-create-button.component.spec.tssrc/test/javascript/spec/component/exam/manage/student-exams/exam-status.component.spec.tssrc/test/javascript/spec/component/exam/manage/exams/exam-checklist.component.spec.tssrc/test/javascript/spec/component/exam/manage/exams/exam-checklist-exercisegroup-table.component.spec.tssrc/test/javascript/spec/component/exam/manage/programming-exam-diff.component.spec.tssrc/test/javascript/spec/component/exam/exam-update.component.spec.tssrc/test/javascript/spec/component/exam/shared/working-time-control.component.spec.tssrc/test/javascript/spec/component/exam/shared/testexam-working-time.component.spec.tssrc/test/javascript/spec/component/exam/manage/student-exams/student-exam-detail-table-row.component.spec.tssrc/test/javascript/spec/component/exam/manage/student-exams/student-exam-timeline.component.spec.tssrc/test/javascript/spec/component/exam/manage/student-exams/students-upload-images-button.component.spec.tssrc/test/javascript/spec/component/exam/shared/events/exam-live-event.component.spec.ts
`src/main/webapp/**/*.ts`: angular_style:https://angular.io/...
src/main/webapp/app/exam/manage/exams/exam-detail.component.tssrc/main/webapp/app/exam/manage/student-exams/student-exam-status/student-exam-status.component.tssrc/main/webapp/app/exam/manage/students/exam-students.component.tssrc/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-button.component.tssrc/main/webapp/app/exam/shared/working-time-change/working-time-change.component.tssrc/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time.component.tssrc/main/webapp/app/exam/shared/student-exam-working-time/student-exam-working-time.component.tssrc/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time-dialog.component.tssrc/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.tssrc/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist-exercisegroup-table/exam-checklist-exercisegroup-table.component.tssrc/main/webapp/app/exam/manage/exam-status.component.tssrc/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.tssrc/main/webapp/app/exam/shared/testExam-workingTime/test-exam-working-time.component.tssrc/main/webapp/app/exam/manage/students/upload-images/students-upload-images-dialog.component.tssrc/main/webapp/app/exam/manage/exams/exam-update.component.tssrc/main/webapp/app/exam/shared/events/exam-live-event.component.tssrc/main/webapp/app/exam/shared/working-time-control/working-time-control.component.tssrc/main/webapp/app/exam/manage/students/upload-images/students-upload-images-button.component.tssrc/main/webapp/app/exam/manage/student-exams/student-exam-timeline/student-exam-timeline.component.tssrc/main/webapp/app/exam/manage/student-exams/student-exam-detail-table-row/student-exam-detail-table-row.component.tssrc/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
🧠 Learnings (2)
src/test/javascript/spec/component/exam/exam-update.component.spec.ts (1)
Learnt from: pzdr7
PR: ls1intum/Artemis#9505
File: src/test/javascript/spec/integration/code-editor/code-editor-container.integration.spec.ts:179-181
Timestamp: 2024-11-12T12:51:58.049Z
Learning: In `src/test/javascript/spec/integration/code-editor/code-editor-container.integration.spec.ts`, `ResizeObserver` is mocked within the `beforeEach` block.
src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts (1)
Learnt from: pzdr7
PR: ls1intum/Artemis#9443
File: src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts:126-129
Timestamp: 2024-11-12T12:51:40.391Z
Learning: In Angular applications using `NgbModal`, wrapping data with `signal()` when passing inputs to modal components (e.g., `GitDiffReportModalComponent`) is necessary until `NgbModal` supports signal inputs.
🪛 Biome (1.9.4)
src/main/webapp/app/exam/manage/exam-status.component.ts
[error] 261-261: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 271-271: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/main/webapp/app/exam/manage/student-exams/student-exam-detail-table-row/student-exam-detail-table-row.component.ts
[error] 55-55: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: Call Build Workflow / Build .war artifact
- GitHub Check: Call Build Workflow / Build and Push Docker Image
- GitHub Check: client-tests-selected
- GitHub Check: client-tests
- GitHub Check: server-tests
- GitHub Check: Analyse
🔇 Additional comments (239)
src/main/webapp/app/exam/manage/student-exams/student-exam-status/student-exam-status.component.html (1)
2-2: LGTM: Successfully migrated to function calls in conditionalsThe template has been updated to call
isTestExam()andhasStudentsWithoutExam()as functions rather than accessing them as properties, aligning with the Angular signal-based approach. The template also correctly uses the new@if/@elsesyntax as required by our coding guidelines.Also applies to: 8-8
src/main/webapp/app/exam/shared/student-exam-working-time/student-exam-working-time.component.html (1)
2-2: LGTM: Successfully migrated to signal-based accessThe template has been updated to call
studentExam()as a function before accessing theworkingTimeproperty, aligning with the Angular signal-based approach for reactive property access.src/test/javascript/spec/component/exam/shared/events/exam-live-event.component.spec.ts (2)
13-13: LGTM: Added input importAdded the
inputfunction import from '@angular/core', which is required for the Angular signal-based testing approach.
33-36: LGTM: Successfully migrated tests to use Angular's injection contextThe test setup has been updated to use
TestBed.runInInjectionContext()with theinput()function to properly set component inputs within Angular's dependency injection system. This change is consistent across all test cases and follows Angular 19's approach for handling component inputs.Also applies to: 49-52, 65-68, 83-86, 107-110, 126-129, 145-148
src/test/javascript/spec/component/exam/shared/student-exam-working-time.component.spec.ts (2)
6-6: LGTM: Added input importAdded the
inputfunction import from '@angular/core', which is required for the Angular signal-based testing approach.
36-38: LGTM: Successfully migrated tests to use Angular's injection contextThe test setup has been updated to use
TestBed.runInInjectionContext()with theinput()function to properly set component inputs within Angular's dependency injection system. This change is consistent with Angular 19's approach for handling component inputs.The updated code correctly uses Boolean assertion methods (
toBeTrue()/toBeFalse()) as per the coding guidelines for Jest expectations.Also applies to: 63-65
src/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.html (3)
2-2: Property access consistently replaced with function call.The use of
disableInput()as a function call instead of direct property access aligns with the Angular component input migration pattern.
6-8: Property access successfully migrated to function calls.The template now correctly accesses the exam property through the function call syntax
exam()instead of direct property access, maintaining reactivity.
15-17: Button state bindings correctly migrated.The class bindings now properly use function calls for both
exam()anddisableInput()to determine button states, which follows the Angular signal-based pattern.src/main/webapp/app/exam/shared/working-time-change/working-time-change.component.html (2)
4-4: Old working time access correctly migrated.The template now accesses the old working time through
oldWorkingTime()function call instead of direct property access, aligning with the Angular signal-based pattern.
8-8: New working time access correctly migrated.The template now accesses the new working time through
newWorkingTime()function call instead of direct property access, aligning with the Angular signal-based pattern.src/test/javascript/spec/component/exam/manage/student-exams/students-upload-images-dialog.component.spec.ts (2)
19-19: Angular input function properly imported.The import of the
inputfunction from@angular/coreis correctly added to support the new Angular input API.
58-61: Tests successfully updated to use Angular's input API.The test setup has been properly migrated to use
TestBed.runInInjectionContext()with theinput()function, replacing direct property assignment. This follows Angular's new approach for handling component inputs in tests.src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist-exercisegroup-table/exam-checklist-exercisegroup-table.component.html (3)
25-25: Successfully migrated to new Angular control flow syntax.The template correctly uses the new
@ifcontrol flow syntax instead of the deprecated*ngIf, while also properly accessingquizExamMaxPointsas a function call. This aligns with both aspects of the migration.
38-38: Points display correctly migrated to function call.The quiz exam max points are now correctly accessed through the function call
quizExamMaxPoints()instead of direct property access, maintaining reactivity.
42-106: Modern Angular syntax properly implemented.The template successfully implements the new Angular control flow syntax with
@forand nested@if/@elseblocks, replacing the deprecated*ngForand*ngIfdirectives. This follows best practices and the provided coding guidelines.src/test/javascript/spec/component/exam/shared/working-time-control.component.spec.ts (7)
7-7: Correct import of Angular's input signalThe addition of the input import from @angular/core is appropriate for migrating to Angular signals.
50-54: Properly migrated test setup to use Angular signalsThe test now correctly uses TestBed.runInInjectionContext to set up the exam input using Angular's signal-based input function.
72-77: Correctly configured multiple input signalsThe test properly sets up both exam and relative inputs using TestBed.runInInjectionContext.
86-92: Proper setup of multiple input signals for relative working time testThe test correctly configures both exam and relative input signals.
101-107: Successfully migrated disabled property to use input signalThe test correctly sets up all three input signals (exam, relative, disabled) using the new Angular signals approach.
119-123: Proper test setup for working time changes testThe exam input is correctly configured for testing interactions with working time duration changes.
150-154: Correctly migrated percent difference test setupThe exam input is properly configured using Angular signals, maintaining the test's functionality.
src/test/javascript/spec/component/exam/manage/student-exams/students-upload-images-button.component.spec.ts (2)
10-10: Appropriate import of Angular input signalThe import of the input function from @angular/core is correctly added for signal-based inputs.
40-44: Successfully migrated component inputs to signalsThe test now properly uses TestBed.runInInjectionContext to initialize the exam and courseId inputs using Angular signals, which aligns with the signal migration objective.
src/test/javascript/spec/component/exam/manage/exam-mode-picker.component.spec.ts (6)
7-7: Correct import of Angular input signalThe import of input from @angular/core is appropriate for the migration to Angular signals.
25-29: Properly migrated component initialization to use signalsThe test correctly uses TestBed.runInInjectionContext to set up the exam and disableInput properties as signals.
34-37: Correct implementation of dynamic signal input updateThe test properly updates the disableInput signal for testing the readonly mode functionality.
39-40: Successfully migrated property access to signal function callThe test now correctly uses component.exam() to access the exam signal value rather than direct property access.
45-47: Properly updated assertions to use signal function callsThe assertions correctly use component.exam().testExam and component.exam().numberOfCorrectionRoundsInExam instead of direct property access, aligning with Angular signals pattern.
52-54: Correctly updated assertions for exam mode testThe test now properly accesses the exam properties through the signal function call (component.exam()), maintaining the test's functionality while adapting to Angular signals.
src/test/javascript/spec/component/exam/manage/student-exams/exam-status.component.spec.ts (9)
17-17: Appropriate import of Angular input signalThe import of input from @angular/core is correctly added for migrating to signal-based inputs.
42-46: Successfully migrated exam preparation function to use signalsThe test helper function now correctly uses TestBed.runInInjectionContext to set up the exam and course inputs using Angular signals.
53-57: Properly migrated test exam preparation functionThe helper function for test exam preparation now correctly uses signals for exam and course inputs.
61-65: Correctly updated exam review state test preparationThe exam review state test preparation function now properly uses Angular signals for component inputs.
107-111: Successfully migrated course update for finished exam testThe test correctly updates the course input using Angular signals within TestBed.runInInjectionContext.
117-121: Properly configured inputs for exam review state testThe test correctly sets up both exam and course inputs using Angular signals.
135-138: Successfully migrated exam update for review phase testThe test properly updates the exam input signal after modifying the exam object's properties.
166-174: Correctly migrated exam and course setup for preparation testThe test now properly initializes both exam and course inputs using Angular signals in separate injection contexts, maintaining proper test isolation.
222-226: Successfully migrated course setup for test exam preparationThe test correctly sets up the course input using Angular signals for the test exam preparation scenario.
src/test/javascript/spec/component/exam/manage/student-exams/student-exam-detail-table-row.component.spec.ts (3)
27-28: Good addition of the required Angular 19 importsThese imports support the migration to signals for inputs in Angular 19, which is consistent with the PR objectives.
88-97: Properly migrated to Angular's new input API using signalsThe code correctly uses
TestBed.runInInjectionContext()to set up inputs with the new signal-based approach. This aligns with the Angular 19 migration requirements.
97-99: Good implementation of Angular component lifecycle with detectChangesCalling
detectChanges()after setting inputs ensures the component is properly updated, and settingcourseIdafter the injection context is the correct approach.src/main/webapp/app/exam/shared/working-time-control/working-time-control.component.html (6)
3-4: Correctly migrated conditional to use @if with function-based property accessThe code correctly uses the new Angular control flow syntax with
@ifinstead of*ngIfand properly accesses the property as a function call withdurationLabelText().
10-11: Properly updated to function-based property access for disabled stateThe template correctly uses
disabled()with parentheses to access the property as a function call, which is the correct pattern for signal-based inputs in Angular 19.Also applies to: 23-24, 37-38
15-16: Correctly updated allowNegative property to function call syntaxThe template properly accesses
allowNegative()as a function, consistent with the signal-based approach in Angular 19.Also applies to: 28-30, 42-44
50-51: Properly migrated to @if with function calls for conditional checksThe code correctly uses the new Angular control flow syntax with
@ifand properly accesses properties as function calls withexam()andrelative().
52-54: Correctly updated to function-based property access with non-null assertionThe template properly uses
relativeLabelText()with parentheses and includes the non-null assertion operator, which is appropriate for translation keys.
64-65: Properly updated allowNegative property in percentage inputThe template correctly uses
allowNegative()as a function call for the percentage input's min attribute.src/test/javascript/spec/component/exam/manage/exams/exam-checklist.component.spec.ts (3)
22-23: Good addition of Angular's input function importThe import supports the migration to signals for component inputs in Angular 19.
91-95: Properly migrated exam input initialization to use Angular's injection contextThe code correctly uses
TestBed.runInInjectionContext()to set up the exam input with the signal-based approach, which is consistent with Angular 19 best practices.🧰 Tools
🪛 Biome (1.9.4)
[error] 90-95: Disallow duplicate setup and teardown hooks.
Disallow beforeEach duplicacy inside the describe function.
(lint/suspicious/noDuplicateTestHooks)
101-102: Correctly updated property access to function call syntaxThe test now properly uses
exam()as a function call instead of direct property access, which is the correct pattern for accessing signal-based inputs in Angular 19.Also applies to: 108-109, 128-129
src/test/javascript/spec/component/exam/manage/exams/exam-checklist-exercisegroup-table.component.spec.ts (2)
4-5: Properly updated Angular imports to include input functionThe import has been correctly updated to include the
inputfunction from Angular core, which is needed for the signal-based input approach.
99-102: Correctly migrated to Angular's new input API in all test casesThe tests properly use
TestBed.runInInjectionContext()to set up the exerciseGroups input with the signal-based approach across all test cases. This is consistent with the Angular 19 migration guidelines.Also applies to: 120-123, 135-138
src/main/webapp/app/exam/manage/student-exams/student-exam-detail-table-row/student-exam-detail-table-row.component.html (15)
2-2: Properly migrated data binding syntaxThe property access has correctly been updated to use the function-call approach
exercise()?.idinstead of direct property access, which aligns with Angular signals pattern.
5-6: Angular syntax update looks goodYou've properly implemented the new Angular
@ifsyntax replacing*ngIfand correctly migrated the property access to the function-call pattern withexercise().
10-10: Property access correctly updatedThe title binding is properly updated to use the function-call syntax
exercise()?.title.
13-15: Properly migrated conditional and property accessThe conditional logic and nested property access have been properly updated to use function calls for both
exercise()andachievedPointsPerExercise().
22-22: Function parameter correctly updatedThe parameter passed to
getMaxPoints()has been properly updated to use the function-call pattern.
25-25: Function parameter correctly updatedThe parameter passed to
getBonusPoints()has been properly updated to use the function-call pattern.
40-40: Complex conditional properly migratedThe conditional statement with multiple conditions has been properly updated to use function calls for
course(),exercise(), andstudentExam().
42-42: Conditional check properly updatedThe nested conditional check now correctly uses the function-call pattern for
exercise().
46-46: Class binding correctly updatedThe class binding now uses the function-call pattern with
busy().
48-48: Router link binding correctly updatedThe router link binding now uses the function-call pattern for the
exercise()parameter.
56-56: Conditional logic updated with correct function callsThe conditional check with multiple conditions has been properly migrated to use the function-call pattern for
exercise().
60-60: Class binding correctly updatedThe class binding now correctly uses the function-call pattern with
busy().
62-62: Router link binding properly updatedThe router link binding now uses the function-call pattern for the parameters.
70-70: Type checking condition properly updatedThe type checking conditional now uses the function-call pattern for
exercise().
72-72: Multiple bindings correctly updatedAll bindings (class binding and router link) have been properly updated to use the function-call pattern.
src/test/javascript/spec/component/exam/shared/testexam-working-time.component.spec.ts (10)
5-7: Import and path updates look goodThe addition of the
inputimport from@angular/coreis correct and necessary for the updated test approach using signals.
42-47: Test setup properly migrated to use signalsThe test setup has been correctly updated to use Angular's injection context for setting input properties, which is the recommended approach when using signals.
52-57: Test setup properly migrated to use signalsThis test case has been correctly updated to use the new pattern with
TestBed.runInInjectionContext()and theinput()function.
62-67: Test setup properly migrated to use signalsThis test case has been correctly updated to use the new pattern with
TestBed.runInInjectionContext()and theinput()function.
72-77: Test setup properly migrated to use signalsThis test case has been correctly updated to use the new pattern with
TestBed.runInInjectionContext()and theinput()function.
82-87: Test setup properly migrated to use signalsThis test case has been correctly updated to use the new pattern with
TestBed.runInInjectionContext()and theinput()function.
92-97: Test setup properly migrated to use signalsThis test case has been correctly updated to use the new pattern with
TestBed.runInInjectionContext()and theinput()function.
102-107: Test setup properly migrated to use signalsThis test case has been correctly updated to use the new pattern with
TestBed.runInInjectionContext()and theinput()function.
111-116: Test setup properly migrated to use signalsThis test case has been correctly updated to use the new pattern with
TestBed.runInInjectionContext()and theinput()function.
120-125: Test setup properly migrated to use signalsThis test case has been correctly updated to use the new pattern with
TestBed.runInInjectionContext()and theinput()function.src/main/webapp/app/exam/shared/events/exam-live-event.component.html (12)
1-1: Properly migrated data binding syntaxThe class binding has been correctly updated to use the function-call pattern with
event().
4-4: String interpolation correctly updatedThe string interpolation now correctly uses the function-call pattern with
event().
8-10: Property access and conditional rendering properly updatedThe property access and conditional rendering have been properly updated to use the function-call pattern with
event().
14-14: Switch statement properly updatedThe switch statement now correctly uses the function-call pattern with
event().
32-32: Conditional check properly updatedThe conditional check now correctly uses the function-call pattern with
event().
37-37: Property access correctly updatedThe nested property access has been properly updated to use the function-call pattern with
event().
41-41: Property access correctly updatedThe nested property access has been properly updated to use the function-call pattern with
event().
45-45: Property access correctly updatedThe nested property access has been properly updated to use the function-call pattern with
event().
47-47: Conditional check and property access properly updatedThe conditional check and nested property access have been properly updated to use the function-call pattern with
event().
50-50: Property access correctly updatedThe nested property access has been properly updated to use the function-call pattern with
event().
73-73: Conditional rendering properly updatedThe conditional rendering now correctly uses the function-call pattern with
showAcknowledge().
79-79: Type check condition properly updatedThe type check condition now correctly uses the function-call pattern with
event().src/main/webapp/app/exam/shared/working-time-change/working-time-change.component.ts (2)
1-1: Proper import for Angular signal inputsThe import statement correctly adds
inputfrom@angular/corewhich is required for the signals-based input approach.
11-12: Correctly migrated @input properties to signalsThe component has been properly migrated from traditional
@Input()decorators to the new signals-based approach usinginput.required<number>(). This matches the Angular 19 migration pattern being implemented across the codebase.src/main/webapp/app/exam/manage/students/exam-students.component.ts (3)
1-1: Imports updated correctly for signal-based API.The imports have been correctly updated to include
viewChildfrom Angular core, which is needed for the signal-based approach to component references.
58-58: ViewChild correctly migrated to signal-based API.The ViewChild decorator has been properly replaced with the new signal-based approach using
viewChild.required(DataTableComponent).
181-184: Property access correctly updated to function call.The code has been properly updated to use function call syntax
dataTable()instead of property access, consistent with the signal-based approach. This ensures reactive access to the DataTableComponent instance.src/main/webapp/app/exam/manage/exam-status.component.html (14)
1-1: Property access correctly updated to function call.The template correctly uses
course()?.isAtLeastInstructorfunction call syntax instead of property access, consistent with the signal-based approach.
3-3: Updated to modern Angular control flow syntax.The code correctly uses the new
@ifcontrol flow syntax instead of the deprecated*ngIfdirective, as specified in the coding guidelines.
20-20: Property access correctly updated to function call.The code has been properly updated to use
exam().exerciseGroupsinstead of direct property access, consistent with the signal-based approach.
31-32: Property access correctly updated to function call.The conditional check and interpolation properly use
exam().examMaxPointsfunction call syntax instead of property access.
35-35: Property access correctly updated to function call.The condition correctly uses
exam().examMaxPointsfunction call syntax instead of property access.
43-43: Property access correctly updated to function call.The translateValues parameter correctly uses
exam().numberOfExamUsersfunction call syntax.
64-64: Property access correctly updated to function call.The translateValues object correctly uses
exam().numberOfExamUsersfunction call syntax.
117-117: Property access correctly updated to function call.The date interpolation correctly uses
exam().startDateandexam().endDatefunction call syntax.
125-125: Property access correctly updated to function call.The condition correctly uses
course()?.isAtLeastInstructorfunction call syntax and maintains the proper logical flow.
128-128: Property access correctly updated to function call.The interpolation correctly uses
exam().workingTimefunction call syntax.
132-132: Property access correctly updated to function call.The interpolation correctly uses
exam().numberOfExamUsersfunction call syntax.
209-209: Property access correctly updated to function call.The condition correctly uses
exam().publishResultsDatefunction call syntax.
211-211: Property access correctly updated to function call.The date pipe correctly uses
exam().publishResultsDatefunction call syntax.
215-215: Property access correctly updated to function call.The condition correctly uses
exam().publishResultsDatefunction call syntax.src/main/webapp/app/exam/manage/student-exams/student-exam-status/student-exam-status.component.ts (2)
1-1: Import updated correctly for signal-based API.The import statement has been correctly updated to include
inputfrom Angular core, which is needed for the signal-based approach to input properties.
18-19: Input properties correctly migrated to signal-based API.The input properties have been properly converted from traditional
@Input()decorator to the new signal-based approach usinginput.required<boolean>().src/main/webapp/app/exam/shared/testExam-workingTime/test-exam-working-time.component.ts (5)
1-1: Import updated correctly for signal-based API.The import statement has been correctly updated to include
inputfrom Angular core, which is needed for the signal-based approach to input properties.
14-14: Input property correctly migrated to signal-based API.The studentExam input property has been properly converted from traditional
@Input()decorator to the new signal-based approach usinginput.required<StudentExam>().
25-31: Property access correctly updated to function calls.The conditional checks have been properly updated to use function call syntax (
this.studentExam().property) instead of property access.
32-32: Property access correctly updated to function call.The code correctly retrieves the working time using
this.studentExam().workingTimefunction call syntax.
34-36: Property access correctly updated to function calls.The calculations for usedWorkingTime and percentUsedWorkingTime correctly use function call syntax to access studentExam properties, with appropriate null checks.
src/test/javascript/spec/component/exam/manage/exams/exam-announcement-dialog/exam-live-announcement-create-button.component.spec.ts (3)
12-12: Importing the Angularinputfunction for signal-based inputs.The import of the
inputfunction from '@angular/core' aligns with the Angular 19 migration to signals, replacing the traditional@Input()decorator.
34-41: Updated exam input initialization to use signal-based approach.The test setup now properly uses the Angular 19 signal-based approach:
- Creates an exam object
- Uses
TestBed.runInInjectionContextto set the input in the correct context- Uses
input()function to create the signalThis change correctly updates the component test to align with the Angular 19 migration.
48-48: Updated component property access to use function call syntax.Changed from accessing
component.exam.visibleDatetocomponent.exam().visibleDateto correctly invoke the input signal accessor function, ensuring proper reactivity in the test.src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.html (11)
1-1: Updated conditional check to use signal-based exam access.Changed from optional chaining on property (
exam?.course) to function call with optional chaining (exam()?.course), correctly implementing the Angular signal pattern.
54-54: Updated attribute binding to use signal-based exam access.Changed all references to exam properties to use the function call pattern (
exam().exerciseGroups,exam().numberOfExercisesInExam) ensuring reactive updates when the exam data changes.Also applies to: 65-67
101-101: Updated component input binding to use signal-based access.Changed property binding to child component to use the function call syntax to access the exam properties (
[quizExamMaxPoints]="exam().quizExamMaxPoints",[exerciseGroups]="exam().exerciseGroups || []").
104-104: Updated router link bindings to use signal-based function pattern.Changed router link binding from
getExamRoutesByIdentifier('route')togetExamRoutesByIdentifier()('route'), correctly implementing the function call pattern for router links.Also applies to: 128-128, 160-160, 184-184, 211-211, 252-252, 342-342, 456-456, 507-507, 586-586, 615-615, 647-647, 662-662
147-149: Updated conditional check attributes with signal-based access.Changed attribute binding to correctly use function call syntax with optional chaining and non-null assertions (
!!exam().numberOfExamUsers && exam().numberOfExamUsers! > 0).
155-155: Updated text interpolation to use signal-based access.Changed text interpolation from
{{ exam.numberOfExamUsers }}to{{ exam().numberOfExamUsers }}for proper reactivity.
265-266: Updated translation value binding to use signal-based access.Changed the date values in the translateValues object to use function calls (
exam().startDateandexam().endDate) ensuring reactive updates when dates change.
297-299: Updated conditional rendering and text interpolation with signal pattern.Changed ngIf condition and text interpolation to use function call syntax (
@if (exam().numberOfExamUsers)and{{ exam().numberOfExamUsers! }}).
357-357: Updated component input binding to use signal-based access.Changed input binding from direct property access to function call (
[exam]="exam()") when passing the exam to child components.Also applies to: 371-371
474-474: Updated conditional checks with signal-based property access.Changed attribute binding and conditional expression to use function call syntax (
[checkAttribute]="!!exam().publishResultsDate"and@if (exam().publishResultsDate)).Also applies to: 477-477
602-602: Updated checklist attribute binding with signal-based access.Changed attribute binding for the review date checks to use function call syntax for accessing the exam properties (
[checkAttribute]="!!exam().examStudentReviewStart"and[checkAttribute]="!!exam().examStudentReviewEnd").Also applies to: 608-608
src/main/webapp/app/exam/shared/student-exam-working-time/student-exam-working-time.component.ts (3)
1-1: Updated import to include Angular signal input function.Added the
inputimport from '@angular/core' to support the migration to signal-based inputs.
13-13: Converted @input property to signal-based input.Changed from
@Input() studentExam: StudentExam;tostudentExam = input.required<StudentExam>();, implementing the new Angular 19 signal-based input pattern.
20-25: Updated property access to use signal-based function calls.Improved the code by:
- Using function call syntax to access the input (
this.studentExam())- Creating local constants for better readability (
workingTimeandexam)- Maintaining the same logic while adapting to the signal-based pattern
This makes the code more reactive and easier to understand.
src/test/javascript/spec/component/exam/exam-update.component.spec.ts (3)
624-626: Added ResizeObserver mock to support component testing.Added a mock implementation for ResizeObserver, which is needed for components that interact with DOM sizing events. This follows best practices for Angular testing by ensuring DOM interactions work correctly in the test environment.
692-692: Updated component property access to use function call syntax.Changed from direct property access to function call with
component.examExerciseImportComponent().selectedExercises, correctly implementing the signal-based pattern for accessing component references.
739-741: Updated exam input initialization to use signal-based approach.Properly set up the exam input for the child component using:
TestBed.runInInjectionContextto provide the correct context- The
input()function to create the signal- Function call syntax to access the component reference
This correctly implements the Angular 19 signal pattern in the test setup.
src/test/javascript/spec/component/exam/manage/programming-exam-diff.component.spec.ts (11)
22-23: Appropriate imports added for Angular signalsThe additions of
inputfrom @angular/core andStudentParticipationmodel are correctly imported to support the migration to signals.
61-64: Component inputs properly initialized using signalsThe component's input properties are correctly set using the signal pattern with
.set()method instead of direct assignment.
75-78: Proper update pattern for signal valuesThe update pattern using
.update(() => value)is correctly implemented to modify signal values, maintaining reactivity.
91-95: Consistent signal updates throughout the testThe signal update pattern is consistently applied for all input properties, ensuring proper testing of the component's reactive behavior.
103-104: Signal update method used correctlyThe
update()method is correctly used to set the exercise value, maintaining consistency with the signals approach.
128-130: Proper testing context for input signalsThe use of
TestBed.runInInjectionContext()is the correct approach for initializing inputs in Angular tests when using signals.
132-135: Properly updating subject using the update patternThe update method for
exerciseIdSubjectcorrectly maintains the reference to the subject while updating its value.
138-138: Correct function-based access for signal valuesThe property access has been updated to use function call syntax (
exercise()) as required when using signals.
152-154: Consistent initialization of input signals across testsThe test maintains consistency in how input signals are initialized across different test cases.
156-159: Proper subject update patternThe update pattern for the subject is correctly implemented, preserving the subject reference while updating its value.
162-162: Function-based property access maintainedThe property access consistently uses function call syntax as required by the signals pattern.
src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time-dialog.component.ts (1)
2-2: Appropriate imports added for Angular output signalsThe component correctly imports
injectandoutputfrom @angular/core to support the migration to signals.src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-button.component.ts (5)
2-2: Appropriate imports added for Angular signalsThe component correctly imports
injectandinputfrom @angular/core to support the migration to signals.
22-22: Proper implementation of required input signalThe
examproperty is correctly implemented as a required input signal usinginput.required<Exam>().
47-47: Correct function call syntax for exam propertyThe exam property is correctly accessed using function call syntax (
this.exam()) as required by signals.
51-51: Consistent use of function call syntaxThe function call syntax is consistently used to access the exam property's visibleDate.
66-67: Proper access to nested properties in signalsThe component correctly accesses nested properties from the exam signal using function call syntax.
src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.html (6)
2-4: Correct function call syntax for signals in templatesThe template correctly uses function call syntax (
exercise()) to access the signal values.
5-6: Proper conditional rendering with signalsThe conditional rendering and property binding correctly use function call syntax with signals.
12-16: Consistent input binding with signalsAll input bindings to the child component correctly use function call syntax for accessing signal values.
18-18: Proper conditional rendering with optional chainingThe conditional rendering correctly uses function call syntax with optional chaining for the signal value.
23-29: Consistent translation value binding with signalsThe translation value bindings correctly use function call syntax to access signal values.
25-25: Proper conditional check with signalsThe template correctly uses function call syntax for conditional checks with the signal value.
src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.ts (7)
1-1: Successfully migrated to Angular Input APIThe component correctly imports and uses the new Angular Input API with
input.required<Exam>()syntax instead of the decorator pattern, which aligns with the overall Angular 19 migration effort.Also applies to: 48-49
85-94: Properly updated property access pattern in ngOnInitThe function correctly uses the new functional form
this.exam()instead of direct property access, maintaining consistency with the new Angular 19 input API.
101-122: Successfully updated property access in ngOnChangesAll references to the exam property have been correctly changed to use the functional form
this.exam()throughout the method, ensuring consistent data access patterns.
125-133: Properly updated function calls in ngOnDestroy and related methodsThe WebSocket topic retrieval and unsubscription logic now properly uses the functional form
this.exam()for property access.
138-157: Correctly implemented property access in evaluateQuizExercisesThe logic to evaluate quiz exercises now properly uses the functional access pattern with
this.exam()and correctly extracts properties like course ID and exam ID.
162-181: Successfully updated property access in assessUnsubmittedExamModelingAndTextParticipationsAll references to exam properties now correctly use the functional form
this.exam()when accessing course ID and exam ID.
183-192: Properly updated calculateIsExamOver methodThe method correctly checks for the longestWorkingTime and accesses exam properties using the functional form
this.exam()when calculating if the exam is over.src/main/webapp/app/exam/manage/exam-status.component.ts (10)
1-1: Successfully migrated to Angular Input APIThe component correctly imports and implements the new Angular Input API with
input.required<Exam>()andinput.required<Course>()instead of decorators, which aligns with the Angular 19 migration effort.Also applies to: 41-42
79-86: Properly updated WebSocket topic initialization in ngOnInitThe method properly uses the functional form
this.exam()when retrieving WebSocket topics for submission and start events, maintaining consistency with the new input API pattern.
88-111: Successfully updated property access in ngOnChangesAll references to exam and course properties are correctly updated to use the functional form (
this.exam()andthis.course()) when retrieving statistics and checking various conditions.
113-118: Properly updated WebSocket topic unsubscription in ngOnDestroyThe method properly uses the functional form
this.exam()when retrieving WebSocket topics for unsubscription, maintaining consistency with the Angular input API pattern.
124-139: Successfully updated property access in exercise configuration methodsAll references to exam properties have been correctly updated to use the functional form
this.exam()throughout the exam exercise configuration checks.
168-180: Properly updated property access in setConductionStateThe method correctly uses the functional form
this.course()and applies the appropriate conditional checks for determining the exam conduction state.
185-195: Successfully updated property access in setReviewStateThe method properly uses
this.exam()to access the examStudentReviewEnd property when determining the exam review state.
200-212: Properly updated property access in setCorrectionStateThe method correctly uses
this.exam()to access the publishResultsDate property when determining the exam correction state.
218-236: Successfully updated property access in setExamPreparationThe method properly uses
this.exam()when calling examChecklistService methods to verify various exam preparation status checks.
241-252: Properly updated property access in exam timing methodsThe methods correctly extract the exam reference using
this.exam()before checking date properties, ensuring consistency with the new input API pattern.src/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.ts (2)
1-1: Successfully migrated to Angular Input and Output APIThe component correctly imports and implements the new Angular Input and Output APIs with
input.required<Exam>(),input.required<boolean>()andoutput()instead of decorators, which aligns with the Angular 19 migration effort.Also applies to: 13-16
22-28: Properly updated property access in setExamModeThe method correctly uses the functional forms
this.disableInput()andthis.exam()when checking and updating exam mode properties, maintaining consistency with the new Angular input API pattern.src/test/javascript/spec/component/exam/manage/student-exams/student-exam-timeline.component.spec.ts (7)
5-5: Imports correctly updated for signal-based testing.The test file imports have been properly updated to include
Subjectfrom rxjs andsignalfrom '@angular/core', which are necessary for the signal-based approach.Also applies to: 30-30
143-143: ViewChild access correctly updated to function call.The test correctly uses the functional approach to access the examNavigationBarComponent by calling
component.examNavigationBarComponent().
185-185: QueryList replaced with signal.The
currentPageComponentshas been correctly updated to usesignal([])instead of a QueryList, aligning with the signal-based architecture.
193-196: Test case structure simplified.The test cases have been simplified by flattening the structure, which makes them easier to read and maintain.
199-215: Proper mock signal creation utility added.A well-designed helper function
createMockSignalhas been added to make testing signal-based components easier by providing a mock implementation that supports theupdate()method.
208-221: Component mock updated to support signals.The mock component has been properly updated to use signal-based properties, ensuring tests accurately reflect the component's new structure.
254-256: Variable type refinement improved.The code now properly types the submission as a SubmissionVersion when handling text exercises, improving type safety.
src/main/webapp/app/exam/manage/exams/exam-update.component.ts (5)
6-6: Imports updated for signal-based dependency injection.The imports have been correctly updated to include
inject,viewChildand other required functions for the signal-based approach.
82-82: ViewChild decorator correctly migrated to viewChild function.The
@ViewChilddecorator forexamExerciseImportComponenthas been properly replaced withviewChild.required(), aligning with the signal-based approach.
84-84: Template reference correctly migrated to viewChild function.The
@ViewChilddecorator for the template reference has been properly replaced withviewChild<TemplateRef<any>>()with the correct selector.
239-239: Template reference access updated to function call.The code now correctly calls
this.workingTimeConfirmationContent()as a function instead of accessing it as a property.
271-271: Component reference access updated to function calls.All references to
examExerciseImportComponenthave been properly updated to use the function call syntaxthis.examExerciseImportComponent().Also applies to: 276-276, 306-306, 311-311
src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-dialog.component.ts (5)
1-1: Imports correctly updated for signal-based component.The import statement has been properly updated to include
input,viewChild, andinjectfor the signal-based approach.
36-36: ViewChild correctly migrated to viewChild function.The
@ViewChilddecorator forimportFormhas been properly replaced withviewChild<NgForm>()with the correct selector.
40-41: Input properties correctly migrated to signal-based inputs.The
@Input()decorator properties have been properly converted to use the newinput.required<T>()approach.
87-88: Property access updated to function call with proper null checking.The code has been improved by first retrieving the exam with
const exam = this.exam()and then performing null checking, which is more readable and maintainable.
92-92: Method parameter access updated to function call.The code now correctly calls
this.courseId()as a function when passing it as a parameter to the service method.src/main/webapp/app/exam/shared/events/exam-live-event.component.ts (4)
1-1: Proper signal import added.The import statement has been correctly updated to include the new
inputandoutputfunctions from@angular/core, which are required for Angular's reactive signal-based approach.
26-32: Input and output properties correctly migrated to signals.The component properties have been properly migrated from decorator-based (
@Input,@Output) to signal-based approach:
- Required input
eventusesinput.required<ExamLiveEvent>()- Optional input
showAcknowledgeusesinput(false)with default value- Output events use
output<ExamLiveEvent>()This aligns with Angular's new reactive approach.
42-42: Getter methods correctly updated to use signal syntax.The getter methods have been properly updated to call the
eventinput as a function (this.event()) instead of accessing it as a property, ensuring proper reactivity with the new signal-based approach.Also applies to: 46-46, 50-50, 54-54
58-58: Event emission correctly updated to use signal syntax.The event emission now properly passes the result of calling
this.event()rather than accessing it as a property, maintaining reactivity with the new signal-based approach.Also applies to: 62-62
src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/student-exam-timeline.component.ts (7)
1-1: Component import statements correctly updated for signals.The import statements have been properly updated to include:
viewChildandviewChildrenfor template queriestoObservablefrom Angular's rxjs-interop packageThese imports support the migration to the signal-based approach.
Also applies to: 26-26
73-74: ViewChild references correctly migrated to signal-based queries.The component's view queries have been properly migrated from decorator-based approach to signal-based:
@ViewChildren(ExamSubmissionComponent)→viewChildren(ExamSubmissionComponent)@ViewChild('examNavigationBar')→viewChild.required<ExamNavigationBarComponent>('examNavigationBar')This correctly implements Angular's new reactive template query pattern.
107-107: Method calls updated to use signal function syntax.References to
examNavigationBarComponenthave been properly updated to use function call syntax (examNavigationBarComponent()) to access the signal value, ensuring proper reactivity.Also applies to: 346-346
112-112: ViewChildren changes subscription updated to use toObservable.The subscription to changes in
currentPageComponentsnow usescurrentPageComponentsChanges, which is created usingtoObservable. This follows Angular's recommended pattern for observing changes to signal-based queries.
130-140: Component property updates migrated to use the update pattern.The
activeProgrammingComponentproperty assignments now use theupdate()method, which is the recommended pattern for updating signal values in Angular. This ensures proper reactivity when the properties change.
324-324: Component access updated to use signal function syntax.The access to
currentPageComponentshas been properly updated to use function call syntax (currentPageComponents()) to retrieve the current value of the signal.
437-437: Observable created from ViewChildren signal.A new property
currentPageComponentsChangeshas been added that creates an observable from thecurrentPageComponentssignal usingtoObservable. This follows the recommended pattern for observing changes to signal-based template queries.src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-button.component.ts (5)
1-1: Import statement correctly updated for signals.The import statement has been properly updated to include the new
inputandoutputfunctions from@angular/core, which are required for Angular's reactive signal-based approach.
15-15: Template binding updated to use signal function syntax.The template binding for
[btnSize]has been correctly updated to use function call syntax (buttonSize()) to access the current value of the signal.
29-32: Input properties correctly migrated to signals.The component's input properties have been properly migrated from decorator-based to signal-based approach:
- Required inputs use
input.required<Type>()- Optional input with default value uses
input<Type>(defaultValue)This aligns with Angular's new reactive approach.
33-33: Output event correctly migrated to signal.The output event
uploadDonehas been properly migrated from@Output()withEventEmitterto using the newoutput<void>()function, which is the recommended pattern for signal-based outputs.
46-47: Modal component instance properties correctly updated to use signal values.The assignments to the modal component instance properties now correctly call the signal functions (
this.courseId()andthis.exam()) to access their current values.src/main/webapp/app/exam/shared/working-time-control/working-time-control.component.ts (5)
1-1: Import statement correctly updated for signals and effects.The import statement has been properly updated to include
effectandinputfrom@angular/core, which are required for Angular's reactive signal-based approach and responding to signal changes.
28-37: Input properties correctly migrated to signals.The component's input properties have been properly migrated from decorator-based to signal-based approach:
- Boolean inputs use
input(defaultValue)- String inputs use
input<string>()This aligns with Angular's new reactive approach.
38-38: Exam input correctly migrated to signal.The
examinput property has been properly migrated to use the signal-based approach with optional typing.
40-45: Effect added to react to exam signal changes.A constructor with an
effect()has been added to respond to changes in theexamsignal. This replaces the previous setter approach and ensures the component reacts properly when the exam changes, following Angular's recommended reactive pattern.
105-105: References to exam property updated to use signal function syntax.All references to the
examproperty have been properly updated to use function call syntax (this.exam()) to access the current value of the signal, ensuring proper reactivity throughout the component.Also applies to: 137-140, 148-153
src/main/webapp/app/exam/manage/student-exams/student-exam-detail-table-row/student-exam-detail-table-row.component.ts (4)
1-1: Import changes look goodThe import statement has been properly updated to include
inputfrom@angular/core. This is necessary for the migration to Angular 19's signal-based inputs.
22-30: Successfully migrated from@Input()decorators to signal-based inputsThe component is correctly migrated to use the new Angular 19 signal-based inputs with
input.required<T>()syntax. This approach ensures type safety and makes it clear that these properties are required inputs to the component.
44-46: Function calls replacing direct property accessYou've correctly updated the code to access input properties as functions (e.g.,
this.exercise()instead ofthis.exercise). This is part of the Angular 19 migration to signals.
80-80: Function calls correctly applied in methodsThe method parameter access is correctly updated to use the function call syntax
this.examId().src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts (9)
1-1: Import statements properly updatedThe import statement now correctly includes all the necessary Angular features for signal-based programming:
inject,input,model,output, andsignal.
36-43: Successfully migrated to model-based component propertiesThe migration from
@Input()and@Output()decorators to the new model-based approach usingmodel,input, andoutputfunctions is correctly implemented. This makes the component more reactive and aligns with Angular 19's signal-based architecture.
60-71: Properly updated subscription logic for signal-based accessThe subscription to
exerciseIdSubjectnow correctly calls it as a function withexerciseIdSubject(). The checks for cached reports and map operations also use the function call syntax (cachedDiffReports().has(key),cachedDiffReports().get(key)).
81-87: Function calls correctly applied in methodsThe
loadGitDiffReportmethod now properly accesses properties as functions, includingpreviousSubmission(),currentSubmission(), andexercise().id.
92-93: Correct updating of cached diff reportsThe update to use
cachedDiffReports().set(key, gitDiffReport)andcachedDiffReportsChange.emit(this.cachedDiffReports())properly follows the signal pattern.
100-105: Updated property assignments using function callsThe assignment operations now correctly access properties as functions, including
exercise(),previousSubmission(), andcurrentSubmission().
134-134: Correctly using signal() for NgbModal component inputYou've properly implemented the passing of data to the modal using
signal()according to the retrieved learning which indicates this is necessary until NgbModal supports signal inputs.
143-143: Function calls in utility methodsThe
calculateMapKeymethod correctly uses function calls to accesspreviousSubmission()?.idandcurrentSubmission()?.id.
146-156: Interface implementation updatedThe implementation of interface methods
getExercise(),getExerciseId(), andgetSubmission()now correctly return the values by calling the signal functions.src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time.component.ts (5)
2-2: Import statement correctly updated for signals.The import statement now includes
inject,input, andoutputfrom '@angular/core', which are necessary for the signal-based approach in Angular 19.
22-23: Successfully migrated to signal-based inputs and outputs.The component has been properly updated to use the new signal-based approach with
input.required<Exam>()andoutput<Exam>()instead of the traditional@Input()and@Output()decorators.
46-46: Property access correctly converted to function call.The code now correctly uses
this.exam()to access the exam property, which is necessary when working with signal-based inputs.
64-64: Property assignment correctly updated for signals.The code now properly assigns
this.exam()to the modal component instance, ensuring that the current value of the exam signal is passed.
65-65:✅ Verification successful
Verify subscription cleanup.
This line correctly subscribes to the examChange event from the modal, but please ensure this subscription is properly cleaned up when the modal is closed. The current unsubscribe in ngOnDestroy should handle this, but it's important to verify to prevent potential memory leaks.
🏁 Script executed:
#!/bin/bash # Check if the subscription is properly cleaned up elsewhere in the codebase rg -A 3 -B 3 "subscription.*\.unsubscribe\(\)" src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/Length of output: 1185
Subscription cleanup verified.
Thesubscription.unsubscribe()call inngOnDestroyhas been confirmed insrc/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time.component.ts. No memory leak issue was found based on the current implementation. Please continue ensuring that any future modifications maintain this cleanup pattern.src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist-exercisegroup-table/exam-checklist-exercisegroup-table.component.ts (4)
1-1: Import statement correctly updated for signals.The import statement now includes
inputfrom '@angular/core', which is necessary for the signal-based approach in Angular 19.
19-20: Successfully migrated to signal-based inputs.The component has been properly updated to use the new signal-based approach with
input.required<T>()instead of the traditional@Input()decorators.
31-31: Property check correctly converted to function call.The code now correctly uses
this.exerciseGroups()to check if the exerciseGroups input has a value.
29-79:❓ Verification inconclusive
Verify ngOnChanges behavior with signal-based inputs.
The
ngOnChanges()lifecycle hook traditionally works with@Input()properties, but may behave differently with signal-based inputs. It's important to verify that changes to the inputs still trigger this method correctly.Consider subscribing to the signal values directly or using a different approach if ngOnChanges isn't consistently triggered with signal inputs.
🏁 Script executed:
#!/bin/bash # Check how other components handle changes with signal-based inputs rg -A 5 "ngOnChanges.*input\." --type=ts src/main/webapp/Length of output: 59
Action: Confirm Signal Behavior in ngOnChanges
The current implementation of
ngOnChanges()is intended to handle updates for traditional@Input()properties. However, if you're now using signal-based inputs, it's important to manually verify that changes to these signal values are appropriately detected byngOnChanges(). There was no evidence found in the codebase showing how other components manage signal-based inputs with this lifecycle hook. Please ensure that:
- Signal-based inputs (if any) in this component indeed trigger
ngOnChanges().- If not, consider subscribing directly to the signal values or switch to an alternative approach that aligns with Angular’s signal reactivity model.
...-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time-dialog.component.ts
Show resolved
Hide resolved
src/main/webapp/app/exam/shared/working-time-control/working-time-control.component.ts
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/main/webapp/app/exam/manage/exam-status.component.ts (2)
258-262: Optimize optional chaining in isExamReviewRunningThe property accesses have been properly updated to use function calls, but the static analysis tool suggests optimizing the optional chaining.
return ( - ((!exam.examStudentReviewStart && exam.examStudentReviewEnd && exam.examStudentReviewEnd.isAfter(dayjs())) || - (exam.examStudentReviewStart && exam.examStudentReviewStart.isBefore(dayjs()) && exam.examStudentReviewEnd!.isAfter(dayjs()))) ?? + ((!exam.examStudentReviewStart && exam.examStudentReviewEnd?.isAfter(dayjs())) || + (exam.examStudentReviewStart?.isBefore(dayjs()) && exam.examStudentReviewEnd?.isAfter(dayjs()))) ?? false );🧰 Tools
🪛 Biome (1.9.4)
[error] 261-261: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
269-272: Optimize optional chaining in isExamReviewPlannedThe property access has been updated to use function calls, but the static analysis tool suggests optimizing the optional chaining here as well.
-return (exam.examStudentReviewStart && exam.examStudentReviewStart.isAfter(dayjs())) ?? false; +return exam.examStudentReviewStart?.isAfter(dayjs()) ?? false;🧰 Tools
🪛 Biome (1.9.4)
[error] 271-271: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/main/webapp/app/exam/manage/exam-status.component.html(6 hunks)src/main/webapp/app/exam/manage/exam-status.component.ts(11 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/main/webapp/app/exam/manage/exam-status.component.html
🧰 Additional context used
📓 Path-based instructions (1)
`src/main/webapp/**/*.ts`: angular_style:https://angular.io/...
src/main/webapp/app/exam/manage/exam-status.component.ts
🪛 Biome (1.9.4)
src/main/webapp/app/exam/manage/exam-status.component.ts
[error] 261-261: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 271-271: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (9)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: Call Build Workflow / Build and Push Docker Image
- GitHub Check: Call Build Workflow / Build .war artifact
- GitHub Check: client-style
- GitHub Check: client-tests-selected
- GitHub Check: server-style
- GitHub Check: client-tests
- GitHub Check: server-tests
- GitHub Check: Analyse
🔇 Additional comments (13)
src/main/webapp/app/exam/manage/exam-status.component.ts (13)
1-1: Updated imports to support signalsThe imports have been properly updated to include
injectandinputfunctions that are part of Angular's newer approach to component inputs.
41-42: Input declarations migrated to signalsThe component's inputs have been correctly migrated from the traditional
@Input()decorator pattern to the modern signals approach usinginput.required<T>(). This is aligned with the Angular 19 migration goal.
79-86: Updated access pattern in ngOnInitThe property access has been correctly updated to use function calls (
this.exam()) instead of direct property access.
88-93: Access pattern in ngOnChanges needs reviewThe property accesses have been properly updated to function calls, but the non-null assertion on
testExam!should be reviewed. Since you're using the function call pattern, consider checking for undefined before accessing properties.Instead of using non-null assertion, consider:
-this.isTestExam = this.exam().testExam!; +this.isTestExam = !!this.exam().testExam;
94-97: Optional chaining check improvedThe check for
isAtLeastInstructorusing optional chaining with the function call pattern looks good.
113-118: Signal access in ngOnDestroy correctly implementedThe component properly cleans up subscriptions in
ngOnDestroyand has updated the access pattern to use function calls.
124-136: Access pattern updated in private methodsAll property accesses have been properly updated to use function calls in the
areAllExercisesConfiguredmethod.
171-173: Conditional check with signal accessThe conditional logic has been correctly updated to access properties through function calls.
186-186: Property access in setReviewState correctly updatedThe property access has been properly updated to use function calls.
203-205: Signal access pattern in setCorrectionStateProperty accesses have been correctly updated to use function calls.
224-226: Exam service calls updated correctlyThe calls to the
examChecklistServicemethods have been updated to pass the result ofthis.exam()function call.
241-244: Local variable for signal value improves readabilityGood practice to store the signal value in a local variable before using it multiple times.
249-252: The examAlreadyEnded method uses correct signal accessThis follows the same pattern as the previous method by storing the signal value locally. The implementation matches previous reviewer suggestions.
helios-aet
bot
temporarily deployed
to
artemis-test1.artemis.cit.tum.de
Checklist
General
Client
Description
This pull request is a key step in our Angular 19 migration. It focuses on migrating all components within the
managepackage of the exam mode to utilize signal inputs, signal outputs, and signal queries.Steps for Testing
Prerequisites:
Please verify that everything works as expected in Exam Management. In particular, check that it is possible to:
Additionally, please verify that the exam checklist and exam status bar function as expected.
Testserver States
You can manage test servers using Helios. Check environment statuses in the environment list. To deploy to a test server, go to the CI/CD page, find your PR or branch, and trigger the deployment.
Review Progress
Performance Review
Code Review
Manual Tests
Summary by CodeRabbit
Refactor
Tests
inputfunction for property assignments, enhancing dependency injection and state management in tests.