用于测试 keyup 事件的 Angular 测试用例

发布于 2025-01-11 05:53:13 字数 793 浏览 2 评论 0原文

下面提到的代码工作正常。它基本上合并两个事件，合并它们并对输入字段执行一些操作。问题是，我无法模拟或编写此代码的测试用例。谁能帮我解决这个问题吗？我正在使用 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 链接< /a>

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你的呼吸 2025-01-18 05:53:14

如果使用事件绑定，您将可以更轻松地编写测试，像这样。然后，您可以针对该方法编写单元测试，和/或针对整个交互编写 E2E 测试。

回复收藏 0 原文

治碍 2025-01-18 05:53:14

我一般倾向于创建“轻”组件和“胖”服务。

在这种情况下，这意味着将 pipe 逻辑隔离到服务中，然后通过依赖项注入将其传递到组件中，如下所示

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);
      });
  }

现在您可以更轻松地测试服务 MyService 这是大部分逻辑所在的地方。

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.

回复收藏 0 原文

~没有更多了~