angular - 如何使用 Jasmine 处理对 Angular 单元测试的依赖注入(inject)？

Question

我第一次尝试在 Angular 中实现单元测试，我使用的是 Jasmine。我来自 Java\Spring，使用 Spring 框架，它会自动将所有依赖项注入(inject)到我的测试中，但我不知道如何使用 Angular 单元测试和 Jasmine 来实现它。

我尝试更好地解释我必须做什么。

1) 我有这个 PeopleListComponent 组件类:

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { EventService } from '../event.service';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';

interface WorkShiftTypes {
  name: string;
  value: string;
}

@Component({
  selector: 'app-people-list',
  templateUrl: './people-list.component.html',
  styleUrls: ['./people-list.component.css']
})
export class PeopleListComponent implements OnInit {

  people: any[];

  //cities: City[];

  workShiftTypes: WorkShiftTypes[];
  selectedShift: WorkShiftTypes;

  @ViewChild('draggable_people') draggablePeopleExternalElement: ElementRef;

  constructor(private eventService: EventService) { }

  ngOnInit(): void {
    this.eventService.getPeople().then(people => {this.people = people;});

    this.selectedShift = {name: 'Mattina', value: 'Mattina'};

    this.workShiftTypes = [
      {name: 'Mattina', value: 'Mattina'},
      {name: 'Pomeriggio', value: 'Pomeriggio'},
      {name: 'Notte', value: 'Notte'},
      {name: 'Custom', value: 'Custom'}
    ];
  }

  ngAfterViewInit() {
    console.log("PEOPLE LIST ngAfterViewInit() START !!!")
    var self = this

    new Draggable(this.draggablePeopleExternalElement.nativeElement, {
      itemSelector: '.fc-event',
      eventData: function(eventEl) {
        console.log("DRAG !!!");
        //console.log("SELECTED SHIFT: " + self.selectedShift.value);
        return {
          title: eventEl.innerText,
          startTime: "17:00",
          duration: { hours: 8 }
        };
      }
    });

  }

  createEventObject() {
    return 1;
  }

}

正如您所看到的，该组件包含这个非常简约的方法createEventObject():

创建事件对象() { 返回1； }

目前仅返回值 1(我希望尽可能简单地尝试我的单元测试，然后我将实现真正的用例)。

好的，所以我创建了这个 people-list-spec.ts 文件，其中包含前一个方法的单元测试:

import { PeopleListComponent } from "./people-list.component"
import { EventService } from '../event.service';

describe('people-list', () => {

  let eventService = new EventService();
  let component = new PeopleListComponent(eventService);

  it('createEventObject()  return 1', () => {

  })
})

好的，所以我要做的就是获取一个 PeopleListComponent 实例，调用它的 createEventObject() 并检查返回值是否为 1 断言单元测试成功。

这里我遇到以下问题:PeopleListComponent构造函数采用EventService参数。好的...我可以构建它并传递它，但是 EventService 构造函数会采用 HttpClient 参数。

在我的项目中，所有这些依赖项注入(inject)都是由 Angular 自动处理的，我怀疑手动创建不是正确的选择(大量代码重复，而且 HttpClient 类应该由 Angular 处理)。

这个问题有什么解决办法吗？使用 Spring 框架也为单元测试项目处理依赖注入(inject)，我认为(并希望)在 Angular\Jasmine 中是相同的，但是我到底该怎么做？

Answer 1

Angular 会自动为您生成规范文件。 如果不存在也没有问题。让我们看看它会是什么样子:

import { PeopleListComponent } from "./people-list.component"
import { EventService } from '../event.service';

describe('people-list', () => {

let eventServiceSpy : jasmine.SpyObj<EventService>;
let component: PeopleListComponent;
let fixture: ComponentFixture<PeopleListComponent>;
 beforeEach(async(() => {
    const eventServiceSpyObj = jasmine.createSpyObj('EventService',['getPeople'])

    TestBed.configureTestingModule({
      declarations: [ PeopleListComponent ],
      providers : [{ provide : EventService, useValue : eventServiceSpyObj }]
    })
    .compileComponents();
    fixture = TestBed.createComponent(PeopleListComponent);
    component = fixture.componentInstance; 
   eventServiceSpy = TestBed.inject(EventService);
  }));


  it('createEventObject()  return 1', () => {
       eventServiceSpy.getPeople.and.returnValue(of(1));
       component.ngOnInit();
       console.log(component.people); // this value should be one as return in mock service.
  })
})

导入和所有导入都可能出现错误。 但这将是该方法的一般结构 创建组件时，beforeEach 函数可能会出现错误。请告诉我错误。