Тестовое задание на 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.

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