角度组件测试错误:TypeError无法读取未定义的属性“ subscribe”

奥斯汀·伯恩

我有一个简单的单元测试,使用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',
		() => {});
});

主要成分

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>

乔塔·托莱多

问题是您当前正在提供服务的存根,而该GetEmployees方法没有配置的返回这意味着一旦组件调用了先前的函数并订阅了其(未定义的)返回值,它将触发异常。

为了解决这个问题,您需要伪造该方法的返回。根据此答案,您可以尝试以下操作:

import {of} from 'rxjs';
...
mockDataService = jasmine.createSpyObj(DataService.Name, {'GetEmployees': of(EMPLOYEES)});
...

更新:

为了使它起作用,您将必须重构您的DataService.GetEmployees方法以使其具有以下签名:

GetEmployees(): Observable<Employee[]>;

的当前实现DataService.GetEmployees是一个泄漏的抽象,因为它Response从旧HttpAPI返回原始对象,从而迫使使用者(在本例中为组件)了解有关底层实现的详细信息(此详细信息是使用data.json() as Employee[]

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

角“无法读取未定义的属性'subscribe'”

运行npm测试(Angular 2单元测试)后无法读取未定义的属性“ subscribe”

angular2指令“无法读取未定义的属性” subscribe”,带有输出元数据

Angular2-无法读取嵌套调用中未定义的属性“ subscribe”

Angular 4单元测试错误“ TypeError:无法读取未定义的属性'subscribe'”

ng2-translate:无法读取TranslatePipe.transform中未定义的属性“ subscribe”

在单元测试中从ngrx存储中选择时,未定义角度.pipe和.subscribe

Angular无法读取未定义的属性“ subscribe”

Angular2-单元测试可观察到的错误“无法读取未定义的属性'subscribe'”

Angular 2无法读取未定义类型的属性“ subscribe”:无法读取未定义的属性“ subscribe”

设置MdPaginatorIntl提供程序后,我得到“无法读取未定义的属性'subscribe'”

为什么在运行测试时出现“失败:无法读取未定义的属性'subscribe'”?

业力TypeError“无法读取未定义的属性'subscribe'”

错误TypeError:无法读取角度未定义的属性'closeRow'

角度-错误TypeError:无法读取未定义的属性'title'

无法读取Ionic 4(Angular 8)上未定义的属性“ subscribe”

茉莉花测试错误-TypeError:无法读取未定义的属性“隐藏”

错误TypeError:无法读取POST HTTP调用上未定义的属性“ subscribe”-角度[8]

单元测试中的角度“无法读取未定义的属性'subscribe'”

在subscribe()中设置后,角组件属性莫名其妙地保持“未定义”

Gatsby测试错误,TypeError:无法读取未定义的属性“当前”

角度测试-TypeError:无法读取未定义的属性“ 7”

Angular 9 TypeError:无法读取未定义的属性“ subscribe”

带有Jest错误,TypeError的Vue组件测试:无法读取未定义的属性“名称”

使用Internet Explorer的react-redux trySubscribe中的错误(无法获得未定义的属性“ subscribe”)

例外:TypeError:升级后无法读取未定义的属性“ subscribe”

Ionic v5/Angular 8:HttpClient.get().subscribe() 返回 TypeError:无法读取未定义的属性“句柄”

无法读取单元测试错误中未定义的属性 setNumber

反应测试错误:未捕获 [类型错误:无法读取未定义的属性“地图”]