腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >测试可见物体角度2的业力

问测试可见物体角度2的业力
EN

Stack Overflow用户

提问于 2016-12-20 19:21:34

回答 2查看 10.7K关注 0票数 6

我正在使用Karma处理我的Angular 2的单元测试用例，我被一个函数卡住了，在这个函数中，我运行了以下代码的测试

expect(component.subscribeToEvents()).toBeTruthy();

我查看了我的覆盖率代码，测试文件中的行似乎没有覆盖订阅中的任何内容。我曾尝试使用MockBackend模拟服务上的函数内部的api调用，但我不确定如何在订阅的对象上执行模拟，有人能帮助我吗？

下面是test.component.ts格式

subscribeToEvents() {
this.subscription = this.czData.$selectedColorZone
  .subscribe(items => {
    this.resourceLoading = true;
    if (!this.resourceData || (this.resourceData && this.resourceData.length === 0)) {
      this.settings.layout.flypanel.display = false;
      this.getAllResources(this.pagination.start, this.pagination.size);
    }
    else {
      this.pagination.start = 1;
      this.pagination.end = this.pagination.size;
      this.getAllResources(1, this.pagination.size);
      this.settings.layout.flypanel.display = true;
    }
  });
return true;

}

覆盖率代码的屏幕截图

unit-testing

angular

karma-jasmine

angular2-services

karma-coverage

腾讯云域名特惠，新用户首年1元起

腾讯云域名专场特惠：个人新用户.cn仅8.8元/年，企业新用户.com仅1.06元/年...

回答 2

Stack Overflow用户

发布于 2016-12-20 20:35:25

您不能这样做，因为订阅是异步解析的。因此，同步测试在异步任务解决之前完成。

如果你想要的只是覆盖率，你可以把测试设为async。这将导致角度测试区等待，直到异步任务解决，然后才完成测试

import { async } from '@angular/core/testing';

it('..', async(() => {
  component.subscribeToEvents();
}))

你不能在这里期望任何东西，因为当任务被解决时没有回调钩子。所以这真的是一个毫无意义的测试。它将为您提供覆盖范围，但您实际上并没有测试任何东西。例如，您可能希望测试在解析订阅时是否设置了变量。

根据提供的代码，我要做的只是模拟服务，并使其同步。你怎么能这样做呢？我们你可以让这个模拟像这样

class CzDataSub {
  items: any = [];

  $selectedColorZone = {
    subscribe: (callback: Function) => {
      callback(this.items);
    }
  }
}

然后只需在测试中配置它

let czData: CzDataStub;

beforeEach(() => {
  czData = new CzDataStub();
  TestBed.configureTestingModule({
    providers: [
      { provide: CzData, useValue: czData }
    ]
  })
})

现在，在测试中，您不需要将其设为async，只需在模拟上设置items属性，就可以提供所需的任何值，订阅者将获得该值

it('..', () => {
  czData.items = something;
  component.subscribeToEvents();
  expect(component.settings.layout.flypanel.display).toBe(false);
})

更新

当我写这篇文章时，我想我已经半睡半醒了。上述语句之一是不正确的

在这里你不能期望任何东西，因为当任务被解决时没有回调钩子。

这并不完全正确。这就是fixture.whenStable()的用途。例如，如果这是您的服务

class CzData {
  _value = new Subject<>();

  $selectedColorZone = this._value.asObservable();

  setValue(value) {
    this._value.next(value);
  }
}

然后，这就是如何使测试工作

let czData: CzData;
let fixture: ComponentFixture<YourComponent>;
let component: YourComponent;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [ CzData ],
    declarations: [ YourComponent ]
  });
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  czData = TestBed.get(czData);
})

it('..', async(() => {
  component.subscribeToEvents();
  czData.setValue(somevalue);
  fixture.whenStable().then(() => {
    expect(component.settings.layout.flypanel.display).toBe(false);
  })
}))

我们使用fixture.whenStable()来等待异步任务完成。

这并不是说使用mock是错误的。很多时候，使用mock将会是一种方式。我只是想纠正我的说法，并展示如何做到这一点。

票数 6

Stack Overflow用户

发布于 2019-02-02 04:50:41

考虑一下如何测试Angular输出，因为它们是在测试期间订阅的：https://angular.io/guide/testing#clicking

it('should raise selected event when clicked (triggerEventHandler)', () => {
  let selected: Hero;
  comp.selected.subscribe((hero: Hero) => selectedHero = hero);

  heroDe.triggerEventHandler('click', null);
  expect(selectedHero).toBe(expectedHero);
});

所以试试吧：

const expectedItem = {}; // mock the expected result from 'subscribeToEvents'

it('should raise selected event when clicked (triggerEventHandler)', () => {
  let selectedItem: any; // change to expected type
  component.subscribeToEvents.subscribe((item: any) => selectedItem = item);
  // fixture.detectChanges(); // trigger change detection if necessary here, depending on what triggers 'subscribeToEvents'
  expect(selectedItem).toBe(expectedItem);
});