以下是我的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();
}));