Ionic - 离子选择的单元测试 ionChange 事件

发布于 2025-01-17 14:54:44 字数 857 浏览 2 评论 0原文

我正在尝试对离子选择的变更事件进行单元测试。

<ion-select slot="end" value="all" interface="popover" class="area-select" (ionChange)="onAreaChange($event)">
  <ion-select-option value="all">All</ion-select-option>
  <ion-select-option *ngFor="let item of areaList" [value]="item">{{item}}</ion-select-option>
</ion-select>

下面我添加了我为检查更改事件的测试。但是电动汇款上的onareachange函数并没有触发。

  it('should change area', () => {
    component.areaList = areas;
    fixture.whenStable().then(() => {
      spyOn(component, 'onAreaChange');
      const select = fixture.debugElement.query(By.css('.area-select')).nativeElement;
      select.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.onAreaChange).toHaveBeenCalled();
    });
  });

有人可以帮助我完成此测试吗？

原文

I am trying to unit test a change event for ion-select.

<ion-select slot="end" value="all" interface="popover" class="area-select" (ionChange)="onAreaChange($event)">
  <ion-select-option value="all">All</ion-select-option>
  <ion-select-option *ngFor="let item of areaList" [value]="item">{{item}}</ion-select-option>
</ion-select>

Below I am adding test that I wrote for checking change events. But the onAreaChange function on ionChange is not triggering.

  it('should change area', () => {
    component.areaList = areas;
    fixture.whenStable().then(() => {
      spyOn(component, 'onAreaChange');
      const select = fixture.debugElement.query(By.css('.area-select')).nativeElement;
      select.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.onAreaChange).toHaveBeenCalled();
    });
  });

Can someone please help me to complete this testing?

分享到QQ

分享到微博

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

发布评论

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

独夜无伴 2025-01-24 14:54:44

通常，对于这种情况，我远离DOM事件（新事件），因为您可以看到，很难这样做。我通常使用triggereventhandler。您可以在此处阅读更多有关它的信息： https://netbasal.com/模拟式事件 - 内部 - 单位检验-5482618CD6C6

it('should change area', () => {
    component.areaList = areas;
    fixture.whenStable().then(() => {
      spyOn(component, 'onAreaChange');
      // get the DebugElement
      const select = fixture.debugElement.query(By.css('.area-select'));
      // the first argument is the event name, second argument is $event
      select.triggerEventHandler('ionChange', {/* mock $event how you wish here */});
      fixture.detectChanges();
      expect(component.onAreaChange).toHaveBeenCalled();
    });
  });

Usually for these kind of situations, I stay away from the DOM events (new Event) because as you can see it is difficult to do so. I usually use triggerEventHandler. You can read more about it here: https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6

it('should change area', () => {
    component.areaList = areas;
    fixture.whenStable().then(() => {
      spyOn(component, 'onAreaChange');
      // get the DebugElement
      const select = fixture.debugElement.query(By.css('.area-select'));
      // the first argument is the event name, second argument is $event
      select.triggerEventHandler('ionChange', {/* mock $event how you wish here */});
      fixture.detectChanges();
      expect(component.onAreaChange).toHaveBeenCalled();
    });
  });

回复收藏 0 原文

~没有更多了~