css testing in angularjs

Question

I am using controller to change the class of an object in 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');

        }
    });

How to test using karma? a function like

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

tymeJV · Accepted Answer · 2014-06-26 19:01:03Z

4

Please, do not use jQuery to toggle classes in Angular, it defeats the purpose of it. Use ng-class and apply your classes based on flags, like so:

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

Then in testing check the value of sideQuery and know that you'll have classes based off that.

answered Jun 26, 2014 at 19:01

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vishnu Over a year ago

Thanks! :-) How to test whether the element has that class('glyphicon-plus') or not?

tymeJV Over a year ago

Dont test the element, test that scope variable, if it's empty, it has that class plus - else minus

rvignacio · Accepted Answer · 2014-06-26 19:39:51Z

3

If you are testing a directive, then you can compile a sample element and test the result object.

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);
});

However, be aware that tymeJV is right, you should use the ng-class directive and test your scope's values. If the scope value is right, then the class will be applied (you don't have to test the ng-class directive, that's something done in Angular's unit tests).

edited Jun 26, 2014 at 19:39

answered Jun 26, 2014 at 19:24

rvignacio

1,7401 gold badge19 silver badges33 bronze badges

5 Comments

Vishnu Over a year ago

I am testing in controller and it is showing ReferenceError: $compile is not defined

Jon Over a year ago

You will need to inject the $compile service in

rvignacio Over a year ago

@Stranger, you shouldn't use jQuery in a controller, that's something that should be done in a directive. As for the $compile variable, it must be injected in the function where you are going to use it (I've just updated the code).

Vishnu Over a year ago

sorry for irritating you. It is showing.... beforeEach(inject(function ($compile) { $element = $compile('<div data-my-directive></div>')(scope); })); TypeError: undefined is not a function at null.<anonymous> TypeError: scope.$element is not a function

rvignacio Over a year ago

@Stranger, no problem, it's kinda difficult to write code here in comments, take a look at this example of a directive's unit testing. scope.$element doesn't exist... $element is a variable defined inside your test.

Collectives™ on Stack Overflow

css testing in angularjs

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related