带有模拟服务的单元测试组件 - 错误
我开始在 Angular 中测试组件和服务。我观看了 pluralsight 上的课程,并尝试遵循以下想法: https://codecraft.tv/courses/angular/unit-testing/mocks-and-spies/ 但是,我在测试组件方法方面遇到了问题。不幸的是,我找不到解决方案,所以决定向您寻求帮助。
我的服务:
@Injectable()
export class MyService {
private config: AppConfig;
constructor(private apiService: ApiService, private configService: ConfigurationService) {
this.config = configService.instant<AppConfig>();
}
public get(name: string, take: number = 10, skip: number = 0, params?:any): Observable<any> {
return this.apiService.post(`${this.config.baseUrl}/${name}/paginated?take=${take}&skip=${skip}`, params);
}
}
我的组件:
@Component({
selector: 'my',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
@Input("customerId") customerId: string;
items: CustomerItem[] = [];
public pagingInfo: PagingMetadata = {
itemsPerPage: 5,
currentPage: 1,
totalItems: 0
};
constructor(private service: MyService) { }
ngOnInit() {
if (this.customerId) {
this.updateItems();
}
}
updateItems() {
let skip = (this.pagingInfo.currentPage - 1) * this.pagingInfo.itemsPerPage;
let take = this.pagingInfo.itemsPerPage;
this.service.get("customer", take, skip, { customerId: this.customerId }).subscribe(result => {
this.items = result.entities;
this.pagingInfo.totalItems = result.total;
}, (error) => {
console.log(error.message);
});
}
}
我的 my.component.spec.ts 测试文件:
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let mockService;
let ITEMS = [
{
"title": "test",
"id": "5e188d4f-5678-461b-8095-5dcffec0855a"
},
{
"title": "test2",
"id": "5e188d4f-1234-461b-8095-5dcffec0855a"
}
]
beforeEach(async(() => {
mockService = jasmine.createSpyObj(['get']);
TestBed.configureTestingModule({
imports: [NgxPaginationModule, RouterTestingModule],
declarations: [MyComponent],
providers: [
{ provide: MyService, useValue: mockService }
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
// works fine
it('should create', () => {
expect(component).toBeTruthy();
});
// works fine
it('should NOT call updateItems method on initialization', () => {
component.ngOnInit();
let spy = spyOn(component, 'updateItems').and.callThrough();
expect(spy).not.toHaveBeenCalled();
});
// works fine
it('should call updateItems method on initialization', () => {
component.customerId = "1";
let spy = spyOn(component, 'updateItems').and.callFake(() => { return null });
component.ngOnInit();
expect(spy).toHaveBeenCalled();
});
// gives error
it('should update items', () => {
component.pagingInfo.currentPage = 1;
component.pagingInfo.itemsPerPage = 10;
component.customerId = "1";
mockService.get.and.returnValue(of(ITEMS));
component.updateItems();
expect(component.items).toBe(ITEMS);
});
});
前 3 个测试工作正常,但是最后更新项目时出现错误:
Expected undefined to be [ Object({"title": "test","id": "5e188d4f-5678-461b-8095-5dcffec0855a"},{"title": "test2","id": "5e188d4f-1234-461b-8095-5dcffec0855a"})]
如能提供任何提示,我将不胜感激 ;)
非常完整的问题,谢谢!它允许我将所有内容放在 StackBlitz 中,以确保我正确发现了您面临的问题。:)
在那个 StackBlitz 中,您可以看到测试现在全部通过了。为了让它们通过,我只对您所做的内容进行了一次更改,我更改了您从
mockService.get
返回的值,如下所示:
mockService.get.and.returnValue(of({entities: ITEMS, total: 2}));
原因是您的组件期望结果对象中有一个带有项目值的“entities”键。注意 - 它还期望有一个“total”键,因此尽管您没有测试它,但我也添加了它。
还有一件需要注意的事情,我在 StackBlitz 中进行了更改以进行演示。虽然您的测试都会按照您编写的方式通过,但您可能不知道
fixture.detectChanges()
实际上执行了
ngOnInit()
- 这让我在之前的测试中犯了错误。为了展示这一点,我修改了您在一个规范中专门调用
component.ngOnInit()
的位置以及您在此规范中调用
component.updateItems()
的位置,并将它们替换为
fixture.detectChanges()
。当然,两者都可以正常工作,但我指出这一点是因为在某些测试中,您需要在调用
ngOnInit()
之前设置模拟以获取有效数据,并且将
fixture.detectChanges()
放在所有规范之上的
beforeEach()
中意味着每次调用每个规范之前都会调用它。
我希望这会有所帮助。