茉莉花-无法读取未定义的属性“控件”-Angular 6

Question

我是Angular的初学者，正在Jasmine中为Angular6编写测试EmployeeComponent。我有一个错误

无法读取未定义的属性“控件”

我想我没有在employee.component.spec.ts文件中正确设置所有依赖项。我研究了几天，但没有结果。任何帮助将非常感激。

这是我代码中的基本流程。员工部分包含注册表。当用户单击时Submit，员工服务将向Firebase插入/更新数据。

以下是employee.component.html

 <div class="row">
  <div class="col-md-5">
    <form [formGroup]="this.employeeService.form" (ngSubmit)="onSubmit()">
      <input type="hidden" formControlName="$key">
      <div class="form-group" *ngIf="page1">
        <label>Full Name</label>
        <input formControlName="fullName" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.fullName.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.fullName.errors">
          This field is required.
        </div>
      </div>

      <div class="form-group" *ngIf="page1">
        <label>Email</label>
        <input formControlName="email" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.email.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.email.errors">
            Invalid Email Address.
          </div>
      </div>

      <div class="form-group" *ngIf="page1">
        <label>Mobile</label>
        <input formControlName="mobile" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.mobile.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.mobile.errors">
          <label *ngIf="formControls.mobile.errors.required">This field is required.</label>
          <label *ngIf="formControls.mobile.errors.minLength">At least 8 characters</label>
        </div>
      </div>

      <div style="text-align: right" *ngIf="page1">
        <button class="btn btn-primary" (click)="part1Next()">Next</button>
      </div>

      <div class="form-group" *ngIf="page2">
          <label>School</label>
          <input formControlName="school" class="form-control">
      </div>

      <!-- <div class="form-group" *ngIf="page2">
        <label>Degree</label>
        <input formControlName="degree" class="form-control">
      </div> -->

      <div class="form-group" *ngIf="page2">
        <label>Degree</label>
        <select class="form-control" formControlName="degree">
          <option value="bachelor">Bachelor</option>
          <option value="master">Master</option>
        </select>
      </div>

      <div class="form-group" *ngIf="page2">
          <label>Location</label>
          <input formControlName="location" class="form-control">
      </div>

      <div class="row">
          <div class="col-md-6" style="text-align: center" *ngIf="page2">
              <button class="btn btn-primary" (click)="part2Back()">Back</button>
          </div>

          <div class="col-md-6" style="text-align: center" *ngIf="page2">
              <button class="btn btn-primary" (click)="part2Next()">Next</button>
          </div>
      </div>

      <div *ngIf="page3">
          <div>
            <h2>Please Check all of the information below</h2>
            <p>Full Name: {{formControls.fullName.value}}</p>
            <p>Email: {{formControls.email.value}}</p>
            <p>Mobile: {{formControls.mobile.value}}</p>
            <p>School: {{formControls.school.value}}</p>
            <p>Degree: {{formControls.degree.value}}</p>
            <p>Location: {{formControls.location.value}}</p>
          </div>
          <div class="row">
              <div class="col-md-6" style="text-align: center">
                  <button class="btn btn-primary" (click)="part3Back()">Back</button>
              </div>

              <div class="col-md-6" style="text-align: center" class="form-group">
                  <input type="submit" class = "btn btn-primary" value="Submit">
              </div>
          </div>
      </div>

    </form>
    <div class="alert alert-info" *ngIf="showSuccessMessage">
      Submitted Successfully
    </div>

  </div>

  <div class="col-md-7">
    <!-- <app-employee-list></app-employee-list> -->
  </div>

</div>

以下是employee.component.ts

import { Component, OnInit } from '@angular/core';

import { EmployeeService } from '../shared/employee.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService) { }

  page1: boolean = true;
  page2: boolean = false;
  page3: boolean = false;

  part1Next() {
    this.page1 = false;
    this.page2 = true;
  }

  part2Back() {
    this.page1 = true;
    this.page2 = false;
  }

  part2Next() {
    this.page2 = false;
    this.page3 = true;
  }

  part3Back() {
    this.page2 = true;
    this.page3 = false;
  }

  submitted: boolean;
  showSuccessMessage: boolean;
  formControls = this.employeeService.form.controls;

  ngOnInit() {
  }

  onSubmit() {
    this.submitted = true;
    if (this.employeeService.form.valid) {
      if (this.employeeService.form.get('$key').value == null) {
        // insert
        this.employeeService.insertEmployee(this.employeeService.form.value);
      } else {
        // update
        this.employeeService.updateEmployee(this.employeeService.form.value);
      }
      this.showSuccessMessage = true;
      setTimeout(() => this.showSuccessMessage = false, 2000);
      this.submitted = false;
      this.employeeService.form.reset();
    }
    this.page1 = true;
    this.page2 = false;
    this.page3 = false;
  }
}

