Question

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

我有一个我想测试的组件（称为GroupDetailsComponent）。该组件使用两个服务（GroupService＆amp; 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文档，但我仍然不了解如何测试使用服务和管道的组件。当我启动测试运行器时，测试应该创建组件＆＃39;失败了，我得到的信息是我的组件没有定义（但我不明白为什么）。我也不了解如何注入服务和管道。我如何以正确的方式嘲笑他们？

我希望有人可以给我有用的建议！

拉马纳

Answer 1

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

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

使用karma＆amp;测试具有依赖关系的组件茉莉

1 个答案: