如何测试表单控制避免括号符号以保持类型检查和可维护性

Question

当我重构对象的成员时，我的设备测试在形式中断时进行了测试

，因为我只能使用括号符号访问集体上的FormControls。基于字符串的测试成员的选择不会被任何IDE重构。

这是一个示例...

对象：

class Task {
  constructor(
    public id: number = 0,
    public description: string = '',    // <--- member under test
    public completed: boolean = false,
    public priority: Priority = Priority.Normal
  ) {}

  clone(): Task {
    return new Task(this.id, this.description, this.completed, this.priority);
  }
}

组件：

export class AppComponent implements OnInit {
  form!: FormGroup;
  task: Task;
  priorities = [Priority.Low, Priority.Normal, Priority.High];

  constructor(private fb: FormBuilder) {
    this.task = this.mockTask();
  }

  ngOnInit() {
    this.task = this.mockTask();
    this.form = this.fb.group({
      description: [
        this.task.description,
        Validators.compose([Validators.required, Validators.maxLength(50)]),
      ],
      priority: [this.task.priority],
    });
  }

  // ...
}

测试：

describe('AppComponent', () => {
  let comp: AppComponent
  let fixture: ComponentFixture<AppComponent>;
  let task: Task;
  let taskService: TaskService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [AppComponent],
      providers: [{provide: TaskService, useClass: MockTaskService}]
    }).compileComponents()
  }))

  beforeEach((done) => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;

    taskService = fixture.debugElement.injector.get(TaskService);
    taskService.getAllTasks().subscribe(tasks => {
      task = tasks[0];
      comp.task = task;
      comp.ngOnInit();
      fixture.detectChanges();
      done()
    })
  })

  it('should not update value if form is invalid', () => {
    let spy = spyOn(taskService, 'updateTask')

    comp.form.controls['description'].setValue(null) // <------

    comp.onSubmit()

    expect(comp.form.valid).toBeFalsy();
    expect(spy).not.toHaveBeenCalled();
  })
})

注意箭头旁边的括号符号。我希望能够以某种方式使用它：

comp.form.controls.description.setValue(null)

我尝试过的

是尝试创建一些接口，例如：

interface ITask {
  description: string;
}

interface ITaskFormGroup extends FormGroup {
  value: ITask;
  controls: {
    description: AbstractControl;
  };
}

它的问题是控件是类型的AbstractControl，而所讨论的任务成员是类型字符串。因此，“控件”不能将ITASK作为通用接口实现。

另外，这是：

"compilerOptions": {
    "noPropertyAccessFromIndexSignature": false,
    // ...
}

...允许点通知，但是当我更改任务或iTask中的成员“描述”时，这仍然不会重构测试。

我觉得这个问题应该有一些解决方案，但是我可以帮助到达那里。我想知道将要花费什么努力，以便从长远来看是否值得。

完整的示例

尽管我认为您无法在 stackblitz ，我提供了一个更完整的示例。要解决运行测试的语法问题。

Answer 1

从FormGroup获得表单控件的正确方法是使用其 GET 函数：

const descControl = comp.form.get('description')
descControl.setValue(null)

这样，如果丢失了表单控件，至少您的测试将引起错误。

Angular团队已实施强大的打字表单。如果您有耐心等待Angular 14，这也可以帮助您改善测试。