Fix Angular 21 upgrade issues: change detection, test mocks, and modal dropdowns

eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('EmailRecipientTagNewComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };

eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-delete/shared-tag-delete.component.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('EmailRecipientTagDeleteComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn()
     };

eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-edit/shared-tag-edit.component.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('EmailRecipientTagEditComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };

eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, inject } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, inject, ChangeDetectorRef } from '@angular/core';
 import {
   EntityGroupEditModel,
   EntityItemModel,
@@ -37,6 +37,7 @@ export class EntityEditCreateComponent implements OnInit, OnDestroy{
   private location = inject(Location);
   dialog = inject(MatDialog);
   private overlay = inject(Overlay);
+  private cdr = inject(ChangeDetectorRef);
 
   entityGroupEditModel: EntityGroupEditModel = new EntityGroupEditModel();
   @ViewChild('frame', { static: true }) frame;
@@ -91,6 +92,8 @@ export class EntityEditCreateComponent implements OnInit, OnDestroy{
               description: data.model.description,
             }
             this.actualizeEntityItemPositions();
+            // Trigger change detection after async update
+            this.cdr.detectChanges();
           }
         });
     } else if (this.header === 'selectable'){
@@ -108,6 +111,8 @@ export class EntityEditCreateComponent implements OnInit, OnDestroy{
               description: data.model.description,
             }
             this.actualizeEntityItemPositions();
+            // Trigger change detection after async update
+            this.cdr.detectChanges();
           }
         });
     }

eform-client/src/app/components/footer/footer.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit, DestroyRef } from '@angular/core';
+import { Component, inject, OnInit, DestroyRef, ChangeDetectorRef } from '@angular/core';
 import { Store } from '@ngrx/store';
 import {
   selectCurrentUserFullName,
@@ -36,6 +36,7 @@ export class FooterComponent implements OnInit {
   private authStore = inject(Store);
   private destroyRef = inject(DestroyRef);
   private selectCurrentUserClaims$ = this.authStore.select(selectCurrentUserClaims);
+  private cdr = inject(ChangeDetectorRef);
 
   fullName = '';
   userName = '';
@@ -46,15 +47,27 @@ export class FooterComponent implements OnInit {
   ngOnInit() {
     this.store.select(selectCurrentUserFullName)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(name => this.fullName = name);
+      .subscribe(name => {
+        this.fullName = name;
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
+      });
 
     this.store.select(selectCurrentUserName)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(user => this.userName = user);
+      .subscribe(user => {
+        this.userName = user;
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
+      });
 
     this.store.select(selectCurrentUserAvatarUrl)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(url => this.avatarUrl = url);
+      .subscribe(url => {
+        this.avatarUrl = url;
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
+      });
   }
 
   checkGuards(guards: string[]): Observable<boolean> {

eform-client/src/app/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, ChangeDetectorRef } from '@angular/core';
 import {Router} from '@angular/router';
 import {EventBrokerService} from 'src/app/common/helpers';
 import {HeaderSettingsModel} from 'src/app/common/models/settings';
@@ -16,6 +16,7 @@ export class HeaderComponent implements OnInit {
   private eventBrokerService = inject(EventBrokerService);
   private settingsService = inject(AppSettingsService);
   private router = inject(Router);
+  private cdr = inject(ChangeDetectorRef);
 
   headerSettingsModel: HeaderSettingsModel = new HeaderSettingsModel;
   logoImage: any;
@@ -46,6 +47,8 @@ export class HeaderComponent implements OnInit {
             } else if (!this.headerSettingsModel.imageLink) {
               this.logoImage = '../../../assets/images/logo.png';
             }
+            // Trigger change detection after async update
+            this.cdr.detectChanges();
           }
         }));
       } else {

eform-client/src/app/components/layouts/full-layout/full-layout.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, OnDestroy, OnInit, Renderer2, ViewChild, inject } from '@angular/core';
+import { AfterViewInit, Component, HostListener, OnDestroy, OnInit, Renderer2, ViewChild, inject, ChangeDetectorRef } from '@angular/core';
 import {AuthStateService} from 'src/app/common/store';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Observable, of, Subscription, take, tap} from 'rxjs';
@@ -46,6 +46,7 @@ export class FullLayoutComponent implements OnInit, OnDestroy, AfterViewInit {
   private eventBrokerService = inject(EventBrokerService);
   private settingsService = inject(AppSettingsService);
   private loaderService = inject(LoaderService);
+  private cdr = inject(ChangeDetectorRef);
 
   @ViewChild('drawer') drawer: MatDrawer;
   isDarkThemeAsync$: Subscription;
@@ -136,6 +137,8 @@ export class FullLayoutComponent implements OnInit, OnDestroy, AfterViewInit {
         } else if (!this.headerSettingsModel.imageLink) {
           this.logoImage = '../../../assets/images/logo.png';
         }
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
       }
     }));
   }

