test: Fixing add card component flaky tests (#2474)

fylein · Oct 3, 2023 · 273febf · 273febf
1 parent 1a56cd3
commit 273febf
Showing 1 changed file with 25 additions and 14 deletions.
diff --git a/src/app/fyle/manage-corporate-cards/add-corporate-card/add-corporate-card.component.spec.ts b/src/app/fyle/manage-corporate-cards/add-corporate-card/add-corporate-card.component.spec.ts
@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { IonicModule, PopoverController } from '@ionic/angular';
 
 import { AddCorporateCardComponent } from './add-corporate-card.component';
@@ -168,7 +168,7 @@ describe('AddCorporateCardComponent', () => {
   });
 
   describe('card number validation errors', () => {
-    it('should show an error message when the user has entered an invalid card number', () => {
+    it('should show an error message when the user has entered an invalid card number', fakeAsync(() => {
       realTimeFeedService.isCardNumberValid.and.returnValue(false);
       realTimeFeedService.getCardTypeFromNumber.and.returnValue(CardNetworkType.OTHERS);
 
@@ -180,14 +180,15 @@ describe('AddCorporateCardComponent', () => {
       cardNumberInput.dispatchEvent(new Event('input'));
       cardNumberInput.dispatchEvent(new Event('blur'));
 
+      fixture.detectChanges();
+      tick(500);
       fixture.detectChanges();
 
       const errorMessage = getElementBySelector(fixture, '[data-testid="error-message"]') as HTMLElement;
-
       expect(errorMessage.innerText).toBe('Please enter a valid card number.');
-    });
+    }));
 
-    it('should show an error message if only mastercard rtf is enabled but the user has entered a non-mastercard number', () => {
+    it('should show an error message if only mastercard rtf is enabled but the user has entered a non-mastercard number', fakeAsync(() => {
       component.isMastercardRTFEnabled = true;
       component.isVisaRTFEnabled = false;
       component.isYodleeEnabled = false;
@@ -203,16 +204,18 @@ describe('AddCorporateCardComponent', () => {
       cardNumberInput.dispatchEvent(new Event('input'));
       cardNumberInput.dispatchEvent(new Event('blur'));
 
+      fixture.detectChanges();
+      tick(500);
       fixture.detectChanges();
 
       const errorMessage = getElementBySelector(fixture, '[data-testid="error-message"]') as HTMLElement;
 
       expect(errorMessage.innerText).toBe(
         'Enter a valid Mastercard number. If you have other cards, please contact your admin.'
       );
-    });
+    }));
 
-    it('should show an error message if only visa rtf is enabled but the user has entered a non-visa number', () => {
+    it('should show an error message if only visa rtf is enabled but the user has entered a non-visa number', fakeAsync(() => {
       component.isVisaRTFEnabled = true;
       component.isMastercardRTFEnabled = false;
       component.isYodleeEnabled = false;
@@ -228,16 +231,18 @@ describe('AddCorporateCardComponent', () => {
       cardNumberInput.dispatchEvent(new Event('input'));
       cardNumberInput.dispatchEvent(new Event('blur'));
 
+      fixture.detectChanges();
+      tick(500);
       fixture.detectChanges();
 
       const errorMessage = getElementBySelector(fixture, '[data-testid="error-message"]') as HTMLElement;
 
       expect(errorMessage.innerText).toBe(
         'Enter a valid Visa number. If you have other cards, please contact your admin.'
       );
-    });
+    }));
 
-    it('should show an error message if user has entered a non visa/mastercard card number and yodlee is disabled in the org', () => {
+    it('should show an error message if user has entered a non visa/mastercard card number and yodlee is disabled in the org', fakeAsync(() => {
       component.isVisaRTFEnabled = true;
       component.isMastercardRTFEnabled = true;
       component.isYodleeEnabled = false;
@@ -253,13 +258,15 @@ describe('AddCorporateCardComponent', () => {
       cardNumberInput.dispatchEvent(new Event('input'));
       cardNumberInput.dispatchEvent(new Event('blur'));
 
+      fixture.detectChanges();
+      tick(500);
       fixture.detectChanges();
 
       const errorMessage = getElementBySelector(fixture, '[data-testid="error-message"]') as HTMLElement;
       expect(errorMessage.innerText).toBe(
         'Enter a valid Visa or Mastercard number. If you have other cards, please contact your admin.'
       );
-    });
+    }));
   });
 
   describe('card enrollment flow', () => {
@@ -313,7 +320,7 @@ describe('AddCorporateCardComponent', () => {
       expect(trackingService.cardEnrolled).toHaveBeenCalledOnceWith(cardEnrolledProperties2);
     });
 
-    it('should show the error message received from backend when we face api errors while enrolling the card', () => {
+    it('should show the error message received from backend when we face api errors while enrolling the card', fakeAsync(() => {
       realTimeFeedService.isCardNumberValid.and.returnValue(true);
       realTimeFeedService.getCardTypeFromNumber.and.returnValue(CardNetworkType.VISA);
       realTimeFeedService.enroll.and.returnValue(throwError(() => new Error('This card already exists in the system')));
@@ -331,16 +338,18 @@ describe('AddCorporateCardComponent', () => {
       const addCorporateCardBtn = getElementBySelector(fixture, '[data-testid="add-btn"]') as HTMLButtonElement;
       addCorporateCardBtn.click();
 
+      fixture.detectChanges();
+      tick(500);
       fixture.detectChanges();
 
       const errorMessage = getElementBySelector(fixture, '[data-testid="error-message"]') as HTMLElement;
 
       expect(realTimeFeedService.enroll).toHaveBeenCalledOnceWith('4555555555555555', null);
       expect(errorMessage.innerText).toBe('This card already exists in the system');
       expect(trackingService.cardEnrollmentErrors).toHaveBeenCalledWith(cardEnrollmentErrorsProperties1);
-    });
+    }));
 
-    it('should show a default error message when we face api errors from backend but we dont have the error message', () => {
+    it('should show a default error message when we face api errors from backend but we dont have the error message', fakeAsync(() => {
       realTimeFeedService.isCardNumberValid.and.returnValue(true);
       realTimeFeedService.getCardTypeFromNumber.and.returnValue(CardNetworkType.VISA);
       realTimeFeedService.enroll.and.returnValue(throwError(() => new Error()));
@@ -358,14 +367,16 @@ describe('AddCorporateCardComponent', () => {
       const addCorporateCardBtn = getElementBySelector(fixture, '[data-testid="add-btn"]') as HTMLButtonElement;
       addCorporateCardBtn.click();
 
+      fixture.detectChanges();
+      tick(500);
       fixture.detectChanges();
 
       const errorMessage = getElementBySelector(fixture, '[data-testid="error-message"]') as HTMLElement;
 
       expect(realTimeFeedService.enroll).toHaveBeenCalledOnceWith('4555555555555555', null);
       expect(errorMessage.innerText).toBe('Something went wrong. Please try after some time.');
       expect(trackingService.cardEnrollmentErrors).toHaveBeenCalledOnceWith(cardEnrollmentErrorsProperties2);
-    });
+    }));
 
     it('should disallow card enrollment if the entered card number is invalid', () => {
       realTimeFeedService.isCardNumberValid.and.returnValue(false);