Как проверить простую угловую реактивную форму - PullRequest
Новая
       24

Как проверить простую угловую реактивную форму

0 голосов
/ 30 декабря 2018

У меня есть Компонент, который содержит очень простую Реактивную форму, с одним полем ввода и одной кнопкой для отправки формы.

Здесь код HTML-шаблона 

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="idControl">
  <button type="submit" class="button" [disabled]="myForm.invalid">Submit Form</button>
</form>

и здесь FormGroup в коде компонента 

@Component({
  selector: 'my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.scss']
})
export class MyFormComponent implements OnInit {
  myForm = new FormGroup({
    idControl: new FormControl('' , [
      Validators.required
    ])
  });
.....
.....
}

Теперь я хочу написать простой тест для этого компонента, тест, который в основном говорит

  • , сначала установите значениеполя ввода в «Blah»
  • , затем нажмите кнопку, чтобы отправить форму
  • и, наконец, проверьте, что после нажатия кнопки значение элемента управления с именем idControl фактически является «Blah»"

Следующий пример теста действительно работает 

it('1.1 should update the value of the input field after an "input" event on the input field', () => {
    const inputVal = 'Blah';
    const input = fixture.nativeElement.querySelector('input');
    input.value = inputVal;

    input.dispatchEvent(new Event('input'));

    expect(fixture.componentInstance.myForm.value.idControl).toEqual(inputVal);
  });

Этот тест, как мне кажется, не отражает точно то, что я хочу смоделировать, а именно щелчок по кнопке.С другой стороны, если я попытаюсь смоделировать событие нажатия на кнопку, я не смогу создать успешный тест.Например, следующий тест не проходит 

it('1.2 should update the value of the input field after a "submit" event on the form', () => {
    const inputVal = 'Blah1';
    const input = fixture.nativeElement.querySelector('input');
    input.value = inputVal;
    const submitEl = fixture.debugElement.query(By.css('button'));
    submitEl.triggerEventHandler('click', null);
    fixture.detectChanges();

    expect(fixture.componentInstance.myForm.value.idControl).toEqual(inputVal);
  });

Я также пробовал разные варианты, например, используя 

fixture.debugElement.query(By.css('button')).nativeElement.click();

, но, похоже, ничего не работает.

Этокод тестовой конфигурации, который я использую 

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ InputFormComponent],
      imports: [ReactiveFormsModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(InputFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

Мой вопрос заключается в том, что я что-то упускаю из-за того, как протестировать форму в Angular.

...