fix(Forgot Teacher Password): Blank page

Author: hirokiterashima

src/app/forgot/teacher/forgot-teacher-password/forgot-teacher-password.component.spec.ts

@@ -30,14 +30,26 @@ class MockConfigService {
 describe('ForgotTeacherPasswordComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [RecaptchaV3Module, ForgotTeacherPasswordComponent],
+      imports: [ForgotTeacherPasswordComponent],
       providers: [
         { provide: TeacherService, useClass: MockTeacherService },
         { provide: ConfigService, useClass: MockConfigService },
-        { provide: RECAPTCHA_V3_SITE_KEY, useValue: '' },
+        { provide: RECAPTCHA_V3_SITE_KEY, useValue: '123' },
+        {
+          provide: ReCaptchaV3Service,
+          useValue: {
+            execute: jasmine.createSpy('execute').and.returnValue(of('mock-token'))
+          }
+        },
         provideRouter([])
       ]
-    });
+    })
+      .overrideComponent(ForgotTeacherPasswordComponent, {
+        remove: {
+          imports: [RecaptchaV3Module]
+        }
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -84,7 +96,6 @@ async function changePassword() {
       component.isRecaptchaEnabled = true;
       teacherService = TestBed.inject(TeacherService);
       const observableResponse = createObservableResponse('failed', 'recaptchaResponseInvalid');
-      spyOn(recaptchaV3Service, 'execute').and.returnValue(of('token'));
       spyOn(teacherService, 'getVerificationCodeEmail').and.returnValue(observableResponse);
       await component.submit();
       fixture.detectChanges();
@@ -108,7 +119,6 @@ async function changePassword() {
       const router = TestBed.inject(Router);
       const navigateSpy = spyOn(router, 'navigate');
       component.setControlFieldValue('username', 'SpongebobSquarepants');
-      spyOn(recaptchaV3Service, 'execute').and.returnValue(of('token'));
       await component.submit();
       fixture.detectChanges();
       const params = {

src/app/forgot/teacher/forgot-teacher-password/forgot-teacher-password.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/forms';
 import { TeacherService } from '../../../teacher/teacher.service';
 import { finalize } from 'rxjs/operators';
-import { ReCaptchaV3Service } from 'ng-recaptcha-2';
+import { RecaptchaV3Module, ReCaptchaV3Service } from 'ng-recaptcha-2';
 import { ConfigService } from '../../../services/config.service';
 import { MatDivider } from '@angular/material/divider';
 import { MatProgressBar } from '@angular/material/progress-bar';
@@ -32,7 +32,8 @@ import { MatCard, MatCardContent } from '@angular/material/card';
     MatError,
     MatButton,
     MatProgressBar,
-    MatDivider
+    MatDivider,
+    RecaptchaV3Module
   ],
   templateUrl: './forgot-teacher-password.component.html'
 })

src/messages.xlf

@@ -3357,7 +3357,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password/forgot-teacher-password.component.ts</context>
-          <context context-type="linenumber">113</context>
+          <context context-type="linenumber">114</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2830770750081682844" datatype="html">
@@ -3436,7 +3436,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password/forgot-teacher-password.component.ts</context>
-          <context context-type="linenumber">103</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6028371114637047813" datatype="html">
@@ -3925,14 +3925,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>You have submitted an invalid verification code too many times. For security reasons, we will lock the ability to change your password for 10 minutes. After 10 minutes, you can try again.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password/forgot-teacher-password.component.ts</context>
-          <context context-type="linenumber">107</context>
+          <context context-type="linenumber">108</context>
         </context-group>
       </trans-unit>
       <trans-unit id="243316711119938992" datatype="html">
         <source>The server has encountered an error and was unable to send you an email. Please try again. If the error continues to occur, please contact us.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password/forgot-teacher-password.component.ts</context>
-          <context context-type="linenumber">110</context>
+          <context context-type="linenumber">111</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5039419845796169233" datatype="html">