测试可见物体角度2的业力
我正在使用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;}
覆盖率代码的屏幕截图
回答 2
Stack Overflow用户
发布于 2016-12-21 04: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将会是一种方式。我只是想纠正我的说法，并展示如何做到这一点。
Stack Overflow用户
发布于 2019-02-02 12: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);
});https://stackoverflow.com/questions/41249743
复制相似问题
腾讯云开发者
