Обновления шаблона не происходят в тесте - PullRequest
Новая
       4

Обновления шаблона не происходят в тесте

1 голос
/ 03 марта 2020

Я работаю над тестированием кода Angular и, похоже, что-то неправильно понимает обновления шаблонов. Что я пытаюсь заставить работать: я реализовал компонент, который представляет собой просто searchInput, который может быть очищен нажатием кнопки. [Шаблон ниже] Это отлично работает на практике, но я хочу написать для него тест. 

<mat-form-field>
  <mat-icon matPrefix>search</mat-icon>
  <input #searchInput matInput (input)="onSearch(searchInput.value)"
         [placeholder]="placeholder">
  <button class="clear-search-button" mat-button *ngIf="searchInput.value" matSuffix mat-icon-button 
          (click)="searchInput.value=''; onSearch('')">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

Мой тест в настоящее время выглядит следующим образом [de = fixture.debugElement]: 

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [NoopAnimationsModule, MatFormFieldModule, MatInputModule],
      declarations: [SomeSearchComponent],
      schemas: [NO_ERRORS_SCHEMA]
    });
    fixture = TestBed.createComponent(SomeSearchComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    fixture.detectChanges();
  });
  it('should reset Input on button input', () => {
    const input = de.query(By.css('input'));
    expect(input).not.toBeNull();
    input.value = 'someSearch';

    fixture.detectChanges(); // Update view since now the input.value allows 
                                the button to get added to DOM, since *ngIf-condition is now true.

    const resetBtn = de.querySelector('button');
    resetBtn.click();

    fixture.detectChanges(); // Update view since now the input.value should be updated.

    expect(input.value).toEqual('');
  });

Моя проблема в том, что, как бы я ни пытался заполучить кнопку, она, похоже, не добавляется в DOM, так как я всегда получаю 'TypeError: Невозможно прочитать свойство' click 'of null' в строке resetBtn.click().

Есть ли фундаментальная проблема с моим пониманием тестирования шаблонов или есть какая-то глупая опечатка?

1 Ответ

0 голосов
/ 03 марта 2020

Ваша проблема в том, что вы, вероятно, думаете, что функция ввода срабатывает, но это не так. Хотя dom не запускается, это, вероятно, происходит, потому что вы только что внесли текст, но в тесте событие ввода не сработало, вы должны вызвать его вручную.

То, что вам нужно сделать, это запустить его следующим образом: 

input.value = 'someSearch';
input.dispatchEvent(new Event('input'));

Мой пример: 

let input = fixture.debugElement.query(By.css('input')).nativeElement;
input.value = '11';
input.dispatchEvent(new Event('input'));

Рабочий пример: https://stackblitz.com/edit/github-test-run-draft-1eta9b?file=src%2Fapp%2Fapp.component.spec.ts

...