114077: Fixed ViewChild not working correctly

Author: alexandrevryghem

src/app/profile-page/profile-page.component.spec.ts

@@ -2,7 +2,7 @@ import { ProfilePageComponent } from './profile-page.component';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { VarDirective } from '../shared/utils/var.directive';
 import { TranslateModule } from '@ngx-translate/core';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { EPerson } from '../core/eperson/models/eperson.model';
 import { StoreModule } from '@ngrx/store';
@@ -93,7 +93,7 @@ describe('ProfilePageComponent', () => {
       imports: [
         StoreModule.forRoot({ auth: authReducer }, storeModuleConfig),
         TranslateModule.forRoot(),
-        RouterTestingModule.withRoutes([])
+        RouterModule.forRoot([]),
       ],
       providers: [
         { provide: EPersonDataService, useValue: epersonService },
@@ -122,9 +122,13 @@ describe('ProfilePageComponent', () => {
     describe('updateProfile', () => {
       describe('when the metadata form returns false and the security form returns true', () => {
         beforeEach(() => {
-          component.metadataForm = jasmine.createSpyObj('metadataForm', {
-            updateProfile: false
-          });
+          component.metadataForm = {
+            compRef: {
+              instance: {
+                updateProfile: () => false,
+              },
+            },
+          } as any;
           spyOn(component, 'updateSecurity').and.returnValue(true);
           component.updateProfile();
         });
@@ -136,9 +140,13 @@ describe('ProfilePageComponent', () => {
 
       describe('when the metadata form returns true and the security form returns false', () => {
         beforeEach(() => {
-          component.metadataForm = jasmine.createSpyObj('metadataForm', {
-            updateProfile: true
-          });
+          component.metadataForm = {
+            compRef: {
+              instance: {
+                updateProfile: () => true,
+              },
+            },
+          } as any;
           component.updateProfile();
         });
 
@@ -149,9 +157,13 @@ describe('ProfilePageComponent', () => {
 
       describe('when the metadata form returns true and the security form returns true', () => {
         beforeEach(() => {
-          component.metadataForm = jasmine.createSpyObj('metadataForm', {
-            updateProfile: true
-          });
+          component.metadataForm = {
+            compRef: {
+              instance: {
+                updateProfile: () => true,
+              },
+            },
+          } as any;
           component.updateProfile();
         });
 
@@ -162,9 +174,13 @@ describe('ProfilePageComponent', () => {
 
       describe('when the metadata form returns false and the security form returns false', () => {
         beforeEach(() => {
-          component.metadataForm = jasmine.createSpyObj('metadataForm', {
-            updateProfile: false
-          });
+          component.metadataForm = {
+            compRef: {
+              instance: {
+                updateProfile: () => false,
+              },
+            },
+          } as any;
           component.updateProfile();
         });
 

src/app/profile-page/profile-page.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { EPerson } from '../core/eperson/models/eperson.model';
-import { ProfilePageMetadataFormComponent } from './profile-page-metadata-form/profile-page-metadata-form.component';
+import { ThemedProfilePageMetadataFormComponent } from './profile-page-metadata-form/themed-profile-page-metadata-form.component';
 import { NotificationsService } from '../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { Group } from '../core/eperson/models/group.model';
@@ -32,7 +32,7 @@ export class ProfilePageComponent implements OnInit {
   /**
    * A reference to the metadata form component
    */
-  @ViewChild(ProfilePageMetadataFormComponent) metadataForm: ProfilePageMetadataFormComponent;
+  @ViewChild(ThemedProfilePageMetadataFormComponent) metadataForm: ThemedProfilePageMetadataFormComponent;
 
   /**
    * The authenticated user as observable
@@ -114,8 +114,8 @@ export class ProfilePageComponent implements OnInit {
    * Fire an update on both the metadata and security forms
    * Show a warning notification when no changes were made in both forms
    */
-  updateProfile() {
-    const metadataChanged = this.metadataForm.updateProfile();
+  updateProfile(): void {
+    const metadataChanged = this.metadataForm.compRef.instance.updateProfile();
     const securityChanged = this.updateSecurity();
     if (!metadataChanged && !securityChanged) {
       this.notificationsService.warning(

src/app/shared/theme-support/themed.component.ts

@@ -27,7 +27,7 @@ import { BASE_THEME_NAME } from './theme.constants';
 export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges {
   @ViewChild('vcr', { read: ViewContainerRef }) vcr: ViewContainerRef;
   @ViewChild('content') themedElementContent: ElementRef;
-  protected compRef: ComponentRef<T>;
+  compRef: ComponentRef<T>;
 
   /**
    * A reference to the themed component. Will start as undefined and emit every time the themed