使用业力和茉莉测试具有依赖性的组件

Question

我是angular 2的新手，在测试代码时遇到一些问题。 我使用茉莉花测试框架和业力测试运行程序来测试我的应用程序。

我有一个要测试的组件（称为GroupDetailsComponent）。 该组件使用两个服务（GroupService和TagelerServie，都具有与API通讯的CRUD方法）和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();
  });
});

我阅读了有关测试的angular 2文档和许多博客，但我仍然不太了解如何测试使用服务和管道的组件。 当我启动测试运行程序时，测试“应该创建组件”失败，并且我收到一条消息，提示我的组件未定义（但是我不明白为什么）。 我也不明白我该如何注入服务和管道。 我如何以正确的方式嘲笑他们？

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

拉莫纳

Answer 1

您可以使用spyOn伪造茉莉花中的电话。

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