使用karma＆jasmine测试具有依赖性的组件

我是angular 2的新手，我在测试代码时遇到了一些问题。我使用茉莉花测试框架和业力测试运行器来测试我的应用程序。使用karma＆jasmine测试具有依赖性的组件

我有一个组件（称为GroupDetailsComponent），我想测试。此组件使用两个服务（GroupService & TagelerServie，都有CRUD方法与API交谈）以及html文件中的一些管道。我的组件看起来是这样的：

import 'rxjs/add/operator/switchMap'; 
import { Component, Input, OnInit } from '@angular/core'; 
import { Tageler } from '../../tagelers/tageler'; 
import { TagelerService } from '../../tagelers/tageler.service'; 
import { Params, ActivatedRoute } from '@angular/router'; 
import { GroupService} from "../group.service"; 
import { Group } from '../group'; 


@Component({ 
    selector: 'app-group-details', 
    templateUrl: 'group-details.component.html', 
    styleUrls: ['group-details.component.css'], 
}) 

export class GroupDetailsComponent implements OnInit { 
    @Input() 
    tageler: Tageler; 
    tagelers: Tageler[]; 
    group: Group; 

    constructor(
    private route: ActivatedRoute, 
    private groupService: GroupService, 
    private tagelerService: TagelerService) { 
    } 

    ngOnInit() { 
    console.log("Init Details"); 
    this.route.params 
     .switchMap((params: Params) => this.groupService.getGroup(params['id'])) 
     .subscribe(group => this.group = group); 

    this.tagelerService 
     .getTagelers() 
     .then((tagelers: Tageler[]) => { 
     // some code 
      } 
      return tageler; 
     }); 
     }); 
    } 
}

而且测试文件看起来是这样的：

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { GroupDetailsComponent } from './group-details.component'; 
import { FilterTagelerByGroupPipe } from '../../pipes/filterTagelerByGroup.pipe'; 
import { SameDateTagelerPipe } from '../../pipes/sameDateTageler.pipe'; 
import { CurrentTagelerPipe } from '../../pipes/currentTageler.pipe'; 
import { NextTagelerPipe } from '../../pipes/nextTageler.pipe'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { GroupService } from '../group.service'; 
import { TagelerService } from '../../tagelers/tageler.service'; 

describe('GroupDetailsComponent',() => { 

    let component: GroupDetailsComponent; 
    let fixture: ComponentFixture<GroupDetailsComponent>; 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     GroupDetailsComponent, 
     FilterTagelerByGroupPipe, 
     SameDateTagelerPipe, 
     CurrentTagelerPipe, 
     NextTagelerPipe, ], 
     imports: [ RouterTestingModule ], 
     providers: [{provide: GroupService}, {provide: TagelerService}], 
    }) 

    fixture = TestBed.createComponent(GroupDetailsComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 

    }); 

    class MockGroupService { 
    getGroups(): Array<Group> { 
     let toReturn: Array<Group> = []; 
     toReturn.push(new Group('Trupp', 'Gruppe 1')); 
     return toReturn; 
    }; 
    } 


    it('should create component',() => { 
    expect(component).toBeDefined(); 
    }); 
});

我读到的测试和大量的博客角2文件，但我仍然不是很懂如何测试使用服务和管道的组件。当我启动测试运行器时，测试'应该创建组件'失败，并且我得到消息说我的组件没有被定义（但我不明白为什么）。我也不明白我如何注入服务和管道。我如何以正确的方式嘲笑他们？

我希望有人能给我有用的建议！

雷蒙娜

来源

2017-04-10 Ramona

你试过Spyon服务模拟 –

spyOn工作，谢谢！ – Ramona

我张贴答案，以便它可以帮助别人。你可以通过点击左下方的Tink标记来接受答案，左下方的图标 –

可以在茉莉使用spyOn伪造呼叫。

spyOn(yourService, 'method').and.returnValue($q.resolve(yourState));

来源

2017-04-12 20:50:19

使用karma＆jasmine测试具有依赖性的组件

回答

相关问题