尝试运行业力TS规范文件时出错。所有模块和导入似乎都正常运行，没有冲突。试图将component.ngOninit()添加到beforeEach（）和it（）中，但没有成功。.研究类似问题与HttpClientTestingModule导入冲突或其他提供程序/声明冲突有关。我无法确定为什么TypeError：无法读取未定义的属性'get'不允许此规范文件通过]
规格文件
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {AcaPersonComponent} from './aca-person.component';
import {
MatCardModule, MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatOptionModule,
MatRadioModule,
MatSelectModule
} from '@angular/material';
import {ReactiveFormsModule} from '@angular/forms';
import {MFGDatePickerModule} from 'mfg-datepicker';
import {TextMaskModule} from 'angular2-text-mask';
import {AppRoutingModule} from '../../../../../app-routing.module';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {LandingPageComponent} from '../../../../../landing-page/landing-page.component';
describe('AcaPersonComponent', () => {
let component: AcaPersonComponent;
let fixture: ComponentFixture<AcaPersonComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AcaPersonComponent,
LandingPageComponent],
imports: [MatFormFieldModule,
ReactiveFormsModule,
MatIconModule,
MatInputModule,
MFGDatePickerModule,
MatOptionModule,
MatSelectModule,
MatRadioModule,
MatCardModule,
TextMaskModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientTestingModule,
MatDividerModule
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AcaPersonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
component.ngOnInit();
});
it('should create', () => {
expect(component).toBeTruthy();
component.ngOnInit();
});
});
错误
TypeError: Cannot read property 'get' of undefined
error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 1, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object({ ns: '', name: 'app-aca-person', attrs: [ ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0, bindings: Array, bindingFlags: 0, outputs: ...
at <Jasmine>
at AcaPersonComponent.get type [as type] (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:70:28)
at AcaPersonComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:24:14)
at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:31909:1)
at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44366:1)
at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44305:1)
at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45327:36)
at debugCheckDirectivesFn (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45270:1)
at Object.eval [as updateDirectives] (ng:///DynamicTestModule/AcaPersonComponent_Host.ngfactory.js:7:5)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45258:1)
at checkAndUpdateView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44270:1)
TypeError: Cannot read property 'get' of undefined
at <Jasmine>
at AcaPersonComponent.get type [as type] (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:70:28)
at AcaPersonComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:24:14)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.spec.ts:58:15)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:124:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:554:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:569:1)
at <Jasmine>
TS班级
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormGroup, Validators} from '@angular/forms';
import {merge} from 'rxjs';
@Component({
selector: 'app-aca-person',
templateUrl: './aca-person.component.html',
styleUrls: ['./aca-person.component.css']
})
export class AcaPersonComponent implements OnInit {
@Input() personType: string;
@Input() peopleForm: FormGroup;
@Input() nextWasClicked: boolean;
@Input() index: number;
@Output() removePerson = new EventEmitter<boolean>();
cardTitle: string;
personAge: number;
constructor() {
}
ngOnInit() {
if (this.type.value == 'primary') {
this.cardTitle = 'Your Information';
} else if (this.type.value == 'spouse') {
this.cardTitle = 'Spouse';
} else if (this.type.value == 'dependent') {
this.cardTitle = 'Dependent';
}
this.dobAndIsPregnantVC();
}
dobAndIsPregnantVC() {
merge(
this.dob.valueChanges,
this.gender.valueChanges
)
.subscribe(() => {
this.calculateAge(this.dob.value);
if (this.gender.value == 'F') {
this.is_pregnant.setValidators(Validators.required);
if (this.personAge < 14) {
this.is_pregnant.setValue(null);
this.is_pregnant.clearValidators();
}
} else {
this.is_pregnant.setValue(null);
this.is_pregnant.clearValidators();
}
this.is_pregnant.updateValueAndValidity();
});
}
// Calculate the age of the client from their birth date to display in the census details
private calculateAge(date: string) {
if (date) {
const timeDiff = Math.abs(Date.now() - new Date(date).getTime());
this.personAge = Math.floor(timeDiff / (1000 * 3600 * 24) / 365.25);
}
}
onRemovePerson() {
this.removePerson.emit(true);
}
// GETTERS
get type() {
return this.peopleForm.get('type');
}
get first_name() {
return this.peopleForm.get('first_name');
}
get last_name() {
return this.peopleForm.get('last_name');
}
get gender() {
return this.peopleForm.get('gender');
}
get dob() {
return this.peopleForm.get('dob');
}
get uses_tobacco() {
return this.peopleForm.get('uses_tobacco');
}
get affordable_care() {
return this.peopleForm.get('affordable_care');
}
get is_pregnant() {
return this.peopleForm.get('is_pregnant');
}
}
发生这种情况是因为您的测试用例中没有定义@Input，因此您需要按以下方式创建它：
beforeEach(() => {
fixture = TestBed.createComponent(AcaPersonComponent);
component = fixture.componentInstance;
component.peopleForm = fb.group({
type: ['Other Name', Validators.required],
first_name: ['f_name', Validators.required],
//.. and so on for all params
});
component.personType = 'Some Type';
component.nextWasClicked = true;
component.index = 1; // or whatever is required
fixture.detectChanges();
});
这将帮助您定义this.peopleForm，因此this.peopleForm.get('type');之类的行将不会出现此类错误