diff --git a/src/app/core/mock-data/currency.data.ts b/src/app/core/mock-data/currency.data.ts index bb00c837db..0bc8121bce 100644 --- 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 index ffdccaf33c..a337c14b6d 100644 --- 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; + let currencyService: jasmine.SpyObj; + let modalController: jasmine.SpyObj; + let loaderService: jasmine.SpyObj; - 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; + modalController = TestBed.inject(ModalController) as jasmine.SpyObj; + loaderService = TestBed.inject(LoaderService) as jasmine.SpyObj; + })); 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 index 4015147f0d..2008a14122 100644 --- 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; currencies$: Observable; @@ -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')); }