How to access Angular $log debug messages from within Karma

;TLDR
Если вам по какой-то случайности в исполнении unit тестов захочется увидеть вывод логов в консоле, то это решение может быть полезно.

Angular $log

Angular имеет внутренний сервис $log, который позволяет формировать отладочные сообщения в консоли браузера:

The cool thing about debug messages is that you can easily turn logging on/off in one place using the $logProvider:

Сообщения от данного сервиса можно легко отключить на глобальном уровне всего приложения использую $logProvider:

Тем самым мы получаем возможность легко управлять лавированием приложения в разных окружениях — production, stage, develop.

Проблемы с Karma тестами

Однако при запуски unit тестов с Karma, вы уже не увидите ранее знакомых логов  в консоле:

Перечитывая документацию Karma вы конечно найдете:

и это никак не повлияет на вывод логов сервиса Angular, данные параметры конфигурации применимы только к легированную внутренней работы Karma.

Решение

Причиной отсутсвия сообщений логов является angular-mocks, точнее содержащийся в нем переопределенный методы $logProvider, который отлавливает все сообщения и собирает в один массив.

Теперь, чтобы вывести накопленные сообщения:

в консоле при запуске Karma

 

Unit Test with Jasmine 2.0 & RequireJS

Небольшой пример тестирования, с помощью Jasmine 2.0 и RequireJS

Рассматриваются,

  • сравнения
  • spyOn и вызовы

Исходный код на Plunker

 

AngularJS 2.0 Preview

AngularJS Weekley Meeting тут

AngularJS 2.0 это не очередной большой релиз, это полный рефакторинг библиотеки с использованием последних стандартов ES6!

Что же нас ожидает ?

Основные направления разработки: Change Detection, Dependency Injection, Templating, Persistance, Routing, Logging, Annotations, Documentation, Benchmarking, Touch/Animations, Package Repository, Reference App, Scaffolding and Build/Deploy.

Часть данных направлений уже имею рабочие прототипы.

Change Detection

Используется Object.observe() — низкоуровневый метод API позволяющий отслеживать изменение состояния JavaScript объекта.
Более подробное описание можно прочитать тут и тут.

В отсутствие нативной поддержки данного метода (на данный момент), команда AngularJS нашла замену в использовании Watchtower.js

Исоходный код Watchtower.js

Дизайн документ тут

Dependency Injection

Данный прототип уже готов к тестированию. DI сделан с учетом стандарта ES6 и обеспечивает удобный синтаксис, декларативные аннотации и отложенные загрузки.

Ниже пример кода DI. Зависимости передаются в качестве аргументов конструктора.

 

Чтобы уже сейчас попробовать DI,
# Clone репозиторий (или fork).
git clone https://github.com/angular/di.js.git

# устанавливаем dev dependencies, Karma, Gulp, etc.
npm install

# Если захотите использовать «karma» или «gulp»:
npm install -g karma-cli
npm install -g gulp

# Transpile ES6 в ./compiled/*
gulp build

# Детект изменений кода
gulp watch

gulp build_examples
gulp serve

Исходный код di.js
Дизайн документ тут

Continue reading “AngularJS 2.0 Preview” »