Development: Migrate exam mode client module to Angular 21 signals, Vitest, and PrimeNG dialogs (#12603)

Author: krusche

.github/workflows/test.yml

@@ -238,7 +238,7 @@ jobs:
 
   client-tests:
     runs-on: aet-large-ubuntu
-    timeout-minutes: 30
+    timeout-minutes: 45
     steps:
         - uses: actions/checkout@v6
         # It seems like there is some memory issue with these tests with the project-wide default node option

CLAUDE.md

@@ -169,6 +169,7 @@ Organized by feature module:
   - All new UI elements must be implemented using PrimeNG components
   - We are migrating from Bootstrap to PrimeNG; do not introduce new Bootstrap components
   - Existing Bootstrap usage will be migrated incrementally
+  - **`@ng-bootstrap/ng-bootstrap` is deprecated** — do not use `NgbModal`, `NgbActiveModal`, `NgbModalRef`, `NgbTooltip`, `NgbDropdown`, etc. in new code. Use PrimeNG's `DialogService` (`primeng/dynamicdialog`) for modals, `p-tooltip` for tooltips, etc. ng-bootstrap is incompatible with Angular signal inputs (assigning to `modalRef.componentInstance.X` silently fails when `X` is `input()`/`input.required()`). Existing usages are being migrated.
 
 ### General
 - LF line endings

documentation/docs/developer/guidelines/client-development.mdx

@@ -69,11 +69,16 @@ Use Angular's signal-based APIs instead. An ESLint rule (`enforce-signal-apis-in
 
 **UI Component Library: PrimeNG**
 
+<Callout variant={CalloutVariant.danger}>
+**`@ng-bootstrap/ng-bootstrap` is deprecated.** Do not use `NgbModal`, `NgbActiveModal`, `NgbModalRef`, `NgbTooltip`, `NgbDropdown`, or any other ng-bootstrap component in new code. ng-bootstrap is incompatible with Angular signal inputs (`input()`/`input.required()`) — assigning to a signal input via `modalRef.componentInstance.X = Y` silently fails. We are removing the dependency entirely; existing usages are being migrated to PrimeNG incrementally.
+</Callout>
+
 <Callout variant={CalloutVariant.info}>
 **We are migrating from Bootstrap to PrimeNG.** All new UI elements must be implemented using [PrimeNG](https://primeng.org/) components. Do not introduce new Bootstrap components. Existing Bootstrap usage will be migrated incrementally.
 </Callout>
 
 * Use PrimeNG components (buttons, tables, dialogs, inputs, etc.) for all new UI development.
+* For modals/dialogs, use PrimeNG's `DialogService` (`primeng/dynamicdialog`) — see `src/main/webapp/app/exam/manage/exam-management/exam-management.component.ts` for a reference implementation.
 * Refer to the PrimeNG documentation for available components and usage: https://primeng.org/
 * Bootstrap CSS utility classes (e.g. `d-flex`, `ms-2`) may still be used for layout until the migration is complete, but prefer PrimeNG's built-in layout capabilities where available.
 

jest.config.js

@@ -109,6 +109,17 @@ module.exports = {
         '!<rootDir>/src/main/webapp/app/shared/table-view/**',          // table view module uses Vitest (see vitest.config.ts)
         '!<rootDir>/src/main/webapp/app/shared/components/buttons/**',  // buttons module uses Vitest (see vitest.config.ts)
         '!<rootDir>/src/main/webapp/app/exam/manage/students/**', // exam manage students module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/student-exams/**', // exam manage student-exams module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/test-runs/**', // exam manage test-runs module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/exercise-groups/**', // exam manage exercise groups module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/suspicious-behavior/**', // exam manage suspicious behavior module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/services/**', // exam manage services module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/exam-management/**', // exam management module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/exam-scores/**', // exam scores module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/exam-status/**', // exam status module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/manage/exams/**', // exam manage exams (detail/import/update/checklist/mode-picker) uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/shared/**', // exam shared module uses Vitest (see vitest.config.ts)
+        '!<rootDir>/src/main/webapp/app/exam/overview/**', // exam overview module uses Vitest (see vitest.config.ts)
         '!<rootDir>/src/main/webapp/app/shared/feature-toggle/**', // feature-toggle service uses Vitest (see vitest.config.ts)
         '!<rootDir>/src/main/webapp/app/shared/sort/**', // sort directives use vitest (see vitest.config.ts)
         '!<rootDir>/src/main/webapp/app/shared/user-import/util/**', // user import utils use Vitest (see vitest.config.ts)
@@ -142,6 +153,17 @@ module.exports = {
         '<rootDir>/src/main/webapp/app/atlas/',             // atlas module uses Vitest
         '<rootDir>/src/main/webapp/app/shared/components/buttons/', // buttons module uses Vitest
         '<rootDir>/src/main/webapp/app/exam/manage/students/', // exam manage students module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/student-exams/', // exam manage student-exams module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/test-runs/', // exam manage test-runs module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/exercise-groups/', // exam manage exercise groups module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/suspicious-behavior/', // exam manage suspicious behavior module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/services/', // exam manage services module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/exam-management/', // exam management module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/exam-scores/', // exam scores module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/exam-status/', // exam status module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/manage/exams/', // exam manage exams uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/shared/', // exam shared module uses Vitest
+        '<rootDir>/src/main/webapp/app/exam/overview/', // exam overview module uses Vitest
         '<rootDir>/src/main/webapp/app/shared/sort/', // sort directives use Vitest
         '<rootDir>/src/main/webapp/app/shared/user-import/util/', // user import utils use Vitest
         '<rootDir>/src/main/webapp/app/shared/table-view/', // table view module uses Vitest
@@ -159,12 +181,15 @@ module.exports = {
     ],
     // Global coverage thresholds for Jest. Modules using Vitest (e.g., fileupload) have their own
     // coverage thresholds in vitest.config.ts. Per-module thresholds are enforced by check-client-module-coverage.mjs
+    // Lowered with the exam-module Vitest migration: when ~100 spec files moved from Jest to Vitest,
+    // a few peripheral helpers stopped being touched by the Jest run, dropping each global metric by 1-2pp.
+    // Per-file coverage is unchanged — the exam-module tests still cover the same files, just under Vitest.
     coverageThreshold: {
         global: {
-            statements: 85.5,
-            branches: 74.1,
-            functions: 75.4,
-            lines: 86.5,
+            statements: 83.5,
+            branches: 73,
+            functions: 73,
+            lines: 84.5,
         },
     },
     // 'json-summary' reporter is used by supporting_scripts/code-coverage/module-coverage-client/check-client-module-coverage.mjs
@@ -201,6 +226,17 @@ module.exports = {
         '<rootDir>/src/main/webapp/app/tutorialgroup/', // tutorialgroup module
         '<rootDir>/src/main/webapp/app/atlas/',         // atlas module
         '<rootDir>/src/main/webapp/app/exam/manage/students/', // exam manage students module
+        '<rootDir>/src/main/webapp/app/exam/manage/student-exams/', // exam manage student-exams module
+        '<rootDir>/src/main/webapp/app/exam/manage/test-runs/', // exam manage test-runs module
+        '<rootDir>/src/main/webapp/app/exam/manage/exercise-groups/', // exam manage exercise groups module
+        '<rootDir>/src/main/webapp/app/exam/manage/suspicious-behavior/', // exam manage suspicious behavior module
+        '<rootDir>/src/main/webapp/app/exam/manage/services/', // exam manage services module
+        '<rootDir>/src/main/webapp/app/exam/manage/exam-management/', // exam management module (vitest)
+        '<rootDir>/src/main/webapp/app/exam/manage/exam-scores/', // exam scores module (vitest)
+        '<rootDir>/src/main/webapp/app/exam/manage/exam-status/', // exam status module (vitest)
+        '<rootDir>/src/main/webapp/app/exam/manage/exams/', // exam manage exams (detail/import/update/checklist/mode-picker) (vitest)
+        '<rootDir>/src/main/webapp/app/exam/shared/', // exam shared module (vitest)
+        '<rootDir>/src/main/webapp/app/exam/overview/', // exam overview module (vitest)
         '<rootDir>/src/main/webapp/app/shared/components/buttons/', // shared/buttons components
         '<rootDir>/src/main/webapp/app/shared/table-view/', // shared/table-view component
         '<rootDir>/src/main/webapp/app/shared/feature-toggle/', // feature-toggle service (vitest)

src/main/webapp/app/core/course/overview/course-overview/course-overview.component.ts

@@ -115,7 +115,11 @@ export class CourseOverviewComponent extends BaseCourseContainerComponent implem
 
     async ngOnInit() {
         this.toggleSidebarEventSubscription = this.courseSidebarService.toggleSidebar$.subscribe(() => {
-            this.isSidebarCollapsed.update((value) => this.activatedComponentReference()?.isCollapsed ?? !value);
+            this.isSidebarCollapsed.update((value) => {
+                const componentRef = this.activatedComponentReference();
+                const componentCollapsed = typeof componentRef?.isCollapsed === 'function' ? componentRef.isCollapsed() : (componentRef?.isCollapsed as boolean | undefined);
+                return componentCollapsed ?? !value;
+            });
         });
 
         this.subscription = this.route?.params.subscribe(async (params: { courseId: string }) => {
@@ -149,7 +153,9 @@ export class CourseOverviewComponent extends BaseCourseContainerComponent implem
         });
 
         this.courseActionItems.set(this.getCourseActionItems());
-        this.isSidebarCollapsed.set(this.activatedComponentReference()?.isCollapsed ?? false);
+        const componentRef = this.activatedComponentReference();
+        const componentCollapsed = typeof componentRef?.isCollapsed === 'function' ? componentRef.isCollapsed() : (componentRef?.isCollapsed as boolean | undefined);
+        this.isSidebarCollapsed.set(componentCollapsed ?? false);
         this.sidebarItems.set(this.getSidebarItems());
         await this.initAfterCourseLoad();
     }
@@ -293,7 +299,8 @@ export class CourseOverviewComponent extends BaseCourseContainerComponent implem
         }
         const childRouteComponent = this.activatedComponentReference();
         childRouteComponent?.toggleSidebar();
-        this.isSidebarCollapsed.set(childRouteComponent!.isCollapsed);
+        const componentCollapsed = typeof childRouteComponent!.isCollapsed === 'function' ? childRouteComponent!.isCollapsed() : (childRouteComponent!.isCollapsed as boolean);
+        this.isSidebarCollapsed.set(componentCollapsed);
     }
 
     getShowRefreshButton(): void {

src/main/webapp/app/exam/manage/exam-management/exam-management.component.spec.ts

@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpResponse, provideHttpClient } from '@angular/common/http';
 import { LocalStorageService } from 'app/shared/service/local-storage.service';
 import { SessionStorageService } from 'app/shared/service/session-storage.service';
@@ -27,8 +27,12 @@ import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { MockDialogService } from 'test/helpers/mocks/service/mock-dialog.service';
 import { MockRouter } from 'test/helpers/mocks/mock-router';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
 
 describe('Exam Management Component', () => {
+    setupTestBed({ zoneless: true });
+
     const course = { id: 456 } as Course;
     const exam = new Exam();
     exam.course = course;
@@ -45,9 +49,9 @@ describe('Exam Management Component', () => {
 
     const route = { snapshot: { paramMap: convertToParamMap({ courseId: course.id }) }, url: new Observable<UrlSegment[]>() } as any as ActivatedRoute;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            declarations: [
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
                 ExamManagementComponent,
                 MockDirective(HasAnyAuthorityDirective),
                 MockPipe(ArtemisTranslatePipe),
@@ -82,13 +86,13 @@ describe('Exam Management Component', () => {
 
     afterEach(() => {
         // completely restore all fakes created through the sandbox
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it('should call find of courseManagementService to get course on init', () => {
         // GIVEN
         const responseFakeCourse = { body: course as Course } as HttpResponse<Course>;
-        jest.spyOn(courseManagementService, 'find').mockReturnValue(of(responseFakeCourse));
+        vi.spyOn(courseManagementService, 'find').mockReturnValue(of(responseFakeCourse));
 
         // WHEN
         comp.ngOnInit();
@@ -101,9 +105,9 @@ describe('Exam Management Component', () => {
     it('should call loadAllExamsForCourse on init', () => {
         // GIVEN
         const responseFakeCourse = { body: course as Course } as HttpResponse<Course>;
-        jest.spyOn(courseManagementService, 'find').mockReturnValue(of(responseFakeCourse));
+        vi.spyOn(courseManagementService, 'find').mockReturnValue(of(responseFakeCourse));
         const responseFakeExams = { body: [exam] } as HttpResponse<Exam[]>;
-        jest.spyOn(service, 'findAllExamsForCourse').mockReturnValue(of(responseFakeExams));
+        vi.spyOn(service, 'findAllExamsForCourse').mockReturnValue(of(responseFakeExams));
 
         // WHEN
         comp.ngOnInit();
@@ -116,14 +120,14 @@ describe('Exam Management Component', () => {
     it('should call getLatestIndividualDate on init', () => {
         // GIVEN
         const responseFakeCourse = { body: course as Course } as HttpResponse<Course>;
-        jest.spyOn(courseManagementService, 'find').mockReturnValue(of(responseFakeCourse));
+        vi.spyOn(courseManagementService, 'find').mockReturnValue(of(responseFakeCourse));
         const responseFakeExams = { body: [exam] } as HttpResponse<Exam[]>;
-        jest.spyOn(service, 'findAllExamsForCourse').mockReturnValue(of(responseFakeExams));
+        vi.spyOn(service, 'findAllExamsForCourse').mockReturnValue(of(responseFakeExams));
 
         const examInformationDTO = new ExamInformationDTO();
         examInformationDTO.latestIndividualEndDate = dayjs();
         const responseFakeLatestIndividualEndDateOfExam = { body: examInformationDTO } as HttpResponse<ExamInformationDTO>;
-        jest.spyOn(service, 'getLatestIndividualEndDateOfExam').mockReturnValue(of(responseFakeLatestIndividualEndDateOfExam));
+        vi.spyOn(service, 'getLatestIndividualEndDateOfExam').mockReturnValue(of(responseFakeLatestIndividualEndDateOfExam));
 
         // WHEN
         comp.ngOnInit();
@@ -137,7 +141,7 @@ describe('Exam Management Component', () => {
         // GIVEN
         comp.course = course;
         const responseFakeExams = { body: [exam] } as HttpResponse<Exam[]>;
-        jest.spyOn(service, 'findAllExamsForCourse').mockReturnValue(of(responseFakeExams));
+        vi.spyOn(service, 'findAllExamsForCourse').mockReturnValue(of(responseFakeExams));
 
         // WHEN
         comp.registerChangeInExams();
@@ -156,7 +160,7 @@ describe('Exam Management Component', () => {
         const examHasFinished = comp.examHasFinished(exam);
 
         // THEN
-        expect(examHasFinished).toBeFalse();
+        expect(examHasFinished).toBe(false);
     });
 
     it('should return true for examHasFinished when exam is in the past', () => {
@@ -167,7 +171,7 @@ describe('Exam Management Component', () => {
         const examHasFinished = comp.examHasFinished(exam);
 
         // THEN
-        expect(examHasFinished).toBeTrue();
+        expect(examHasFinished).toBe(true);
     });
 
     it('should return false for examHasFinished when exam is in the future', () => {
@@ -178,7 +182,7 @@ describe('Exam Management Component', () => {
         const examHasFinished = comp.examHasFinished(exam);
 
         // THEN
-        expect(examHasFinished).toBeFalse();
+        expect(examHasFinished).toBe(false);
     });
 
     it('should return exam.id, when item in the exam table is being tracked', () => {
@@ -191,7 +195,7 @@ describe('Exam Management Component', () => {
 
     it('should call sortService when sortRows is called', () => {
         // GIVEN
-        jest.spyOn(sortService, 'sortByProperty').mockReturnValue([]);
+        vi.spyOn(sortService, 'sortByProperty').mockReturnValue([]);
 
         // WHEN
         comp.sortRows();
@@ -200,21 +204,21 @@ describe('Exam Management Component', () => {
         expect(sortService.sortByProperty).toHaveBeenCalledOnce();
     });
 
-    it('should open the import dialog for exams', fakeAsync(() => {
+    it('should open the import dialog for exams', async () => {
         const onCloseSubject = new Subject<Exam | undefined>();
         const mockDialogRef = { onClose: onCloseSubject.asObservable() } as DynamicDialogRef;
-        jest.spyOn(dialogService, 'open').mockReturnValue(mockDialogRef);
-        jest.spyOn(router, 'navigate');
+        vi.spyOn(dialogService, 'open').mockReturnValue(mockDialogRef);
+        vi.spyOn(router, 'navigate');
 
         comp.course = { id: 1 } as Course;
         comp.openImportModal();
 
         // Simulate dialog closing with result
         onCloseSubject.next(exam);
         onCloseSubject.complete();
-        tick();
+        await fixture.whenStable();
 
         expect(dialogService.open).toHaveBeenCalledOnce();
         expect(router.navigate).toHaveBeenCalledOnce();
-    }));
+    });
 });