In the Angular component, I have an array of objects representing companies that are provided via @Input(). Upon loading this data, which is obtained from an HTTP request, I assign it to another variable called filteredList, which is used in an *ngFor directive.
The *ngFor loop is used in a selection menu where I have a reference to an HTML Text Input element using @ViewChild. Whenever a keyup event occurs on this input, I filter the filteredList based on the input value. The keyup event is captured using rxJS's fromEvent.
Here's a simplified version of my HTML structure:
<input id="companiesInput" #companyInput>
<mat-selection-list (selectionChange)="listBoxChange($event)">
<mat-list-option
*ngFor="let company of filteredList"
[value]="company"
[checkboxPosition]="'before'">
{{company.displayName}}
</mat-list-option>
</mat-selection-list>
Below is a snippet of my component code which functions as intended:
@Input() companyList: any[] = [];
private tagsSubscription: Subscription;
filteredList: any[] = [];
ngOnChanges(changes: any): void {
if (changes.companyList.currentValue && changes.companyList.currentValue.length > 0) {
this.filteredList = this.companyList;
}
}
ngAfterViewInit(): void {
const tagsSource = fromEvent(this.companyInput.nativeElement, 'keyup').pipe(
debounceTime(250),
distinctUntilChanged(),
switchMap((ev: any) => {
return of(ev.target.value);
})
);
this.tagsSubscription = tagsSource.subscribe((res: any) => {
res = res.trim();
if (res.length > 0) {
this.filteredList = this.companyList.filter((company) => company.displayName.indexOf(res) > -1);
} else {
this.filteredList = this.companyList;
}
});
}
Everything functions correctly, but I am facing challenges when attempting to test my code. Here is my testing script:
describe('tagsSubscription', () => {
it('should filter the available list of companies returned', () => {
const dummyArray = [
{ id: 1, displayName: 'safety io' },
{ id: 2, displayName: 'msa' },
{ id: 3, displayName: 'acme' }
];
component.companyList = dummyArray;
fixture.detectChanges();
component.ngOnChanges({ companyList: { currentValue: dummyArray } });
const fromEventSpy = spyOn(rxjs, 'fromEvent').and.returnValue(() => rxjs.of({}));
const companiesInput = element.querySelector('#companiesInput');
element.querySelector('#companiesInput').value = 'ac';
companiesInput.dispatchEvent(generateKeyUpEvent('a'));
fixture.detectChanges();
companiesInput.dispatchEvent(generateKeyUpEvent('c'));
fixture.detectChanges();
expect(component.filteredList.length).toEqual(1);
});
});
Upon logging outputs, I noticed that in my test scenario, the fromEvent is not triggered, leading to the failure of tagsSource.subscribe. I tried mocking fromEvent in my test by adding the following line at the beginning of the event:
const fromEventSpy = spyOn(rxjs, 'fromEvent').and.returnValue(() => rxjs.of('ac'));Unfortunately, this approach did not solve the issue either. If anyone has experience testing fromEvent Observables in Angular and knows how to properly run tests in such cases, I would greatly appreciate some guidance on getting my testing environment up and running smoothly.