Unit-testing slider directive with AngularJS + Jasmine

Mythd85

I am a newbie to both Angularjs and unit-testing with jasmine, so iI hope this makes sense and is correct enough to get an answer :) I am trying to test an angularJS directive that creates sliders taken from bootstrap-slider .

This is my directive (the slider calls a function on sliding based on slider-fn attribute) :

angular.module('testAngular').directive('sliderDir',function($parse){

    return {
        link :function(scope,element,attrs){
        element.slider({value: parseInt(attrs.value),
            min: parseInt(attrs.min),
            max: parseInt(attrs.max),
            step: parseInt(attrs.step)
        });
        element.on("slide",function(event, ui){
            scope.$apply(function() {
                var invoker = $parse(attrs.sliderfn);
                invoker(scope, {arg1: element.val() });
            });
        });
    }
    }
})

This is my unit test, where I am trying to recreate a slider and test his values. (Next, I should test if the correct function is being called) :

...

describe("testing sliderDir", function(){

    beforeEach(angular.mock.module("testAngular"));
    var element;
    var $scope;


    beforeEach(angular.mock.inject(function($compile,$rootScope){

        $scope = $rootScope;
        element = angular.element('<input id="ex1" slider-dir="" sliderFn="slideFunction(arg1)" type="text" min="2750" max="30000" step="250" value="13000"/>');
        $compile(element)($rootScope);


    }))

    it("has correct values", function(){
        $scope.$digest();

        expect(element.find('input').slider("getAtribute","value")).toEqual(13000);
        expect(element[0].slider("getAttribute","min")).toEqual(2750);

    })
})

Neither the first or the second expect works as expected : I have added three logs :

console.log(element.find('input').length);  //this one logs 0 instead of 1 as i would expect
console.log(element);   //this is an array of length 1 
console.log(element[0]); //this is my input element with added class="ng-scope"

How can I call a function like slider() while testing? Why does find() return 0 as length?

Thank you in advance!

Yan Yankowski

Here's a working Jasmine test. Pay attention that the element is wrapped in jQuery in order to work with the slider. In the test your first check has a typo in "getAttribute". For some reason getAttribute for value brings me an array - I didn't figure out right away why. A working Plunker version is here (http://plnkr.co/edit/7704XEqXVW4YhaHxIqWg?p=preview)

describe("testing sliderDir", function(){

beforeEach(angular.mock.module("testAngular"));
var elm;
var $scope;



beforeEach(angular.mock.inject(function($compile,$rootScope){

    $scope = $rootScope.$new();
    var element = angular.element('<input id="ex1" slider-dir="" sliderFn="slideFunction(arg1)" type="text" min="2750" max="30000" step="250" value="13000"/>');
    elm = $compile(element)($scope);

}))

it("has correct values", function(){

expect($(elm).slider("getAttribute","value")[0]).toEqual(13000);
expect($(elm).slider("getAttribute","min")).toEqual(2750);

})

})

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Unit testing Angularjs jasmine

From Dev

expect() in .then() - jasmine unit testing, AngularJS

From Dev

Unit testing directive with controllerAs using Jasmine

From Dev

AngularJS Unit testing a link in a directive

From Dev

Writing unit test for AngularJS directive with Jasmine?

From Dev

Unit-Testing a filter with Jasmine in AngularJS

From Dev

mock angularjs service for unit testing using jasmine

From Dev

Unit-Testing a filter with Jasmine in AngularJS

From Dev

Unit testing of Services / Factories - AngularJS - Jasmine

From Dev

ReferenceError : AngularJS is not defined on Karma with Jasmine unit testing

From Dev

Unit Testing private functions in AngularJS Directive

From Dev

unit testing typescript directive template karma-jasmine, html is not defined

From Dev

Unit Test Angularjs directive, which contains private timeout, with Jasmine

From Dev

Unit Test Angularjs directive, which contains private timeout, with Jasmine

From Dev

AngularJS Karma Jasmine Testing Directive Fails because of $compile?

From Dev

Can not get element in directive while testing AngularJs + Jasmine

From Dev

AngularJS Karma Jasmine Testing Directive Fails because of $compile?

From Dev

Can not get element in directive while testing AngularJs + Jasmine

From Dev

AngularJS: controller undefined while testing directive with controllers using Jasmine

From Dev

AngularJS Unit Testing Controller w/ service dependency in Jasmine

From Dev

AngularJS Jasmine Unit Testing - Controller method is never called

From Dev

AngularJS Jasmine Unit Testing - Controller method is never called

From Dev

When unit-testing my angularJS application with Jasmine, $interval is undefined

From Dev

Unit testing $modal with Jasmine

From Dev

Unit testing AngularJS Directive with isolated scope - how to get bindings to output?

From Dev

AngularJs : triggering an event to simulate user action when unit testing a directive

From Dev

AngularJS, Unit testing a directive that uses a service that depends on some resources

From Dev

AngularJS: Unit Testing Directive w/ Promise returned from a Service

From Dev

When unit testing AngularJS directive, urlIsSameOrigin function fails

Related Related

  1. 1

    Unit testing Angularjs jasmine

  2. 2

    expect() in .then() - jasmine unit testing, AngularJS

  3. 3

    Unit testing directive with controllerAs using Jasmine

  4. 4

    AngularJS Unit testing a link in a directive

  5. 5

    Writing unit test for AngularJS directive with Jasmine?

  6. 6

    Unit-Testing a filter with Jasmine in AngularJS

  7. 7

    mock angularjs service for unit testing using jasmine

  8. 8

    Unit-Testing a filter with Jasmine in AngularJS

  9. 9

    Unit testing of Services / Factories - AngularJS - Jasmine

  10. 10

    ReferenceError : AngularJS is not defined on Karma with Jasmine unit testing

  11. 11

    Unit Testing private functions in AngularJS Directive

  12. 12

    unit testing typescript directive template karma-jasmine, html is not defined

  13. 13

    Unit Test Angularjs directive, which contains private timeout, with Jasmine

  14. 14

    Unit Test Angularjs directive, which contains private timeout, with Jasmine

  15. 15

    AngularJS Karma Jasmine Testing Directive Fails because of $compile?

  16. 16

    Can not get element in directive while testing AngularJs + Jasmine

  17. 17

    AngularJS Karma Jasmine Testing Directive Fails because of $compile?

  18. 18

    Can not get element in directive while testing AngularJs + Jasmine

  19. 19

    AngularJS: controller undefined while testing directive with controllers using Jasmine

  20. 20

    AngularJS Unit Testing Controller w/ service dependency in Jasmine

  21. 21

    AngularJS Jasmine Unit Testing - Controller method is never called

  22. 22

    AngularJS Jasmine Unit Testing - Controller method is never called

  23. 23

    When unit-testing my angularJS application with Jasmine, $interval is undefined

  24. 24

    Unit testing $modal with Jasmine

  25. 25

    Unit testing AngularJS Directive with isolated scope - how to get bindings to output?

  26. 26

    AngularJs : triggering an event to simulate user action when unit testing a directive

  27. 27

    AngularJS, Unit testing a directive that uses a service that depends on some resources

  28. 28

    AngularJS: Unit Testing Directive w/ Promise returned from a Service

  29. 29

    When unit testing AngularJS directive, urlIsSameOrigin function fails

HotTag

Archive