fix: Select Currency Linting (#2426)

* fixed linting * test: Code Coverage: My-Profile/ Select Currency #1 (#2427) * coverage at 95 * coverage at 100 * resolved comments --------- Co-authored-by: Jay Budhadev <[email protected]> --------- Co-authored-by: Jay Budhadev <[email protected]>
fylein · Sep 25, 2023 · bb723b8 · bb723b8
1 parent cefbbd6
commit bb723b8
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 24 deletions.
diff --git a/src/app/core/mock-data/currency.data.ts b/src/app/core/mock-data/currency.data.ts
@@ -173,6 +173,34 @@ export const apiAllCurrencies: CurrencyName = {
   ZWL: 'Zimbabwean Dollar',
 };
 
+export const apiAllCurrencies2: CurrencyName = {
+  AED: 'United Arab Emirates Dirham',
+  AFN: 'Afghan Afghani',
+  ALL: 'Albanian Lek',
+  AMD: 'Armenian Dram',
+  ANG: 'Netherlands Antillean Guilder',
+  AOA: 'Angolan Kwanza',
+  ARS: 'Argentine Peso',
+  AUD: 'Australian Dollar',
+  AWG: 'Aruban Florin',
+  AZN: 'Azerbaijani Manat',
+  BAM: 'Bosnia-Herzegovina Convertible Mark',
+  BBD: 'Barbadian Dollar',
+  BDT: 'Bangladeshi Taka',
+  BGN: 'Bulgarian Lev',
+  BHD: 'Bahraini Dinar',
+  BIF: 'Burundian Franc',
+  BMD: 'Bermudan Dollar',
+  BND: 'Brunei Dollar',
+  BOB: 'Bolivian Boliviano',
+  BRL: 'Brazilian Real',
+  BSD: 'Bahamian Dollar',
+  BTC: 'Bitcoin',
+  BTN: 'Bhutanese Ngultrum',
+  BWP: 'Botswanan Pula',
+  BYN: null,
+};
+
 export const selectedCurrencies: Currency[] = [
   {
     shortCode: 'USD',

diff --git a/src/app/fyle/my-profile/select-currency/select-currency.component.spec.ts b/src/app/fyle/my-profile/select-currency/select-currency.component.spec.ts
@@ -1,26 +1,116 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
+import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
+import { IonicModule, ModalController } from '@ionic/angular';
 
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { of, take } from 'rxjs';
+import { getElementRef } from 'src/app/core/dom-helpers';
+import { apiAllCurrencies2, selectedCurrencies } from 'src/app/core/mock-data/currency.data';
+import { CurrencyService } from 'src/app/core/services/currency.service';
+import { LoaderService } from 'src/app/core/services/loader.service';
 import { SelectCurrencyComponent } from './select-currency.component';
 
-xdescribe('SelectCurrencyComponent', () => {
+describe('SelectCurrencyComponent', () => {
   let component: SelectCurrencyComponent;
   let fixture: ComponentFixture<SelectCurrencyComponent>;
+  let currencyService: jasmine.SpyObj<CurrencyService>;
+  let modalController: jasmine.SpyObj<ModalController>;
+  let loaderService: jasmine.SpyObj<LoaderService>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [SelectCurrencyComponent],
-        imports: [IonicModule.forRoot()],
-      }).compileComponents();
+  beforeEach(waitForAsync(() => {
+    const currencyServiceSpy = jasmine.createSpyObj('CurrencyService', ['getAll']);
+    const modalControllerSpy = jasmine.createSpyObj('ModalController', ['dismiss']);
+    const loaderServiceSpy = jasmine.createSpyObj('LoaderService', ['showLoader', 'hideLoader']);
 
-      fixture = TestBed.createComponent(SelectCurrencyComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
-    })
-  );
+    TestBed.configureTestingModule({
+      declarations: [SelectCurrencyComponent],
+      imports: [IonicModule.forRoot()],
+      providers: [
+        {
+          provide: CurrencyService,
+          useValue: currencyServiceSpy,
+        },
+        {
+          provide: ModalController,
+          useValue: modalControllerSpy,
+        },
+        {
+          provide: LoaderService,
+          useValue: loaderServiceSpy,
+        },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SelectCurrencyComponent);
+    component = fixture.componentInstance;
+
+    currencyService = TestBed.inject(CurrencyService) as jasmine.SpyObj<CurrencyService>;
+    modalController = TestBed.inject(ModalController) as jasmine.SpyObj<ModalController>;
+    loaderService = TestBed.inject(LoaderService) as jasmine.SpyObj<LoaderService>;
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnInit(): should setup currencies', fakeAsync(() => {
+    loaderService.showLoader.and.resolveTo();
+    loaderService.hideLoader.and.resolveTo();
+    currencyService.getAll.and.returnValue(of(apiAllCurrencies2));
+
+    component.ngOnInit();
+    tick(500);
+
+    expect(loaderService.showLoader).toHaveBeenCalledTimes(1);
+    expect(loaderService.hideLoader).toHaveBeenCalledTimes(1);
+    expect(currencyService.getAll).toHaveBeenCalledTimes(1);
+  }));
+
+  it('ngAfterViewInit(): should update the filteredCurrencies$', fakeAsync(() => {
+    component.searchBarRef = getElementRef(fixture, '.selection-modal--search-input');
+    const inputElement = component.searchBarRef.nativeElement as HTMLInputElement;
+    const mockCurrencies = [
+      { shortCode: 'USD', longName: 'US Dollar' },
+      { shortCode: 'INR', longName: 'Indian National Rupees' },
+    ];
+    component.currencies$ = of(mockCurrencies);
+    component.ngAfterViewInit();
+    tick(500);
+
+    inputElement.value = '';
+    inputElement.dispatchEvent(new Event('keyup'));
+    component.filteredCurrencies$.pipe(take(1)).subscribe((currencies) => {
+      expect(currencies).toEqual(mockCurrencies);
+    });
+    tick(500);
+
+    inputElement.value = 'US';
+    inputElement.dispatchEvent(new Event('keyup'));
+    component.filteredCurrencies$.pipe(take(1)).subscribe((currencies) => {
+      expect(currencies).toEqual([mockCurrencies[0]]);
+    });
+    tick(500);
+  }));
+
+  it('closeModal(): should close modal', () => {
+    component.closeModal();
+
+    expect(modalController.dismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('onCurrencySelect(): should select currency', () => {
+    component.onCurrencySelect(selectedCurrencies[0]);
+
+    expect(modalController.dismiss).toHaveBeenCalledOnceWith({
+      selectedCurrency: selectedCurrencies[0],
+    });
+  });
+
+  it('clearValue(): should clear value', () => {
+    component.searchBarRef = getElementRef(fixture, '.selection-modal--search-input');
+    component.clearValue();
+
+    expect(component.value).toEqual('');
+    expect(component.searchBarRef.nativeElement.value).toEqual('');
+  });
 });
diff --git a/src/app/fyle/my-profile/select-currency/select-currency.component.ts b/src/app/fyle/my-profile/select-currency/select-currency.component.ts
@@ -14,7 +14,7 @@ import { Currency } from 'src/app/core/models/currency.model';
 export class SelectCurrencyComponent implements OnInit, AfterViewInit {
   @Input() currentSelection: string;
 
-  @ViewChild('searchBar') searchBarRef: ElementRef;
+  @ViewChild('searchBar') searchBarRef: ElementRef<HTMLInputElement>;
 
   currencies$: Observable<Currency[]>;
 
@@ -28,7 +28,7 @@ export class SelectCurrencyComponent implements OnInit, AfterViewInit {
     private loaderService: LoaderService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.currencies$ = from(this.loaderService.showLoader()).pipe(
       concatMap(() => this.currencyService.getAll()),
       map((currenciesObj) =>
@@ -44,11 +44,14 @@ export class SelectCurrencyComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.filteredCurrencies$ = fromEvent(this.searchBarRef.nativeElement, 'keyup').pipe(
-      map((event: any) => event.srcElement.value),
+    this.filteredCurrencies$ = fromEvent<{ srcElement: { value: string } }>(
+      this.searchBarRef.nativeElement,
+      'keyup'
+    ).pipe(
+      map((event) => event.srcElement.value),
       startWith(''),
       distinctUntilChanged(),
-      switchMap((searchText) =>
+      switchMap((searchText: string) =>
         this.currencies$.pipe(
           map((currencies) =>
             currencies.filter(
@@ -58,23 +61,24 @@ export class SelectCurrencyComponent implements OnInit, AfterViewInit {
             )
           )
         )
-      )
+      ),
+      shareReplay(1)
     );
   }
 
-  closeModal() {
+  closeModal(): void {
     this.modalController.dismiss();
   }
 
-  onCurrencySelect(selectedCurrency: Currency) {
+  onCurrencySelect(selectedCurrency: Currency): void {
     this.modalController.dismiss({
       selectedCurrency,
     });
   }
 
-  clearValue() {
+  clearValue(): void {
     this.value = '';
-    const searchInput = this.searchBarRef.nativeElement as HTMLInputElement;
+    const searchInput = this.searchBarRef.nativeElement;
     searchInput.value = '';
     searchInput.dispatchEvent(new Event('keyup'));
   }