Как я должен проверить сообщение об ошибке появляется в Angular 6 - PullRequest
Новая
       11

Как я должен проверить сообщение об ошибке появляется в Angular 6

0 голосов
/ 02 июля 2018

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

Вот HTML: 

<input type="text" formControlName="name" class="form-control input-lg"
       placeholder="{{ 'validation.attributes.name' | translate }}"
       [ngClass]="{ 'is-invalid': !f.name.pristine  && f.name.errors }"/>
<div *ngIf="!f.name.pristine && f.name.errors" class="text-primary">
  <div *ngIf="f.name.errors.required">{{ 'validation.required' | translate:{'attribute':'Name'} }}
  </div>
</div>

и вот мой реальный тест: 

it(`form should be invalid without name`, async(() => {
  comp.registerForm.controls['name'].setValue('');
  expect(comp.registerForm.valid).toBeFalsy();
}));

Как проверить, появляется ли сообщение об ошибке?

РЕДАКТИРОВАТЬ:

Я сделал тест отладки с: 

<div id="test" >qqq</div>

Я могу подтвердить это с помощью: 

fixture = TestBed.createComponent(RegisterComponent);
de = fixture.debugElement.query(By.css('form'));
el = de.nativeElement;
const test = el.querySelector('#test');
expect(test.textContent).toContain('qqq'); // This will pass

Но когда я добавляю условие: 

*ngIf="!f.name.pristine && f.name.errors"

Я получаю: 

Cannot read property 'textContent' of null

Просто чтобы подтвердить, у меня есть 

fixture.detectChanges();

в beforeEach()

1 Ответ

0 голосов
/ 02 июля 2018

У вас есть два варианта:

  1. Используйте элемент @ViewChild: 

    <div #errorMessage *ngIf="!f.name.pristine && f.name.errors" class="text-primary">

// In your component
@ViewChild() errorMessage: ElementRef;

  2. Использование селектора запросов документа 

    <div id="errorMessage" *ngIf="!f.name.pristine && f.name.errors" class="text-primary">

// In your test file
const el = fixture.nativeElement.querySelector('#errorMessage')

Теперь в вашем тесте вы можете использовать любой из них: 

expect(component.errorMessage.nativeElement).toBeTruthy();
expect(el).toBeTruthy();

Оба являются HTMLElement с, так что вы можете получить доступ к их свойствам: 

el.innerHTML
el.className
...
...