Как выполнить модульное тестирование сообщения проверки в формах на основе угловых шаблонов

Question

У меня есть очень простая угловая шаблонная форма с одним обязательным полем.Сообщение о проверке отображается, если поле недопустимо, что является случаем, когда компонент сначала загружается, поскольку поле является обязательным, но пустым.Код выполняется, как и ожидалось, при просмотре в приложении и выводится сообщение проверки.

При тестировании компонента с помощью модульного теста Жасмин сообщение проверки не принимается, и тест завершается неудачей.

Я уверен, что логика для поиска сообщения проверки правильности работает, потому что если я удаляю директиву * ngIf в сообщении DIV, то тест проходит успешно.

Я попробовал следующее:

• импорт BrowserModule в спецификацию теста
• запуск теста в блоке fakeAsync ()

Шаблон:

<form #form="ngForm">

  <label>First name:</label>

  <input #firstName="ngModel"
    type="text"
    name="firstName"
    [(ngModel)]="firstNameText"
    required />

  <div class="validation-error" *ngIf="firstName.invalid">
      Please enter a valid first name
  </div>
</form>

Класс компонента:

import { Component } from '@angular/core';

@Component({
  selector: 'app-person-form',
  templateUrl: './person-form.component.html'
})
export class PersonFormComponent  {
  public firstNameText: string;
}

Спецификация теста на жасмин:

import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
import { PersonFormComponent } from './person-form.component';
import { FormsModule } from '@angular/forms';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

describe('PersonFormComponent', () => {
  let fixture: ComponentFixture<PersonFormComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule ],
      declarations: [ PersonFormComponent ]
    });

    fixture = TestBed.createComponent(PersonFormComponent);
    fixture.detectChanges();
  });

  it('should show a validation error if the first name was touched but left empty', () => {
    let firstNameValidationError: DebugElement;

    // try to get a handle to the validation message (should exist as form is invalid):
    firstNameValidationError = fixture.debugElement.query(By.css('.validation-error'));

    // the validation error should be found:
    expect(firstNameValidationError).toBeTruthy();
  });
});

Answer 1

Инициализация компонента всегда должна выполняться в async блоке

beforeEach(async() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule ],
      declarations: [ PersonFormComponent ]
    });

    fixture = TestBed.createComponent(PersonFormComponent);
    fixture.detectChanges();
});

Также может потребоваться еще раз запустить обнаружение изменений после инициализации компонента

it('should show a validation error if the first name was touched but left empty', () => {
    let firstNameValidationError: DebugElement;

    fixture.detectChanges(); // run change detection
    firstNameValidationError = fixture.debugElement.query(By.css('.validation-error'));

    // the validation error should be found:
    expect(firstNameValidationError).toBeTruthy();
});

Answer 2

Полный пересмотренный тест выглядит следующим образом, спасибо Amit Chigadani за решение этого вопроса:

import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
import { PersonFormComponent } from './person-form.component';
import { FormsModule } from '@angular/forms';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

describe('PersonFormComponent', () => {
  let fixture: ComponentFixture<PersonFormComponent>;

  beforeEach(async() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule ],
      declarations: [ PersonFormComponent ]
    });

    fixture = TestBed.createComponent(PersonFormComponent);
    fixture.detectChanges();
  });

  it('should show a validation error if the first name was touched but left empty', () => {
    let firstNameValidationError: DebugElement;
    fixture.detectChanges(); // run change detection

    // try to get a handle to the validation message (should exist as form is invalid):
    firstNameValidationError = fixture.debugElement.query(By.css('.validation-error'));

    // the validation error should be found:
    expect(firstNameValidationError).toBeTruthy();
  });
});

Answer 3

Добавьте эти строки в начале теста

 let component = fixture.componentInstance;
    component.firstNameText = '';
    fixture.detectChanges();

и после этого установите какое-либо имя для firstNameText, как показано ниже

component.firstNameText = 'test';

На этом этапе вы должны ожидатьошибка, чтобы быть ложным.