Как проверить HTML шаблон в приложениях Angular?

Question

Я пишу модульный тест карма / жасмин для приложения Angular.Идея состоит в том, чтобы проверить, что HTML-шаблон действителен.

Предположим, простой компонент "my-comp".И предположим, я бы использовал следующий шаблон HTML, который вызывает несуществующее свойство:

<my-comp [noop]="dummy"></my-comp>

Во время выполнения приложения я получу ошибку синтаксического анализа шаблона:

Can't bind to 'noop' since it isn't a known property of 'my-comp'.

Теперь я хотел бы проверить это во время тестов.Однако модульное тестирование проходит, и компонент инициализируется.

Есть ли способ обнаружить такого рода ошибки в тестах?

Answer 1

Это нормально для углового компонента и теста.

В вашем случае [noop]=dummy не будет работать, если вы не предоставите @Input()noop для компонента.Такого свойства не существует, и, следовательно, компиляция завершится неудачей.

Однако во время теста, когда вы делаете

line1  const fixture = TestBed.createComponent(MyComponent);
line2  const component = fixture.componentInstance; 

Это создаст компонент на основе вашего определения в component.ts Следовательно, вы не видите никакой ошибки.

Если в вашем проекте VS установлен linter, вы заметите, что если вы добавите: component.noop после строки 2, в тестовом файле будет ошибка, так как это свойство нене существует в вашем компоненте.