Тестовое задание на Angular. Добавление библиотек для упрощения тестирования
В данной статье добавим ряд библиотек для упрощения тестирования, а также починим тесты.
После создания компонентов и их добавления лейаут, были поломаны тесты. Нужно их починить. Для этого установим несколько пакетов для тестирования:
- ng-mocks — пакет, который позволяет мокировать компоненты, директивы, пайпы и модули
- ts-mockito — пакет, который позволяет мокировать свойства и методы классов.
У Ng-mocks и ts-mockito очень много примеров использования. Если у вас возникают вопросы относительно того, как замокировать или протестировать части вашего приложения, то смело обращайтесь к документации.
Примеры тестов на Ng-mock — examples.
Примеры тестов с использованием ts-mockito — doc.
Установим зависимости:
yarn add -D ng-mocks ts-mockito
Так как jest ничего не знает об алиасах, добавим соответствующие алиасы в конфигурацию:
module.exports = {
...
moduleNameMapper: {
'@app/ui/theme/layout':
['<rootDir>/src/app/ui/theme/layout/index.ts'],
},
};
Откроем layout.component.spec.ts и замокируем используемые компоненты:
Так как используется router, добавили RouterTestingModule:
imports: [RouterTestingModule],
Все использованные в шаблоне компоненты замокировали с помощью MockComponents:
declarations: [
LayoutComponent,
MockComponents(HeaderComponent, FooterComponent, MainComponent)
],
Запустим тесты:
ng test
Ссылки
Вернуться к оглавлению — Введение.
Следующая статья — Создание модулей и компонентов.
Предыдущая статья — Создание основного лейаута.
Все исходники на github/fafnur/barinb.
Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur