PER-9237

Added a test to check if the form is disabled if the amount exceeds the available account space.

src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts

@@ -39,7 +39,7 @@ describe('ConfirmGiftDialogComponent', () => {
     const config: TestModuleMetadata = cloneDeep(Testing.BASE_TEST_CONFIG);
 
     dialogData = {
-      email: 'test@email.com',
+      email: 'test@example.com',
       amount: '10',
       message: 'test message',
       giftResult: new Observable(() => {}),
@@ -52,7 +52,7 @@ describe('ConfirmGiftDialogComponent', () => {
     config.providers.push({
       provide: DIALOG_DATA,
       useValue: {
-        email: 'test@email.com',
+        email: 'test@example.com',
         amount: 10,
         message: 'test message',
         giftResult: mockGiftResult,
@@ -82,7 +82,7 @@ describe('ConfirmGiftDialogComponent', () => {
   });
 
   it('should take the email from the dialog data', () => {
-    expect(component.email).toEqual('test@email.com');
+    expect(component.email).toEqual('test@example.com');
   });
 
   it('should take the amount from the dialog data', () => {

src/app/core/components/gift-storage/gift-storage.component.html

@@ -68,9 +68,9 @@
       </div>
       <div class="dialog-form-field">
         <button
-          [disabled]="giftForm.invalid"
+          [disabled]="giftForm.invalid || isAsyncValidating"
           class="btn btn-primary"
-          [ngClass]="{ 'btn-disabled': giftForm.invalid }"
+          [ngClass]="{ 'btn-disabled': giftForm.invalid || isAsyncValidating }"
         >
           Send Gift Storage
         </button>

src/app/core/components/gift-storage/gift-storage.component.spec.ts

@@ -1,11 +1,12 @@
-import { AccountService } from '@shared/services/account/account.service';
 /* @format */
 import { Shallow } from 'shallow-render';
 import { HttpClient, HttpHandler } from '@angular/common/http';
 import { CoreModule } from '@core/core.module';
 import { Dialog } from '@root/app/dialog/dialog.service';
+import { AccountService } from '@shared/services/account/account.service';
 import { AccountVO } from '../../../models/account-vo';
 import { GiftStorageComponent } from './gift-storage.component';
+import { fakeAsync, tick } from '@angular/core/testing';
 
 describe('GiftStorageComponent', () => {
   let shallow: Shallow<GiftStorageComponent>;
@@ -35,18 +36,21 @@ describe('GiftStorageComponent', () => {
 
     instance.availableSpace = '10';
 
-    instance.giftForm.controls.email.setValue('[email protected]');
+    await instance.giftForm.controls.email.setValue('[email protected]');
     instance.giftForm.controls.amount.setValue('1');
 
+    instance.isAsyncValidating = false;
+
     instance.giftForm.updateValueAndValidity();
     fixture.detectChanges();
+    await fixture.whenStable();
 
     const button: HTMLButtonElement = find('.btn-primary').nativeElement;
 
     expect(button.disabled).toBe(false);
   });
 
-  it('the button is disabled if the email is not valid', async () => {
+  it('disables the submit button if the email is not valid', async () => {
     const { find, instance, fixture } = await shallow.render();
 
     instance.availableSpace = '5';
@@ -62,6 +66,24 @@ describe('GiftStorageComponent', () => {
     expect(button.disabled).toBe(true);
   });
 
+  it('disables the submit button if the amount entered exceeds the available amount', async () => {
+    const { find, instance, fixture } = await shallow.render();
+
+    instance.availableSpace = '5';
+
+    await instance.giftForm.controls.email.setValue('[email protected]');
+    instance.giftForm.controls.amount.setValue('10');
+
+    instance.giftForm.updateValueAndValidity();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = find('.btn-primary').nativeElement;
+
+    expect(button.disabled).toBe(true);
+  });
+
   it('calls submitStorageGiftForm when the form is valid', async () => {
     const { instance } = await shallow.render();
 

src/app/core/components/gift-storage/gift-storage.component.ts

@@ -8,6 +8,7 @@ import {
   AsyncValidatorFn,
   FormControl,
   ValidationErrors,
+  ValidatorFn,
 } from '@angular/forms';
 import { AccountVO } from '@models/index';
 import { Observable, BehaviorSubject, Subscription, of, timer } from 'rxjs';
@@ -31,6 +32,7 @@ export class GiftStorageComponent implements OnDestroy {
     false
   );
   private sub: Subscription;
+  isAsyncValidating: boolean;
 
   constructor(
     private fb: UntypedFormBuilder,
@@ -44,8 +46,8 @@ export class GiftStorageComponent implements OnDestroy {
         '',
         {
           validators: [Validators.email, Validators.required],
-          asyncValidators: this.emailValidator,
-          updateOn: 'change',
+          asyncValidators: [this.emailValidator()],
+          updateOn: 'blur',
         },
       ],
       amount: [
@@ -125,18 +127,22 @@ export class GiftStorageComponent implements OnDestroy {
     return isInteger && !hasDecimalPoint ? null : { notInteger: true };
   }
 
-  emailValidator: AsyncValidatorFn = (
-    control: AbstractControl
-  ): Observable<ValidationErrors | null> => {
-    if (!control.value) {
-      return of(null);
-    }
+  emailValidator(): AsyncValidatorFn {
+    return (control: AbstractControl): Observable<ValidationErrors | null> => {
+      if (!control.value) {
+        return of(null);
+      }
 
-    return timer(1000).pipe(
-      map(() => {
-        let emailValidationResult = Validators.email(control);
-        return emailValidationResult == null ? null : { email: true };
-      })
-    );
-  };
+      this.isAsyncValidating = true;
+
+      return timer(1000).pipe(
+        map(() => {
+          const emailValid = Validators.email(control);
+          this.isAsyncValidating = false;
+
+          return emailValid ? { email: true } : null;
+        })
+      );
+    };
+  }
 }

src/app/core/components/storage-dialog/storage-dialog.component.ts

@@ -1,3 +1,4 @@
+/* @format */
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { IsTabbedDialog, DialogRef } from '@root/app/dialog/dialog.module';
@@ -16,7 +17,7 @@ import { MessageService } from '@shared/services/message/message.service';
 import { FileSizePipe } from '@shared/pipes/filesize.pipe';
 import { AccountService } from '@shared/services/account/account.service';
 
-type StorageDialogTab = 'add' | 'file' | 'transaction' | 'promo';
+type StorageDialogTab = 'add' | 'file' | 'transaction' | 'promo' | 'gift';
 
 @Component({
   selector: 'pr-storage-dialog',