我有一个简单的单元测试,使用Angular 6组件上的业力/茉莉花完成。从我收集的复数课程和文档中可以看出,我正在正确地模拟组件所需要的服务,但是当调用该方法从模拟服务返回数据时,我得到了错误消息,指出未定义属性。
我的“ it”函数为空,因为一旦在beforeEach方法中构造了组件,测试就会失败。组件的构造函数调用了我要测试的方法。请在下面查看我的代码。
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { MainComponent } from './main.component';
import { DataService } from '../services/data.service';
import { of } from 'rxjs';
import { NO_ERRORS_SCHEMA } from "@angular/core";
describe('Should construct MainComponent', () => {
let mainComponent: MainComponent;
let EMPLOYEES;
let fixture: ComponentFixture<MainComponent>;
let mockDataService;
beforeEach(() => {
EMPLOYEES = [
{
"PrismEmployeeID": 1,
"FirstName": "install2",
"LastName": "account",
"Initials": "IA ",
"NickName": "",
"SSN": "",
"DateOfBirth": "09/26/2014",
"HireDate": "09/26/2014",
"OfficePhone": "9043943239",
"OfficeFax": "9042246400",
"ClassificationID": 133,
"ClassificationDescription": "Claims Support U.S. Insurance",
"SupervisorID": 32,
"DepartmentID": 2,
"DepartmentDescription": "Information Technology",
"SupervisorName": "Jerry Sutton",
"CountryID": 1,
"CountryName": "United States"
}
];
mockDataService = jasmine.createSpyObj(['GetEmployees']);
TestBed.configureTestingModule({
declarations: [MainComponent],
providers: [{ provide: DataService, useValue: mockDataService }],
schemas: [NO_ERRORS_SCHEMA]
});
fixture = TestBed.createComponent(MainComponent);
fixture.detectChanges();
mockDataService = jasmine.createSpyObj(['GetEmployees']);
});
it('should get an array Employees',
() => {});
});
MainComponent
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { DataService } from '../services/data.service';
import { TableComponent } from './table/table.component';
@Component({
selector: 'main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent {
columns: string[] = ['PrismEmployeeID', 'LastName', 'FirstName', 'Initials', 'LastFour', 'BirthDate', 'HireDate', 'OfficePhone', 'OfficeFax', 'ClassificationDescription', 'SupervisorName', 'DepartmentDescription', 'CountryName'];
loading: boolean = false;
@Input() tableData: Employee[];
constructor(private _dataService: DataService) {
this.loadEmployees();
}
loadEmployees() {
this.loading = true;
this._dataService.GetEmployees().subscribe((data) => {
this.loading = false;
this.tableData = data.json() as Employee[];
});
}
onLoading(loading: boolean) {
this.loading = loading;
}
onReloadData(reloadData: boolean) {
this.loadEmployees();
}
}
interface Employee {
PrismEmployeeID: number;
FirstName: string;
LastName: string;
Initials: string;
NickName: string;
SSN: string;
DateOfBirth: string;
HireDate: string;
OfficePhone: string;
OfficeFax: string;
ClassificationID: number;
ClassificationDescription: string;
SupervisorID: number;
DepartmentID: number;
DepartmentDescription: string;
SupervisorName: string;
CountryID: number;
CountryName: string;
_selected: boolean;
}
<br/>
<h2>Prism Employees</h2>
<div *ngIf="loading" class="d-flex justify-content-center bd-highlight mb-3">
<div class="p-2 bd-highlight"></div>
<div class="p-2 bd-highlight">
<mat-spinner id="overlay"></mat-spinner>
</div>
<div class="p-2 bd-highlight"></div>
</div>
<div *ngIf='tableData'>
<table-component #table (loading)="onLoading($event)" (reloadData)="onReloadData($event)" [data]="tableData" [displayedColumns]="columns"></table-component>
</div>
答案 0 :(得分:1)
问题是您当前正在提供服务的存根,而GetEmployees
方法没有配置的返回值。这意味着一旦组件调用了先前的函数并订阅了其(未定义的)返回值,它将触发异常。
要解决此问题,您需要 fake 返回该方法。基于this answer,您可以尝试以下操作:
import {of} from 'rxjs';
...
mockDataService = jasmine.createSpyObj(DataService.Name, {'GetEmployees': of(EMPLOYEES)});
...
更新:
尽管如此,您必须重构DataService.GetEmployees
方法以使其具有以下签名:
GetEmployees(): Observable<Employee[]>;
DataService.GetEmployees
的当前实现是一个leaky abstraction,因为它从旧的Response
API返回了原始Http
对象,从而迫使使用者(在本例中为组件) )了解有关底层实现的详细信息(此详细信息是使用data.json() as Employee[]
)
答案 1 :(得分:0)
spyOn(mockYourService, 'getSomeData').and.returnValue({ subscribe: () => {} })
您可以... 返回间谍中的实际可观察物
spyOn(mockYourService,'getSomeData')。andreturnValue(Observable.of(someData)) 也许这将比循环订阅方法更可取,因为如果服务调用更改了组件中的某些内容,那么您可能需要对其进行测试