Как сделать заглушку для сервиса для тестов?

Question

[Денис Денис]

Еще раз всем привет.
Сразу скажу всем большое спасибо за помощь :)

Есть контроллер Angular

taskApp.controller('taskListCtrl', function ($scope, $rootScope, taskService) {

    taskService.getTaskList().then(function (data) {
        $rootScope.tasks = $scope.tasks = data.data;
    });
});

Как я понимаю, для того чтобы протестировать этот контроллер, нужно сделать заглушку для сервиса taskService , которая будет иметь свойство then которое будет возвращать любую строку (как пример), а задача теста будет проверить, что контроллер записал данные в скоуп.
Направьте пазязя.

Answer 1

[Сергей Протько]

1) не используйте $scope в контроллере. Y031. И тем более не используйте $rootScope. И тем более не используйте и то и то.

2) если мы выполним предыдущий пункт, у нас станет на 2 зависимости контроллера меньше, и проверять нам надо только состояние контроллера. В этом случае для теста достаточно просто взять нашу функцию и подменить зависимости через моки (если используете jasmine то там уже все есть, если используете mocha то тогда рекомендую sinon)

3) Продвинутое владение: Не используйте ngController или контроллеры стэйтов/роутов (максимум для прокидывания данных из ресолверов в скоуп). Дробить все на директивы. Причем данные прокидывайте в них сверху через биндинги а не запрашивайте прямо изнутри через сервисы. Тогда тестировать в нашем UI компоненте вообще ничего не надо будет. Достаточно биндинги проверить. А модель уже покрывать обычными тестами, ну и модель наша будет полностью отделена от angular-а (сервисы типа $http и контейнер зависимостей не в счет).

p.s. примерчик простенького приложения где все три пункта есть: вот.

Comments

[Денис Денис]

Спасибо еще раз :)
Блин, так и знал, что мои сегодняшние попытки написать тесты закончатся головной болью

[Сергей Протько]

Денис Денис:

$scope это внутренний механизм ангуляра который реализует биндинги. Не стоит его юзать самому (но иногда можно, в оооочень редких случаях и лучше 10 раз подумать перед этим). Единственное место где его можно юзать - link директивы которы тай же весьма редко приходится писать если хорошенько подумать.

Расшаривать данные между контроллерами в принципе ненадо, и не через фабрики а через сервисный слой, организовать хранение состояние где-нибудь там либо генерить его в ресолверах. Можете почитать про redux но это уже тип level up.

[Денис Денис]

Ок. Как сказали в знаменитом кино: "Будем искать"

[Сергей Протько]

Денис Денис: подумайте о UI как о композиции элементов. Мы имеем состояние приложение и по частям спускаем его в компоненты, которые его рендрят. И все. Их задача тупо отрендрить что дали. Это очень сильно упрощает тестирование компонентов. Отказ от $scope сильно упрощает тестирование контроллеро и устраняет кучу других проблем. Основная проблема это то что документация первого ангуляра не учит этому и это плохо.