Angular: как модульно тестировать изменения в свойстве HostBinding

У меня есть компонент, который динамически изменяет свой атрибут роли через HostBinding:

export class TestComponent {
  @HostBinding('attr.role')
    get role() {
      return this.isListItem ? 'listitem' : null;
    };
  @Input() isListItem: boolean;
}

Но я изо всех сил пытаюсь написать модульные тесты, чтобы покрыть сценарии, когда isListItem установлено на true/false/undefined.

Например, это не работает:

beforeEach(() => {
  fixture = MockRender(`
    <app-test-component>
    </app-test-component>
  `);
  debugElement = fixture.debugElement;
  component = fixture.componentInstance;
  el = debugElement.children[0].nativeElement;
  fixture.detectChanges();
});

it('should have the role `listitem` if isListItem is true', () => {
  component.isListItem = true;
  fixture.detectChanges();
  expect(el.getAttribute('role')).toEqual('listitem');
});

Вот ошибка, которую я получаю.

Error: Expected null to equal 'listitem'.

Я надеялся, установив isListItem в true, а затем используя fixture.detectChanges(), это изменит HostBinding в тестируемом компоненте, но похоже, что это не так.


person shrewdbeans    schedule 23.06.2020    source источник


Ответы (1)


Вам не нужен фиктивный рендерер — вы можете получить доступ к фикстуре напрямую —> fixr.nativeElement.getAttribute('role') должно быть тем, что вы ищете. Там больше о приспособлении, а также о других связанных свойствах.

person evanjmg    schedule 01.07.2020