以下是employee.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { EmployeeComponent } from './employee.component';
import { FormsModule } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';

class MockEmpService { 
  employeeList: AngularFireList<any>;

  form = new FormGroup({
    $key: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
    mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
    school: new FormControl(''),
    degree: new FormControl(''),
    location: new FormControl('')
  });

  insertEmployee() {
    return true;
  }

  updateEmployee() {
    return true;
  }
}

fdescribe('EmployeeComponent', () => {
  let component: EmployeeComponent;
  let fixture: ComponentFixture<EmployeeComponent>;
  let empService: MockEmpService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EmployeeComponent ],
      imports: [ ReactiveFormsModule, FormsModule ],
      providers: [ 
        {provide: EmployeeService, useValue: MockEmpService},  
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EmployeeComponent);
    component = fixture.componentInstance;
    empService = TestBed.get(MockEmpService);
    fixture.detectChanges();
  });

  // first test
  // when onSubmit() from component is called, insert() or update() from service is called
  it('calling insert or update from service when onSubmit is called', () => {
    spyOn(component, 'onSubmit');
    expect(empService.insertEmployee).toHaveBeenCalled();
  });

  // Test created automatically
  // it('should create', () => {
  //   expect(component).toBeTruthy();
  // });
});

以下是employee.service.ts

import { Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  employeeList: AngularFireList<any>;

  constructor(private firebase: AngularFireDatabase) { }
  form = new FormGroup({
    $key: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
    mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
    school: new FormControl(''),
    degree: new FormControl(''),
    location: new FormControl('')
  });

  getCustomers() {
    this.employeeList = this.firebase.list('employees');
    console.log(this.employeeList);
    return this.employeeList.snapshotChanges();
  }

  insertEmployee(employee) {
    this.employeeList.push({
      fullName: employee.fullName,
      email: employee.email,
      mobile: employee.mobile,
      school: employee.school,
      degree: employee.degree,
      location: employee.location
    });
  }

  updateEmployee(employee) {
    this.employeeList.update(employee.$key,
      {
        fullName: employee.fullName,
        email: employee.email,
        mobile: employee.mobile,
        school: employee.school,
        degree: employee.degree,
        location: employee.location
      });
  }

  populateForm(employee) {
    this.form.setValue(employee);
  }

  deleteEmployee($key: string) {
    this.employeeList.remove($key);
  }
}

Answer 1

嗯，欢迎来到 StackOverflow。:) 首先，这是您第一次写的非常彻底的问题。做得好！

因为它非常彻底，所以我能够组织一个 stackblitz 来测试你遇到了什么。您可以在这里找到它：Jasmine - 无法读取未定义的属性“控件” - Angular 6

正如您在 stackblitz 中看到的，您的测试现在通过了。这是我为使这项工作所做的工作：

• 将 EmployeeService 的提供者行更改为 useClass 而不是 useValue - 您正在用一个类替换另一个类。
• 在 'let' 声明和 'TestBed.get(EmployeeService)' 调用中将 empService 的类型更改为 EmployeeService。这样做的原因是您正在使用不同的类模拟 EmployeeService，但就组件而言，它仍然使用原始名称。
• 注释掉这一行：spyOn(component, 'onSubmit');因为这会扼杀您正在尝试测试的功能。
• 创建了 insertSpy 来监视 empService.insertEmployee() 函数
• 添加了该行，let formValidSpy = spyOnProperty(empService.form, 'valid', 'get').and.returnValue(true);因为您需要模拟设置为有效或不设置的表单以控制 onSubmit() 的哪些部分被执行。
• 最后实际调用函数来测试它 component.onSubmit();

有关所有详细信息，请参阅 stackblitz。我希望这有帮助。