test: Added unit tests for the cc merchant info (#3372)

src/app/fyle/add-edit-expense/add-edit-expense-6.spec.ts

@@ -87,6 +87,7 @@ import { ccTransactionData, ccTransactionData1 } from 'src/app/core/mock-data/cc
 import { ccTransactionResponseData } from 'src/app/core/mock-data/corporate-card-transaction-response.data';
 import { cloneDeep } from 'lodash';
 import { ExpenseTransactionStatus } from 'src/app/core/enums/platform/v1/expense-transaction-status.enum';
+import { CCExpenseMerchantInfoPopoverComponent } from 'src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component';
 
 export function TestCases6(getTestBed) {
   describe('AddEditExpensePage-6', () => {
@@ -1223,5 +1224,20 @@ export function TestCases6(getTestBed) {
       });
       expect(popoverSpy.present).toHaveBeenCalledTimes(1);
     }));
+
+    it('openCCExpenseMerchantInfoModal(): should open the transaction status info modal', fakeAsync(() => {
+      const popoverSpy = jasmine.createSpyObj('HTMLIonPopoverElement', ['present']);
+      popoverController.create.and.resolveTo(popoverSpy);
+
+      component.openCCExpenseMerchantInfoModal();
+
+      tick();
+
+      expect(popoverController.create).toHaveBeenCalledOnceWith({
+        component: CCExpenseMerchantInfoPopoverComponent,
+        cssClass: 'fy-dialog-popover',
+      });
+      expect(popoverSpy.present).toHaveBeenCalledTimes(1);
+    }));
   });
 }

src/app/fyle/view-expense/view-expense.page.spec.ts

@@ -58,6 +58,7 @@ import {
   paidReportData,
 } from 'src/app/core/mock-data/platform-report.data';
 import { ExpenseTransactionStatus } from 'src/app/core/enums/platform/v1/expense-transaction-status.enum';
+import { CCExpenseMerchantInfoPopoverComponent } from 'src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component';
 
 describe('ViewExpensePage', () => {
   let component: ViewExpensePage;
@@ -1076,4 +1077,19 @@ describe('ViewExpensePage', () => {
     });
     expect(popoverSpy.present).toHaveBeenCalledTimes(1);
   }));
+
+  it('openCCExpenseMerchantInfoModal(): should open the transaction status info modal', fakeAsync(() => {
+    const popoverSpy = jasmine.createSpyObj('HTMLIonPopoverElement', ['present']);
+    popoverController.create.and.resolveTo(popoverSpy);
+
+    component.openCCExpenseMerchantInfoModal();
+
+    tick();
+
+    expect(popoverController.create).toHaveBeenCalledOnceWith({
+      component: CCExpenseMerchantInfoPopoverComponent,
+      cssClass: 'fy-dialog-popover',
+    });
+    expect(popoverSpy.present).toHaveBeenCalledTimes(1);
+  }));
 });

src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.spec.ts

@@ -1,24 +1,58 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, PopoverController } from '@ionic/angular';
 
-import { CcExpenseMerchantInfoPopoverComponent } from './cc-expense-merchant-info-popover.component';
+import { CCExpenseMerchantInfoPopoverComponent } from './cc-expense-merchant-info-popover.component';
+import { getElementBySelector } from 'src/app/core/dom-helpers';
 
-describe('CcExpenseMerchantInfoComponent', () => {
-  let component: CcExpenseMerchantInfoPopoverComponent;
-  let fixture: ComponentFixture<CcExpenseMerchantInfoPopoverComponent>;
+describe('CCExpenseMerchantInfoComponent', () => {
+  let component: CCExpenseMerchantInfoPopoverComponent;
+  let popoverController: jasmine.SpyObj<PopoverController>;
+  let fixture: ComponentFixture<CCExpenseMerchantInfoPopoverComponent>;
 
   beforeEach(waitForAsync(() => {
+    const popoverControllerSpy = jasmine.createSpyObj('PopoverController', ['dismiss']);
+
     TestBed.configureTestingModule({
-      declarations: [CcExpenseMerchantInfoPopoverComponent],
+      declarations: [CCExpenseMerchantInfoPopoverComponent],
       imports: [IonicModule.forRoot()],
+      providers: [
+        {
+          provide: PopoverController,
+          useValue: popoverControllerSpy,
+        },
+      ],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(CcExpenseMerchantInfoPopoverComponent);
+    fixture = TestBed.createComponent(CCExpenseMerchantInfoPopoverComponent);
+    popoverController = TestBed.inject(PopoverController) as jasmine.SpyObj<PopoverController>;
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should close the popover when clicked on close button', () => {
+    const closeBtn = getElementBySelector(fixture, '[data-testid="close-btn"') as HTMLButtonElement;
+    closeBtn.click();
+
+    fixture.detectChanges();
+
+    expect(popoverController.dismiss).toHaveBeenCalled();
+  });
+
+  describe('template', () => {
+    it('should display the correct title', () => {
+      fixture.detectChanges();
+      const title = getElementBySelector(fixture, '[data-testid="title"');
+      expect(title.textContent).toEqual('Merchant');
+    });
+
+    it('should display the correct content', () => {
+      fixture.detectChanges();
+      const content = getElementBySelector(fixture, '[data-testid="content"');
+      expect(content.textContent).toEqual('This merchant name comes from the transaction.');
+    });
+  });
 });