Как проверить шаблон HTML в приложениях Angular?
Я пишу модульный тест кармы / жасмина для приложения 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'.
Теперь я хотел бы проверить это во время тестов. Однако модульный тест проходит, и компонент инициализируется.
Есть ли способ обнаружить такую ошибку в тестах?
Да, detectChanges называется. Кроме того, компонент выводит данные в журнал.
Ответы 1
Это нормально для компонента Angular и теста.
В вашем случае [noop]=dummy не будет работать, если вы не предоставите @Input()noop для компонента. Такого свойства не существует, поэтому компиляция завершится ошибкой.
Однако во время теста, когда вы
line1 const fixture = TestBed.createComponent(MyComponent);
line2 const component = fixture.componentInstance;
Это сгенерирует компонент на основе вашего определения в вашем component.ts Следовательно, вы не увидите никаких сбоев.
Если в вашем VS-проекте установлен линтер, вы заметите, что если вы добавите:
component.noop после строки2, в вашем тестовом файле будет ошибка, так как это свойство не существует в вашем компоненте.
Что ж, добавлять в тест component.noop смысла нет. Очевидно, что это не удастся. Дело в том, что я хочу, чтобы тест подтвердил, что все шаблоны в приложении верны и не используют несуществующие свойства. Это необходимо, потому что разработчики могут ошибаться в именах или во время рефакторинга не все места найдены и исправлены. В любом случае, сборка приложения с -aot также сообщает обо всех этих ошибках.
В этом случае служба build / ng завершится ошибкой, как и в случаях, когда вы используете компонент bootrap, сообщающий разработчику, что такого связанного свойства нет (если они передают несуществующее свойство). Чтобы передать все необходимые свойства, вы обычно должны иметь значение по умолчанию для вашего showstopper @Input и APi, чтобы объяснить, что они делают. Обычно они находятся внутри компонента. Config.ts. Вы можете ознакомиться с некоторыми спецификациями на github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover /…
Когда вы говорите, что компонент инициализируется, вы выполнили fixture.detectChanges ()? Я спрашиваю, потому что это будет пытаться фактически создать компонент в DOM и в этот момент должно дать вам ту же ошибку в тесте.