如何从茉莉花中的角度访问或添加模板引用变量

Question

How do I access a template reference/variable within Jasmine?

form.component.html

<form #f="ngForm" class="form form-profession" novalidate>...

<div class="error-group" *ngIf="f.invalid">error</div>

form.component.ts

export class FormComponent implements OnInit {

  @ViewChild('f') f: NgForm;

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
  }

  onSubmit(f) {
    if (f.valid) {
      // do stuff
    }
  }
}

form.component.spec.ts

it('should display errors when form is invalid', () => {
  fixture.componentInstance.f.invalid = true;
  expect(fixture.nativeElement.querySelector('.error-group')).not.toBeNull();
});

I get this error "[ts] Cannot assign to 'valid' because it is a constant or a read-only property."

Answer 1

Try doing this.

 it('should show error message when form is invalid', () => {
    const form = fixture.componentInstance.f;  // get the form instance through the component.
    form.form.setErrors({required: true}); // making the form invalid

    fixture.detectChanges(); // trigger a change detection cycle for the component

    expect(fixture.nativeElement.querySelector('.error-group').textContent).toContain('sss');

    expect(form.valid).toBeFalsy();
  });

Answer 2

您可以使用它来访问组件fixture.debugElement.query(By.directive(ClassOfTheSearchedComponent))