Доступ к скомпилированному шаблону в модульных тестах

В большинстве учебных пособий по Angular говорится об использовании сквозных тестов с Protractor для проверки того, что скомпилированный шаблон вышел так, как ожидалось. Мне интересно, можно ли вообще это сделать с помощью модульных тестов.

Большинство учебных пособий, в которых говорится о ссылках на HTML-код в модульных тестах, описывают компиляцию собственного написанного кода в тесте, например, для обеспечения правильного доступа к директиве:

describe('some function', function () {
  it('should do something', inject(function ($compile, $rootScope) {
    var element = $compile('<div id = "foo" ng-hide = "somecondition">Bar</div>')($Scope);
    $rootScope.digest();
    //Search for a given DOM element and perform some test here
  }));
});

Но допустим, я хочу проверить код в реальном файле шаблона. Например, если я хочу проверить, была ли успешно установлена ​​ng-hide. Я хочу быть в состоянии сделать что-то вроде:

describe('some function', function () {
  it('should do something', function () {
    //Get the div with ID 'foo' in the compiled template
    var elm = $('#foo');
    expect(elm.css('display')).toEqual('none');
  });
});

Это не работает, когда я это делаю. elm устанавливается в некоторый код HTML/Javascript, но не код шаблона, и elm.css('display') возвращается как неопределенный.

Есть ли способ провести модульное тестирование с настройкой Jasmine/Angular?

Источник

2 ответа

Решение

Загрузите ваши HTML-шаблоны в Angular's $templateCache используя ng-html2js, чтобы они были доступны в ваших тестах.

Получите ваш конкретный шаблон в ваших тестах:

var template = $templateCache.get('my/template.html');

Оберните шаблон в объект jqLite/jQuery, чтобы с ним было проще работать:

var element = angular.element(template);

Затем вы можете выбрать элементы в вашем шаблоне:

var fooEl = element.find('#foo');

Для утверждения, вы не хотите проверять это display: none устанавливается на элемент, который тестирует внутренние реализации ng-hide, Вы можете верить, что у команды Angular есть свои собственные тесты, которые охватывают настройку свойств CSS. Вместо этого вы хотите проверить, правильно ли вы написали шаблон, так что это более подходящий тест для существования ng-hide атрибута элемента, и что он снабжен правильным свойством области видимости для привязки к:

expect(fooEl.attr('ng-hide')).toBe('isFooElHidden');
Источник

В дополнение к правильному ответу @ user2943490:

  • Хорошей практикой является определение выделенной области, а не использование $rootScope. var scope = $rootScope.$new(); var element = $compile(template)(scope);

  • в большинстве случаев вы хотите проверить свойства из области действия внутренней директивы. Вы можете определить его в вашем методе beforeEach следующим образом и получить к нему доступ во всех ваших тестах: var isolatedScope = element.isolateScope(); expect(isolatedScope.property).toEqual(value);

Источник
Другие вопросы по тегам