Angular test case to test keyup event

user_4074980 0
Viewed 280

Below mentioned code is working fine. which basically merge two events, merge them and do some operation on an input field. The problem is, I am not able to mock or write test cases for this code. Can anyone help me with this? I am using angular 12.

<input #myname value="John Doe">


ngAfterViewInit() {
const scrollEvents$ = fromEvent(this.input.nativeElement, 'blur');
const keyEvents$ = fromEvent(this.input.nativeElement, 'keyup').pipe(
  filter((e: KeyboardEvent) => e.keyCode === 13)
);
    
const allEvents$ = merge(scrollEvents$, keyEvents$);
allEvents$
  .pipe(
    takeUntil(this.unsubscribe$),
    map((evt: any) => evt.target.value),
    distinctUntilChanged()
  )
  .subscribe((text: string) => {
     this.data = text;
  });

}

Stackblitz link

jasmine rxjs angular jestjs unit-testing
2 Answers

You'll have a much easier time writing tests if you use event binding, like this. Then you can write unit tests against the method, and/or E2E tests against the whole interaction.

user_113358230

What I tend to do in general is to create "light" components and "fat" services.

In this case, this would mean to isolate the pipe logic into a service which is then passed via dependency injection into the component, something like this

export class AppService {
  constructor() {}

  allEvents(
    scrollEvents$: Observable<any>,
    keyEvents$: Observable<any>,
    unsubscribe$: Observable<any>
  ) {
    return merge(scrollEvents$, keyEvents$).pipe(
      takeUntil(unsubscribe$),
      map((evt: any) => {
        return evt.target.value;
      }),
      distinctUntilChanged()
    );
  }
}


  ngAfterViewInit() {
    const scrollEvents$ = fromEvent(this.input.nativeElement, 'blur');
    const keyEvents$ = fromEvent(this.input.nativeElement, 'keyup').pipe(
      filter((e: KeyboardEvent) => e.keyCode === 13)
    );
    // creating other input observables...

    const allEvents$ = merge(scrollEvents$, keyEvents$);
    allEvents$
      .pipe(
        takeUntil(this.unsubscribe$),
        map((evt: any) => evt.target.value),
        distinctUntilChanged()
      )
      .subscribe((text: string) => {
        console.log(text);
      });
  }

Now you can more easily test the service MyService which is where most of the logic resides.

user_56999930
Related