тестирование css в angularjs

#angularjs #karma-runner #karma-jasmine

Вопрос:

Я использую контроллер для изменения класса объекта в angularjs

 $scope.$watch('sideQuery',function(){
        if($scope.sideQuery==""){
            $(".indicator").removeClass('glyphicon-minus');
            $(".indicator").addClass('glyphicon-plus');

        }
        else{
            $(".indicator").removeClass('glyphicon-plus');
            $(".indicator").addClass('glyphicon-minus');

        }
    });

Как протестировать с помощью karma? функция, подобная

 expect(scope.elem('.indicator').hasClass("glyphicon-plus")).toBe(true);

Ответ №1:

Пожалуйста, не используйте jQuery для переключения классов в Angular, это противоречит его цели. Используйте ng-class и применяйте свои классы на основе флагов, например:

 <div class="indicator" ng-class="{'glyphicon-minus' : sideQuery != '', 'glyphicon-plus':sideQuery == ''} ></div>

Затем при тестировании проверьте значение sideQuery и знайте, что у вас будут классы, основанные на этом.

1. Спасибо! 🙂 Как проверить, имеет ли элемент этот класс (‘glyphicon-plus’) или нет?

2. Не проверяйте элемент, проверьте эту переменную области видимости, если она пуста, у нее есть этот класс plus — else minus

Ответ №2:

Если вы тестируете директиву, вы можете скомпилировать образец элемента и протестировать результирующий объект.

 var $element;
beforeEach(inject(function ($compile) {
    $element = $compile('<div data-my-directive></div>')($scope);
}));

it('should have the class "someClass"', function(){
    expect($element.hasClass('someClass')).toBe(true);
});

Однако имейте в виду, что tymeJV прав, вы должны использовать ng-class директиву и проверить значения вашей области. Если значение области действия правильное, то класс будет применен (вам не нужно тестировать ng-class директиву, это делается в модульных тестах Angular).

1. Я тестирую в контроллере, и он показывает ошибку ReferenceError: $compile не определен

2. Вам нужно будет внедрить службу $compile в

3. @Stranger, вы не должны использовать jQuery в контроллере, это то, что должно быть сделано в директиве. Что касается переменной $compile, она должна быть введена в функцию, в которой вы собираетесь ее использовать (я только что обновил код).

4. извините, что раздражаю вас. Он показывает …. beforeEach(inject(function ($compile) { $element = $compile(‘<div data-my-directive></div>’)(область видимости); })); Ошибка типа: undefined не является функцией с нулевым значением. <анонимный> Ошибка типа: scope.$element не является функцией

5. @Stranger, без проблем, довольно сложно писать код здесь в комментариях, взгляните на этот пример модульного тестирования директивы . scope.$element не существует… $element — это переменная, определенная внутри вашего теста.