eform-client/src/app/components/navigation/navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, inject } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, inject, ChangeDetectorRef } from '@angular/core';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Observable, Subscription} from 'rxjs';
 import { MatTreeNestedDataSource, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodePadding, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeOutlet } from '@angular/material/tree';
@@ -34,6 +34,7 @@ interface MenuNode {
 export class NavigationComponent implements OnInit, OnDestroy {
   router = inject(Router);
   private authStore = inject(Store);
+  private cdr = inject(ChangeDetectorRef);
 
   @Output() clickOnLink: EventEmitter<void> = new EventEmitter<void>();
 
@@ -58,6 +59,8 @@ export class NavigationComponent implements OnInit, OnDestroy {
         if (x.length > 0) {
           this.menu.data = [...x];
           this.restoreOpenedMenu();
+          // Trigger change detection after async update
+          this.cdr.detectChanges();
         }
       });
     });

eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, ChangeDetectorRef } from '@angular/core';
 import {
   EntityGroupModel,
   Paged,
@@ -48,6 +48,7 @@ export class EntitySearchComponent implements OnInit, OnDestroy {
   private dialog = inject(MatDialog);
   private overlay = inject(Overlay);
   private translateService = inject(TranslateService);
+  private cdr = inject(ChangeDetectorRef);
 
   advEntitySearchableGroupListModel: Paged<EntityGroupModel> = new Paged<EntityGroupModel>();
   entitySearchRemoveComponentAfterClosedSub$: Subscription;
@@ -84,6 +85,8 @@ export class EntitySearchComponent implements OnInit, OnDestroy {
         if (data && data.model) {
           this.advEntitySearchableGroupListModel = data.model;
           this.store.dispatch(updateEntitySearchTotal({total: data.model.total}));
+          // Trigger change detection after async update
+          this.cdr.detectChanges();
         }
       });
   }

eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, ChangeDetectorRef } from '@angular/core';
 import {
   Paged,
   EntityGroupModel,
@@ -50,6 +50,7 @@ export class EntitySelectComponent implements OnInit, OnDestroy {
   private dialog = inject(MatDialog);
   private overlay = inject(Overlay);
   private translateService = inject(TranslateService);
+  private cdr = inject(ChangeDetectorRef);
 
   advEntitySelectableGroupListModel: Paged<EntityGroupModel> = new Paged<EntityGroupModel>();
   entitySelectRemoveComponentAfterClosedSub$: Subscription;
@@ -87,6 +88,8 @@ export class EntitySelectComponent implements OnInit, OnDestroy {
         if (data && data.model) {
           this.advEntitySelectableGroupListModel = data.model;
           this.store.dispatch(updateEntitySelectTotal({total: data.model.total}));
+          // Trigger change detection after async update
+          this.cdr.detectChanges();
         }
       });
   }

eform-client/src/app/modules/advanced/components/folders/folder-delete/folder-delete.component.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { FolderDeleteComponent } from './folder-delete.component';
 import { FoldersService } from 'src/app/common/services';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -21,12 +21,22 @@ describe('FolderDeleteComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     mockFoldersService = {
           deleteSingleFolder: vi.fn(),
         };

eform-client/src/app/modules/advanced/components/folders/folders/folders.component.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { FoldersComponent } from './folders.component';
 import { FoldersService } from 'src/app/common/services';
 import { MatDialog } from '@angular/material/dialog';
@@ -23,16 +23,33 @@ describe('FoldersComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockAppMenuStateService = {
       updateState: vi.fn(),
       loadMobileMenuItems: vi.fn()
     };
+    const mockChangeDetectorRef = {
+      markForCheck: vi.fn(),
+      detectChanges: vi.fn(),
+      checkNoChanges: vi.fn(),
+      detach: vi.fn(),
+      reattach: vi.fn()
+    };
     mockFoldersService = {
           getAllFolders: vi.fn(),
           getAllFoldersList: vi.fn(),
@@ -54,6 +71,7 @@ describe('FoldersComponent', () => {
         { provide: Store, useValue: mockStore },
         { provide: TranslateService, useValue: mockTranslateService },
         { provide: AppMenuStateService, useValue: mockAppMenuStateService },
+        { provide: ChangeDetectorRef, useValue: mockChangeDetectorRef },
         { provide: Overlay, useValue: { scrollStrategies: { reposition: () => ({}) } } }
     ],
     schemas: [NO_ERRORS_SCHEMA]