Angular 4 / CLI单元测试问题如何测试包含输入对象变量的组件的方法

Question

有人可以指导我如何为下面的组件实施单元测试？我将测试这个组件的next（）方法。当我为这个函数实现单元测试时，我得到了一个错误。实际上我是单元测试的初学者，所以我很感激有人实现了一个Professional单元测试这个样本，作为其他组件的参考。

组件文件：

import { Component, Input, OnInit } from '@angular/core';
import { Client, ClientMetadata } from '../../shared/clients/client.model';
import { ClientService } from '../../shared/clients/client.service';
import { HomeRoutingService } from '../home-routing/home-routing.service';
import { FormValidationService } from "../../shared/form-validation/form-
validation.service";
import { FormBuilder} from '@angular/forms';

@Component({
  selector: 'email-form',
  templateUrl: './email-form.component.html',
  styleUrls: ['./email-form.component.css', '../home.component.css'],

})

export class EmailFormComponent implements OnInit{
    @Input() client: Client;
    isClickedIncognito: boolean;
    isClickedNext: boolean;
    constructor(
       private clientService: ClientService,
       private homeRoutingService: HomeRoutingService,
       public fv: FormValidationService
    ) { }

   ngOnInit() {
      this.isClickedIncognito = false;
      this.isClickedNext = false;
      // form is builded in fv service
      this.fv.buildFormEmail();
   }
   next(anonymous: boolean): void {
    document.body.style.cursor = 'wait';
    this.client.anonymous = anonymous === true ? 1 : 0;
    // If client is anonymous go directly to measurement form
    if (anonymous) {
        this.isClickedIncognito = true;
        this.saveClient();
        this.homeRoutingService.next(this.constructor.name, { anonymous: 
    true });
    }
    // Check if client exists in DB ; check if has password ;
    else {
        this.isClickedNext = true;
        this.clientService.checkExist(this.client.email)
            .then(exists =>
                this.handleExist(exists)
            );
    }
   }
   saveClient(): void {
    let gender = new ClientMetadata('gender', environment.gender);
    (this.client.clientMetadatas = this.client.clientMetadatas ? 
   this.client.clientMetadatas : []).push(gender);
    if (this.client.anonymous === 1)
        this.client.email = null;
    else if (this.client.email === null) { return; }
    this.clientService.addClient(this.client)
        .then(client => this.client = client);
     }
 }

spec文件：

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';


import { EmailFormComponent } from './email-form.component';
import { ClientService } from '../../shared/clients/client.service';
import { HomeRoutingService } from '../home-routing/home-routing.service';
import { FormValidationService } from "../../shared/form-validation/form-
validation.service";
import { FormBuilder } from '@angular/forms';
import { Client, ClientMetadata } from '../../shared/clients/client.model';


import { TranslateModule, TranslateStaticLoader, TranslatePipe, 
    TranslateLoader } from 'ng2-translate';
import { Http } from '@angular/http';

export function createTranslateLoader(http: Http) {
return new TranslateStaticLoader(http, '../../assets/i18n/', '.json');
 }
describe('EmailFormComponent', () => {
   let component: EmailFormComponent;
   let fixture: ComponentFixture<EmailFormComponent>;
   let de: DebugElement;
   let el: HTMLElement;
   let formService: FormValidationService;
   let clientService: ClientService;
   let ClientEl: Client;
   beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [EmailFormComponent],
        providers: [FormValidationService,
            ClientService,
            HomeRoutingService,
            FormValidationService,
            FormBuilder
            // { provide: ClientService, useValue: ClientServiceStub },
            // { provide: HomeRoutingService, useValue: 
       HomeRoutingServiceStub },
            // { provide: FormValidationService, useValue: FormValidationServiceStub }
        ],
        schemas: [NO_ERRORS_SCHEMA],
        imports: [TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        })]
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(EmailFormComponent);
    component = fixture.componentInstance;
    // formService = fixture.debugElement.injector.get(FormValidationService);
    // formService.buildFormEmail();
    // clientService = fixture.debugElement.injector.get(ClientService);
    // fixture.detectChanges();
});
it('should component works well', async(() => {
    const fixture = TestBed.createComponent(EmailFormComponent);
    const comp = fixture.debugElement.componentInstance;
    expect(comp).toBeTruthy();
}));
it('should be correct', () => {
    let anonymous = true;
    component.next(anonymous);
    //console.log(component.isClickedIncognito);
    expect(component.isClickedIncognito).toBe(true);
    //expect(true).toBe(true);
});

}）;

错误（当我评论fixture.detectChanges（）时）：

Cannot set property 'anonymous' of undefined

错误（当我把fixture.detectChanges（））时：

Cannot read property 'email' of undefined