Question

考虑以下代码段...

单元测试：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { AppComponent } from './search.component';
...

describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;

   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            HttpClientTestingModule,
            ...
         ],
         declarations: [
           AppComponent
         ]
      }).compileComponents();
   }));

   beforeEach(() => {
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

组件：

import { Component } from '@angular/core';
import { Person } from '../../models/person';
import { PersonService } from '../../services/person.service';
...

@Component({
   selector: 'app-root',
   template: `Hello {{person.name}}`
})

export class AppComponent {
   person: Person;

   constructor(private personService: PersonService) { }

   ngOnit() {
      this.getPerson();
   }

   public getPerson(): void {
      this.personService.getPerson()
         .subscribe(response => this.person = response)
   }
}

型号：

export class Person {
  id: number;
  name: string;
  ...
}

当我运行“应该创建应用程序组件”单元测试时，出现以下错误： TypeError：无法读取未定义的属性“名称”

尝试如下监视和设置字段：

it('should create app component', () => {
   spyOn(component, 'person').and.returnValue(returnDummyPerson());
   expect(component).toBeTruthy();
});;

function returnDummyPerson(): Person {
   let dummyPerson = new Person();
   dummyPerson .Id = 1;
   dummyPerson .CatalogueName = 'John Doe';
   return dummyPerson;
};

那没有用。请提供有关如何解决此问题的建议。

Answer 1

我将为Person创建一个界面。检查以下两种方法。您可以通过他们得到一个想法。我们在工作中使用sinon，这是一个很棒的图书馆。

export interface Person {
  id: number;
  name: string;
  ...
}

所有测试的模拟方法

describe('AppComponent', () => {

const person: Person = {
    id: 1,
    name:' John'
}

class MockPersonService {
  getPerson() {
    return Observable.of(person);
  }
}

describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;

   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            HttpClientTestingModule,
            ...
         ],
         declarations: [
           AppComponent
         ],
         providers: [
            { provide: PersonService, useClass: MockPersonService }
         ]
      }).compileComponents();
   }));

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

仅针对此测试模拟方法

describe('AppComponent', () => {

const person: Person = {
    id: 1,
    name:' John'
}


it('should create app component', inject([PersonService], (personService: PersonService) => {
    spyOn(personService, 'getPerson').and.returnValue(Observalble.of(person));
    expect(component).toBeTruthy();
}));

验证是否创建了具有数据绑定的组件|角度|茉莉花单元测试

1 个答案: