当FormControl值从一个更改为另一个时,如何以角度覆盖单元测试用例?

时间:2018-06-26 08:43:06

标签: unit-testing jasmine angular5 karma-runner angular-test

以下是我的component.ts文件,我将如何覆盖subscribeControlEvents()方法中的以下行

value => this.subscribeExerciseModeValueChangeEventListener(value) ;

 performCycle => this.subscribePerformCycleValueChangeEvents(performCycle);
this.exerciseInputSubscription = this.exerciseInput.valueChanges.subscribe(() => {
                      this.formValueChangeListener();

以下是完整的组件文件

         import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
                import { MarkupService } from '../shared/services/markup.service';
                import { ToolsService } from '../shared/services/tools.service';
                import { ISubscription } from 'rxjs/Subscription';
                import { FormGroup } from '@angular/forms';
                import { ToolHandlerService } from '../shared/services/toolhandler.service';
                import { Form } from '../shared/models/Form';

                @Component({
                  selector: 'basic-exerciselayout',
                  templateUrl: './exerciselayout.component.html',
                  styleUrls: ['./exerciselayout.component.scss']
                })
                export class ExerciseLayoutComponent implements OnInit, OnDestroy, AfterViewInit {
                  public graphicContainer = ['GraphicResultsComponent'];
                  public controls: any[] = [];
                  public form: FormGroup;
                  public exerciseInput: FormGroup;
                  public isExerciseMode: boolean;
                  public disableButtons: boolean;
                  private toolInitialize: ISubscription;
                  private toolFinished: ISubscription;
                  private exerciseModeSubscription: ISubscription;
                  private performCycleSubscription: ISubscription;
                  private exerciseInputSubscription: ISubscription;

                  constructor(private markupsvc: MarkupService, private toolsvc: ToolsService,
                    private toolHandlerService: ToolHandlerService) {
                  }

                  ngOnInit(): void {
                    this.toolInitialize = this.toolHandlerService.onInitialize$.subscribe((toolId) => {
                      this.initTool(toolId);
                    });
                    this.toolFinished = this.toolHandlerService.onFinish$.subscribe((toolInfo) => {
                      this.initTool(toolInfo.ToolId);
                    });
                  }

                  ngAfterViewInit(): void {
                    this.load();
                  }

                  ngOnDestroy(): void {
                    this.toolInitialize.unsubscribe();
                    this.toolFinished.unsubscribe();
                    this.unLoad();
                  }


                  private async load() {
                    try {
                      await this.toolHandlerService.loadTool();
                    } catch (error) {
                      // route to the error page as unable to connect to the server.
                      console.log(error);
                    }
                  }

                  private async unLoad() {
                    try {
                      await this.toolHandlerService.unLoadTool();
                    } catch (error) {
                      // possibly digest the error.
                      console.log(error);
                    }
                  }

                  private initTool(toolId: string): void {
                    this.isExerciseMode = false;
                    this.disableButtons = false;
                    this.unSubscribeControlEvents();
                    this.toolsvc.getTool(toolId).subscribe(tool => {
                      this.controls = [];
                      this.form = this.markupsvc.getFormGroup(tool.Forms);
                      this.exerciseInput = this.form.controls['ExerciseInput'] as FormGroup;
                      this.getControls(tool.Forms);
                      this.initializeCycleControls();
                      this.subscribeControlEvents();
                      console.log(this.form);
                    });
                  }

                  private subscribeControlEvents(): void {
                    this.exerciseModeSubscription = this.form.controls['ExerciseMode'].valueChanges.subscribe(
                      value => this.subscribeExerciseModeValueChangeEventListener(value)
                    );
                    this.performCycleSubscription = this.exerciseInput.controls['PerformCycle'].valueChanges.subscribe(
                      performCycle => this.subscribePerformCycleValueChangeEvents(performCycle)
                    );
                    this.exerciseInputSubscription = this.exerciseInput.valueChanges.subscribe(() => {
                      this.formValueChangeListener();
                    });
                  }

                  private unSubscribeControlEvents(): void {
                    Iif (this.exerciseModeSubscription) {
                      this.exerciseModeSubscription.unsubscribe();
                    }
                    Iif (this.performCycleSubscription) {
                      this.performCycleSubscription.unsubscribe();
                    }
                    Iif (this.exerciseInputSubscription) {
                      this.exerciseInputSubscription.unsubscribe();
                    }
                  }

                  private subscribeExerciseModeValueChangeEventListener(value: string): void {
                    if (value === 'HomeAxis') {
                      this.exerciseInput.reset();
                      this.isExerciseMode = false;
                      this.disableButtons = false;
                    } else {
                      this.isExerciseMode = true;
                      this.formValueChangeListener();
                    }
                  }

                  private formValueChangeListener(): void {
                    this.disableButtons = this.exerciseInput.invalid;
                  }

                  private subscribePerformCycleValueChangeEvents(performCycle: boolean) {
                    if (performCycle) {
                      this.exerciseInput.controls['CycleCount'].enable();
                      this.exerciseInput.controls['FromPosition'].enable();
                    } else {
                      this.exerciseInput.controls['CycleCount'].disable();
                      this.exerciseInput.controls['FromPosition'].disable();
                    }
                  }

                  private initializeCycleControls(): void {
                    Eif (!this.exerciseInput.controls['PerformCycle'].value) {
                      this.exerciseInput.controls['CycleCount'].disable();
                      this.exerciseInput.controls['FromPosition'].disable();
                    }
                  }

                  private getControls(forms: Array<Form>): void {
                    forms.forEach(form => {
                      const id: string = form.Id;
                      const formControls = form.Controls;
                      this.controls.push({ id, formControls });
                      this.getControls(form.Forms);
                    });
                    console.log('Controls', this.controls);
                  }
      }

这是我编写测试用例的方式,尽管我将'ExerciseMode'从'HomeAxis'更改为'ExerciseAxis',但并没有触发valueChanges,如果我涵盖了valueChanges,我可以涵盖三个用例

it('ExerciseInput Value has changed', async(() => {
    const control = [{ Id: 'ExerciseMode', Name: 'ExerciseMode', ControlType: ControlTypes.RadioButton, Value: 'HomeAxis'},];
    const form1 = { Id: 'Test', Controls: [control], Forms: [] };
    const formGroup = markUpService.getFormGroup([form1]);
    this.FormControl.reset();
    this.FormControl.setvalue('ExerciseAxis');
    this.form1.control.reset();
    this.formGroup.controls['RadioButton'].setvalue('HomeAxis');
    this.formGroup.controls['RadioButton'].setvalue('ExerciseAxis');
    this.form1.controls['ExerciseMode'].setValue("HomeAxis");
    this.form1.controls['ExerciseMode'].valueChanges.subscribe(() => {
      console.log("modified");
    }, () => { console.log("error") }, () => { console.log("completed") });
    this.form1.controls['ExerciseMode'].setValue("ExerciseAxis");
    fixture.detectChanges();
  }));

0 个答案:

没有答案