Karma/Jasmine Angular 错误：无法读取未定义的属性“frmUser”

Question

我是单元测试的新手，正在尝试在应用程序中测试一个基本表单。它只是用户注册并提交一些凭据的表单。我正在尝试测试验证器，但在运行单元测试时遇到问题。执行测试时出现此错误：

TypeError: Cannot read property 'frmUser' of undefined
TypeError: Cannot read property 'frmUser' of undefined
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/user/user.component.spec.ts:54:29)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:388:1)
    at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:288:1)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:387:1)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:138:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:509:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:524:1)
    at attempt (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?73bc53d3671677e6a093fc74e4f9bcde57e5f7ad:4289:46)
    at ZoneQueueRunner.QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?73bc53d3671677e6a093fc74e4f9bcde57e5f7ad:4217:20)
    at runNext (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?73bc53d3671677e6a093fc74e4f9bcde57e5f7a

这是我制作表单的组件类：

  frmUser: FormGroup;
  userInfo: User;
  userId: number;
  fileType: any[] = ["Claim", "Policy"];
  programs: any;
  constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<UserComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder, private httpService: HttpService, private httpClient: HttpClient) {
    this.userId = this.data.userId;

  }

  ngOnInit() {
    console.log(this.fileType);
    this.getPrograms();
    this.createUserForm();
    if (this.userId > 0)
      this.loadUser();
  }

这里是我创建输入字段的地方：

createUserForm() {
    this.frmUser = this.fb.group(
      {
        UserID: [],
        FirstName: ["", [Validators.required, Validators.maxLength(50)]],
        MiddleName: [],
        LastName: ["", [Validators.required, Validators.maxLength(50)]],
        EmailAddress: [{ value: '', disabled: this.userId > 0 }, [Validators.required, Validators.email]],
        UserAccessDetail: this.fb.array([this.createUserProgram()])
      }
    )
  }

我的测试课：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormsModule, FormControl, FormBuilder, FormArray, FormGroup, Validators } from '@angular/forms';
import { UserComponent } from './user.component';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';

import { MatDialogModule} from '@angular/material';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpService } from '../../services/http.service';
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core/testing';
import { User } from '../../models/user';


fdescribe("Form User", () => {
let component: UserComponent;
let fixture: ComponentFixture<UserComponent>;
beforeEach(async(() => {



  TestBed.configureTestingModule({
    declarations: [
      UserComponent
    ],

    imports: [FormsModule,ReactiveFormsModule],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

    providers: [
      { provide: MatDialog, useValue: {} },
      { provide: MatDialogRef, useValue: {} },
      { provide:  MAT_DIALOG_DATA, useValue: {} },
      { provide:  HttpService, useValue: {} },
      { provide:  HttpClient, useValue: {} },


  ]

  }).compileComponents();

beforeEach(() => {

  fixture = TestBed.createComponent(UserComponent);
  component = fixture.componentInstance;

  component.ngOnInit();
})

}));

it('Should prompt an invalid textbox validator', () => {



  let textField = component.frmUser.get('FirstName');

  textField.setValue('');

  expect(textField.valid).toBeFalsy();
})

})

谢谢！

Answer 1

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormsModule, FormControl, FormBuilder, FormArray, FormGroup, Validators } from '@angular/forms';
import { UserComponent } from './user.component';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';

import { MatDialogModule} from '@angular/material';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpService } from '../../services/http.service';
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core/testing';
import { User } from '../../models/user';


fdescribe("Form User", () => {
let component: UserComponent;
let fixture: ComponentFixture<UserComponent>;
beforeEach(async(() => {



  TestBed.configureTestingModule({
    declarations: [
      UserComponent
    ],

    imports: [FormsModule,ReactiveFormsModule],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

    providers: [
      { provide: MatDialog, useValue: {} },
      { provide: MatDialogRef, useValue: {} },
      { provide:  MAT_DIALOG_DATA, useValue: {} },
      { provide:  HttpService, useValue: {} },
      { provide:  HttpClient, useValue: {} },


  ]

  }).compileComponents();

  fixture = TestBed.createComponent(UserComponent);
  component = fixture.componentInstance;

  component.ngOnInit();

}));

it('Should prompt an invalid textbox validator', () => {



  let textField = component.frmUser.get('FirstName');

  textField.setValue('');

  expect(textField.valid).toBeFalsy();
})

})